UI樣式
在表單或者表格上，顯示 Overlay Dialog，讓使用者輸入新的值，或是進行確認的動作。Instance 1
1. 點選表格上的 Edit 按鈕，將該列的欄位值預設顯示在對話框中。 2. 完成編輯後，使用者按下確認按鈕，系統顯示更新後的值。Facelets and Backing Beans
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version='1.0' encoding='UTF-8' ?> | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" | |
| xmlns:h="http://xmlns.jcp.org/jsf/html" | |
| xmlns:p="http://primefaces.org/ui" | |
| xmlns:f="http://xmlns.jcp.org/jsf/core"> | |
| <h:head> | |
| <title>票券類別一覽表</title> | |
| <h:outputStylesheet library="css" name="table-style.css" /> | |
| </h:head> | |
| <h:body> | |
| <h:form> | |
| <h:dataTable value="#{ticketCategoryBean.allCategories}" var="c"> | |
| <h:column> | |
| <f:facet name="header" > 類別名稱 </f:facet> | |
| <h:outputText value="#{c}"/> | |
| </h:column> | |
| <h:column> | |
| <!--呼叫 managed bean method 記錄修改前的值--> | |
| <p:commandButton value="修改" action="#{ticketCategoryBean.editCategory(c)}"/> | |
| </h:column> | |
| </h:dataTable> | |
| </h:form> | |
| <p:commandButton value="新增類別" type="button" onclick="PF('addDialog').show();" /> | |
| <p:dialog header="新增類別" widgetVar="addDialog" modal="true" height="100"> | |
| <h:outputText value="請輸入類別名稱: " /> | |
| <h:form> | |
| <h:inputText value="#{ticketCategoryBean.newCategory}"/> | |
| <h:commandButton value="送出" action="#{ticketCategoryBean.addNewCategory}" /> | |
| </h:form> | |
| </p:dialog> | |
| <!--使用 lazy loading 功能，讓對話框顯示是採取讀取 managed bean 的 property 值--> | |
| <p:dialog id="editDialogID" header="修改類別" | |
| widgetVar="editDialogVar" | |
| modal="true" | |
| height="100" | |
| dynamic="true"> | |
| <h:outputText value="請輸入欲修改的類別名稱: " /> | |
| <h:form> | |
| <h:inputText value="#{ticketCategoryBean.editCategory}" /> | |
| <h:commandButton value="送出" action="#{ticketCategoryBean.updateCategory}" /> | |
| </h:form> | |
| </p:dialog> | |
| </h:body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * To change this license header, choose License Headers in Project Properties. | |
| * To change this template file, choose Tools | Templates | |
| * and open the template in the editor. | |
| */ | |
| package managedBean; | |
| import java.io.Serializable; | |
| import java.util.ArrayList; | |
| import java.util.List; | |
| import javax.inject.Named; | |
| import javax.enterprise.context.SessionScoped; | |
| import org.primefaces.context.RequestContext; | |
| /** | |
| * | |
| * @author hychen39@gmail.com | |
| */ | |
| @Named(value = "ticketCategoryBean") | |
| @SessionScoped | |
| public class TicketCategoryBean implements Serializable { | |
| /** | |
| * Creates a new instance of TicketCategoryBean | |
| */ | |
| private String newCategory; | |
| private String editCategory; | |
| private String oldCategoryName; | |
| public String getEditCategory() { | |
| return editCategory; | |
| } | |
| public void setEditCategory(String editCategory) { | |
| this.editCategory = editCategory; | |
| } | |
| private List<String> allCategories; | |
| public List<String> getAllCategories() { | |
| return allCategories; | |
| } | |
| public void setAllCategories(List<String> allCategories) { | |
| this.allCategories = allCategories; | |
| } | |
| public String getNewCategory() { | |
| return newCategory; | |
| } | |
| public void setNewCategory(String newCategory) { | |
| this.newCategory = newCategory; | |
| } | |
| public TicketCategoryBean() { | |
| allCategories = new ArrayList<String>(); | |
| } | |
| public String addNewCategory() { | |
| allCategories.add(newCategory); | |
| // clear the property | |
| newCategory = null; | |
| return null; | |
| } | |
| public String deleteCategory() { | |
| allCategories.remove(newCategory); | |
| return null; | |
| } | |
| /** | |
| * 編輯類別名稱。編輯後新的類別名稱在 {@link #editCategory} 性質。 | |
| * | |
| * @return | |
| */ | |
| public String editCategory(String oldValue) { | |
| // 這行指令會把 allCategories[0] 的元素取代成為 editCategory. | |
| // allCategories.set(0, editCategory); | |
| oldCategoryName = oldValue; | |
| // 更新對話框上輸入欄位內的預設值。 | |
| setEditCategory(oldCategoryName); | |
| // show the dialog | |
| RequestContext requestContext = RequestContext.getCurrentInstance(); | |
| requestContext.execute("PF('editDialogVar').show();"); | |
| return null; | |
| } | |
| /** | |
| * 更新分類名稱。 | |
| * | |
| * @return | |
| */ | |
| public String updateCategory() { | |
| // 尋找 oldValue 在 ArrayList 中的位置 | |
| // 使用 List 界面中的 indexOf 方法來尋找元素在 List 中的位置 | |
| // url: https://docs.oracle.com/javase/7/docs/api/java/util/List.html | |
| int idx = allCategories.indexOf(oldCategoryName); | |
| if (idx != -1) { | |
| allCategories.set(idx, editCategory); | |
| } | |
| return null; | |
| } | |
| } |
