复合组件从多个输入组件产生输出答案

【问题标题】：Composite component to produce output from multiple input components复合组件从多个输入组件产生输出
【发布时间】：2013-08-02 16:42:21
【问题描述】：

我正在创建一个由一个 selectOneListbox 和几个 selectManyCheckboxes 组成的复合组件。用户将看到这些输入，一旦他们做出选择，这些组件的值将被组合以产生格式化的字符串输出，这是该复合组件的“值”。目前我的复合组件如下所示，当用户提交表单时，如何将格式化的输出字符串绑定到复合组件的值？

我将 Primefaces 与 JSF 一起使用，但我认为解决方案（无论是什么）都应该能够适用于任何一个。

复合组件：

当用户在屏幕上进行选择时，格式化的字符串会显示给用户。这是通过对 outputText formattedOutput 的 ajax 更新来完成的。我在 CC 的底部添加了一个隐藏的输入。这个想法是我将使用 javascript 来设置 formattedOutput 的新值，只要它得到更新，但我不知道如何。

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

【问题讨论】：

标签： jsf jsf-2 primefaces composite-component

【解决方案1】：

将此脚本添加到复合组件：

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;
}

还有你的两个<p:ajax> 加上oncomplete="ajaxUpdateComplete"

因此，在隐藏字段的每个 ajax 调用值将被更新并准备好与您的复合组件所在的表单一起发布后

【讨论】：

虽然这可能有效，但这不是设置复合组件值的“合法”方式。这样，您基本上完全错过了复合组件的意义。