Question

我需要在JSF中制作动态网页/表单。动态：在运行时，我得到输入字段的数量与按钮一起。我会试着向你证明我需要做些什么。

inputField1 inputField2 inputField3 BUTTON1

inputField4 inputField5 BUTTON2

inputField6 inputFiled7 inputField8 inputField9 BUTTON3

我希望你能理解我想做的事。所以当我点击一些按钮时，我必须从输入字段中收集数据并对数据执行某些操作。如果我单击BUTTON1，我从inputField1 inputField2 inputField3收集数据 BUTTON2 inputField4 inputField5等

我可能应该以编程方式创建输入字段并将它们分组。

知道怎么做吗？任何的想法？

Answer 1

像往常一样（请参阅this和that），我的建议是不动态添加/删除组件。用另一种方式解决你的问题：

切换组件的可见性
重新绑定属于组件的数据

动态添加/删除组件始终是一个麻烦的来源，而且你可以用另一种方式更简单地做到这一点。

在你的情况下，我会使用一个绑定到String列表的表。在表的每个单元格中，我使用当前String渲染输入文本框。有三个按钮，因此有三个String列表和三个表。一个按钮的粗略草图：

<h:dataTable value="#{bean.list}" var="item">
   <h:column>
       <h:inputText value="#{item}"/>
   </h:column>
</h:dataTable>
<h:commandButton action="#{bean.cmd1}" value="cmd1" />

这就是这个想法。您可以使用除了在列表或CSS上迭代的表之外的其他组件来自定义显示并将输入框放在一行上。

Answer 2

如果您对使用JSF编程创建UI感兴趣，请查看此示例项目：

Dynamic Faces

用两个词来说，您可以使用binding属性将组件实例绑定到辅助bean的属性：

<h:panelGroup id="helloWorldPanel" binding="#{helloWorldBean.component}"/>

在辅助bean中，您可以填充绑定的组件：

private UIComponent component;

public UIComponent getComponent() {
    return component;

}

public void setComponent(UIComponent component) {
        final UIOutput outputText = (UIOutput) facesContext.getApplication()
                .createComponent(HtmlOutputText.COMPONENT_TYPE);
        outputText.setId("helloAnotherWorldMessage");
        component.getChildren().add(outputText);
        outputText.setValue("Hello, Another World!");
        this.component = component;
    }

然而，这并不容易。

Answer 3

您可以在视图中使用多个表单，并使用控制按钮对输入字段进行分组。当用户单击button1时，仅发送输入字段1,2,3的数据。 button2和button3的标识符。

<f:view>
  <h:form id="form1">
    <h:inputText id="field1" value="#{backingBean.var1}"/>
    <h:inputText id="field2" value="#{backingBean.var2}"/>
    <h:inputText id="field3" value="#{backingBean.var3}"/>
    <h:commandButton value="SAVE" action="#{backingBean.doButton1}"/>
  </h:form>
  <h:form id="form2">
    <h:inputText id="field4" value="#{backingBean.var4}"/>
    <h:inputText id="field5" value="#{backingBean.var5}"/>
    <h:commandButton value="SAVE" action="#{backingBean.doButton2}"/>
  </h:form>
</f:view>

带有JSF的动态页面

3 个答案: