使用MyEclipse開發(fā)Java EE應(yīng)用：使用Visual JSF編輯器設(shè)計JSP

下載MyEclipse  購買MyEclipse

1、使用JSF Facet創(chuàng)建一個Web項目

設(shè)計器通過在頁面上導(dǎo)入和使用的標(biāo)記庫識別JSF頁面，因此可以將Designer與其他JSF頁面格式一起使用。

• 選擇File > New > Web Project。

• 在“Project name”字段中鍵入SampleJSFProject，接受默認(rèn)值，然后單擊“Finish”。注意：本教程使用JavaEE 5版本。但是，在創(chuàng)建新項目時，可以使用JavaEE 6或7。

右鍵單擊項目，然后選擇MyEclipse > Project Facets > Install JavaServer Faces Facet。

• 單擊下一步查看實施設(shè)置，然后單擊完成以接受默認(rèn)設(shè)置。

2、創(chuàng)建一個JSF頁面

• 右鍵單擊WebRoot文件夾，然后選擇New > JSP (Advanced Templates)。

• 從“Template”中選擇要使用的默認(rèn)JSF模板，然后單擊Finish。該頁面會自動打開，并且在面板中提供帶有JSF控件的JSP設(shè)計器。

3、設(shè)計登錄表單

• 單擊“Expand”按鈕可以在Visual Designer中打開工具選項板。調(diào)色板從構(gòu)建路徑中讀取標(biāo)記庫并加載它們，這樣您就可以使用拖放特性來構(gòu)建頁面。

調(diào)色板從構(gòu)建路徑中讀取標(biāo)記庫并加載它們，這樣您就可以使用拖放特性來構(gòu)建頁面。

下圖是一些需要注意的重要標(biāo)記組。在設(shè)計頁面時，有最常用的一組標(biāo)記。使用這些項目可將登錄表單拖放到頁面上。

• 選擇默認(rèn)文本并將其更改為“Welcome to My Application”。

• 在選用板中展開JSF HTML，然后將“Form”拖動到文本下方的頁面上。

典型的登錄表單的布局由用戶名、密碼和登錄按鈕組成。為了很好地布置這些項目，還需要一個3x2的表，但是如果要包含用于存儲登錄錯誤消息的空間，則可以使用3x3的表。面板網(wǎng)格組件以表格形式布置內(nèi)容。

• 將“Panel Grid”拖到窗體中，然后在“Properties”視圖的“Columns”字段中鍵入3。面板網(wǎng)格包含四個樣本項。當(dāng)添加/刪除項目時，布局會隨之調(diào)整。

將面板網(wǎng)格添加到頁面后，Designer會自動向其中添加四個示例組件。

• 將“Output Text”組件從工具欄拖動到第一列第一行，然后在“Properties”視圖的“Value”字段中鍵入Username:。

• 將“Text Input”組件從工具欄拖到第二列第一行，然后在“Text Input”視圖的ID字段中鍵入username。

• 將“Message”組件從工具欄拖到第三列第一行，然后在“ For”字段中鍵入username。

• 將“Output Text”組件從工具欄拖到第一列第二行，然后在“Properties”視圖的“Value”字段中鍵入“Password:”。

• 將“Secret Input”組件從工具欄拖到第二列第二行，然后在“Properties”視圖的ID字段中鍵入password。

• 將“Message”組件從工具欄拖到第三列第二行，然后在“ For”字段中鍵入password。

• 從網(wǎng)格中刪除示例項目。

尚未添加按鈕，但到目前為止，該表單如下所示：

注意：僅當(dāng)有消息要顯示時，消息組件才會呈現(xiàn)。

為讓表單看起來更漂亮，可以對輸入框下的按鈕設(shè)置為左對齊。如果在每個單元格中放置一個按鈕(一個在Password下，一個在Secret Input下)，它們的間隔將是不均勻的。然而Panel Grid將組件直接添加到其中，并將它們逐個單元地放在表中。要將兩個按鈕組合在一起并將它們置于輸入字段之下，需要使用panelGroup。

首先，在“Password”標(biāo)簽下需要一個空組件。其次，您需要在輸入字段下添加一個panelGroup。然后在panelGroup內(nèi)，添加兩個按鈕。

• 將“Output Text”組件拖到密碼標(biāo)簽下方的單元格中，然后在“Properties”視圖中刪除“Value”字段的內(nèi)容。這將創(chuàng)建一個空單元格。

• 將“Panel Group”組件拖動到輸入字段下方的單元格中。將兩個命令按鈕組件拖到面板組中，并在Properties面板中鍵入Login和Clear到相應(yīng)的值字段中。

注意：不用在消息組件下添加空組件。

頁面的設(shè)計部分已經(jīng)完成。通過以上內(nèi)容，您應(yīng)該了解了Designer的工作原理。如果您要構(gòu)建完整的JSF應(yīng)用程序，則需要為按鈕分配操作處理程序，并將值綁定到輸入字段，以確保托管bean正確地支持此頁面上的值。

慧都16周年·技術(shù)服務(wù)月，軟件商城優(yōu)惠券不限量免費(fèi)領(lǐng)取，購MyEclipse/CodeMix享折上折>>>

想進(jìn)一步了解MyEclipse？【MyEclipse官方中文網(wǎng)】知你所需，解你所惑！

想與更多人聊MyEclipse？加入MyEclipse中國（官方2）：742336981暢所欲言吧！

想及時獲取MyEclipse資訊？掃描下方二維碼，MyEclips信息跟你走！