複合組件從多個輸入組件

我創建由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>

來源

2013-08-01 citress

添加這個腳本到複合材料部件：

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調用值將被更新，並且r可以發表形式，這是你的複合材料組件在

來源

2013-08-01 17:37:15 n1k1ch

謝謝！這工作完美。 – citress

雖然這可能起作用，但這不是設置複合組件值的「合法」方法。你基本上完全忽略了這種複合組件的要點。 – BalusC

複合組件從多個輸入組件

回答

相關問題