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

  購買MyEclipse

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

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

• 選擇File > New > Web Project。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

頁面的設(shè)計(jì)部分已經(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？加入MyEclipse中國（官方2）：742336981暢所欲言吧！

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