使用来自多个 selectOneMenus 和按钮的内容填充 inputTextArea

Question

我想构建一个小型 UI，它将使用户能够以更简单的方式编写一些数学公式（因此是 UI），并能够将它们保存到 .txt （或类似的文件）文件中。

例如：我有 3 个提供各种选项的选择框、一些代表数学运算的按钮和一个 inputTextArea。到目前为止，我已经成功链接了每个 selectOneMenu 和几个 inputText 中的选定内容，并将它们与我需要的内容连接起来，并将创建的数学公式写入 .txt 文件。

现在我想为用户提供查看他正在编写的公式的可能性（通过选择内容并按下按钮）。到目前为止，我一直在尝试使用 inputTextArea 来做到这一点，但我所能做到的最好的是将所选内容从仅一个 selectOneMenu 传输到 textArea，然后我尝试添加用户的每个操作对文本区域的操作失败了（有人建议使用 但我一无所获，我尝试将用于填充菜单的所有 bean 合并到一个 bean 中，然后以某种方式去从那里，但这也不起作用）。

到目前为止我一直在研究的 JSF 部分的示例，带有 2 个选择框和 TextArea：

<h:outputText value="Formula Name"></h:outputText>
<h:inputText value="#{output.formulaName}" id="formulaName"></h:inputText>              
<br /><br />

The formula so far:
<h:inputTextarea value="#{output.propertyReferenceValue}"></h:inputTextarea>
<br/><br/><br/>

Property1:
<h:selectOneMenu  value ="#{output.propertyReferenceValue}" id="selectTwo"  
    valueChangeListener="#{output.propertyReferenceValueChanged}" onchange="submit()">
    <f:selectItems value="#{property.propertyReference}"/>              
</h:selectOneMenu>
<br/><br/>
Property2:         
<h:selectOneMenu value ="#{output.property2ReferenceValue}" id="selectThree"  
    valueChangeListener="#{output.property2ReferenceChangedValue}" onchange="submit()">
    <f:selectItems value="#{property2.property2Refference}" />            
</h:selectOneMenu>

任何帮助将不胜感激。

附言。我对 JSF 非常陌生（大约 2 天前开始），所以我什至会很感激有人指出一些可能涵盖此问题或类似问题的文档。

Answer 1

您基本上在这里滥用了 valueChangeListener 。您对值更改并不完全感兴趣（即您对新旧值都不感兴趣），您只对提交的值感兴趣。当您没有/不能/不会使用基于 ajax 的组件库时，JSF 1.x 中可以容忍这种情况。有一些（相当复杂的）方法可以使用 valueChangeListener 来解决您的特定问题，但是在带有内置 ajax 功能的 JSF 2.x 中，这确实不能再这样做了。您应该使用 标签来引入异步提交和部分更新。

重写你的观点如下：

Formula name:
<h:inputText value="#{output.formulaName}" id="formulaName" />
<br/><br/>

The formula so far:
<h:inputTextarea id="formula" value="#{output.propertyReferenceValue}#{output.property2ReferenceValue}"></h:inputTextarea>
<br/><br/>

Property1:
<h:selectOneMenu value="#{output.propertyReferenceValue}" id="selectTwo">
    <f:selectItems value="#{property.propertyReference}"/>
    <f:ajax render="formula" />
</h:selectOneMenu>
<br/><br/>

Property2:         
<h:selectOneMenu value ="#{output.property2ReferenceValue}" id="selectThree">
    <f:selectItems value="#{property2.property2Refference}" />            
    <f:ajax render="formula" />
</h:selectOneMenu>

仅此而已。您的 #{output} bean 应通过 @ViewScoped 放入视图范围内。不需要额外的侦听器方法。仅当您想在显示值之前对其进行操作时，才需要一个 ajax 侦听器。例如，

Formula name:
<h:inputText value="#{output.formulaName}" id="formulaName" />
<br/><br/>

The formula so far:
<h:inputTextarea id="formula" value="#{output.formula}"></h:inputTextarea>
<br/><br/>

Property1:
<h:selectOneMenu value="#{output.propertyReferenceValue}" id="selectTwo">
    <f:selectItems value="#{property.propertyReference}"/>
    <f:ajax listener="#{output.calculateFormula}" render="formula" />
</h:selectOneMenu>
<br/><br/>

Property2:         
<h:selectOneMenu value ="#{output.property2ReferenceValue}" id="selectThree">
    <f:selectItems value="#{property2.property2Refference}" />            
    <f:ajax listener="#{output.calculateFormula}" render="formula" />
</h:selectOneMenu>

使用eg（这个启动示例在逗号上进行了简单的连接，但是您可以完全自由地按照您想要的方式构建公式值）：

public void calculateFormula() {
    formula = propertyReferenceValue + ", " + property2ReferenceValue;
}