|
簡(jiǎn)介
本文是有關(guān)Faces Portlet開發(fā)的系列文章的第二部分，這里我們會(huì)關(guān)注于如何構(gòu)建Portlet表單應(yīng)用。 第一部分 Faces Portlet開發(fā)框架初體驗(yàn)
首先，我們先來回顧一下表單的基本原理及其廣泛應(yīng)用；接著，我們會(huì)就Faces Portlet中和表單應(yīng)用相關(guān)的話題分別加以介紹；然后，我們選取了一個(gè)典型的表單應(yīng)用――注冊(cè)表單，來講述構(gòu)建Portlet表單應(yīng)用的基本過程；最后，部署測(cè)試這個(gè)應(yīng)用。
閱讀本文之前，需要您對(duì)Web應(yīng)用中表單的使用有所了解，同時(shí)最好能夠?qū)SP和TagLib技術(shù)有所了解。
表單應(yīng)用
表單是動(dòng)態(tài)Web應(yīng)用中最基本的技術(shù)之一，應(yīng)用廣泛，它常常承擔(dān)著數(shù)據(jù)采集的重任。
一個(gè)典型的表單主要有以下三個(gè)基本組成部分：
- 表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所需要的后臺(tái)程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。
- 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等，Web應(yīng)用就是通過這些控件來采集數(shù)據(jù)的。
- 表單按鈕：包括提交按鈕、復(fù)位按鈕等；用于將數(shù)據(jù)傳送到服務(wù)器上的處理程序或者取消輸入，還可以用表單按鈕來控制其他的處理工作。
表單相關(guān)標(biāo)簽及控件
標(biāo)準(zhǔn)HTML中定義了很多和表單相關(guān)的標(biāo)簽；而Faces Portlet開發(fā)框架則提供了豐富的用戶UI控件，它們或是對(duì)相應(yīng)的HTML標(biāo)簽做了簡(jiǎn)單的包裝，或是對(duì)這些HTML標(biāo)簽做了進(jìn)一步的擴(kuò)展，豐富了它們的屬性，這些控件都被實(shí)現(xiàn)成TagLib的形式，便于封裝和將來的重用。
因此，對(duì)于Faces Portlet開發(fā)框架下的每個(gè)Faces JSP頁面，都會(huì)在文件的頭部增加
<%@taglib uri="http://java./jsf/core" prefix="f"%>
<%@taglib uri="http://java./jsf/html" prefix="h"%>
<%@taglib uri="http://www.ibm.com/jsf/html_extended" prefix="hx"%>
|
這樣三行聲明。
下面，我們就將表單應(yīng)用相關(guān)的最常用的一些標(biāo)簽和控件放在一起做簡(jiǎn)單比較，對(duì)于每個(gè)標(biāo)簽和控件具體的屬性請(qǐng)查閱相關(guān)文檔，這里不再贅述。
表單標(biāo)簽
- 表單標(biāo)簽 <form></form>
這個(gè)標(biāo)簽用于標(biāo)記表單，定義采集數(shù)據(jù)的范圍，也就是<form>和</form>里面包含的數(shù)據(jù)將被提交到服務(wù)器。
樣例：
<form action="http://www./test.jsp" method="post" target="_blank">...</form>
|
表示表單將向http://www./test.jsp以post的方式提交，提交的結(jié)果在新的頁面顯示。
Faces Portlet中相應(yīng)的控件則是：
<h:form styleClass="form" id="form1">…</h:form>
| 相應(yīng)的action功能已經(jīng)轉(zhuǎn)移到對(duì)應(yīng)的表單按鈕來完成。
表單域
表單域包含了文本框、多行文本框、密碼框、隱藏域、復(fù)選框、單選框和下拉選擇框等，用于采集用戶的輸入或選擇的數(shù)據(jù)，下面分別講述這些表單域的代碼格式：
- 文本框
文本框是一種讓用戶自己輸入內(nèi)容的表單對(duì)象，通常被用來填寫單個(gè)字或者簡(jiǎn)短的回答，如姓名、地址等。
代碼格式：<input type="text" name="..." size="..." maxlength="..." value="...">
樣例1：
樣例1代碼： 
<input type="text" name="example1" size="20" maxlength="15">
|
Faces Portlet中相應(yīng)的控件則是：
<h:inputText styleClass="inputText" id="text1"></h:inputText>
|
- 多行文本框
這也是一種讓訪問者自己輸入內(nèi)容的表單對(duì)象，只不過能讓訪問者填寫較長的內(nèi)容。
代碼格式：<TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"></TEXTAREA>
樣例2：
樣例2代碼：
<TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"></TEXTAREA>
|
Faces Portlet中相應(yīng)的控件則是：
<h:inputTextarea styleClass="inputTextarea" id="textarea1"></h:inputTextarea>
|
- 密碼框
是一種特殊的文本域，用于輸入密碼。當(dāng)訪問者輸入文字時(shí)，文字會(huì)被星號(hào)或其它符號(hào)代替，而輸入的文字會(huì)被隱藏。
代碼格式：<input type="password" name="..." size="..." maxlength="...">
樣例3： 
樣例3代碼：
<input type="password" name="example3" size="20" maxlength="15">
|
Faces Portlet中相應(yīng)的控件則是：
<h:inputSecret styleClass="inputSecret" id="secret1"></h:inputSecret>
|
- 復(fù)選框
復(fù)選框允許在待選項(xiàng)中選中一項(xiàng)以上的選項(xiàng)。每個(gè)復(fù)選框都是一個(gè)獨(dú)立的元素，都必須有一個(gè)唯一的名稱。
代碼格式：<INPUT type="checkbox" name="..." value="...">
樣例4：  yahoo.com  google.com
樣例4代碼：
<input type="checkbox" name="yahoo" value="01">yahoo.com
<input type="checkbox" name="google" value="02">google.com
|
Faces Portlet中相應(yīng)的控件則擴(kuò)展成了單選框和多選框兩種，分別是：
<h:selectBooleanCheckbox styleClass="selectBooleanCheckbox"
id="checkbox1" value="Google.com">
</h:selectBooleanCheckbox>
<h:selectManyCheckbox styleClass="selectManyCheckbox" id="checkbox2">
<f:selectItem itemLabel="Google.com" itemValue="Google.com" />
<f:selectItem itemLabel="Yahoo.com" itemValue="itemValue2" />
</h:selectManyCheckbox>
|
- 單選框
當(dāng)需要訪問者在待選項(xiàng)中選擇唯一的答案時(shí)，就需要用到單選框了。
代碼格式：<input type="radio" name="..." value="...">
樣例5：  yahoo.com  google.com
樣例5代碼：
<input type="radio" name="myFavor" value="1">yahoo.com
<input type="radio" name="myFavor" value="2">google.com
|
Faces Portlet中相應(yīng)的控件則是：
<h:selectOneRadio styleClass="selectOneRadio" id="radio1">
<f:selectItem itemLabel="Yahoo.com" itemValue="Yahoo.com" />
<f:selectItem itemLabel="Google.com" itemValue="itemValue2" />
</h:selectOneRadio>
|
- 文件上傳框
有時(shí)候，需要用戶上傳自己的文件，文件上傳框看上去和其它文本域差不多，只是它還包含了一個(gè)瀏覽按鈕。訪問者可以通過輸入需要上傳的文件的路徑或者點(diǎn)擊瀏覽按鈕選擇需要上傳的文件。
注意：在使用文件域以前，請(qǐng)先確定你的服務(wù)器是否允許匿名上傳文件。表單標(biāo)簽中必須設(shè)置ENCTYPE="multipart/form-data"來確保文件被正確編碼；另外，表單的傳送方式必須設(shè)置成POST。
代碼格式：<input type="file" name="..." size="15" maxlength="100">
樣例6： 
樣例6代碼： <input type="file" name="myfile" size="15" maxlength="100">
Faces Portlet中相應(yīng)的控件則是：
<hx:fileupload styleClass="fileupload" id="fileupload1">
<hx:fileProp name="fileName" />
<hx:fileProp name="contentType" />
</hx:fileupload>
|
- 下拉選擇框
下拉選擇框允許你在一個(gè)有限的空間設(shè)置多種選項(xiàng)。
代碼格式：
<select name="..." size="..." multiple>
<option value="..." selected>...</option>
...
</select>
|
樣例7： 
樣例7代碼：
<select name="mySel" size="1">
<option value="1" selected>yahoo.com</option>
<option value="2">google.com</option>
</select>
|
Faces Portlet中相應(yīng)的控件則是：
<h:selectOneMenu styleClass="selectOneMenu" id="menu1">
<f:selectItem itemLabel="yahoo.com" itemValue="Yahoo.com" />
<f:selectItem itemLabel="google.com" itemValue="Google.com" />
</h:selectOneMenu>
|
- 列表框
樣例8：  按Ctrl可以多選
樣例8代碼：
<select name="mySelt" size="3" multiple>
<option value="1" selected>yahoo.com</option>
<option value="2">google.com</option>
<option value="3">infoseek.com</option>
</select>
|
這里，F(xiàn)aces Portlet同樣相應(yīng)地將這個(gè)HTML標(biāo)簽擴(kuò)展成為單選列表框和多選列表框兩個(gè)控件：
單選列表框：
<h:selectOneListbox styleClass="selectOneListbox" id="listbox1">
<f:selectItem itemLabel="yahoo.com" itemValue="itemValue1" />
<f:selectItem itemLabel="google.com" itemValue="itemValue2" />
<f:selectItem itemLabel="infoseek.com" itemValue="itemValue3" />
</h:selectOneListbox>
|
多選列表框：
<h:selectManyListbox styleClass="selectManyListbox" id="listbox2"> <f:selectItem itemLabel="yahoo.com" itemValue="itemValue1" /> <f:selectItem itemLabel="google.com" itemValue="itemValue2" /> <f:selectItem itemLabel="infoseek.com" itemValue="itemValue3" /> </h:selectManyListbox>
表單按鈕
表單按鈕控制表單的動(dòng)作。
可以看出來，一般標(biāo)準(zhǔn)HTML中的標(biāo)簽都可以在Faces Portlet中找到對(duì)應(yīng)的控件，而且它們有了更加豐富的屬性。
關(guān)心的問題
這里列出了表單應(yīng)用中通常會(huì)碰到的一些問題，以及這些問題在Faces Portlet中的解決辦法。
- 數(shù)據(jù)傳輸
在實(shí)際應(yīng)用中，表單通常擔(dān)負(fù)著數(shù)據(jù)采集的任務(wù)，因此頁面之間傳遞數(shù)據(jù)就成了最基本的要求。 在Faces Portlet中，所有與頁面相關(guān)的數(shù)據(jù)都集中在針對(duì)每個(gè)頁面的Page Data中統(tǒng)一管理。最常用的主要是下面幾類：
1. requestScope：這里你可以定義所有在request范圍內(nèi)傳遞的變量。
2. applicationScope：這里則可以定義所有在application范圍內(nèi)傳遞的變量。
3. requestParam：這里我們可以來定義所有在request范圍內(nèi)傳遞的控件參數(shù)。還有一類特殊的數(shù)據(jù)，我們可以在頁面之間傳遞一個(gè)對(duì)象，即一個(gè)數(shù)據(jù)Bean的實(shí)例。
4. javaBean：我們需要先準(zhǔn)備一個(gè)數(shù)據(jù)Bean，然后在需要的JSP頁面中注冊(cè)它，具體的過程后面的范例中會(huì)進(jìn)一步講述。實(shí)際開發(fā)中，我們推薦采用這種方式來傳遞數(shù)據(jù)。
對(duì)于每個(gè)這樣的數(shù)據(jù)Bean，在 faces-config.xml中會(huì)有專門的定義：
<managed-bean>
<description>
UserInfo Data Bean</description>
<managed-bean-name>userInfo</managed-bean-name>
<managed-bean-class>pagecode.UserInfo</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
|
- 頁面導(dǎo)航
Faces Portlet中的頁面導(dǎo)航通常是通過對(duì)某個(gè)事件處理函數(shù)的返回值進(jìn)行字符串匹配來實(shí)現(xiàn)頁面的跳轉(zhuǎn)的。WSAD提供了工具的支持，這在后面范例中會(huì)進(jìn)一步講到，配置好應(yīng)用中的導(dǎo)航規(guī)則后， faces-config.xml中會(huì)有相應(yīng)的描述：
<navigation-rule>
<from-view-id>/RegUser.jsp</from-view-id>
<navigation-case>
<from-action>#{pc_RegUser.doButton1Action}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>/RegPreview.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-action>#{pc_RegUser.doButton1Action}</from-action>
<from-outcome>failure</from-outcome>
<to-view-id>/RegError.jsp</to-view-id>
</navigation-case>
</navigation-rule>
|
上面這段導(dǎo)航規(guī)則描述的是從RegUser.jsp這個(gè)頁面開始跳轉(zhuǎn)，如果doButton1Action這個(gè)事件處理函數(shù)返回success，則跳轉(zhuǎn)倒RegPreview.jsp；如果返回failure，則跳轉(zhuǎn)倒RegError.jsp。我們還可以在后面繼續(xù)添加其它跳轉(zhuǎn)的情形。
- 輸入驗(yàn)證
Faces Portlet開發(fā)框架提供了驗(yàn)證器的機(jī)制，盡管它默認(rèn)的驗(yàn)證器并不算強(qiáng)大，但是開發(fā)人員可以進(jìn)一步開發(fā)屬于自己的驗(yàn)證器。
如果我們的驗(yàn)證規(guī)則并不復(fù)雜，那么可以直接對(duì)輸入控件進(jìn)行一些簡(jiǎn)單設(shè)定即可。
下面是最常見的輸入控件的例子，在JSP文件中
<h:inputText styleClass="inputText" id="text1" required="true">
<f:validateLength minimum="1" maximum="6">
</f:validateLength><hx:validateConstraint regex="AlphabetOnly" />
</h:inputText>
|
這個(gè)輸入控件要求它的輸入不能為空，長度界于1個(gè)字符到6個(gè)字符之間以及只接受字母輸入等諸多限制。
- 事件處理
Faces Portlet開發(fā)框架提供了一個(gè)健壯的事件處理機(jī)制，它主要關(guān)注于兩類事件：Action事件和ValueChange事件。
- Action事件：這類事件通常是由用戶點(diǎn)擊某個(gè)按鈕或是超鏈接時(shí)觸發(fā)。
- ValueChange事件：這類事件則通常是某個(gè)輸入控件的值被創(chuàng)建或是通過驗(yàn)證后觸發(fā)。
對(duì)于每個(gè)控件來說，在后臺(tái)對(duì)應(yīng)的Java類中會(huì)有一個(gè)相應(yīng)的事件處理函數(shù)來負(fù)責(zé)實(shí)現(xiàn)復(fù)雜的業(yè)務(wù)邏輯。
比如在sample.jsp中有個(gè)id為button1的按鈕，我們需要處理點(diǎn)擊它所觸發(fā)的事件。在后臺(tái)對(duì)應(yīng)的sample.java中則有函數(shù)doButton1Action來負(fù)責(zé)處理這個(gè)事件。
這種事件處理機(jī)制和傳統(tǒng)的basic portlet中通過actionPerformed函數(shù)集中管理事件處理，對(duì)各個(gè)事件的處理函數(shù)進(jìn)行分派的情形相比較，F(xiàn)aces Portlet中的控制器相對(duì)分散，也更易于將來的維護(hù)。
范例
我們選取了一個(gè)典型的表單應(yīng)用――注冊(cè)用戶。通常每個(gè)動(dòng)態(tài)Web應(yīng)用都會(huì)包含注冊(cè)用戶這個(gè)模塊，這里用戶需要填寫一些個(gè)人信息諸如用戶名，密碼，確認(rèn)密碼，郵件地址等。對(duì)于各種不同的信息，需要有相應(yīng)的驗(yàn)證規(guī)則，當(dāng)輸入通過了所有的驗(yàn)證之后，會(huì)跳轉(zhuǎn)到另外一個(gè)預(yù)覽頁面，詳細(xì)地列舉出之前所填的個(gè)人信息；提交表單，得到提交結(jié)果。
這當(dāng)中涉及到這樣一些設(shè)計(jì)要素：選取合適的用戶UI控件，設(shè)計(jì)數(shù)據(jù)Bean以傳遞數(shù)據(jù)，設(shè)置合適的驗(yàn)證規(guī)則，設(shè)置頁面的跳轉(zhuǎn)，以及處理必要的控件事件。
創(chuàng)建項(xiàng)目
新建一個(gè)Portlet Project，這里的名稱是FormApp。（如圖1）
圖1
記得選取portlet的類型是Faces portlet。（如圖2）
圖2
然后，根據(jù)我們這個(gè)范例的需要，在Web Content目錄下添加幾個(gè)Faces JSP File，選擇模型時(shí)請(qǐng)選擇Portlet。這里增加了這樣幾個(gè)頁面：（如圖3）
- RegUser.jsp： 用戶在這里輸入相關(guān)的個(gè)人信息，完成輸入驗(yàn)證。
- RegPreview.jsp： 列出所有的輸入信息。
- RegResult.jsp： 顯示注冊(cè)提交結(jié)果。
圖3
提交頁面 RegUser.jsp
所見即所得，從右面的控件面板上選擇你所需要的控件拖放至JSP頁面，這里我們只是先加了一行標(biāo)題：Register New User:
接下來，準(zhǔn)備頁面之間需要傳遞的數(shù)據(jù)。由于我們這里需要傳遞的字段比較多，如果都分別設(shè)置成requestScope中的變量比較繁瑣，這里我們將這些字段組織成數(shù)據(jù)Bean。
先在項(xiàng)目的Java Resources的包中新建一個(gè)Java Class，就叫UserInfo吧。（如圖4）
圖4
這是一個(gè)典型的數(shù)據(jù)Bean，定義了各種各樣的字段，然后添加了它們的Get/Set方法，有WSAD的幫助，這一切都非常簡(jiǎn)單。
下面列出了這個(gè)類的代碼片斷，你可以在 附件1中找到它完整的代碼。
package pagecode;
public class UserInfo {
public String pid = null;
public String password = null;
public String confirmpwd = null;
public String name = null;
public String gender = null;
public String birthday = null;
public String country = null;
public String phoneno = null;
public String email = null;
public UserInfo() {
this.pid = "G000000";
this.password = "";
this.confirmpwd = "";
this.name = "XYZ";
this.gender = "Male";
this.birthday = "2004-01-01";
this.country = "China Shanghai";
this.phoneno = "86-21-63262288";
this.email = "XYZ@cn.ibm.com";
}
public String getName() {
return name;
}
public void setName(String string) {
name = string;
}
|
完成了數(shù)據(jù)Bean的代碼之后，在這個(gè)JSP頁面對(duì)應(yīng)的Page Data框中單擊右鍵，選擇JavaBean，現(xiàn)在我們要把剛才編寫好的類導(dǎo)入頁面。（如圖5）
圖5
由于是第一次導(dǎo)入，需要選擇 增加新的JavaBean，在類中選擇剛才編寫的Java類：pagecode.UserInfo，同時(shí)標(biāo)明它是能夠被 重用的。在它的使用范圍中選擇request，這個(gè)選項(xiàng)對(duì)服務(wù)器資源的消耗是最少的，當(dāng)然數(shù)據(jù)可共享的范圍也只限于request范圍。（如圖6）
圖6
如果點(diǎn)擊Initialize Properties這個(gè)按鈕進(jìn)去，我們還可以為這個(gè)數(shù)據(jù)Bean設(shè)置一些初始值。
如果這一切都完成了，點(diǎn)擊Finish，你會(huì)發(fā)現(xiàn)Page Data框中會(huì)出現(xiàn)這個(gè)數(shù)據(jù)Bean中所有字段的列表。（如圖7）
圖7
這時(shí)，需要為各個(gè)字段準(zhǔn)備輸入控件了，當(dāng)然我們可以手工的添加這些控件，然后設(shè)置控件和每個(gè)字段的綁定關(guān)系，但是WSAD為我們提供了自動(dòng)生成控件的工具。
在Page Data中選中userInfo，單擊右鍵，選擇Insert New Controls for "userInfo"。（如圖8）
圖8
這里我們可以來配置哪些字段需要有相應(yīng)的控件顯示出來，針對(duì)每個(gè)字段選取控件的類型以及控件的相對(duì)位置等等。（如圖9）
圖9
注意：這里WSAD工具的支持有不足的地方，所支持的控件的種類比較少，如果不能滿足需要的話，只能創(chuàng)建完成后在JSP頁面里手工的修改控件標(biāo)簽了，這里我把涉及輸入密碼的兩個(gè)控件都修改成inputSecret類型了。
完成這一切，單擊Finish，下面就是創(chuàng)建好的注冊(cè)頁面外觀。（如圖10）
圖10
接下來，還有兩個(gè)事情，為控件設(shè)置驗(yàn)證規(guī)則和為按鈕添加相應(yīng)的事件處理代碼。
Faces Portlet為輸入控件提供了最常用的驗(yàn)證規(guī)則，如果不能滿足您的要求，可以在客戶端添加Java Script驗(yàn)證函數(shù)或是在服務(wù)器段的事件處理代碼中實(shí)現(xiàn)復(fù)雜的驗(yàn)證邏輯。（如圖11）
圖11
最后，為這個(gè)表單的按鈕添加事件處理代碼。（如圖12）
圖12
這里給出了一個(gè)簡(jiǎn)單的事件處理函數(shù)，它判斷密碼和確認(rèn)密碼兩個(gè)文本輸入框的用戶輸入是否一致。
事件處理函數(shù)：
public String doButton1Action() {
// Type Java code to handle command event here
// Note, this code must return an object of type String (or null)
HtmlInputSecret src1 = this.getSecret1();
HtmlInputSecret src2 = this.getSecret2();
if(null != src1 && null != src2)
{
if(src1.getValue().equals(src2.getValue()))
{
System.out.println("success\n");
return "success";
}else
{
System.out.println("failure\n");
return "failure";
}
}else
{
System.out.println("src1 or src2 is null\n");
return "failure";
}
}
|
好，這樣我們完成了最重要的注冊(cè)頁面。
預(yù)覽頁面 RegPreview.jsp
將RegPreview.jsp在編輯模式中打開，按照上個(gè)頁面類似的過程，在Page Data中添加一個(gè)Java Bean，這次我們選用已經(jīng)注冊(cè)過的userInfo。（如圖13）
圖13
然后記得在選項(xiàng)框中選擇Display fields (Read only)，調(diào)整相應(yīng)的控件順序，單擊Finish。
下面就是這個(gè)頁面的外觀。（如圖14）
圖14
然后，再在這個(gè)portlet的初始頁面FormAppView.jsp以及RegResult.jsp里面添加一些簡(jiǎn)單的文字信息即可。
頁面準(zhǔn)備好后，我們需要來完成頁面間的跳轉(zhuǎn)。
編輯RegUser.jsp中按鈕的屬性，選擇Navigation頁，添加一個(gè)新的導(dǎo)航規(guī)則（如圖15），進(jìn)行相應(yīng)的設(shè)置，這同時(shí)會(huì)在faces-config.xml中增加相應(yīng)的導(dǎo)航規(guī)則。
圖15
其它頁面添加相應(yīng)的跳轉(zhuǎn)，或是通過表單按鈕，或是直接采用 超鏈接控件來完成跳轉(zhuǎn)。
最后，在Portal測(cè)試環(huán)境中運(yùn)行這個(gè)portlet：
相應(yīng)的兩個(gè)頁面如下：（如圖16，圖17）
圖16
圖17
小結(jié)：拋開華麗的美工設(shè)計(jì)和后臺(tái)的業(yè)務(wù)邏輯，動(dòng)態(tài)Web應(yīng)用中一個(gè)最基本的功能就是收集用戶輸入，驗(yàn)證輸入，傳遞數(shù)據(jù)。表單能夠幫助你完成這一切，而在Faces Portlet中，你更是只需要拖放一些控件，設(shè)置它們的屬性，添加很簡(jiǎn)單的一點(diǎn)代碼就能夠完成這一切。
|
