|
簡介
本文是有關(guān)Faces Portlet開發(fā)的系列文章的第二部分，這里我們會關(guān)注于如何構(gòu)建Portlet表單應(yīng)用。 第一部分 Faces Portlet開發(fā)框架初體驗
首先，我們先來回顧一下表單的基本原理及其廣泛應(yīng)用；接著，我們會就Faces Portlet中和表單應(yīng)用相關(guān)的話題分別加以介紹；然后，我們選取了一個典型的表單應(yīng)用――注冊表單，來講述構(gòu)建Portlet表單應(yīng)用的基本過程；最后，部署測試這個應(yīng)用。
閱讀本文之前，需要您對Web應(yīng)用中表單的使用有所了解，同時最好能夠?qū)SP和TagLib技術(shù)有所了解。
表單應(yīng)用
表單是動態(tài)Web應(yīng)用中最基本的技術(shù)之一，應(yīng)用廣泛，它常常承擔(dān)著數(shù)據(jù)采集的重任。
一個典型的表單主要有以下三個基本組成部分：
- 表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所需要的后臺程序的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控件，它們或是對相應(yīng)的HTML標(biāo)簽做了簡單的包裝，或是對這些HTML標(biāo)簽做了進(jìn)一步的擴展，豐富了它們的屬性，這些控件都被實現(xiàn)成TagLib的形式，便于封裝和將來的重用。
因此，對于Faces Portlet開發(fā)框架下的每個Faces JSP頁面，都會在文件的頭部增加
<%@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)簽和控件放在一起做簡單比較，對于每個標(biāo)簽和控件具體的屬性請查閱相關(guān)文檔，這里不再贅述。
表單標(biāo)簽
- 表單標(biāo)簽 <form></form>
這個標(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)移到對應(yīng)的表單按鈕來完成。
表單域
表單域包含了文本框、多行文本框、密碼框、隱藏域、復(fù)選框、單選框和下拉選擇框等，用于采集用戶的輸入或選擇的數(shù)據(jù)，下面分別講述這些表單域的代碼格式：
- 文本框
文本框是一種讓用戶自己輸入內(nèi)容的表單對象，通常被用來填寫單個字或者簡短的回答，如姓名、地址等。
代碼格式：<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)容的表單對象，只不過能讓訪問者填寫較長的內(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)訪問者輸入文字時，文字會被星號或其它符號代替，而輸入的文字會被隱藏。
代碼格式：<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ù)選框允許在待選項中選中一項以上的選項。每個復(fù)選框都是一個獨立的元素，都必須有一個唯一的名稱。
代碼格式：<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)的控件則擴展成了單選框和多選框兩種，分別是：
<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)需要訪問者在待選項中選擇唯一的答案時，就需要用到單選框了。
代碼格式：<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>
|
- 文件上傳框
有時候，需要用戶上傳自己的文件，文件上傳框看上去和其它文本域差不多，只是它還包含了一個瀏覽按鈕。訪問者可以通過輸入需要上傳的文件的路徑或者點擊瀏覽按鈕選擇需要上傳的文件。
注意：在使用文件域以前，請先確定你的服務(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>
|
- 下拉選擇框
下拉選擇框允許你在一個有限的空間設(shè)置多種選項。
代碼格式：
<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)地將這個HTML標(biāo)簽擴展成為單選列表框和多選列表框兩個控件：
單選列表框：
<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>
表單按鈕
表單按鈕控制表單的動作。
可以看出來，一般標(biāo)準(zhǔn)HTML中的標(biāo)簽都可以在Faces Portlet中找到對應(yīng)的控件，而且它們有了更加豐富的屬性。
關(guān)心的問題
這里列出了表單應(yīng)用中通常會碰到的一些問題，以及這些問題在Faces Portlet中的解決辦法。
- 數(shù)據(jù)傳輸
在實際應(yīng)用中，表單通常擔(dān)負(fù)著數(shù)據(jù)采集的任務(wù)，因此頁面之間傳遞數(shù)據(jù)就成了最基本的要求。 在Faces Portlet中，所有與頁面相關(guān)的數(shù)據(jù)都集中在針對每個頁面的Page Data中統(tǒng)一管理。最常用的主要是下面幾類：
1. requestScope：這里你可以定義所有在request范圍內(nèi)傳遞的變量。
2. applicationScope：這里則可以定義所有在application范圍內(nèi)傳遞的變量。
3. requestParam：這里我們可以來定義所有在request范圍內(nèi)傳遞的控件參數(shù)。還有一類特殊的數(shù)據(jù)，我們可以在頁面之間傳遞一個對象，即一個數(shù)據(jù)Bean的實例。
4. javaBean：我們需要先準(zhǔn)備一個數(shù)據(jù)Bean，然后在需要的JSP頁面中注冊它，具體的過程后面的范例中會進(jìn)一步講述。實際開發(fā)中，我們推薦采用這種方式來傳遞數(shù)據(jù)。
對于每個這樣的數(shù)據(jù)Bean，在 faces-config.xml中會有專門的定義：
<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)航通常是通過對某個事件處理函數(shù)的返回值進(jìn)行字符串匹配來實現(xiàn)頁面的跳轉(zhuǎn)的。WSAD提供了工具的支持，這在后面范例中會進(jìn)一步講到，配置好應(yīng)用中的導(dǎo)航規(guī)則后， faces-config.xml中會有相應(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這個頁面開始跳轉(zhuǎn)，如果doButton1Action這個事件處理函數(shù)返回success，則跳轉(zhuǎn)倒RegPreview.jsp；如果返回failure，則跳轉(zhuǎn)倒RegError.jsp。我們還可以在后面繼續(xù)添加其它跳轉(zhuǎn)的情形。
- 輸入驗證
Faces Portlet開發(fā)框架提供了驗證器的機制，盡管它默認(rèn)的驗證器并不算強大，但是開發(fā)人員可以進(jìn)一步開發(fā)屬于自己的驗證器。
如果我們的驗證規(guī)則并不復(fù)雜，那么可以直接對輸入控件進(jì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>
|
這個輸入控件要求它的輸入不能為空，長度界于1個字符到6個字符之間以及只接受字母輸入等諸多限制。
- 事件處理
Faces Portlet開發(fā)框架提供了一個健壯的事件處理機制，它主要關(guān)注于兩類事件：Action事件和ValueChange事件。
- Action事件：這類事件通常是由用戶點擊某個按鈕或是超鏈接時觸發(fā)。
- ValueChange事件：這類事件則通常是某個輸入控件的值被創(chuàng)建或是通過驗證后觸發(fā)。
對于每個控件來說，在后臺對應(yīng)的Java類中會有一個相應(yīng)的事件處理函數(shù)來負(fù)責(zé)實現(xiàn)復(fù)雜的業(yè)務(wù)邏輯。
比如在sample.jsp中有個id為button1的按鈕，我們需要處理點擊它所觸發(fā)的事件。在后臺對應(yīng)的sample.java中則有函數(shù)doButton1Action來負(fù)責(zé)處理這個事件。
這種事件處理機制和傳統(tǒng)的basic portlet中通過actionPerformed函數(shù)集中管理事件處理，對各個事件的處理函數(shù)進(jìn)行分派的情形相比較，F(xiàn)aces Portlet中的控制器相對分散，也更易于將來的維護(hù)。
范例
我們選取了一個典型的表單應(yīng)用――注冊用戶。通常每個動態(tài)Web應(yīng)用都會包含注冊用戶這個模塊，這里用戶需要填寫一些個人信息諸如用戶名，密碼，確認(rèn)密碼，郵件地址等。對于各種不同的信息，需要有相應(yīng)的驗證規(guī)則，當(dāng)輸入通過了所有的驗證之后，會跳轉(zhuǎn)到另外一個預(yù)覽頁面，詳細(xì)地列舉出之前所填的個人信息；提交表單，得到提交結(jié)果。
這當(dāng)中涉及到這樣一些設(shè)計要素：選取合適的用戶UI控件，設(shè)計數(shù)據(jù)Bean以傳遞數(shù)據(jù)，設(shè)置合適的驗證規(guī)則，設(shè)置頁面的跳轉(zhuǎn)，以及處理必要的控件事件。
創(chuàng)建項目
新建一個Portlet Project，這里的名稱是FormApp。（如圖1）
圖1
記得選取portlet的類型是Faces portlet。（如圖2）
圖2
然后，根據(jù)我們這個范例的需要，在Web Content目錄下添加幾個Faces JSP File，選擇模型時請選擇Portlet。這里增加了這樣幾個頁面：（如圖3）
- RegUser.jsp： 用戶在這里輸入相關(guān)的個人信息，完成輸入驗證。
- RegPreview.jsp： 列出所有的輸入信息。
- RegResult.jsp： 顯示注冊提交結(jié)果。
圖3
提交頁面 RegUser.jsp
所見即所得，從右面的控件面板上選擇你所需要的控件拖放至JSP頁面，這里我們只是先加了一行標(biāo)題：Register New User:
接下來，準(zhǔn)備頁面之間需要傳遞的數(shù)據(jù)。由于我們這里需要傳遞的字段比較多，如果都分別設(shè)置成requestScope中的變量比較繁瑣，這里我們將這些字段組織成數(shù)據(jù)Bean。
先在項目的Java Resources的包中新建一個Java Class，就叫UserInfo吧。（如圖4）
圖4
這是一個典型的數(shù)據(jù)Bean，定義了各種各樣的字段，然后添加了它們的Get/Set方法，有WSAD的幫助，這一切都非常簡單。
下面列出了這個類的代碼片斷，你可以在 附件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的代碼之后，在這個JSP頁面對應(yīng)的Page Data框中單擊右鍵，選擇JavaBean，現(xiàn)在我們要把剛才編寫好的類導(dǎo)入頁面。（如圖5）
圖5
由于是第一次導(dǎo)入，需要選擇 增加新的JavaBean，在類中選擇剛才編寫的Java類：pagecode.UserInfo，同時標(biāo)明它是能夠被 重用的。在它的使用范圍中選擇request，這個選項對服務(wù)器資源的消耗是最少的，當(dāng)然數(shù)據(jù)可共享的范圍也只限于request范圍。（如圖6）
圖6
如果點擊Initialize Properties這個按鈕進(jìn)去，我們還可以為這個數(shù)據(jù)Bean設(shè)置一些初始值。
如果這一切都完成了，點擊Finish，你會發(fā)現(xiàn)Page Data框中會出現(xiàn)這個數(shù)據(jù)Bean中所有字段的列表。（如圖7）
圖7
這時，需要為各個字段準(zhǔn)備輸入控件了，當(dāng)然我們可以手工的添加這些控件，然后設(shè)置控件和每個字段的綁定關(guān)系，但是WSAD為我們提供了自動生成控件的工具。
在Page Data中選中userInfo，單擊右鍵，選擇Insert New Controls for "userInfo"。（如圖8）
圖8
這里我們可以來配置哪些字段需要有相應(yīng)的控件顯示出來，針對每個字段選取控件的類型以及控件的相對位置等等。（如圖9）
圖9
注意：這里WSAD工具的支持有不足的地方，所支持的控件的種類比較少，如果不能滿足需要的話，只能創(chuàng)建完成后在JSP頁面里手工的修改控件標(biāo)簽了，這里我把涉及輸入密碼的兩個控件都修改成inputSecret類型了。
完成這一切，單擊Finish，下面就是創(chuàng)建好的注冊頁面外觀。（如圖10）
圖10
接下來，還有兩個事情，為控件設(shè)置驗證規(guī)則和為按鈕添加相應(yīng)的事件處理代碼。
Faces Portlet為輸入控件提供了最常用的驗證規(guī)則，如果不能滿足您的要求，可以在客戶端添加Java Script驗證函數(shù)或是在服務(wù)器段的事件處理代碼中實現(xiàn)復(fù)雜的驗證邏輯。（如圖11）
圖11
最后，為這個表單的按鈕添加事件處理代碼。（如圖12）
圖12
這里給出了一個簡單的事件處理函數(shù)，它判斷密碼和確認(rèn)密碼兩個文本輸入框的用戶輸入是否一致。
事件處理函數(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";
}
}
|
好，這樣我們完成了最重要的注冊頁面。
預(yù)覽頁面 RegPreview.jsp
將RegPreview.jsp在編輯模式中打開，按照上個頁面類似的過程，在Page Data中添加一個Java Bean，這次我們選用已經(jīng)注冊過的userInfo。（如圖13）
圖13
然后記得在選項框中選擇Display fields (Read only)，調(diào)整相應(yīng)的控件順序，單擊Finish。
下面就是這個頁面的外觀。（如圖14）
圖14
然后，再在這個portlet的初始頁面FormAppView.jsp以及RegResult.jsp里面添加一些簡單的文字信息即可。
頁面準(zhǔn)備好后，我們需要來完成頁面間的跳轉(zhuǎn)。
編輯RegUser.jsp中按鈕的屬性，選擇Navigation頁，添加一個新的導(dǎo)航規(guī)則（如圖15），進(jìn)行相應(yīng)的設(shè)置，這同時會在faces-config.xml中增加相應(yīng)的導(dǎo)航規(guī)則。
圖15
其它頁面添加相應(yīng)的跳轉(zhuǎn)，或是通過表單按鈕，或是直接采用 超鏈接控件來完成跳轉(zhuǎn)。
最后，在Portal測試環(huán)境中運行這個portlet：
相應(yīng)的兩個頁面如下：（如圖16，圖17）
圖16
圖17
小結(jié)：拋開華麗的美工設(shè)計和后臺的業(yè)務(wù)邏輯，動態(tài)Web應(yīng)用中一個最基本的功能就是收集用戶輸入，驗證輸入，傳遞數(shù)據(jù)。表單能夠幫助你完成這一切，而在Faces Portlet中，你更是只需要拖放一些控件，設(shè)置它們的屬性，添加很簡單的一點代碼就能夠完成這一切。
|
