在本教程中，您將使用 NetBeans IDE 和 JSF 1.2 (Woodstock) 組件創建并運行一個簡單的 Web 應用程序：Hello Web。該樣例應用程序將讓您輸入一個姓名，然后顯示一條包含該姓名的消息。首先，使用一個輸入字段來實現此頁面。然后，使用下拉列表替換該輸入字段，用戶可以在該下拉列表中選擇姓名。該下拉列表中將被填充某數據庫表中的姓名。

預計時間： 25 分鐘

?

????? 目錄

?

• 創建項目
• 設計頁面
• 添加一些行為
• 運行應用程序
• 使用“下拉列表”替換“文本字段”
• 設置數據庫
• 將“下拉列表”綁定到“數據庫表”
• 添加一些行為
• 運行應用程序
• 更多操作
• 結束語

?

要學習本教程，您需要具備以下軟件和資源。

軟件或資源 要求的版本

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

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

?

創建項目

1. 從主菜單中，選擇“文件”>“新建項目”。
2. 在“新建項目向導”中，從“類別”列表中選擇“Java Web”，并從“項目”列表中選擇“Web 應用程序”。單擊“下一步”。
3. 將項目命名為 HelloWeb 。
4. （可選）選擇“使用專用文件夾存儲庫”復選框，并指定庫文件夾的位置。參見 共享項目庫 ，了解更多關于此選項的信息。
5. 單擊“下一步”。
6. 選擇要在其中部署應用程序的服務器。這里僅列出了已在 IDE 中注冊的服務器。
7. 選擇要與應用程序一起使用的 Java EE 版本，然后單擊“下一步”。

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

   該項目將出現在可視設計器打開的初始頁（ Page1 ）中。

設計頁面

首先，設計一個與下圖類似的頁面。

?

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

   部署此頁面（或項目）時， Title 屬性的值將出現在瀏覽器標題欄中。

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

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

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

3. 如果“組件面板”窗口中的“Woodstock 基本”節點未展開，現在將其展開。

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

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

4. 從“組件面板”中的“Woodstock 基本”部分拖放一個“標簽”到可視設計器頁面的左側，鍵入 Name: 并按下 Enter 鍵。

   注意，該組件將進入該頁面的網格。此外，“屬性”窗口中 text 屬性的值將變為 Name: 。

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

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

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

   添加綁定屬性時，IDE 會為該組件創建 getter 和 setter 方法。

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

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

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

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

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

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

    添加一個“消息組”組件，顯示運行時錯誤和其它消息類型，有助于診斷編程錯誤。

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

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

添加一些行為

在本節中，您將添加一些代碼，讓該頁面重新顯示消息 " Hello entered-name "。為此，您需要添加一個事件處理程序，一旦單擊該按鈕，應用程序就會調用該事件處理程序。此事件處理程序將“靜態文本”組件的 text 屬性設定為 "hello" 消息，并讓頁面重新顯示，以出現該文本。

1. 在編輯工具欄中，單擊“設計”切換至“可視編輯器”。

2. 雙擊“按鈕”組件。

   “編輯區將”切換至 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 屬性值。該值是一個 Object 類型的對象，必須為字符串，因而將被強制轉換為 String 對象。該對象隨后被分配給 name 變量。

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

運行應用程序

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

   錯誤在延著代碼左邊的紅色下劃線或紅色方框中標出。如果代碼中有任何錯誤，項目將無法生成。

   提示： 將光標停在代碼左邊的紅色框，查看錯誤描述。

2. 單擊“運行主項目”按鈕 。

   注意： 缺省情況下，創建項目時會啟用保存時編譯功能，因此在 IDE 中運行應用程序無需首先編譯代碼。有關保存時編譯功能的更多信息，請參見 創建、導入并配置 Java 項目 指南的“保存時編譯”一節。

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

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

   瀏覽器將該表單提交給調用 Web 應用程序的 Web 服務器。該應用程序執行按鈕行為方法、更新頁面元素、用更改過的數據重新呈現相同的頁面并將該頁面發送回 Web 瀏覽器。下圖顯示了提交 Gus Townsend 姓名時的結果。

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

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

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

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

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

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

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

設置數據庫

在本節中，您將在 IDE 中設置 travel 數據庫和 MySQL 數據庫服務器。

1. 請確保您的機器已安裝并正在運行 MySQL 數據庫服務器。有關如何連接到 MySQL 數據庫的更多信息，請參見 連接到 MySQL 數據庫 。

2. 在“服務”窗口中，右鍵單擊“MySQL 服務器”節點并選擇“創建數據庫”。

   此時將打開“創建新數據庫”對話框。

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

   在“服務”窗口中， Travel 數據庫將出現在“MySQL 服務器”節點下方。

將“下拉列表”綁定到“數據庫表”

“服務”窗口出現在 IDE 工作區的左側，其中包含一個“數據庫”節點。該“數據庫”節點顯示了已經添加到 IDE 中的所有數據庫驅動程序和連接。

該 NetBeans IDE 帶有一個樣例 Travel 數據庫。Travel 數據庫出現在“數據庫”節點下方。在本節中，您將使用 Travel 數據庫中的 person 表，為“下拉列表”組件提供選項。

1. 在“服務”窗口中，展開“數據庫”節點并檢查是否已連接到 Travel 數據庫。

   如果 travel 數據庫標記的 jdbc 節點標記是斷開的，并且無法展開該節點，則表示 IDE 未連接到數據庫。要連接到 TRAVEL 數據庫，右鍵單擊 travel 數據庫連接的 jdbc 節點，從彈出式菜單中選擇“連接”。

2. 展開 travel 數據庫的“表”節點。

   在“表”下方，可看到數據庫中每個表的節點，如 carrental 和 flight 。下圖顯示了“表”節點未展開時的“運行時”窗口。

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

   列表中顯示的內容由 item 1 變為 abc ，表明該列表正顯示綁定數據，且顯示的數據是 String 類型。

   IDE 將為數據庫表添加一個不可見的 personDataProvider 組件。PersonDataProvider 組件將出現在“導航”窗口中。IDE 還將為 SessionBean1 添加一個 personRowSet 屬性。

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

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

添加一些行為

1. 在可視設計器中，雙擊“按鈕”組件。

   “編輯區”將切換為 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 方法獲取下拉列表的當前值，即列表中當前選定的姓名。

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

   在第三行中，“靜態文本”組件的 text 屬性將被設定為一個包含名字的值。

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

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

   <!-- 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 -->

運行應用程序

1. 單擊“運行主項目”按鈕。

   注意： 缺省情況下，創建項目時會啟用保存時編譯功能，因此在 IDE 中運行應用程序無需首先編譯代碼。有關保存時編譯功能的更多信息，請參見 創建、導入和配置 Java 項目 指南的“保存時編譯”一節。

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

   瀏覽器將“下拉列表”組件的選定值發送給服務器，服務器執行該按鈕的 helloButton_action 方法。

更多內容

試試看。 “列表框”組件與“下拉列表”組件類似。試著用“列表框”組件替換“下拉列表”組件。在此應用程序中，“列表框”組件的 multiple 屬性必須不被檢查，因為一次只能選定一個條目 。請記住將“列表框”綁定到數據庫表，并修改 helloButton_action 方法以獲取“列表框”的選定值。

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

結束語

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

?

另請參見

• 在 NetBeans IDE 中開發 Web 應用程序簡介
• 針對 Web 應用程序的 NetBeans IDE 教程
• 連接到 MySQL 數據庫
• Java Web 應用程序學習指南

[ 轉自 ： http://www.netbeans.org/kb/docs/web/helloweb_zh_CN.html ]

開發 Visual Web JSF 應用程序