在本教程中，您將使用 NetBeans IDE 和 JSF 1.2 (Woodstock) 組件創(chuàng)建并運(yùn)行一個(gè)簡單的 Web 應(yīng)用程序：Hello Web。該樣例應(yīng)用程序?qū)⒆屇斎胍粋€(gè)姓名，然后顯示一條包含該姓名的消息。首先，使用一個(gè)輸入字段來實(shí)現(xiàn)此頁面。然后，使用下拉列表替換該輸入字段，用戶可以在該下拉列表中選擇姓名。該下拉列表中將被填充某數(shù)據(jù)庫表中的姓名。

預(yù)計(jì)時(shí)間： 25 分鐘

?

????? 目錄

?

• 創(chuàng)建項(xiàng)目
• 設(shè)計(jì)頁面
• 添加一些行為
• 運(yùn)行應(yīng)用程序
• 使用“下拉列表”替換“文本字段”
• 設(shè)置數(shù)據(jù)庫
• 將“下拉列表”綁定到“數(shù)據(jù)庫表”
• 添加一些行為
• 運(yùn)行應(yīng)用程序
• 更多操作
• 結(jié)束語

?

要學(xué)習(xí)本教程，您需要具備以下軟件和資源。

軟件或資源 要求的版本

NetBeans IDE	6.5 Java 版
Java 開發(fā)工具包（Java Development Kit，JDK）	版本 6 或版本 5
JavaServer Faces 組件/ Java EE 平臺	1.2（帶有 Java EE 5*）或 1.1（帶有 J2EE 1.4）
GlassFish 應(yīng)用服務(wù)器	V2
Travel 數(shù)據(jù)庫	必需

* 要利用 NetBeans IDE 的 Java EE 5 功能，請使用完全符合 Java EE 5 規(guī)范的應(yīng)用服務(wù)器，例如 GlassFish Application Server V2 UR2 。如果使用的是其他服務(wù)器，請查閱 發(fā)行說明 和 常見問題解答 ，了解已知問題和解決方法。有關(guān)支持的服務(wù)器和 Java EE 平臺的詳細(xì)信息，請參見 發(fā)行說明 。

?

創(chuàng)建項(xiàng)目

1. 從主菜單中，選擇“文件”>“新建項(xiàng)目”。
2. 在“新建項(xiàng)目向?qū)А敝校瑥摹邦悇e”列表中選擇“Java Web”，并從“項(xiàng)目”列表中選擇“Web 應(yīng)用程序”。單擊“下一步”。
3. 將項(xiàng)目命名為 HelloWeb 。
4. （可選）選擇“使用專用文件夾存儲庫”復(fù)選框，并指定庫文件夾的位置。參見 共享項(xiàng)目庫 ，了解更多關(guān)于此選項(xiàng)的信息。
5. 單擊“下一步”。
6. 選擇要在其中部署應(yīng)用程序的服務(wù)器。這里僅列出了已在 IDE 中注冊的服務(wù)器。
7. 選擇要與應(yīng)用程序一起使用的 Java EE 版本，然后單擊“下一步”。

8. 選擇“可視化 Web JavaServer Faces 框架”并單擊“完成”

   該項(xiàng)目將出現(xiàn)在可視設(shè)計(jì)器打開的初始頁（ Page1 ）中。

設(shè)計(jì)頁面

首先，設(shè)計(jì)一個(gè)與下圖類似的頁面。

?

1. 在 Page1 的“屬性”窗口中，在 Title 屬性的文本框中鍵入 Hello Web ，如下圖所示。

   部署此頁面（或項(xiàng)目）時(shí)， Title 屬性的值將出現(xiàn)在瀏覽器標(biāo)題欄中。

   提示： 可以通過在可視設(shè)計(jì)器或“導(dǎo)航”窗口中選擇組件，從而在“屬性”窗口中訪問該組件的屬性。要打開“導(dǎo)航”窗口，請選擇“窗口”>“導(dǎo)航”>“導(dǎo)航”。

   單擊頁面空白處訪問該頁面的屬性。

2. 在“導(dǎo)航”窗口中，展開 Page 1 節(jié)點(diǎn)，右鍵單擊 Page1 節(jié)點(diǎn)并選擇“添加綁定屬性”，如下圖所示。

3. 如果“組件面板”窗口中的“Woodstock 基本”節(jié)點(diǎn)未展開，現(xiàn)在將其展開。

   本例使用的所有組件都包含在“組件面板”的“Woodstock 基本”部分中。

   如果“組件面板”不可見，請選擇“窗口”>“組件面板”加以顯示。

4. 從“組件面板”中的“Woodstock 基本”部分拖放一個(gè)“標(biāo)簽”到可視設(shè)計(jì)器頁面的左側(cè)，鍵入 Name: 并按下 Enter 鍵。

   注意，該組件將進(jìn)入該頁面的網(wǎng)格。此外，“屬性”窗口中 text 屬性的值將變?yōu)? Name: 。

   提示： 可通過右鍵單擊該組件切換至編輯模式，并從彈出式菜單中選擇“編輯標(biāo)簽文本”。

5. 從“組件面板”的“Woodstock 基本”部分拖放一個(gè)“文本字段”到可視設(shè)計(jì)器，鍵入 Enter Your Name ，并按下 Enter 鍵。
6. 在“屬性”窗口中，將“文本字段”的 id 屬性由 textField1 更改為 nameField 。

7. 右鍵單擊“文本字段”組件，并選擇 添加綁定屬性 。

   添加綁定屬性時(shí)，IDE 會為該組件創(chuàng)建 getter 和 setter 方法。

8. 選擇“標(biāo)簽”組件，并在“屬性”窗口選擇 nameField 作為 for 屬性。

9. 拖放一個(gè)“按鈕”組件到“文本字段”組件的右側(cè)，鍵入 Say Hello ，然后按下 Enter 鍵。

   注意： 這會影響 IE7 中“JSF 1.2 按鈕”組件的寬度。解決方法是將“按鈕”組件置于一個(gè)布局組件中（網(wǎng)格面板、組面板或布局面板）。自動重新改變布局組件的大小會重新改變“按鈕”組件的大小。

10. 右鍵單擊“按鈕”組件并選擇 “ 添加綁定屬性 ”。

11. 在“屬性”窗口中，將“按鈕”組件的 id 屬性由 button1 更改為 helloButton 。
12. 拖放一個(gè)“靜態(tài)文本”組件到“標(biāo)簽”組件下方。
13. 將該“靜態(tài)文本”組件的 id 屬性由 staticText1 更改為 helloText 。
14. 右鍵單擊“靜態(tài)文本”組件并選擇 “ 添加綁定屬性 ”。

15. 將一個(gè)“消息組”組件拖至頁面的不起眼處，比如拖至“靜態(tài)文本”組件下面。

    添加一個(gè)“消息組”組件，顯示運(yùn)行時(shí)錯(cuò)誤和其它消息類型，有助于診斷編程錯(cuò)誤。

16. 在“編輯”工具欄中，單擊 JSP 切換至 JavaServer 頁面（JSP）源編輯器。

    查看代碼，注意您在“屬性”窗口中所做的更改是如何保存的。在瀏覽器中首次顯示頁面時(shí)，該頁面將 JSP 頁面標(biāo)簽的指示準(zhǔn)確無誤的顯示。如果您的頁面 bean 中含有更改屬性值的代碼，這些更改只出現(xiàn)在提交頁面的請求中，并隨后被重新顯示。

添加一些行為

在本節(jié)中，您將添加一些代碼，讓該頁面重新顯示消息 " Hello entered-name "。為此，您需要添加一個(gè)事件處理程序，一旦單擊該按鈕，應(yīng)用程序就會調(diào)用該事件處理程序。此事件處理程序?qū)ⅰ办o態(tài)文本”組件的 text 屬性設(shè)定為 "hello" 消息，并讓頁面重新顯示，以出現(xiàn)該文本。

1. 在編輯工具欄中，單擊“設(shè)計(jì)”切換至“可視編輯器”。

2. 雙擊“按鈕”組件。

   “編輯區(qū)將”切換至 Java 編輯器，并顯示 Page1 的頁面 bean。 該按鈕的事件處理程序 helloButton_action 將被添加至該頁面 bean 。

3. 用以下幾行代碼（顯示為 粗體 ）替換 helloButton_action 方法。然后按下 Alt-Shift-F 重定代碼格式。

   代碼樣例 1： helloButton_action() 代碼

   public String helloButton_action() { String name = (String)nameField.getText(); helloText.setText("Hello, " + name + "!"); return null; }

   以 粗體 顯示的第一行代碼中使用 getText 方法獲取 nameField “文本字段”組件的 text 屬性值。該值是一個(gè) Object 類型的對象，必須為字符串，因而將被強(qiáng)制轉(zhuǎn)換為 String 對象。該對象隨后被分配給 name 變量。

   以 粗體 顯示的第二行代碼用于為 helloText “靜態(tài)文本”組件設(shè)置 text 屬性值。該值包含用戶在 nameField “文本字段”組件中輸入的姓名。例如，如果用戶輸入 Fred ，則此行代碼會將“靜態(tài)文本”組件的 text 屬性設(shè)為 Hello, Fred! 。

運(yùn)行應(yīng)用程序

1. 在 Java 編輯器中，確保 Java 代碼不含任何錯(cuò)誤。

   錯(cuò)誤在延著代碼左邊的紅色下劃線或紅色方框中標(biāo)出。如果代碼中有任何錯(cuò)誤，項(xiàng)目將無法生成。

   提示： 將光標(biāo)停在代碼左邊的紅色框，查看錯(cuò)誤描述。

2. 單擊“運(yùn)行主項(xiàng)目”按鈕 。

   注意： 缺省情況下，創(chuàng)建項(xiàng)目時(shí)會啟用保存時(shí)編譯功能，因此在 IDE 中運(yùn)行應(yīng)用程序無需首先編譯代碼。有關(guān)保存時(shí)編譯功能的更多信息，請參見 創(chuàng)建、導(dǎo)入并配置 Java 項(xiàng)目 指南的“保存時(shí)編譯”一節(jié)。

3. 在文本字段中輸入您的姓名，并單擊 "Say Hello"。

   隨后，“Hello 您的姓名 ”就會顯示在下面。

   瀏覽器將該表單提交給調(diào)用 Web 應(yīng)用程序的 Web 服務(wù)器。該應(yīng)用程序執(zhí)行按鈕行為方法、更新頁面元素、用更改過的數(shù)據(jù)重新呈現(xiàn)相同的頁面并將該頁面發(fā)送回 Web 瀏覽器。下圖顯示了提交 Gus Townsend 姓名時(shí)的結(jié)果。

使用“下拉列表”替換“文本字段”

本教程余下的部分將介紹如何使用“下拉列表”組件替代“文本字段”獲取用戶輸入，如下圖所示。此“下拉列表”組件從綁定的 PERSON 數(shù)據(jù)庫表中獲取選擇列表。

1. 在編輯工具欄中，單擊“設(shè)計(jì)”切換至可視設(shè)計(jì)器。
2. 在可視設(shè)計(jì)器中，右鍵單擊 nameField “文本字段”組件并從彈出式菜單中選擇“刪除”。

3. 從“組件面板”的“Woodstock 基本”部分拖放一個(gè)“下拉列表”組件到可視設(shè)計(jì)器的頁面中。 將該組件移至“文本字段”組件所在的區(qū)域。

   請注意，如下圖所示，“導(dǎo)航”窗口顯示了一個(gè) dropDown1 組件和一個(gè) dropDown1DefaultOptions 對象。該“下拉列表”組件的 items 屬性標(biāo)明了包含列表中選項(xiàng)的對象。在頁面中添加“下拉列表”組件之后，IDE 會創(chuàng)建一個(gè)“缺省選項(xiàng)”對象（ dropDown1DefaultOptions ），并將此對象設(shè)置為“下拉列表”組件的 items 屬性的值。在可視設(shè)計(jì)器中，只有該“下拉列表”組件是可見的。“缺省選項(xiàng)”對象僅提供包含在列表中的選項(xiàng)。本教程其后的部分中，您將修改將“下拉列表”組件，將來自不同源的選項(xiàng)包含進(jìn)去。

4. 在“屬性”窗口中，將該組件的 id 更改為 nameDropDown 。
5. 右鍵單擊該“下拉列表”組件并選擇“ 添加綁定屬性 ”。

6. 選擇“標(biāo)簽”組件，并在“屬性”窗口中選擇 nameDropDown 作為 for 屬性。

設(shè)置數(shù)據(jù)庫

在本節(jié)中，您將在 IDE 中設(shè)置 travel 數(shù)據(jù)庫和 MySQL 數(shù)據(jù)庫服務(wù)器。

1. 請確保您的機(jī)器已安裝并正在運(yùn)行 MySQL 數(shù)據(jù)庫服務(wù)器。有關(guān)如何連接到 MySQL 數(shù)據(jù)庫的更多信息，請參見 連接到 MySQL 數(shù)據(jù)庫 。

2. 在“服務(wù)”窗口中，右鍵單擊“MySQL 服務(wù)器”節(jié)點(diǎn)并選擇“創(chuàng)建數(shù)據(jù)庫”。

   此時(shí)將打開“創(chuàng)建新數(shù)據(jù)庫”對話框。

3. 從下拉列表中，選擇“ 樣例數(shù)據(jù)庫：travel ”并單擊“確定”。

   在“服務(wù)”窗口中， Travel 數(shù)據(jù)庫將出現(xiàn)在“MySQL 服務(wù)器”節(jié)點(diǎn)下方。

將“下拉列表”綁定到“數(shù)據(jù)庫表”

“服務(wù)”窗口出現(xiàn)在 IDE 工作區(qū)的左側(cè)，其中包含一個(gè)“數(shù)據(jù)庫”節(jié)點(diǎn)。該“數(shù)據(jù)庫”節(jié)點(diǎn)顯示了已經(jīng)添加到 IDE 中的所有數(shù)據(jù)庫驅(qū)動程序和連接。

該 NetBeans IDE 帶有一個(gè)樣例 Travel 數(shù)據(jù)庫。Travel 數(shù)據(jù)庫出現(xiàn)在“數(shù)據(jù)庫”節(jié)點(diǎn)下方。在本節(jié)中，您將使用 Travel 數(shù)據(jù)庫中的 person 表，為“下拉列表”組件提供選項(xiàng)。

1. 在“服務(wù)”窗口中，展開“數(shù)據(jù)庫”節(jié)點(diǎn)并檢查是否已連接到 Travel 數(shù)據(jù)庫。

   如果 travel 數(shù)據(jù)庫標(biāo)記的 jdbc 節(jié)點(diǎn)標(biāo)記是斷開的，并且無法展開該節(jié)點(diǎn)，則表示 IDE 未連接到數(shù)據(jù)庫。要連接到 TRAVEL 數(shù)據(jù)庫，右鍵單擊 travel 數(shù)據(jù)庫連接的 jdbc 節(jié)點(diǎn)，從彈出式菜單中選擇“連接”。

2. 展開 travel 數(shù)據(jù)庫的“表”節(jié)點(diǎn)。

   在“表”下方，可看到數(shù)據(jù)庫中每個(gè)表的節(jié)點(diǎn)，如 carrental 和 flight 。下圖顯示了“表”節(jié)點(diǎn)未展開時(shí)的“運(yùn)行時(shí)”窗口。

3. 將 person 從“服務(wù)”窗口拖放至“下拉列表”。

   列表中顯示的內(nèi)容由 item 1 變?yōu)? abc ，表明該列表正顯示綁定數(shù)據(jù)，且顯示的數(shù)據(jù)是 String 類型。

   IDE 將為數(shù)據(jù)庫表添加一個(gè)不可見的 personDataProvider 組件。PersonDataProvider 組件將出現(xiàn)在“導(dǎo)航”窗口中。IDE 還將為 SessionBean1 添加一個(gè) personRowSet 屬性。

4. 右鍵單擊“下拉列表”并從彈出式菜單中選擇“綁定到數(shù)據(jù)”。此時(shí)將打開“綁定到數(shù)據(jù)”對話框，如下圖所示。

   
   將數(shù)據(jù)綁定到“下拉列表”組件時(shí)，必須指明要在列表中顯示什么（顯示字段）還必須指定在下面的項(xiàng)目中使用何值（值字段）。通常，您想要顯示數(shù)據(jù)庫中的一些有意義的值，如人名，但您又想在下面的項(xiàng)目中使用惟一的標(biāo)識符，比如個(gè)人 ID。 但在本應(yīng)用程序中，要將“值”字段和“顯示”字段都綁定到同一個(gè)數(shù)據(jù)庫列中，即 person.name 列，如以下兩個(gè)步驟所述。
5. 將對話框中的“值”字段設(shè)置為 person.name ，將“顯示”字段保留為 person.name ，并單擊“確定”。

添加一些行為

1. 在可視設(shè)計(jì)器中，雙擊“按鈕”組件。

   “編輯區(qū)”將切換為 Java 編輯器，并移至 helloButton_action 方法。

2. 將 helloButton_action 方法的主體替換為以下代碼（顯示為 粗體 ）。

   <!-- BEGIN CODE SAMPLE COMPONENT -->

   代碼樣例 2： helloButton_action 替換代碼

   public String helloButton_action() { String name = (String)nameDropDown.getSelected(); String splitnames[] = name.split(","); helloText.setText("Hello, " + splitnames[1] + "!"); return null; }

   <!-- END CODE SAMPLE COMPONENT -->
   

   第一行代碼使用 getSelected 方法獲取下拉列表的當(dāng)前值，即列表中當(dāng)前選定的姓名。

   由于數(shù)據(jù)在數(shù)據(jù)庫中以 lastname 、 firstname 存儲，顯示字符串前必須先對其進(jìn)行修改。否則，應(yīng)用程序?qū)⑤敵?"Hello, lastname , firstname !"第二行代碼使用 split 方法將字符串分拆為數(shù)組，用逗號作為分隔符。數(shù)組中的第一個(gè)條目（位置 0）包含姓氏（last name），而位置 1 則包含名字（first name）。

   在第三行中，“靜態(tài)文本”組件的 text 屬性將被設(shè)定為一個(gè)包含名字的值。

   注意： 此方法假設(shè)此表中的所有值都采取 lastname、firstname 的格式。 并未強(qiáng)制處理不遵循此格式的字符串。

3. 將以下代碼添加至 prerender 方法。此代碼將列表中的第一條定為缺省選項(xiàng)。

   <!-- BEGIN CODE SAMPLE COMPONENT -->

   代碼樣例 3：prerender 方法代碼

   public void prerender() { // If no selection, set default selection if (nameDropDown.getSelected() == null) { personDataProvider.cursorFirst(); nameDropDown.setSelected ((String)personDataProvider.getValue("person.name")); } }

   <!-- END CODE SAMPLE COMPONENT -->

運(yùn)行應(yīng)用程序

1. 單擊“運(yùn)行主項(xiàng)目”按鈕。

   注意： 缺省情況下，創(chuàng)建項(xiàng)目時(shí)會啟用保存時(shí)編譯功能，因此在 IDE 中運(yùn)行應(yīng)用程序無需首先編譯代碼。有關(guān)保存時(shí)編譯功能的更多信息，請參見 創(chuàng)建、導(dǎo)入和配置 Java 項(xiàng)目 指南的“保存時(shí)編譯”一節(jié)。

2. 從列表中選擇一個(gè)姓名，并單擊 "Say Hello"。

   瀏覽器將“下拉列表”組件的選定值發(fā)送給服務(wù)器，服務(wù)器執(zhí)行該按鈕的 helloButton_action 方法。

更多內(nèi)容

試試看。 “列表框”組件與“下拉列表”組件類似。試著用“列表框”組件替換“下拉列表”組件。在此應(yīng)用程序中，“列表框”組件的 multiple 屬性必須不被檢查，因?yàn)橐淮沃荒苓x定一個(gè)條目 。請記住將“列表框”綁定到數(shù)據(jù)庫表，并修改 helloButton_action 方法以獲取“列表框”的選定值。

試試看。 使用與您在本教程中學(xué)到的步驟的類似步驟，構(gòu)建一個(gè)含“下拉列表”組件的 Web 應(yīng)用程序，其“下拉列表”組件在 TRIPTYPE 表中顯示所有 DESCRIPTION 值的。用戶單擊“顯示類型 Id”按鈕時(shí)，讓頁面顯示 trip 類型的 TRIPTYPEID。 為此，必須將“下拉列表”組件的“顯示”字段綁定到 TRIPTYPE.DESCRIPTION，并將該組件的“值”字段綁定到 TRIPTYPE.TRIPTYPEID。

結(jié)束語

1. 創(chuàng)建頁面。
2. 將組件添加到頁面中，如“文本字段”組件和“按鈕”組件。
3. 編輯組件屬性以改變其外觀和行為。
4. 如有必要，將組件綁定到其數(shù)據(jù)連接。
5. 編輯 Java 源以控制服務(wù)器端的行為，如事件處理行為。
6. 生成并測試應(yīng)用程序。

?

另請參見

• 在 NetBeans IDE 中開發(fā) Web 應(yīng)用程序簡介
• 針對 Web 應(yīng)用程序的 NetBeans IDE 教程
• 連接到 MySQL 數(shù)據(jù)庫
• Java Web 應(yīng)用程序?qū)W習(xí)指南

[ 轉(zhuǎn)自 ： http://www.netbeans.org/kb/docs/web/helloweb_zh_CN.html ]

開發(fā) Visual Web JSF 應(yīng)用程序