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

• 創建一個JSF項目
• 創建一個新的JSF頁面
• 設計JSF頁面

該功能在中可用。

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

在上文中（點擊這里回顧>>），我們主要為大家介紹了如何用JSF Facet創建一個Web項目、如何創建JSF頁面等，本文將繼續介紹如何設計登錄表單頁面。

三、設計登錄表單

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

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

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

3. 在調色板中展開JSF HTML，并將Form拖到文本下面的頁面上。

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

將Panel Grid拖到表單中，并在Properties視圖的Columns字段中鍵入3。面板網格包含四個示例項目，當您添加/刪除項目時，布局將進行調整。

4. 當Panel Grid（面板網格）添加到頁面時，設計器會自動向其添加四個示例組件。

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. 從網格中刪除示例項目。

按鈕還沒有添加，但到目前為止，表單看起來是這樣的：

注意：message組件只有在具有要顯示的消息時才會呈現。

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

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

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

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

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

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

四、資源