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

  購買MyEclipse

1、使用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。

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

2、創建一個JSF頁面

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

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

3、設計登錄表單

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

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

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

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

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

典型的登錄表單的布局由用戶名、密碼和登錄按鈕組成。為了很好地布置這些項目，還需要一個3x2的表，但是如果要包含用于存儲登錄錯誤消息的空間，則可以使用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的工作原理。如果您要構建完整的JSF應用程序，則需要為按鈕分配操作處理程序，并將值綁定到輸入字段，以確保托管bean正確地支持此頁面上的值。

慧都16周年·技術服務月，軟件商城優惠券不限量免費領取，購MyEclipse/CodeMix享折上折>>>

想進一步了解MyEclipse？知你所需，解你所惑！

想與更多人聊MyEclipse？加入MyEclipse中國（官方2）：742336981暢所欲言吧！

想及時獲取MyEclipse資訊？掃描下方二維碼，MyEclips信息跟你走！