使用NetBean5.5可視環(huán)境開發(fā)JSF應(yīng)用程序
下載地址：www.oksonic.cn
1. 準(zhǔn)備
a) JDK1.5.0.6
b) NetBean5.5 http://www.netbeans.org/
c) Visual Web Pack http://www.netbeans.org/
2. 開發(fā)步驟
a) 安裝NetBean5.5、安裝Visual Web Pack
b) 創(chuàng)建一個(gè)簡(jiǎn)單的登錄項(xiàng)目
i. 新建一個(gè)Visual Web工程名稱為login
ii. 拖動(dòng)一個(gè)文本框組件和一個(gè)口令字段組件到頁(yè)面中，修改ID屬性為username、password，修改Label屬性為姓名、密碼
iii. 拖動(dòng)一個(gè)按鈕組件到頁(yè)面中，修改按鈕的ID為login，修改text屬性為登錄
iv. 雙擊登錄按鈕界面跳轉(zhuǎn)到代碼編輯頁(yè)，修改光標(biāo)所在的代碼為以下內(nèi)容：
public String login_action() {
// 待做事項(xiàng)：處理按鈕單擊操作。返回的值是一個(gè)導(dǎo)航
// 條件名稱，如果它為 Null，則返回到同一頁(yè)。
return "success";
}
|
根據(jù)注釋內(nèi)容可以看到這里的return的返回值為success，根據(jù)這個(gè)返回值，我們只需要配置相應(yīng)的導(dǎo)航就可以控制頁(yè)面到想轉(zhuǎn)的地方了
v. 新建一個(gè)welcome頁(yè)
vi. 在welcome頁(yè)中加入一個(gè)靜態(tài)文本組件，并修改它的text屬性為“您已經(jīng)成功登錄了！”
vii. 點(diǎn)擊左邊樹型菜單中的“頁(yè)面導(dǎo)航”項(xiàng)進(jìn)入頁(yè)面導(dǎo)航的配置頁(yè)，這時(shí)可以看到兩個(gè)圖標(biāo)，一個(gè)是Page1.jsp，另一個(gè)是welcome.jsp，在Page1.jsp圖標(biāo)的右邊可以看到一個(gè)小方塊，點(diǎn)擊方塊并拖動(dòng)到welcome.jsp文件上后放開鼠標(biāo)，這時(shí)就看到有一條線將兩個(gè)圖標(biāo)連在一塊了，上面還有文字信息，點(diǎn)中這條線后，修改它的屬性“結(jié)果”為“success”這里的“success”就是根據(jù)上面的login_action方法中所返回的“success”文字來(lái)進(jìn)行判斷，只要文字相同就跳轉(zhuǎn)到welcome頁(yè)面
viii. 按下F6或是點(diǎn)擊菜單項(xiàng)的“運(yùn)行”à“運(yùn)行主項(xiàng)目”就可以啟動(dòng)tomcat進(jìn)行測(cè)試了，項(xiàng)目啟動(dòng)后會(huì)自動(dòng)打開IE并顯示當(dāng)前頁(yè)面，點(diǎn)擊登錄按鈕就可以看到頁(yè)面跳轉(zhuǎn)到了welcome.jsp了
c) 表單驗(yàn)證
i. 修改文本框組件和口令字段的required屬性為true，也就是打上鉤，這里的意思是這兩個(gè)文本框必須輸入內(nèi)容后才可以提交，這時(shí)進(jìn)行測(cè)試就可以看到效果了，不輸入內(nèi)容就提交的話文字信息就會(huì)變?yōu)榧t色的了
ii. 加入長(zhǎng)度驗(yàn)證器，將文本框組件和口令字段組件的validator屬性從下拉列表中選擇lengthValidator1，在左邊的樹型菜單中選擇lengthValidator1，修改maximun和minimun屬性為10和2，這里的意思是驗(yàn)證用戶輸入數(shù)據(jù)的最大長(zhǎng)度和最小長(zhǎng)度分別為10個(gè)字符和2個(gè)字符
d) 調(diào)試代碼
i. 雙擊登錄按鈕進(jìn)入代碼編輯頁(yè)面加入以下代碼
public String login_action() {
// 待做事項(xiàng)：處理按鈕單擊操作。返回的值是一個(gè)導(dǎo)航
// 條件名稱，如果它為 Null，則返回到同一頁(yè)。
if(!this.username.getValue().equals("oksonic"))
return null;
return "success";
}
|
這里的意思是判斷用戶輸入的姓名是否是“oksonic”不是的話就返回null，返回值為null的話就是回到提交頁(yè)面
ii. 按下F5或是點(diǎn)擊菜單項(xiàng)的“運(yùn)行”à“調(diào)試主項(xiàng)目”就可以啟動(dòng)tomcat進(jìn)行調(diào)試了，在上面代碼的if語(yǔ)句前打上一個(gè)斷點(diǎn)，在頁(yè)面中輸入信息后點(diǎn)登錄按鈕，這時(shí)就可以看到代碼運(yùn)行到斷點(diǎn)處就停止了，這時(shí)可以使用快捷鍵進(jìn)行操作。F7是跳到下一行代碼，Ctrl+F5是繼續(xù)執(zhí)行，其它的可以查看菜單“運(yùn)行”里的其它菜單項(xiàng)后的快捷方式
本教程到此結(jié)束，謝謝收看！
聯(lián)系方法： oksonic@tom.com
其它教程下載： www.oksonic.cn