在本教程中,您將使用 NetBeans IDE 和 JSF 1.2 (Woodstock) 組件創(chuàng)建并運行一個簡單的 Web 應(yīng)用程序:Hello Web。該樣例應(yīng)用程序?qū)⒆屇斎胍粋€姓名,然后顯示一條包含該姓名的消息。首先,使用一個輸入字段來實現(xiàn)此頁面。然后,使用下拉列表替換該輸入字段,用戶可以在該下拉列表中選擇姓名。該下拉列表中將被填充某數(shù)據(jù)庫表中的姓名。
預(yù)計時間: 25 分鐘
?
????? 目錄
?
- 創(chuàng)建項目
- 設(shè)計頁面
- 添加一些行為
- 運行應(yīng)用程序
- 使用“下拉列表”替換“文本字段”
- 設(shè)置數(shù)據(jù)庫
- 將“下拉列表”綁定到“數(shù)據(jù)庫表”
- 添加一些行為
- 運行應(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)建項目
- 從主菜單中,選擇“文件”>“新建項目”。
- 在“新建項目向?qū)А敝校瑥摹邦悇e”列表中選擇“Java Web”,并從“項目”列表中選擇“Web 應(yīng)用程序”。單擊“下一步”。
-
將項目命名為
HelloWeb
。 - (可選)選擇“使用專用文件夾存儲庫”復(fù)選框,并指定庫文件夾的位置。參見 共享項目庫 ,了解更多關(guān)于此選項的信息。
- 單擊“下一步”。
- 選擇要在其中部署應(yīng)用程序的服務(wù)器。這里僅列出了已在 IDE 中注冊的服務(wù)器。
- 選擇要與應(yīng)用程序一起使用的 Java EE 版本,然后單擊“下一步”。
-
選擇“可視化 Web JavaServer Faces 框架”并單擊“完成”
該項目將出現(xiàn)在可視設(shè)計器打開的初始頁(Page1
)中。
設(shè)計頁面
首先,設(shè)計一個與下圖類似的頁面。
?
-
在 Page1 的“屬性”窗口中,在
Title
屬性的文本框中鍵入Hello Web
,如下圖所示。部署此頁面(或項目)時,
Title
屬性的值將出現(xiàn)在瀏覽器標(biāo)題欄中。提示: 可以通過在可視設(shè)計器或“導(dǎo)航”窗口中選擇組件,從而在“屬性”窗口中訪問該組件的屬性。要打開“導(dǎo)航”窗口,請選擇“窗口”>“導(dǎo)航”>“導(dǎo)航”。
單擊頁面空白處訪問該頁面的屬性。 -
在“導(dǎo)航”窗口中,展開 Page 1 節(jié)點,右鍵單擊 Page1 節(jié)點并選擇“添加綁定屬性”,如下圖所示。
-
如果“組件面板”窗口中的“Woodstock 基本”節(jié)點未展開,現(xiàn)在將其展開。
本例使用的所有組件都包含在“組件面板”的“Woodstock 基本”部分中。
如果“組件面板”不可見,請選擇“窗口”>“組件面板”加以顯示。 -
從“組件面板”中的“Woodstock 基本”部分拖放一個“標(biāo)簽”到可視設(shè)計器頁面的左側(cè),鍵入
Name:
并按下 Enter 鍵。注意,該組件將進(jìn)入該頁面的網(wǎng)格。此外,“屬性”窗口中
text
屬性的值將變?yōu)?Name:
。提示: 可通過右鍵單擊該組件切換至編輯模式,并從彈出式菜單中選擇“編輯標(biāo)簽文本”。
-
從“組件面板”的“Woodstock 基本”部分拖放一個“文本字段”到可視設(shè)計器,鍵入
Enter Your Name
,并按下 Enter 鍵。 -
在“屬性”窗口中,將“文本字段”的
id
屬性由textField1
更改為nameField
。 -
右鍵單擊“文本字段”組件,并選擇 添加綁定屬性 。
添加綁定屬性時,IDE 會為該組件創(chuàng)建 getter 和 setter 方法。 -
選擇“標(biāo)簽”組件,并在“屬性”窗口選擇
nameField
作為for
屬性。 -
拖放一個“按鈕”組件到“文本字段”組件的右側(cè),鍵入
Say Hello
,然后按下 Enter 鍵。注意: 這會影響 IE7 中“JSF 1.2 按鈕”組件的寬度。解決方法是將“按鈕”組件置于一個布局組件中(網(wǎng)格面板、組面板或布局面板)。自動重新改變布局組件的大小會重新改變“按鈕”組件的大小。
-
右鍵單擊“按鈕”組件并選擇 “ 添加綁定屬性 ”。
-
在“屬性”窗口中,將“按鈕”組件的
id
屬性由button1
更改為helloButton
。 - 拖放一個“靜態(tài)文本”組件到“標(biāo)簽”組件下方。
-
將該“靜態(tài)文本”組件的
id
屬性由staticText1
更改為helloText
。 - 右鍵單擊“靜態(tài)文本”組件并選擇 “ 添加綁定屬性 ”。
-
將一個“消息組”組件拖至頁面的不起眼處,比如拖至“靜態(tài)文本”組件下面。
添加一個“消息組”組件,顯示運行時錯誤和其它消息類型,有助于診斷編程錯誤。 -
在“編輯”工具欄中,單擊 JSP 切換至 JavaServer 頁面(JSP)源編輯器。
查看代碼,注意您在“屬性”窗口中所做的更改是如何保存的。在瀏覽器中首次顯示頁面時,該頁面將 JSP 頁面標(biāo)簽的指示準(zhǔn)確無誤的顯示。如果您的頁面 bean 中含有更改屬性值的代碼,這些更改只出現(xiàn)在提交頁面的請求中,并隨后被重新顯示。
添加一些行為
在本節(jié)中,您將添加一些代碼,讓該頁面重新顯示消息 "
Hello
entered-name
"。為此,您需要添加一個事件處理程序,一旦單擊該按鈕,應(yīng)用程序就會調(diào)用該事件處理程序。此事件處理程序?qū)ⅰ办o態(tài)文本”組件的
text
屬性設(shè)定為 "hello" 消息,并讓頁面重新顯示,以出現(xiàn)該文本。
- 在編輯工具欄中,單擊“設(shè)計”切換至“可視編輯器”。
-
雙擊“按鈕”組件。
“編輯區(qū)將”切換至 Java 編輯器,并顯示 Page1 的頁面 bean。 該按鈕的事件處理程序helloButton_action
將被添加至該頁面 bean 。 -
用以下幾行代碼(顯示為 粗體 )替換
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
類型的對象,必須為字符串,因而將被強(qiáng)制轉(zhuǎn)換為String
對象。該對象隨后被分配給name
變量。helloText
“靜態(tài)文本”組件設(shè)置text
屬性值。該值包含用戶在nameField
“文本字段”組件中輸入的姓名。例如,如果用戶輸入Fred
,則此行代碼會將“靜態(tài)文本”組件的text
屬性設(shè)為Hello, Fred!
。
運行應(yīng)用程序
-
在 Java 編輯器中,確保 Java 代碼不含任何錯誤。
錯誤在延著代碼左邊的紅色下劃線或紅色方框中標(biāo)出。如果代碼中有任何錯誤,項目將無法生成。
提示: 將光標(biāo)停在代碼左邊的紅色框,查看錯誤描述。
-
單擊“運行主項目”按鈕
。
注意: 缺省情況下,創(chuàng)建項目時會啟用保存時編譯功能,因此在 IDE 中運行應(yīng)用程序無需首先編譯代碼。有關(guān)保存時編譯功能的更多信息,請參見 創(chuàng)建、導(dǎo)入并配置 Java 項目 指南的“保存時編譯”一節(jié)。
-
在文本字段中輸入您的姓名,并單擊 "Say Hello"。
隨后,“Hello 您的姓名 ”就會顯示在下面。瀏覽器將該表單提交給調(diào)用 Web 應(yīng)用程序的 Web 服務(wù)器。該應(yīng)用程序執(zhí)行按鈕行為方法、更新頁面元素、用更改過的數(shù)據(jù)重新呈現(xiàn)相同的頁面并將該頁面發(fā)送回 Web 瀏覽器。下圖顯示了提交
Gus Townsend
姓名時的結(jié)果。
使用“下拉列表”替換“文本字段”
本教程余下的部分將介紹如何使用“下拉列表”組件替代“文本字段”獲取用戶輸入,如下圖所示。此“下拉列表”組件從綁定的
PERSON
數(shù)據(jù)庫表中獲取選擇列表。
- 在編輯工具欄中,單擊“設(shè)計”切換至可視設(shè)計器。
-
在可視設(shè)計器中,右鍵單擊
nameField
“文本字段”組件并從彈出式菜單中選擇“刪除”。 -
從“組件面板”的“Woodstock 基本”部分拖放一個“下拉列表”組件到可視設(shè)計器的頁面中。 將該組件移至“文本字段”組件所在的區(qū)域。
請注意,如下圖所示,“導(dǎo)航”窗口顯示了一個 dropDown1 組件和一個 dropDown1DefaultOptions 對象。該“下拉列表”組件的
items
屬性標(biāo)明了包含列表中選項的對象。在頁面中添加“下拉列表”組件之后,IDE 會創(chuàng)建一個“缺省選項”對象(dropDown1DefaultOptions
),并將此對象設(shè)置為“下拉列表”組件的items
屬性的值。在可視設(shè)計器中,只有該“下拉列表”組件是可見的。“缺省選項”對象僅提供包含在列表中的選項。本教程其后的部分中,您將修改將“下拉列表”組件,將來自不同源的選項包含進(jìn)去。 -
在“屬性”窗口中,將該組件的
id
更改為nameDropDown
。 - 右鍵單擊該“下拉列表”組件并選擇“ 添加綁定屬性 ”。
-
選擇“標(biāo)簽”組件,并在“屬性”窗口中選擇
nameDropDown
作為for
屬性。
設(shè)置數(shù)據(jù)庫
在本節(jié)中,您將在 IDE 中設(shè)置 travel 數(shù)據(jù)庫和 MySQL 數(shù)據(jù)庫服務(wù)器。
- 請確保您的機(jī)器已安裝并正在運行 MySQL 數(shù)據(jù)庫服務(wù)器。有關(guān)如何連接到 MySQL 數(shù)據(jù)庫的更多信息,請參見 連接到 MySQL 數(shù)據(jù)庫 。
-
在“服務(wù)”窗口中,右鍵單擊“MySQL 服務(wù)器”節(jié)點并選擇“創(chuàng)建數(shù)據(jù)庫”。
此時將打開“創(chuàng)建新數(shù)據(jù)庫”對話框。
-
從下拉列表中,選擇“ 樣例數(shù)據(jù)庫:travel ”并單擊“確定”。
在“服務(wù)”窗口中, Travel 數(shù)據(jù)庫將出現(xiàn)在“MySQL 服務(wù)器”節(jié)點下方。
將“下拉列表”綁定到“數(shù)據(jù)庫表”
“服務(wù)”窗口出現(xiàn)在 IDE 工作區(qū)的左側(cè),其中包含一個“數(shù)據(jù)庫”節(jié)點。該“數(shù)據(jù)庫”節(jié)點顯示了已經(jīng)添加到 IDE 中的所有數(shù)據(jù)庫驅(qū)動程序和連接。
該 NetBeans IDE 帶有一個樣例 Travel 數(shù)據(jù)庫。Travel 數(shù)據(jù)庫出現(xiàn)在“數(shù)據(jù)庫”節(jié)點下方。在本節(jié)中,您將使用 Travel 數(shù)據(jù)庫中的
person
表,為“下拉列表”組件提供選項。
-
在“服務(wù)”窗口中,展開“數(shù)據(jù)庫”節(jié)點并檢查是否已連接到 Travel 數(shù)據(jù)庫。
如果 travel 數(shù)據(jù)庫標(biāo)記的 jdbc 節(jié)點標(biāo)記是斷開的,并且無法展開該節(jié)點,則表示 IDE 未連接到數(shù)據(jù)庫。要連接到 TRAVEL 數(shù)據(jù)庫,右鍵單擊 travel 數(shù)據(jù)庫連接的 jdbc 節(jié)點,從彈出式菜單中選擇“連接”。 -
展開 travel 數(shù)據(jù)庫的“表”節(jié)點。
在“表”下方,可看到數(shù)據(jù)庫中每個表的節(jié)點,如
carrental
和flight
。下圖顯示了“表”節(jié)點未展開時的“運行時”窗口。 -
將
person
從“服務(wù)”窗口拖放至“下拉列表”。列表中顯示的內(nèi)容由
IDE 將為數(shù)據(jù)庫表添加一個不可見的 personDataProvider 組件。PersonDataProvider 組件將出現(xiàn)在“導(dǎo)航”窗口中。IDE 還將為 SessionBean1 添加一個item 1
變?yōu)?abc
,表明該列表正顯示綁定數(shù)據(jù),且顯示的數(shù)據(jù)是String
類型。personRowSet
屬性。 -
右鍵單擊“下拉列表”并從彈出式菜單中選擇“綁定到數(shù)據(jù)”。此時將打開“綁定到數(shù)據(jù)”對話框,如下圖所示。
將數(shù)據(jù)綁定到“下拉列表”組件時,必須指明要在列表中顯示什么(顯示字段)還必須指定在下面的項目中使用何值(值字段)。通常,您想要顯示數(shù)據(jù)庫中的一些有意義的值,如人名,但您又想在下面的項目中使用惟一的標(biāo)識符,比如個人 ID。 但在本應(yīng)用程序中,要將“值”字段和“顯示”字段都綁定到同一個數(shù)據(jù)庫列中,即 person.name 列,如以下兩個步驟所述。 -
將對話框中的“值”字段設(shè)置為
person.name
,將“顯示”字段保留為person.name
,并單擊“確定”。
添加一些行為
-
在可視設(shè)計器中,雙擊“按鈕”組件。
“編輯區(qū)”將切換為 Java 編輯器,并移至helloButton_action
方法。 -
將
<!-- BEGIN CODE SAMPLE COMPONENT -->helloButton_action
方法的主體替換為以下代碼(顯示為 粗體 )。代碼樣例 2: helloButton_action 替換代碼 public String helloButton_action() { String name = (String)nameDropDown.getSelected(); String splitnames[] = name.split(","); helloText.setText("Hello, " + splitnames[1] + "!"); return null; }
第一行代碼使用
getSelected
方法獲取下拉列表的當(dāng)前值,即列表中當(dāng)前選定的姓名。由于數(shù)據(jù)在數(shù)據(jù)庫中以 lastname 、 firstname 存儲,顯示字符串前必須先對其進(jìn)行修改。否則,應(yīng)用程序?qū)⑤敵?"Hello, lastname , firstname !"第二行代碼使用
split
方法將字符串分拆為數(shù)組,用逗號作為分隔符。數(shù)組中的第一個條目(位置 0)包含姓氏(last name),而位置 1 則包含名字(first name)。在第三行中,“靜態(tài)文本”組件的
text
屬性將被設(shè)定為一個包含名字的值。注意: 此方法假設(shè)此表中的所有值都采取 lastname、firstname 的格式。 并未強(qiáng)制處理不遵循此格式的字符串。
-
將以下代碼添加至
<!-- BEGIN CODE SAMPLE COMPONENT -->prerender
方法。此代碼將列表中的第一條定為缺省選項。代碼樣例 3:prerender 方法代碼 public void prerender() { // If no selection, set default selection if (nameDropDown.getSelected() == null) { personDataProvider.cursorFirst(); nameDropDown.setSelected ((String)personDataProvider.getValue("person.name")); } }
運行應(yīng)用程序
-
單擊“運行主項目”按鈕。
注意: 缺省情況下,創(chuàng)建項目時會啟用保存時編譯功能,因此在 IDE 中運行應(yīng)用程序無需首先編譯代碼。有關(guān)保存時編譯功能的更多信息,請參見 創(chuàng)建、導(dǎo)入和配置 Java 項目 指南的“保存時編譯”一節(jié)。
-
從列表中選擇一個姓名,并單擊 "Say Hello"。
瀏覽器將“下拉列表”組件的選定值發(fā)送給服務(wù)器,服務(wù)器執(zhí)行該按鈕的
helloButton_action
方法。
更多內(nèi)容
試試看。
“列表框”組件與“下拉列表”組件類似。試著用“列表框”組件替換“下拉列表”組件。在此應(yīng)用程序中,“列表框”組件的
multiple
屬性必須不被檢查,因為一次只能選定一個條目 。請記住將“列表框”綁定到數(shù)據(jù)庫表,并修改
helloButton_action
方法以獲取“列表框”的選定值。
試試看。 使用與您在本教程中學(xué)到的步驟的類似步驟,構(gòu)建一個含“下拉列表”組件的 Web 應(yīng)用程序,其“下拉列表”組件在 TRIPTYPE 表中顯示所有 DESCRIPTION 值的。用戶單擊“顯示類型 Id”按鈕時,讓頁面顯示 trip 類型的 TRIPTYPEID。 為此,必須將“下拉列表”組件的“顯示”字段綁定到 TRIPTYPE.DESCRIPTION,并將該組件的“值”字段綁定到 TRIPTYPE.TRIPTYPEID。
結(jié)束語
- 創(chuàng)建頁面。
- 將組件添加到頁面中,如“文本字段”組件和“按鈕”組件。
- 編輯組件屬性以改變其外觀和行為。
- 如有必要,將組件綁定到其數(shù)據(jù)連接。
- 編輯 Java 源以控制服務(wù)器端的行為,如事件處理行為。
- 生成并測試應(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 ]
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
