javascript
一个JSF清单示例
這是使用JSF 2.0（JavaServer Faces）構(gòu)建的示例列表應(yīng)用程序。 該應(yīng)用程序是待辦事項(xiàng)列表。 該應(yīng)用程序具有添加，編輯或刪除列表中項(xiàng)目的功能。 待辦事項(xiàng)具有名稱和描述屬性。
完成的應(yīng)用程序的JSF頁(yè)面具有：
- 使用h:selectOneListbox html標(biāo)記實(shí)現(xiàn)的待辦事項(xiàng)列表。
- 使用f:selectItems核心標(biāo)簽填充列表數(shù)據(jù)。
- 待辦事項(xiàng)名稱和描述字段分別使用h:inputText和h:inputTextarea標(biāo)記實(shí)現(xiàn)。
- 新增，編輯，保存，刪除和取消功能通過(guò)h:commandButton標(biāo)記實(shí)現(xiàn)。
- 使用h:outputText標(biāo)記實(shí)現(xiàn)的狀態(tài)消息。
應(yīng)用中使用的類：
- 待辦事項(xiàng)：代表待辦事項(xiàng)，并具有名稱和描述屬性。
- TodosBean：這是一個(gè)托管bean； 它具有運(yùn)行應(yīng)用程序的代碼，包括組件的偵聽(tīng)器和訪問(wèn)器方法。
- TodoConverter：這是一個(gè)自定義轉(zhuǎn)換器，將字符串todo名稱轉(zhuǎn)換為Todo對(duì)象，反之亦然。
下圖顯示了完成的應(yīng)用程序的用戶界面：
此示例應(yīng)用程序分三個(gè)步驟進(jìn)行說(shuō)明。 第一步說(shuō)明基本列表的實(shí)現(xiàn)。 該應(yīng)用程序的功能在接下來(lái)的步驟中得到了增強(qiáng)。 這些步驟是：
- 步驟1：待辦事項(xiàng)列表顯示項(xiàng)目，并在選擇時(shí)顯示選定的待辦事項(xiàng)屬性。
- 第2步：列出待辦事項(xiàng)，并具有將項(xiàng)目添加到列表的功能。
- 第3步：列出待辦事項(xiàng)和添加，編輯和刪除列表項(xiàng)的功能。
步驟1：待辦事項(xiàng)列表顯示項(xiàng)目，并在選擇時(shí)顯示選定的待辦事項(xiàng)屬性。
以下是此應(yīng)用程序的代碼組件：
- Todo.java類表示待辦事項(xiàng)。
- index.xhtml是帶有列表框的JSF頁(yè)面，以及一條狀態(tài)消息，用于顯示列表中的選定項(xiàng)目。
- TodosBean.java托管Bean具有獲取列表數(shù)據(jù)，運(yùn)行列表的值更改偵聽(tīng)器以及顯示狀態(tài)消息的功能。
Todo.java：
此類表示待辦事項(xiàng)。 它具有兩個(gè)屬性-名稱和描述。 注意Object類的重寫toString()方法。
Package com.javaquizplayer.example; public class Todo {private String name;private String desc;public Todo() {}public Todo(String name, String desc) {this.name = name;this.desc = desc;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getDesc() {return desc;}public void setDesc(String desc) {this.desc = desc;}@Overridepublic String toString() {return this.name;} }index.xhtml：
此JSF頁(yè)面顯示待辦事項(xiàng)列表。 列表可以滾動(dòng)，可以選擇一個(gè)項(xiàng)目。 所選項(xiàng)目名稱顯示在狀態(tài)消息中。
列表框是使用h:selectOneListbox html標(biāo)記實(shí)現(xiàn)的。 列表框的當(dāng)前選定項(xiàng)目值由以下屬性指定： value="#{bean.todo}" 。 選擇項(xiàng)通過(guò)f:selectItems核心標(biāo)簽指定：
<f:selectItems value="#{bean.data}"/>該標(biāo)記位于h:selectOneListbox tag 。 列表框的項(xiàng)目是從TodosBean的getData()方法填充的，該方法返回List集合。 列表框顯示標(biāo)簽–待辦事項(xiàng)的名稱值，即toString()方法中Todo對(duì)象的String值。
列表框的值更改偵聽(tīng)器使用以下屬性指定：
valueChangeListener=""#{bean.valueChanged}"選擇列表項(xiàng)后，將提交表單并執(zhí)行此偵聽(tīng)器代碼。 在此示例中，當(dāng)選擇一個(gè)列表項(xiàng)時(shí)，待辦事項(xiàng)的名稱在狀態(tài)消息中顯示為“ todo_item_name selected”。
每次在列表框中選擇一個(gè)項(xiàng)目時(shí)，都會(huì)提交該表單。 這是通過(guò)列表框的屬性指定的： onchange="submit()" 。
狀態(tài)消息與輸出組件一起顯示：
<h:outputText id="msg" value="#{bean.message}" />。
<?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:f="http://java.sun.com/jsf/core"xmlns:h="http://java.sun.com/jsf/html"> <h:head><title>A JSF List Example</title> </h:head> <h:body><h:form><h3>TODOs List</h3><h:selectOneListbox id="list" size="10"value="#{bean.todo}"valueChangeListener="#{bean.valueChanged}"onchange="submit()"><f:selectItems value="#{bean.data}"/> </h:selectOneListbox><h:outputText id="msg" value="#{bean.message}" /></h:form> </h:body> </html>TodosBean：
此托管bean類具有以下功能：
- 創(chuàng)建初始待辦事項(xiàng)數(shù)據(jù)并填充待辦事項(xiàng)列表。
- 值更改偵聽(tīng)器，以獲取當(dāng)前選定的列表項(xiàng)。
- 在列表中捕獲當(dāng)前選定的項(xiàng)目值。
- 設(shè)置狀態(tài)消息。
步驟2：列出待辦事項(xiàng)，并具有將項(xiàng)目添加到清單的功能。
在此步驟中，應(yīng)用程序具有添加新的待辦事項(xiàng)的功能。 單擊新建按鈕，在名稱和描述文本字段中輸入待辦事項(xiàng)數(shù)據(jù)并保存。 通過(guò)單擊取消按鈕或通過(guò)選擇列表中的另一個(gè)項(xiàng)目來(lái)取消新的待辦事項(xiàng)數(shù)據(jù)輸入。
代碼組成與上一步相同，但是增加了新功能。 新的自定義轉(zhuǎn)換器類將添加到應(yīng)用程序。
- Todo.java類表示待辦事項(xiàng)，未更改。
- index.xhtml是帶有列表框的JSF頁(yè)面，以及顯示列表中所選項(xiàng)目的狀態(tài)消息。 此外，還有一些小部件可以輸入新的待辦事項(xiàng)并保存。
- TodosBean.java托管Bean具有獲取列表數(shù)據(jù)，運(yùn)行列表值更改偵聽(tīng)器并顯示消息的代碼。 此外，還有用于新動(dòng)作，保存動(dòng)作和取消動(dòng)作的動(dòng)作偵聽(tīng)器。
- 轉(zhuǎn)換器TodoConverter.java將數(shù)據(jù)從todo字符串值轉(zhuǎn)換為Todo對(duì)象，反之亦然。
Todo.java：
此類保持不變。
index.xhtml：
以下是更改：
列表框當(dāng)前選擇的項(xiàng)目值指定為： value="#{bean.todo}" 。 在上一步1中，項(xiàng)目值解析為todo的名稱字符串。 現(xiàn)在，該值解析為Todo的一個(gè)實(shí)例。
以下是新添加的：
待辦事項(xiàng)的名稱和描述字段分別通過(guò)h:inputText和h:inputTextarea標(biāo)記實(shí)現(xiàn)。 請(qǐng)注意，只有在編輯待辦事項(xiàng)數(shù)據(jù)時(shí)（即，新的待辦事項(xiàng)功能），這些字段才可編輯： readonly="#{not bean.editable}" 。 當(dāng)列表處于選擇模式時(shí)，這些字段是只讀的。
轉(zhuǎn)換器附加到列表中，以使用f:converter核心標(biāo)記將選定的項(xiàng)目名稱轉(zhuǎn)換為Todo對(duì)象，反之亦然：
<f:converter converterId="todoConvertor"/>請(qǐng)注意，為轉(zhuǎn)換器設(shè)置了一個(gè)屬性：
<f:attribute name="beanattr" value="#{bean}"/>; 用于訪問(wèn)轉(zhuǎn)換器類中的Todo數(shù)據(jù)。
使用h:commandButton標(biāo)簽為新的，保存和取消操作添加了三個(gè)命令按鈕。 每個(gè)按鈕都有其各自的動(dòng)作偵聽(tīng)器。 例如：
<h:commandButton value="New" actionListener="#{bean.newListener}"/>。
最后，使用f:ajax核心標(biāo)記將列表框的Submit更改為Ajax調(diào)用： onchange="submit()"替換為
<f:ajax execute="@this" render="msg name desc" />為什么會(huì)有這種變化？
使用提交選項(xiàng)時(shí)，如果通過(guò)選擇另一個(gè)列表項(xiàng)取消了“新建”操作，則不會(huì)使用所選項(xiàng)目填充text和textarea字段。 值將保持編輯狀態(tài)。 這是因?yàn)榫庉嫼蟮奈谋局狄搽S表格一起提交。 這些值將不會(huì)更改為所選項(xiàng)目的值。 但是，對(duì)于Ajax，不提交表單，僅更新文本值（ f:ajax標(biāo)記的render屬性指定要更新的字段：狀態(tài)消息，待辦事項(xiàng)名稱和描述）。
注意：在以下代碼中，突出顯示了上一步1中新添加和刪除的代碼行。
<!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:f="http://java.sun.com/jsf/core"xmlns:h="http://java.sun.com/jsf/html"> <h:head><title>A JSF List Example</title> </h:head> <h:body><h:form><h3>TODOs List</h3><h:panelGrid><h:inputText id="name" value="#{bean.todoName}" size="30"readonly="#{not bean.editable}"/><h:inputTextarea id="desc" value="#{bean.todoDesc}"rows="2" cols="40"readonly="#{not bean.editable}"/><h:selectOneListbox id="list" size="10" value="#{bean.todo}"valueChangeListener="#{bean.valueChanged}"onchange="submit()"><f:ajax execute="@this" render="msg name desc"/><f:selectItems value="#{bean.data}"/><f:attribute name="beanattr" value="#{bean}"/><f:converter converterId="todoConvertor"/></h:selectOneListbox></h:panelGrid><h:commandButton value="New" actionListener="#{bean.newListener}"/><h:commandButton value="Save" actionListener="#{bean.saveListener}"/><h:commandButton value="Cancel" actionListener="#{bean.cancelListener}"/><h:outputText id="msg" value="#{bean.message}" /></h:form> </h:body> </html>TodoConverter.java：
這是一個(gè)自定義轉(zhuǎn)換器類，將Todo對(duì)象轉(zhuǎn)換為字符串（todo名稱），反之亦然。
package com.javaquizplayer.example; import javax.faces.component.UIComponent; import javax.faces.context.FacesContext; import javax.faces.convert.Converter; import javax.faces.convert.ConverterException; import javax.faces.convert.FacesConverter; import java.util.Map; @FacesConverter(value="todoConvertor") public class TodoConverter implements Converter {private static final long serialVersionUID = 1L;@Overridepublic Object getAsObject(FacesContext context, UIComponent component,String value)throws ConverterException {if (value == null) {return null;}Map<String, Object> attrs = component.getAttributes(); TodosBean bean = (TodosBean) attrs.get("beanattr");Todo todo = bean.getTodoForName(value);return todo;}@Overridepublic String getAsString(FacesContext context, UIComponent component,Object value)throws ConverterException {if (value == null) {return null;}Todo todo = (Todo) value;return todo.getName();} }TodosBean.java：
此托管bean類具有以下功能：
- 填充待辦事項(xiàng)列表。
- 值更改偵聽(tīng)器，以獲取當(dāng)前選定的列表項(xiàng)。
- 在列表中捕獲當(dāng)前選定的項(xiàng)目值。
- 設(shè)置狀態(tài)消息。
這些是更改：
- 將列表中當(dāng)前選擇的項(xiàng)目值捕獲為Todo對(duì)象（而不是先前使用的todo名稱字符串）。
- 更改值更改偵聽(tīng)器以獲取Todo對(duì)象，而不是字符串值todo名稱。
這些是新添加的：
- 待辦事項(xiàng)名稱，描述及其可編輯性的訪問(wèn)器方法。
- 動(dòng)作偵聽(tīng)器，用于新動(dòng)作，保存動(dòng)作和取消動(dòng)作。
第3步：列出待辦事項(xiàng)和添加，編輯和刪除列表項(xiàng)的功能。
這是完成的應(yīng)用程序。 它具有選擇，添加，編輯和刪除列表項(xiàng)的功能。
在此步驟中，添加了兩個(gè)新功能–編輯，刪除列表項(xiàng)。 要進(jìn)行編輯，請(qǐng)選擇一個(gè)待辦事項(xiàng)列表項(xiàng)，然后單擊“編輯”按鈕。 這樣可以更改名稱和描述值，并保存。 可以通過(guò)單擊取消按鈕或選擇另一個(gè)列表項(xiàng)來(lái)取消編輯。 刪除功能允許刪除選定的待辦事項(xiàng)列表項(xiàng)。
這些代碼組件與前面的步驟2相同，但是通過(guò)新功能進(jìn)行了增強(qiáng)。
- Todo.java類表示待辦事項(xiàng)。 這沒(méi)有改變。
- 轉(zhuǎn)換器TodoConverter.java將數(shù)據(jù)從todo字符串值轉(zhuǎn)換為Todo對(duì)象，反之亦然。 這沒(méi)有改變。
- index.xhtml是具有列表框，待辦事項(xiàng)屬性和狀態(tài)消息的JSF頁(yè)面，該狀態(tài)消息顯示列表中的選定項(xiàng)目。 此外，還有一些小部件可用于添加，編輯所選項(xiàng)目或?qū)⑵鋭h除。
- TodosBean.java托管bean具有用于獲取列表數(shù)據(jù)，運(yùn)行列表的值更改偵聽(tīng)器并顯示消息的代碼。 此外，還有用于新動(dòng)作，編輯動(dòng)作，刪除動(dòng)作，保存動(dòng)作和取消動(dòng)作的動(dòng)作監(jiān)聽(tīng)器。
Todo.java：
此類保持不變。
TodoConverter.java：
此類保持不變。
index.xhtml：
以下是新添加的：
添加了兩個(gè)命令按鈕以進(jìn)行編輯和刪除操作。 每個(gè)按鈕都有其各自的動(dòng)作偵聽(tīng)器。
TodoBean.java：
此托管bean類具有以下功能：
- 填充待辦事項(xiàng)列表。
- 值更改偵聽(tīng)器，以獲取當(dāng)前選定的列表項(xiàng)。
- 在列表中捕獲當(dāng)前選定的項(xiàng)目值。
- 設(shè)置狀態(tài)消息。
- 待辦事項(xiàng)名稱，描述及其可編輯性的訪問(wèn)器方法。
- 動(dòng)作偵聽(tīng)器，用于新動(dòng)作，保存動(dòng)作和取消動(dòng)作。 增強(qiáng)了這些功能以適應(yīng)編輯和刪除功能。
這些是新添加的：
- 編輯和刪除操作的操作偵聽(tīng)器。
代碼下載：
這些是下載完整的應(yīng)用程序的WAR文件和源代碼的鏈接。
- 源代碼
- WAR文件
注釋和參考：
該應(yīng)用程序是使用Apache MyFaces 2.0開發(fā)的（MyFaces 2.0實(shí)現(xiàn)了JavaServer Faces 2.0）。 該應(yīng)用程序已在Tomcat 6 Web服務(wù)器和GlassFish 3應(yīng)用程序服務(wù)器（GlassFish 3實(shí)現(xiàn)Java EE 6）上進(jìn)行了測(cè)試。
有用的鏈接：
- Apache MyFaces 2.0
- GlassFish 3文檔
- Java EE 6 API
翻譯自: https://www.javacodegeeks.com/2015/02/jsf-list-example.html
總結(jié)
- 上一篇： （配置 linux ftp）
- 下一篇： linux的home目录在哪（linux