JBuilder2005實戰JSP之登入頁面（1）

js|頁面 通過File-＞New...-＞Web-＞雙擊JSP表徵圖，彈出建立JSP嚮導的對話方塊，如下圖所示：


圖 3 通過嚮導建立login.jsp
　　·Web module：如果一個工程下有多個Web模組，你可以通過這兒指定JSP所要加入到的Web模組，因為我們的工程中只有一個webModule，所以是嚮導將預設設定為webModule。

　　·Name ：鍵入JSP檔案名稱，你可以鍵入.jsp尾碼，也可以不寫尾碼，直接鍵入login就可以了。

　　Generate sample bean選項勾選後JBuilder將產生一個樣本的Bean並在JSP中引入這個Bean。對於初學者來說，可以通過該選項查看JSP如何引用一個Bean，而Generate error page選項將自動為JSP建立一個配套的錯誤處理JSP檔案，這裡，我們不勾選它們。

　　直接點擊Finish建立login.jsp，login.jsp檔案出現在內容窗格的編譯器中，如下圖所示：


圖 4 嚮導建立的JSP檔案
　　JSP編譯視窗的左右兩邊都有一個可以通過 和 按鈕控制的豎欄，左側邊欄為放置JSP標籤和HTML標籤的面板，可以像可視化UI設計器中一樣用拖拽方式往JSP檔案中放置各種標籤，如上圖中，我們從面板中選擇表單的HTML標籤放置到login.jsp檔案中。

　　而右邊豎欄中是JSP檔案中當前游標所在標籤的屬性編譯器，如下圖所示：


圖 5 設定JSP標籤屬性編輯器
　　屬性編輯器是動態，游標移到不同的標籤上，屬性編輯器就顯示這個標籤所有可設定的屬性。如上圖中對應的是HTML 表單標籤的屬性編輯器，我們將其action屬性設定為switch.jsp，指定用POST方式發送請求資料。

　　我們在login.jsp中提供一個使用者名稱下拉框、一個密碼輸入框以及一個登入提交按鈕，其代碼如下：

　　代碼清單 4 login.jsp

1. ＜%@page contentType="text/html; charset=GBK" %＞
2. ＜html＞
3. ＜head＞
4. ＜title＞login＜/title＞
5. ＜/head＞
6. ＜body bgcolor="#ffffff"＞
7. ＜表單 name="表單1" method="post" action="switch.jsp"＞
8. 使用者名稱： ＜select name="userId"＞
9. ＜option value="" selected＞--登入使用者--＜/option＞
10. ＜option value="100000"＞薑子牙＜/option＞
11. ＜option value="100001"＞鮑叔牙＜/option＞
12. ＜option value="100002"＞豎牙＜/option＞
13. ＜/select＞
14. 密 碼：＜input name="password" type="password"＞
15. ＜input type="submit" name="Submit" value="登入"＞
16. ＜/表單＞
17. ＜/body＞
18. ＜/html＞
　　表單標籤代表網頁中的一個表單，表單可以包含多個組件，這些組件的資料在網頁表單提交後，以HTTP協議發送給action屬性所指定的JSP檔案處理。表單的資料一般以POST發送，POST發送方式對資料量的大小沒有限制，且保密性更強。

　　login.jsp的效果頁面如下圖所示：


圖 6 login.jsp錄入頁面
　　實戰經驗：

　　JSP檔案程式碼封裝含靜態和動態兩部分，即一部分是HTML代碼，而另一部分為JSP標籤和Scriptlet代碼。JSP一般是動態邏輯的網頁，JBuilder對JSP標籤及Scriptlet這些動態代碼部分支援得非常好，你可以使用CodeInsight和TagInsight等工具快速而正確地完成編碼，同時還可以對JSP進行編譯調試。在JSP靜態HTML代碼編寫及可視化設計方面，JBuilder卻顯得力不從心，Dreamweaver在靜態代碼和可視化設計方面明顯優於JBuilder。
　　事情的複雜促進了分工，分工的精細促進了專業的發展，在編寫JSP時，並不是一旦擁有JBuilder就別無所求了。韓信善兵、蕭何善謀，如果能夠將Dreamweaver和JBuilder結合起來，用Dreamweaver開發JSP的可視化部分，用JBuilder開發JSP的動態代碼部分，兩者互補有無，相得益彰，JSP開發工作將變得更加行雲流水。