动态表单,JSF世界早已等待

新的PrimeFaces扩展版本0.5.0带来了新的DynaForm组件。 通常,如果知道行/列的数量,元素的位置等,则可以通过h:panelGrid或p:panelGrid来构建非常简单的表单。 对于静态表单,这是正确的。 但是,如果在运行时动态描述表单,则无法使用h:panelGrid或p:panelGrid。 例如,如果整个表单的定义都放在数据库或XML文件中。 DynaForm使得构建带有标签,输入,选择和任何其他元素的动态表单成为可能。 没有限制。 在展示柜中探索其所有功能。 让我们展示如何构建一个简单的动态表单。

主要步骤:
创建模型实例:DynaFormModel model = new DynaFormModel();
将行添加到常规网格:DynaFormRow row = model.createRegularRow(); 添加标签:DynaFormLabel标签= row.addLabel(value,colspan,rowspan); 添加可编辑控件:DynaFormControl控件= row.addControl(数据,类型,colspan,rowspan); 设置标签和控件之间的关系(可选):label.setForControl(control);

根据需要重复最后四个步骤。 从UI角度看会是什么样? 表单验证失败后的屏幕截图:

主要标签是pe:dynaForm。 子标记pe:dynaFormControl匹配在Java控件中通过“ type”属性创建的标记。 这通常是“一对多”的关系。 下面列出了上面动态形式的XHTML / Java(控制器bean和模型)代码。

<h:panelGroup id="dynaFormGroup">
    <p:messages id="messages" showSummary="true"/>

    <pe:dynaForm id="dynaForm" value="#{dynaFormController.model}" var="data">
        <pe:dynaFormControl type="input" for="txt">
            <p:inputText id="txt" value="#{data.value}" required="#{data.required}"/>
        </pe:dynaFormControl>
        <pe:dynaFormControl type="calendar" for="cal" styleClass="calendar">
            <p:calendar id="cal" value="#{data.value}" required="#{data.required}" showOn="button"/>
        </pe:dynaFormControl>
        <pe:dynaFormControl type="select" for="sel" styleClass="select">
            <p:selectOneMenu id="sel" value="#{data.value}" required="#{data.required}">
                <f:selectItems value="#{dynaFormController.languages}"/>
            </p:selectOneMenu>
        </pe:dynaFormControl>
        <pe:dynaFormControl type="textarea" for="tarea">
            <p:inputTextarea id="tarea" value="#{data.value}" required="#{data.required}" autoResize="false"/>
        </pe:dynaFormControl>
        <pe:dynaFormControl type="rating" for="rat">
            <p:rating id="rat" value="#{data.value}" required="#{data.required}"/>
        </pe:dynaFormControl>

        <f:facet name="buttonBar">
            <p:commandButton value="Submit" action="#{dynaFormController.submitForm}"
                             process="dynaForm" update="_mainForm_dynaFormGroup"/>
            <p:commandButton type="reset" value="Reset" style="margin-left: 5px;"/>
        </f:facet>
    </pe:dynaForm>
</h:panelGroup>
@ManagedBean
@ViewScoped
public class DynaFormController implements Serializable {

   private DynaFormModel model;

   private static List<SelectItem> LANGUAGES = new ArrayList<SelectItem>();

   public DynaFormController() {
      model = new DynaFormModel();

      // add rows, labels and editable controls
      // set relationship between label and editable controls to support outputLabel with "for" attribute

      // 1. row
      DynaFormRow row = model.createRegularRow();

      DynaFormLabel label11 = row.addLabel("Author", 1, 1);
      DynaFormControl control12 = row.addControl(new BookProperty("Author", true), "input", 1, 1);
      label11.setForControl(control12);

      DynaFormLabel label13 = row.addLabel("ISBN", 1, 1);
      DynaFormControl control14 = row.addControl(new BookProperty("ISBN", true), "input", 1, 1);
      label13.setForControl(control14);

      // 2. row
      row = model.createRegularRow();

      DynaFormLabel label21 = row.addLabel("Title", 1, 1);
      DynaFormControl control22 = row.addControl(new BookProperty("Title", false), "input", 3, 1);
      label21.setForControl(control22);

      // 3. row
      row = model.createRegularRow();

      DynaFormLabel label31 = row.addLabel("Publisher", 1, 1);
      DynaFormControl control32 = row.addControl(new BookProperty("Publisher", false), "input", 1, 1);
      label31.setForControl(control32);

      DynaFormLabel label33 = row.addLabel("Published on", 1, 1);
      DynaFormControl control34 = row.addControl(new BookProperty("Published on", false), "calendar", 1, 1);
      label33.setForControl(control34);

      // 4. row
      row = model.createRegularRow();

      DynaFormLabel label41 = row.addLabel("Language", 1, 1);
      DynaFormControl control42 = row.addControl(new BookProperty("Language", false), "select", 1, 1);
      label41.setForControl(control42);

      DynaFormLabel label43 = row.addLabel("Description", 1, 2);
      DynaFormControl control44 = row.addControl(new BookProperty("Description", false), "textarea", 1, 2);
      label43.setForControl(control44);

      // 5. row
      row = model.createRegularRow();

      DynaFormLabel label51 = row.addLabel("Rating", 1, 1);
      DynaFormControl control52 = row.addControl(new BookProperty("Rating", 3, true), "rating", 1, 1);
      label51.setForControl(control52);
    }

    public DynaFormModel getModel() {
        return model;
    }

    public String submitForm() {
        ... // do something
    }

    public List<SelectItem> getLanguages() {
        if (LANGUAGES.isEmpty()) {
            LANGUAGES.add(new SelectItem("en", "English"));
            LANGUAGES.add(new SelectItem("de", "German"));
            LANGUAGES.add(new SelectItem("ru", "Russian"));
            LANGUAGES.add(new SelectItem("tr", "Turkish"));
        }

        return LANGUAGES;
    }
}

public class BookProperty implements Serializable {

    private String name;
    private Object value;
    private boolean required;

    public BookProperty(String name, boolean required) {
        this.name = name;
        this.required = required;
    }

    public BookProperty(String name, Object value, boolean required) {
        this.name = name;
        this.value = value;
        this.required = required;
    }

    // getter // setter
}
您会看到一个重要功能是对标签的内置支持。 DynaForm自动呈现标签-无需编写p:outputLabel。 另一个功能是autoSubmit标志。 它允许在URL中传递表单参数,在页面加载时构建表单并自动提交。 更多亮点:可扩展的扩展视图区域(网格),打开/关闭状态保存,小部件的客户端API,各种方面。 接下来的屏幕截图展示了如何使用字段上方的标签和诸如PrimeFaces分隔符之类的各种元素构建动态表单。 通过单击“切换模型”链接,可以切换此示例中的两种形式。 注意,带有pe:dynaForm的XHTML代码保持不变,只有Java模型被更改。

探索用例中的相应代码还有另一种形式

参考: 动态表单,JSF世界在我们的JCG合作伙伴 Oleg Varaksin的软件开发博客 很期待


翻译自: https://www.javacodegeeks.com/2012/06/dynamic-forms-jsf-world-was-long.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值