Question

我正在使用带有Omnifaces 3.0的JSF 2.3。我正在尝试创建一个代表电子邮件文本字段的自定义组件。没什么特别的。

我有以下完全正常工作的代码

<h:form id="formAggiungiUtente">

    <p:outputLabel for="inputTextEmail" value="#{msg['email']}"/>    
    <h:inputText id="inputTextEmail" pt:type="email" value="#{userController.userBean.mail}" class="form-control" required="true" requiredMessage="#{msg['email']} #{msg['campoObbligatorio']}" validatorMessage="#{msg['email']} #{msg['nonValido']}">
        <f:validator binding="#{emailJsfValidator}"/>
    </h:inputText>

    <p:outputLabel for="inputTextSecondEmail" value="#{msg['ripetiMail']}"/>
    <h:inputText id="inputTextSecondEmail" pt:type="email" value="#{userController.secondMail}" class="form-control" required="true" requiredMessage="#{msg['ripetiMail']} #{msg['campoObbligatorio']}" validatorMessage="#{msg['ripetiMail']} #{msg['nonValido']}">
        <f:validator binding="#{emailJsfValidator}"/>
    </h:inputText>

    <o:validateEqual id="equal" components="inputTextEmail inputTextSecondEmail" message="#{msg['indirizziMailDiversi']}" />
</h:form>

在应用程序的其他部分，我需要代表电子邮件文本字段的组件，因此第一步是创建类似以下的内容

<h:form id="formAggiungiUtente">
    <ui:include src="templates/mailTextField.xhtml">
        <ui:param name="id" value="inputTextEmail" />
        <ui:param name="label" value="#{msg['email']}" />
        <ui:param name="value" value="#{userController.userBean.mail}" />
        <ui:param name="required" value="true" />
        <ui:param name="requiredMessage" value="#{msg['email']} #{msg['campoObbligatorio']}" />
        <ui:param name="validatorMessage" value="#{msg['email']} #{msg['nonValido']}" />
    </ui:include>

    <ui:include src="templates/mailTextField.xhtml">
        <ui:param name="id" value="inputTextSecondEmail" />
        <ui:param name="label" value="#{msg['ripetiMail']}" />
        <ui:param name="value" value="#{userController.secondMail}" />
        <ui:param name="required" value="true" />
        <ui:param name="requiredMessage" value="#{msg['ripetiMail']} #{msg['campoObbligatorio']}" />
        <ui:param name="validatorMessage" value="#{msg['ripetiMail']} #{msg['nonValido']}" />
    </ui:include>

    <o:validateEqual id="equal" components="inputTextEmail inputTextSecondEmail" message="#{msg['indirizziMailDiversi']}" />

</h:form>

这里是mailTextField.xhtml

<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:p="http://primefaces.org/ui"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

    <p:outputLabel for="#{id}" value="#{label}"/>    
    <h:inputText 
        id="#{id}" 
        pt:type="email" 
        value="#{value}"
        class="form-control" 
        required="#{required}" 
        requiredMessage="#{requiredMessage}" 
        validatorMessage="#{validatorMessage}">
        <f:validator binding="#{emailJsfValidator}"/>
    </h:inputText>

</ui:composition>

此外，这个解决方案正在运行，但通过阅读大量答案我已经明白，如果有太多参数可能是创建自定义组件的情况。所以我使用“cvl”作为库名

创建了以下组件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:cc="http://xmlns.jcp.org/jsf/composite"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

    <cc:interface>
        <cc:attribute name="label" type="java.lang.String" default="#{msg['email']}" />
        <cc:attribute name="value" type="java.lang.String" />
        <cc:attribute name="required" type="java.lang.Boolean" default="true" />
        <cc:attribute name="requiredMessage" type="java.lang.String" default="#{msg['email']} #{msg['campoObbligatorio']}" />
        <cc:attribute name="validatorMessage" type="java.lang.String" default="#{msg['email']} #{msg['nonValido']}" />
    </cc:interface>

    <cc:implementation>
        <p:outputLabel for="#{cc.clientId}" value="#{cc.attrs.label}"/>    
        <h:inputText 
            id="#{cc.clientId}" 
            pt:type="email" 
            value="#{cc.attrs.value}"
            class="form-control" 
            required="#{cc.attrs.required}" 
            requiredMessage="#{cc.attrs.requiredMessage}" 
            validatorMessage="#{cc.attrs.validatorMessage}">
            <f:validator binding="#{emailJsfValidator}"/>
        </h:inputText>
    </cc:implementation>

</html>

现在我的页面就像这样

<h:form id="formAggiungiUtente">
    <cvl:mailTextField 
        id="inputTextEmail"
        value="#{userController.userBean.mail}"
    />

    <cvl:mailTextField 
        id="inputTextSecondEmail"
        value="#{userController.userBean.mail}"
        requiredMessage="#{msg['ripetiMail']} #{msg['campoObbligatorio']}"
        validatorMessage="#{msg['ripetiMail']} #{msg['nonValido']}"
    />

    <o:validateEqual id="equal" components="inputTextEmail inputTextSecondEmail" message="#{msg['indirizziMailDiversi']}" />
</h:form>

问题是我不知道如何填充validateEqual的参数“components”，因为错误总是如下所示。

ValidateEqual属性'components'必须引用UIInput客户端ID。客户端ID的类型为“javax.faces.component.UINamingContainer”

我尝试了很多组合但没有成功。我做错了什么？感谢

Answer 1

通过阅读大量答案我已经明白，如果有太多参数可能是创建自定义组件

这一个？ When to use <ui:include>, tag files, composite components and/or custom components?它表示要创建标记文件，而不是自定义组件，更不用说复合组件了。

如果你使用过标签文件，那么这个结构就可以了。另一方面，复合组件是命名容器。这意味着他们会在孩子身上添加额外的客户ID图层，就像<h:form>和<h:dataTable>一样。您还应该在客户端ID搜索表达式中包含复合组件自己的id。它就像：

<cc:someComposite id="idOfComposite1" ... />
<cc:someComposite id="idOfComposite2" ... />

<o:validateEqual components="idOfComposite1:idOfInput idOfComposite2:idOfInput" />

由此复合实现具有：

<h:inputText id="idOfInput" ... />

因此，您只需修复复合组件，不再在子JSF组件的#{cc.clientId}属性中引用id。这是完全错误的。它应该仅用于包含复合组件实现的纯HTML <span>或<div>，然后仅由Rerendering composite component by ajax组成。

OmniFaces validateEquals和复合组件

1 个答案: