Geek Answers Handbook

How to attach an ajax event to a composite component?

I have the following composite component (<v2: inputText2>)

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

In the following snippet, I want to add the <a4j: ajax> event to this component using the following:

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

When I call the test page, I get the following error:

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

How can i solve the problem?

Ajax-Event should fire UI-Bean-Method.

Thanks ronald

+4
source share
1 answer

You need to register it as client behavior in the composite interface.

 <cc:interface> ... <cc:clientBehavior name="clientEvent" targets="inputId" event="valueChange" /> </cc:interface> <cc:implementation> ... <h:inputText id="inputId" ... /> </cc:implementation>
  • name : the name of the custom event that you specify in the composite client. May match the name of the actual event. It can be customized. All of this is free of your choice.
  • targets : the client- targets composite identifier of the implementation for the target component on which the actual behavior of the client should be set.
  • event : the actual name of the event that should listen to the actual behavior of the client. Note that the default EditableValueHolder event is valueChange , not change . You can use change for text input fields if you want.

With the example ad above, you can use it in the template client, as shown below:

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

After that, you will encounter a second, but unrelated problem that has already been asked and answered here: <f: ajax render> does not work through <composite: clientBehavior> .

Unrelated to a specific problem, this composite may be the best tag. And this markup of the HTML table is not Web 2.0.

+11
source

More articles:


All Articles