新的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. rowDynaFormRow 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. rowrow = model.createRegularRow();DynaFormLabel label21 = row.addLabel("Title", 1, 1);DynaFormControl control22 = row.addControl(new BookProperty("Title", false), "input", 3, 1);label21.setForControl(control22);// 3. rowrow = 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. rowrow = 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. rowrow = 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

动态表单,JSF世界早已等待相关推荐

  1. jsf表单验证_动态表单,JSF世界期待已久

    jsf表单验证 新的PrimeFaces扩展版本0.5.0带来了新的DynaForm组件. 通常,如果知道行/列的数量,元素的位置等,则可以通过h:panelGrid或p:panelGrid构建非常简 ...

  2. 工作流模式每个工作流引擎都会支持多种方式的表单。目前大家讨论到的大概有三种。 动态表单 外置表单 普通表单

    工作流模式 抢占 会签 委托代办 催办 自由流 回退 取回 指派 前加签 后加签 改派 驳回 终止 挂起 激活 基本控制流模式 顺序流(Sequence) 并行分叉(Parallel Split) 同 ...

  3. 碎片数据收集利器-结构化动态表单设计思路

    本文基于面向基本公共卫生的业务系统设计经验,抽象出一套适合大型ERP系统的表单业务数据模型,目标是最大限度保留系统弹性的同时,尽可能降低系统复杂度和开发成本.enjoy~ 背景 填写表单应该是所有业务 ...

  4. 微信小程序的动态表单,实现房屋租赁的多租客录入

    0 前言 本文将介绍如何使用微信小程序编写动态表单,最终实现房屋租赁系统中多租客录入的业务. 在阅读本文前,您需要对微信小程序的开发有一个初步的了解,以便更容易的学会开发动态表单. 作者主页:Desi ...

  5. 动态表单工作量给后端

    动态表单工作量给后端 让前端远离互相伤害 一个IT公司的日常就是程序员.产品经理.UI等同事们的互相残杀: 应用,不少前端就备受煎熬,除了修改需求的魔咒外,还有后端的重构和调整接口诅咒,即便需求没改, ...

  6. Angular动态表单生成(八)

    动态表单生成之拖拽生成表单(下) 我们的动态表单,最终要实现的效果与Form.io的在线生成表单的效果类似,可以参考它的demo地址:https://codepen.io/travist/full/x ...

  7. angular4更改表单中显示的值_Angular 4 动态表单教程 Reactive Forms教程

    动态表单(React Forms)是一种动态构建表单的技术,用于解决有时候手动编写和维护表单所需工作量和时间会过大的问题.特别是在需要编写大量表单时.表单都很相似,而且随着业务和监管需求的迅速变化,表 ...

  8. 动态表单实现客户端二次过滤及字段汇总统计

    最终效果 动态表单  1.表格分录首行出现客户端二次过滤行 2.表格分录最后一行出现汇总行 实现代码 转载于:https://www.cnblogs.com/fyq891014/p/4188779.h ...

  9. element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...

    前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com ...

最新文章

  1. PHP版本VC6与VC9/VC11/VC14、Thread Safe与None-Thread Safe等的区别
  2. GridView 模版列编辑状态Dropdownlist 事件
  3. 高性能的MySQL(5)索引策略
  4. redis常见关键字
  5. ncbi查找目的基因序列_基于PrimerBank和NCBI数据库的引物查找与设计
  6. mysql 导出用户权限_MySQL中导出用户权限设置的脚本分享
  7. html5基础知识点常用标签
  8. Lucene5.5.4入门以及基于Lucene实现博客搜索功能
  9. android 底部黑边,android – 截屏周围的黑色边缘
  10. 老兵的十年职场之路(三)
  11. 探码科技Baklib荣登36氪“2020影响未来的产品Great100”未来企服榜单
  12. 日版iphone5 SB 配合REBELiOS卡贴破解电信3G步骤
  13. 关于win10不能修改ip问题
  14. 安卓版本客户端2.1
  15. HDU 4622 Reincarnation (后缀数组|后缀自动机)
  16. 互联网 HR 黑话大全,太真实了!
  17. 用python画玫瑰花
  18. java web实验_javaweb实验报告
  19. C++11之正则表达式(regex_match、regex_search、regex_replace)
  20. 我想死你们了,大家好!

热门文章

  1. JDBC元数据操作(一)-- DatabaseMetaData接口详解
  2. React 相关的优秀资源
  3. web项目的创建和发布
  4. java设计模式 订阅模式_Java中的复合设计模式
  5. java登录界面命令_Java命令行界面(第16部分):JArgp
  6. primefaces_通过OmniFaces缓存组件以编程方式缓存PrimeFaces图表
  7. drill apache_Apache Drill:如何创建新功能?
  8. java 字段构造函数_依赖注入–字段vs构造函数vs方法
  9. javafx ui_调用以验证JavaFX UI的响应能力
  10. Spring Boot Actuator:在其顶部具有MVC层的自定义端点