2016年11月21日 星期一

Overlay Edit 的實現 - JSF

UI樣式

在表單或者表格上，顯示 Overlay Dialog，讓使用者輸入新的值，或是進行確認的動作。

Instance 1

1. 點選表格上的 Edit 按鈕，將該列的欄位值預設顯示在對話框中。 2. 完成編輯後，使用者按下確認按鈕，系統顯示更新後的值。

Facelets and Backing Beans

<?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>
view raw ListAndEdit.xhtml hosted with ❤ by GitHub
/*
* 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;
}
}
view raw TickCategoryBean.java hosted with ❤ by GitHub
於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)