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

創(chuàng)新互聯(lián)建站成立于2013年，公司以成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、系統(tǒng)開發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶上千多家，涉及國內(nèi)多個省份客戶。擁有多年網(wǎng)站建設(shè)開發(fā)經(jīng)驗。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計、宣傳推廣等服務(wù)。 通過專業(yè)的設(shè)計、獨特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。

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

• 選擇File > New > Web Project。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

頁面的設(shè)計部分已經(jīng)完成。通過以上內(nèi)容，您應(yīng)該了解了Designer的工作原理myeclipse中文網(wǎng)。如果您要構(gòu)建完整的JSF應(yīng)用程序，則需要為按鈕分配操作處理程序，并將值綁定到輸入字段，以確保bean正確地支持此頁面上的值。