Visual JSF Designer（可視化JSF設(shè)計(jì)器）的目標(biāo)是使創(chuàng)建JSF應(yīng)用程序的特定于組件工作更容易可視化，在本教程中，您將使用可視化設(shè)計(jì)器設(shè)計(jì)JSF登錄頁(yè)面。您將學(xué)習(xí)如何：

• 創(chuàng)建一個(gè)JSF項(xiàng)目
• 創(chuàng)建一個(gè)新的JSF頁(yè)面
• 設(shè)計(jì)JSF頁(yè)面

該功能在中可用。在上文中（點(diǎn)擊這里回顧>>），我們?yōu)榇蠹医榻B了如何用JSF Facet創(chuàng)建一個(gè)Web項(xiàng)目、創(chuàng)建一個(gè)JSF頁(yè)面等，本文將繼續(xù)介紹如何設(shè)計(jì)一個(gè)登錄表單，歡迎下載最新版MyEclipse體驗(yàn)！

MyEclipse技術(shù)交流群：1041265693 歡迎一起進(jìn)群討論

三、設(shè)計(jì)一個(gè)登錄表單

1. 單擊Expand按鈕打開(kāi)Visual Designer中的工具調(diào)色板，調(diào)色板從構(gòu)建路徑讀取標(biāo)記庫(kù)并加載它們，這樣您就可以使用拖放功能來(lái)構(gòu)建頁(yè)面。

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

2. 選擇默認(rèn)文本并將其更改為Welcome to My Application. Please Login：

3. 在調(diào)色板中展開(kāi)JSF HTML，并將Form（表單）拖到文本下面的頁(yè)面上。

典型登錄表單的布局由用戶名、密碼和登錄按鈕組成。為了很好地布局這些項(xiàng)，似乎需要一個(gè)3×2表，但是如果希望為登錄錯(cuò)誤消息提供空間，則可以使用3×3表，Panel Grid組件以表格形式布局內(nèi)容。

4. 將Panel Grid拖到表單中，并在Properties視圖的Columns字段中輸入3，面板網(wǎng)格包含四個(gè)示例項(xiàng)目。當(dāng)您添加/刪除項(xiàng)目時(shí)，布局將進(jìn)行調(diào)整。

將Panel Grid（面板網(wǎng)格）添加到頁(yè)面時(shí)，設(shè)計(jì)器會(huì)自動(dòng)向其添加四個(gè)示例組件。

5. 將Output Text組件從工具欄拖到第一列、第一行，并在Properties視圖的Value字段中輸入Username：。

6. 將Text Input組件從工具欄拖到第二列第一行，并在Properties視圖的ID字段中輸入username。

7. 將Message組件從工具欄拖到第三列第一行，并在For字段中輸入username。

8. 將Output Text組件從工具欄拖到第一列第二行，并在Properties視圖的Value字段中輸入Password:。

9. 將Secret Input組件從工具欄拖到第二列第二行，并在Properties視圖的ID字段中輸入password。

10. 將Message組件從工具欄拖到第三列第二行，并在For字段中輸入password。

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

按鈕還沒(méi)有添加，但到目前為止，表單看起來(lái)是這樣的：

注意：消息組件只有在具有要顯示的消息時(shí)才會(huì)呈現(xiàn)。

給定登錄表單的布局，您可能希望將輸入框下的按鈕左對(duì)齊，來(lái)使表單看起來(lái)更美觀。如果您在每個(gè)單元格中放置一個(gè)按鈕（一個(gè)在密碼下，一個(gè)在秘密輸入下），它們將不均勻間隔。然而，Panel Grid接受直接添加到它的組件，并將它們逐個(gè)單元格地放在一個(gè)表中。要將兩個(gè)按鈕組合在一起并將它們放置在輸入字段下，需要使用panelGroup。

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

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

13. 將Panel Group組件拖到輸入字段下面的單元格中，將兩個(gè)Command Button組件拖到Panel Group中，并在Properties面板中各自的Value字段中輸入Login和Clear。

注意：沒(méi)有必要在消息組件下添加空組件。

頁(yè)面的設(shè)計(jì)部分已經(jīng)完成，并且讓您對(duì)設(shè)計(jì)器的工作方式有了一個(gè)很好的了解。當(dāng)然，如果您正在構(gòu)建一個(gè)完整的JSF應(yīng)用程序，則需要將操作處理程序分配給按鈕，并將值綁定分配給輸入字段，以確保托管bean正確地支持本頁(yè)上的值。

四、資源

關(guān)于慧都科技

慧都是?家?業(yè)數(shù)字化解決?案公司，專(zhuān)注于軟件、?油與?業(yè)領(lǐng)域，以深?的業(yè)務(wù)理解和?業(yè)經(jīng)驗(yàn)，幫助企業(yè)實(shí)現(xiàn)智能化轉(zhuǎn)型與持續(xù)競(jìng)爭(zhēng)優(yōu)勢(shì)。

慧都科技是MyEclipse的中國(guó)區(qū)的合作伙伴，MyEclipse作為知名的Java開(kāi)發(fā)工具，通過(guò)集成Spring、Hibernate、Maven等主流框架及數(shù)據(jù)庫(kù)工具，助力企業(yè)高效構(gòu)建、調(diào)試與部署全棧應(yīng)用，并支持從傳統(tǒng)Java EE向現(xiàn)代Web技術(shù)的無(wú)縫遷移。