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

• 創(chuàng)建一個JSF項目
• 創(chuàng)建一個新的JSF頁面
• 設計JSF頁面

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

MyEclipse技術交流群：1041265693 歡迎一起進群討論

三、設計一個登錄表單

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

需要注意的一些重要標簽組如下所示。在設計頁面時，有一些最常用的標簽集，使用這些項可將登錄表單拖放到頁面上。

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

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

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

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

將Panel Grid（面板網(wǎng)格）添加到頁面時，設計器會自動向其添加四個示例組件。

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àn)。

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

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

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

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

注意：沒有必要在消息組件下添加空組件。

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

四、資源

關于慧都科技

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

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