如何将ajax事件附加到复合组件？

小编典典

如何将ajax事件附加到复合组件？

ajax

我具有以下复合组件（）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich">

<!-- INTERFACE -->
<composite:interface>
    <composite:attribute name="baseId" required="true" />
    <composite:attribute name="size" required="true" />
    <composite:attribute name="value" required="true" />
  <composite:attribute name="align" required="false" default="" />
  <composite:attribute name="label" required="false" default="" />
  <composite:attribute name="labelStyle" required="false" default="" />
    <composite:attribute name="disabled" required="false" default="false" />
    <composite:attribute name="required" required="false" default="false" />
    <composite:attribute name="inputStyle" required="false" default="" />
    <composite:editableValueHolder name="inTxt" />
</composite:interface>

<!-- IMPLEMENTATION -->
<composite:implementation>
    <h:panelGroup id="#{cc.attrs.baseId}Dec">
        <table class="decTable" style="align:#{cc.attrs.align};" border="1">
            <tr>
                <td class="labelSize" style="vertical-align: middle;">
                  <h:outputLabel
                        id="#{cc.attrs.baseId}Lbl" for="#{cc.attrs.baseId}"
                        value="#{cc.attrs.label}" style="#{cc.attrs.labelStyle}" /></td>

                <td width="#{cc.attrs.size}">
                  <h:inputText
                        id="inTxt" value="#{cc.attrs.value}"
                        disabled="#{cc.attrs.disabled}"
                        style="width: 99%; #{cc.attrs.inputStyle}"
                        required="#{cc.attrs.required}">
                        <!-- composite:insertChildren / -->
                    </h:inputText></td>
            </tr>

            <tr>
                <td colspan="2"><h:panelGroup id="#{cc.attrs.baseId}Error">
                        <rich:message for="#{cc.attrs.baseid}">
                            <rich:tooltip id="#{cc.attrs.baseId}TT" styleClass="validError">
                                <rich:message id="#{cc.attrs.baseId}TTMsg"
                                    for="#{cc.attrs.baseId}" showDetail="false" showSummary="true" />
                            </rich:tooltip>
                        </rich:message>
                    </h:panelGroup></td>
            </tr>
        </table>
    </h:panelGroup>
</composite:implementation>

</html>

在下面的片段中，我想使用以下方式向该组件添加一个事件：

    <rich:panel style="width:560px;">
        <f:facet name="header">
            <h:outputText value="Combobox "></h:outputText>
        </f:facet>
        <v2:inputText2 size="300px" baseId="baseId_txt" id="txt" label="Text:"
            value="#{testInput2.value}">
            <a4j:ajax event="change" render="dbgText"/>
        </v2:inputText2>

        <h:outputText value="#{testInput2.value}" id="dbgText"/>
    </rich:panel>
    <aj4:commandButton id="cmdOK" value="Ok"
        action="#{testInput2.cmdOk ()}" render="@form" />

当我调用Testpage时，出现以下错误：

testInput2.xhtml @23,48 <a4j:ajax> Error: enclosing composite component does not support event change

我该如何解决这个问题？

Ajax-Event应该触发UI-Bean-Methode。

谢谢罗纳德

阅读 222

2020-07-26

共1个答案

小编典典

您需要将其注册为Composite界面中的客户端行为。

<cc:interface>
    ...
    <cc:clientBehavior name="clientEvent" targets="inputId" event="valueChange" />
</cc:interface>
<cc:implementation>
    ...
    <h:inputText id="inputId" ... />
</cc:implementation>

name：您将在Composite的客户端中指定的自定义事件名称。可以与实际事件名称相同。可以定做的。全部免费选择。
targets：应附加实际客户端行为的目标组件的组合实现相对客户端ID。
event：实际的事件名称，实际的客户行为应在监听。请注意，EditableValueHolder组件的默认事件是valueChange和不是change。您可以根据change需要继续使用文本输入字段。

通过上面的声明示例，可以在模板客户端中使用它，如下所示：

<my:composite ...>
    <f:ajax event="clientEvent" ... />
</my:composite>

与具体问题无关，复合可以更好地成为标记文件。而且，该HTML表标记不是Web 2.0。

2020-07-26