新的PrimeFaces擴(kuò)展版本0.5.0帶來(lái)了新的DynaForm組件。 通常，如果知道行/列的數(shù)量，元素的位置等，則可以通過(guò)h：panelGrid或p：panelGrid來(lái)構(gòu)建非常簡(jiǎn)單的表單。 對(duì)于靜態(tài)表單，這是正確的。 但是，如果在運(yùn)行時(shí)動(dòng)態(tài)描述表單，則無(wú)法使用h：panelGrid或p：panelGrid。 例如，如果整個(gè)表單的定義都放在數(shù)據(jù)庫(kù)或XML文件中。 DynaForm使得構(gòu)建帶有標(biāo)簽，輸入，選擇和任何其他元素的動(dòng)態(tài)表單成為可能。 沒(méi)有限制。 在展示柜中探索其所有功能。 讓我們展示如何構(gòu)建一個(gè)簡(jiǎn)單的動(dòng)態(tài)表單。

主要步驟：
創(chuàng)建模型實(shí)例：DynaFormModel model = new DynaFormModel（）;
將行添加到常規(guī)網(wǎng)格：DynaFormRow row = model.createRegularRow（）; 添加標(biāo)簽：DynaFormLabel標(biāo)簽= row.addLabel（value，colspan，rowspan）; 添加可編輯控件：DynaFormControl控件= row.addControl（數(shù)據(jù)，類型，colspan，rowspan）; 設(shè)置標(biāo)簽和控件之間的關(guān)系（可選）：label.setForControl（control）;

根據(jù)需要重復(fù)最后四個(gè)步驟。 從UI角度看會(huì)是什么樣？ 表單驗(yàn)證失敗后的屏幕截圖：

主要標(biāo)簽是pe：dynaForm。 子標(biāo)記pe：dynaFormControl匹配在Java控件中通過(guò)“ type”屬性創(chuàng)建的標(biāo)記。 這通常是“一對(duì)多”的關(guān)系。 下面列出了上面動(dòng)態(tài)形式的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 } 您會(huì)看到一個(gè)重要功能是對(duì)標(biāo)簽的內(nèi)置支持。 DynaForm自動(dòng)呈現(xiàn)標(biāo)簽-無(wú)需編寫p：outputLabel。 另一個(gè)功能是autoSubmit標(biāo)志。 它允許在URL中傳遞表單參數(shù)，在頁(yè)面加載時(shí)構(gòu)建表單并自動(dòng)提交。 更多亮點(diǎn)：可擴(kuò)展的擴(kuò)展視圖區(qū)域（網(wǎng)格），打開(kāi)/關(guān)閉狀態(tài)保存，小部件的客戶端API，各種方面。 接下來(lái)的屏幕截圖展示了如何使用字段上方的標(biāo)簽和諸如PrimeFaces分隔符之類的各種元素構(gòu)建動(dòng)態(tài)表單。 通過(guò)單擊“切換模型”鏈接，可以切換此示例中的兩種形式。 注意，帶有pe：dynaForm的XHTML代碼保持不變，只有Java模型被更改。

探索用例中的相應(yīng)代碼還有另一種形式 。

參考： 動(dòng)態(tài)表單，JSF世界在我們的JCG合作伙伴 Oleg Varaksin的軟件開(kāi)發(fā)博客上 很期待 。

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

總結(jié)

以上是生活随笔為你收集整理的动态表单，JSF世界早已等待的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。