創建 JSF Web 項目和頁面模板（1）

2019-11-18 12:52:34

字體：大中小

來源：轉載

供稿：網友

　　引言
　　一年以來，java Server Faces 是 J2EE Web 開發方面最值得期待的技術之一。隨著 WebSphere Studio V5.1.1 的發行，Java Server Faces 已經出現了。Java Server Faces (JSF) 提供了令人興奮的可視化開發 J2EE Web 應用程序的新的開發環境。假如沒有 JSF，開發人員必須書寫處理幾乎所有用戶和應用程序之間的交互的代碼。非 JSF Web 應用程序使用 Html 控件來處理用戶輸入，但是由于 HTML 控件本身沒有任何“智能”，，因此開發人員必須編寫代碼來處理所有的錯誤、輸入驗證、字符串轉換和格式化、頁面流等等。JSF 是一個為開發人員提供這些用戶交互的 UI 框架，它可以大大簡化交互式 Web 應用程序的開發。JSF 提供的 UI 框架由 UI 組件和運行時組成，運行時負責把這些組件呈現給客戶端并治理頁面的生命周期（錯誤、驗證器、導航等等）。
　　
　　本文是這一系列文章（包括 5 個部分）的第一部分，旨在給讀者提供使用這個令人興奮的新特性的實際操作經驗。這個系列將包括：
　　
　　第 1 部分：創建 JSF Web 項目和頁面模板。
　　第 2 部分：創建 JSF 提交表單.
　　第 3 部分：創建通過 Web Data Objects（WDO —— 很快就會變成 SDO：Service Data Objects）訪問數據的 JSF 應用程序。
　　第 4 部分：利用 Action Handlers 和 JavaBean Data 組件集成 JSF 應用程序與 EnterPRise Java Bean。
　　第 5 部分：利用 Web Service Proxy 組件創建 JSF Web 服務客戶端。
　　這些練習將會展示 JSF 的快速應用程序開發（Rapid application Development，RAD）特性。利用 WebSphere Studio Web 透視圖，開發人員可以把 Faces 組件簡單地拖到 jsp 頁面上。這些控件是如此之豐富，使得開發人員不需要了解 Java 就能夠構建 JSF 應用程序。
　　
　　在本文中，我們將創建 JSF Web 項目并利用 Faces 組件設計頁面模板。頁面模板提供了簡單的方法來達到在多個 Web 頁面上應用一致的風格的目的。本系列的所有五個部分是相互關聯的。讀者應該熟悉 WebSphere Studio 和開發 JSP 應用程序。本文的材料可以從文章底部下載。
　　
　　因為 JSF 規范還不是最終版，所以 WebSphere Studio V5.1.1 中的 JSF 工具僅作為技術預演提供。只有在 JSF 規范最終完成并且 IBM 已經發布了支持該規范的 WebSphere Studio 版本的情況下，才應該進行應用程序產品的開發。
　　
　　創建 JSF Web 項目
　　在這一部分中，我們將創建 Web 項目并使它支持 JSF，這將把全部所需的庫都添加到我們的 Web 項目中。
　　
　　打開 WebSphere Studio。
　　啟動 WebSphere Studio Application Developer Version 5.1.1。假如您禁用了文本框特征，您可以通過在命令行設置 -setworkspace 參數來設置它。
　　將目錄設置為 C:/JSFLab/workspace。轉到 J2EE 透視圖。
　　現在，我們將創建 Web 應用程序。在創建的過程中，我們將啟用應用程序對 JSF 開發的支持。
　　轉到 J2EE Hierarchy 視圖。右鍵單擊 Web Modules 并選擇 New => Dynamic Web Project。（圖 1）
　　圖 1. 創建 Web 項目
　　　創建 JSF Web 項目和頁面模板（1）（圖一）

　　這將打開 Dynamic Web Project 向導。對于 Project Name，輸入 PersonalTradeJSF。單擊 configure advanced options 并選擇 Next。（圖 2）
　　
　　圖 2. 配置高級選項
　　　創建 JSF Web 項目和頁面模板（1）（圖二）

　　在下一個頁面中，將 EAR Project 的名稱設置為 StockSystemEAR。（假如不指定名稱，將會產生一個 EAR 文件。）對于 Context root，輸入 pts。確保 J2EE level 是 1.3。選擇 Next。（圖 3）
　　圖 3. EAR 文件和上下文根
　　　創建 JSF Web 項目和頁面模板（1）（圖三）

　　“Features Page” 對話框列出了可以添加到 Web 應用程序的特征。選擇下列特征：（當使用 Faces 工具時，會自動添加　Faces 支持。）（圖 4）
　　Add Faces Base Components
　　Default style sheet (CSS file)
　　WDO Relational database runtime
　　JSP Tag Libraries
　　按一下 Finish。
　　圖 4. Web 特征
　　　創建 JSF Web 項目和頁面模板（1）（圖四）

　　導入一些應用程序所需的圖像。
　　切換到 Project Navigator 視圖。展開 PersonalTradeJSF，右鍵單擊 WebContent 文件夾，然后從 Context Menu 中選擇 Import。（圖 5）
　　圖 5. Import 菜單
　　　創建 JSF Web 項目和頁面模板（1）（圖五）

　　選擇 File System，然后選擇 Next。
　　定位到 C:/JSFArticleSeries/Part1/WebContent，展開 WebContent 然后選擇 theme 復選框。確保指定 Into folder 為 PersonalTradeJSF/WebContent 并且選中了 Create selected folders only。選擇 Finish。（圖 6）
　　圖 6. 導入 Web 內容
　　　創建 JSF Web 項目和頁面模板（1）（圖六）

　　現在 theme 文件夾中會有一些 gif 文件，如圖 7 所示。
　　圖 7. 導入的 Web 內容
　　　創建 JSF Web 項目和頁面模板（1）（圖七）

　　
　　利用 Faces 組件創建頁面模板
　　使 Web 頁面保持一致的外觀和風格是一種常見并可取的做法。WebSphere Studio 利用頁面模板的概念來達到這個目的。JSF 工具可以用來構建通用的頁面模板，需要遵循下列步驟：
　　
　　首先，我們需要為其余的 JSF 頁面創建一個頁面模板文件。
　　假如您不在 Web 透視圖中，現在就轉到它。在 Project Navigator 中，展開 PersonalTradeJSF 項目。右鍵單擊 WebContent 文件夾。選擇 New => Page Template File，如圖 8 所示。
　　圖 8. 創建頁面模板文件
　　　創建 JSF Web 項目和頁面模板（1）（圖八）

　　在“New Page Template” 對話框中輸入或選擇下列值（圖 9）：
　　Folder：/PersonalTraseJSF/WebContent
　　File Name：StockPageTemplate
　　Model：Template Containing Faces Component
　　選擇 Finish。
　　圖 9. Page Template 向導
　　　創建 JSF Web 項目和頁面模板（1）（圖九）

　　頁面模板將會在編輯窗口中打開。在彈出對話框要求至少輸入一個 Content Area 時，選擇 OK（圖 10），因為馬上會添加一個。假如頁面模板沒有打開，您可以在 WebContent 文件夾中找到它，如圖 11 所示。
　　圖 10. Content Area 警告
　　創建 JSF Web 項目和頁面模板（1）（圖十）