如何将ajax事件附加到复合组件? [英] How to attach ajax event to composite component?
问题描述
我具有以下复合组件(< v2:inputText2>)
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>
在以下片段中，我想添加一个< a4j:ajax>该组件使用以下事件:
In the following Fragment, I want to add an <a4j:ajax> event to this component using like this:
<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 Testpage, then I get the following Error:
testInput2.xhtml @23,48 <a4j:ajax> Error: enclosing composite component does not support event change
我该如何解决问题?
Ajax事件应触发UI-Bean-Methode.
The Ajax-Event should trigger a UI-Bean-Methode.
谢谢 罗纳德(Ronald)
Thanks Ronald
推荐答案
您需要将其注册为Composite界面中的客户端行为.
You need to register it as client behavior in composite's interface.
<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作为文本输入字段. name: The custom event name as you would specify in composite's client. Can be the same as the actual event name. Can be a customized one. It's all free to your choice.targets: The composite implementation relative client ID of the target component on which the actual client behavior should be attached.event: The actual event name which the actual client behavior should be listening. Note that the default event ofEditableValueHoldercomponents isvalueChangeand notchange. You can for text input fields keep usingchangeif you want.
使用上面的声明示例，可以在模板客户端中使用它，如下所示:
With the above declaration example, you can use it in template client as below:
<my:composite ...>
<f:ajax event="clientEvent" ... />
</my:composite>
在此之后，您将面临第二个但不相关的问题，已经在这里提出并回答:
After this, you'll face a second but unrelated problem which is already asked and answered here: <f:ajax render> not working via <composite:clientBehavior>.
不相关与具体问题无关，复合可以更好地用作标记文件.而且，该HTML表标记不是Web 2.0.
Unrelated to the concrete problem, that composite can better be a tagfile. And, that HTML table markup is not Web 2.0.
这篇关于如何将ajax事件附加到复合组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
