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

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

該功能在中可用。

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

在上文中（點(diǎn)擊這里回顧>>），我們主要為大家介紹了如何用JSF Facet創(chuàng)建一個(gè)Web項(xiàng)目、如何創(chuàng)建JSF頁面等，本文將繼續(xù)介紹如何設(shè)計(jì)登錄表單頁面。

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

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

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

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

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

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

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

4. 當(dāng)Panel Grid（面板網(wǎng)格）添加到頁面時(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)目。

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

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

給定登錄表單的布局，您可能希望將輸入框下的按鈕左對齊，來使表單看起來更美觀。如果您在每個(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。

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

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

四、資源