Jsf 从多个输入组件生成输出的复合组件
我正在创建一个复合组件,它由一个selectOneListbox和几个SelectManyCheckBox组成。用户将看到这些输入,一旦他们做出选择,这些组件的值将被组合起来,生成一个格式化的字符串输出,它就是这个复合组件的“值”。目前,复合组件的外观如下所示,当用户提交表单时,如何将格式化的输出字符串绑定到复合组件的值 我将Primefaces与JSF一起使用,但我认为解决方案(无论是什么)应该能够应用于这两种情况 复合组件: 当用户在屏幕上进行选择时,格式化字符串将显示给用户。这是通过对outputTextJsf 从多个输入组件生成输出的复合组件,jsf,jsf-2,primefaces,composite-component,Jsf,Jsf 2,Primefaces,Composite Component,我正在创建一个复合组件,它由一个selectOneListbox和几个SelectManyCheckBox组成。用户将看到这些输入,一旦他们做出选择,这些组件的值将被组合起来,生成一个格式化的字符串输出,它就是这个复合组件的“值”。目前,复合组件的外观如下所示,当用户提交表单时,如何将格式化的输出字符串绑定到复合组件的值 我将Primefaces与JSF一起使用,但我认为解决方案(无论是什么)应该能够应用于这两种情况 复合组件: 当用户在屏幕上进行选择时,格式化字符串将显示给用户。这是通过对ou
formattedOutput
的ajax更新完成的。我在CC的底部添加了一个隐藏的输入。我的想法是,每当更新formattedOutput
时,我都会使用javascript设置它的新值,但我不确定如何设置
<composite:interface>
<composite:attribute name="value" required="true"/>
</composite:interface>
<composite:implementation>
<div id="#{cc.clientId}">
<h:outputLabel value="Current Formatted Output" for="formattedOutput"/>
<h:outputText value="#{backingBean.formattedOutput}" id="formattedOutput"/>
<p:outputLabel value="First Input" for="input1"/>
<p:selectOneListbox id="input1" required="true" value="#{backingBean.input1}">
<f:selectItems value="#{staticControlsData.options1}"/>
<p:ajax event="change" update="formattedOutput" listener="#{backingBean.buildFormattedOutputString}"/>
</p:selectOneListbox>
<p:outputLabel value="Second Input" for="input2"/>
<p:selectManyCheckbox id="input2" value="#{backingBean.input2}">
<f:selectItems value="#{staticControlsData.options2}"/>
<p:ajax event="change" update="formattedOutput" listener="#{backingBean.buildFormattedOutputString}"/>
</p:selectManyCheckbox>
<h:inputHidden id="hiddenValue" value="#{cc.attrs.value}"/>
</div>
</composite:implementation>
这就是我希望复合组件的使用方式:
<h:form>
<my:component value="#{anotherBean.aField}" />
<p:commandButton value="Save" />
<p:commandButton value="Cancel" immediate="true"/>
</h:form>
将此脚本添加到复合组件:
function ajaxUpdateComplete(){
var formattedOutputElement = document.getElementById("#{cc.clientId}" + ":formattedOutput");
var updatedValue = formattedOutputElement.innerHTML;//we are taking innerHTML because outputText renders as span and has no "value"
var hiddenElement = document.getElementById('#{cc.clientId}' + ":hiddenValue");
hiddenElement.value = updatedValue;
}
在您的两个
中添加oncomplete=“ajaxUpdateComplete”
因此,在每次ajax调用之后,隐藏字段的值将被更新,并准备与表单一起发布,您的复合组件放在表单中,虽然这可能会起作用,但这不是设置复合组件值的“合法”方法。通过这种方式,您基本上完全忽略了复合组件的要点。