MyEclipse開發Java EE應用教程：使用Visual JSF編輯器設計JSP

一、使用JSF Facet建立一個Web項目

設計器經過在頁面上導入和使用的標記庫識別JSF頁面，所以能夠將Designer與其餘JSF頁面格式一塊兒使用。

• 選擇File > New > Web Project。

• 在「Project name」字段中鍵入SampleJSFProject，接受默認值，而後單擊「Finish」。注意：本教程使用JavaEE 5版本。可是，在建立新項目時，可使用JavaEE 6或7。

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

• 單擊下一步查看實施設置，而後單擊完成以接受默認設置。

二、建立一個JSF頁面

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

• 從「Template」中選擇要使用的默認JSF模板，而後單擊Finish。該頁面會自動打開，而且在面板中提供帶有JSF控件的JSP設計器。

三、設計登陸表單

• 單擊「Expand」按鈕能夠在Visual Designer中打開工具選項板。調色板從構建路徑中讀取標記庫並加載它們，這樣您就可使用拖放特性來構建頁面。

調色板從構建路徑中讀取標記庫並加載它們，這樣您就可使用拖放特性來構建頁面。

下圖是一些須要注意的重要標記組。在設計頁面時，有最經常使用的一組標記。使用這些項目可將登陸表單拖放到頁面上。

• 選擇默認文本並將其更改成「Welcome to My Application」。

• 在選用板中展開JSF HTML，而後將「Form」拖動到文本下方的頁面上。

典型的登陸表單的佈局由用戶名、密碼和登陸按鈕組成。爲了很好地佈置這些項目，還須要一個3x2的表，可是若是要包含用於存儲登陸錯誤下載myeclipse消息的空間，則可使用3x3的表。面板網格組件以表格形式佈置內容。

• 將「Panel Grid」拖到窗體中，而後在「Properties」視圖的「Columns」字段中鍵入3。面板網格包含四個樣本項。當添加/刪除項目時，佈局會隨之調整。

將面板網格添加到頁面後，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。

• 從網格中刪除示例項目。

還沒有添加按鈕，但到目前爲止，該表單以下所示：

注意：僅當有消息要顯示時，消息組件纔會呈現。

爲讓表單看起來更漂亮，能夠對輸入框下的按鈕設置爲左對齊。若是在每一個單元格中放置一個按鈕(一個在Password下，一個在Secret Input下)，它們的間隔將是不均勻的。然而Panel Grid將組件直接添加到其中，並將它們逐個單元地放在表中。要將兩個按鈕組合在一塊兒並將它們置於輸入字段之下，須要使用panelGroup。

首先，在「Password」標籤下須要一個空組件。其次，您須要在輸入字段下添加一個panelGroup。而後在panelGroup內，添加兩個按鈕。

• 將「Output Text」組件拖到密碼標籤下方的單元格中，而後在「Properties」視圖中刪除「Value」字段的內容。這將建立一個空單元格。

• 將「Panel Group」組件拖動到輸入字段下方的單元格中。將兩個命令按鈕組件拖到面板組中，並在Properties面板中鍵入Login和Clear到相應的值字段中。

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

頁面的設計部分已經完成。經過以上內容，您應該瞭解了Designer的工做原理myeclipse中文網。若是您要構建完整的JSF應用程序，則須要爲按鈕分配操做處理程序，並將值綁定到輸入字段，以確保bean正確地支持此頁面上的值。