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

Question

我有以下复合组件 ()

<!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" />

当我调用测试页时，出现以下错误：

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

我该如何解决这个问题？

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

谢谢罗纳德

Answer 1

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

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

name：您将在复合客户端中指定的自定义事件名称。可以与实际事件名称相同。可以是定制的。一切由您自由选择。
targets：目标组件的复合实现相关客户端 ID，实际客户端行为应附加在该目标组件上。
event：实际客户端行为应该监听的实际事件名称。请注意 EditableValueHolder 组件的默认事件是 valueChange 而不是 change。如果需要，您可以在文本输入字段中继续使用 change。

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

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

在此之后，您将面临第二个但不相关的问题，该问题已在此处提出并得到解答：<f:ajax render> not working via <composite:clientBehavior>。

与具体问题无关，那个组合最好是一个标记文件。而且，HTML table 标记不是 Web 2.0。

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

How to attach ajax event to composite component?

ajax

jsf

composite-component

jsf-2