创建 JSF Web 项目和页面模板（1）

核心提示：引言一年以来，java Server Faces 是 J2EE Web 开发方面最值得期待的技术之一，创建 JSF Web 项目和页面模板（1），随着 WebSphere Studio V5.1.1 的发行，Java Server Faces 已经出现了，假如页面模板没有打开，您可以在 WebContent 文件夹中找

　　引言
　　一年以来，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 项目
　　　
　　这将打开 Dynamic Web Project 向导。对于 Project Name，输入 PersonalTradeJSF。单击 configure advanced options 并选择 Next。（图 2）
　　
　　图 2. 配置高级选项
　　　
　　在下一个页面中，将 EAR Project 的名称设置为 StockSystemEAR。（假如不指定名称，将会产生一个 EAR 文件。）对于 Context root，输入 pts。确保 J2EE level 是 1.3。选择 Next。（图 3）
　　图 3. EAR 文件和上下文根
　　　
　　“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 特征
　　　
　　导入一些应用程序所需的图像。
　　切换到 Project Navigator 视图。展开 PersonalTradeJSF，右键单击 WebContent 文件夹，然后从 Context Menu 中选择 Import。（图 5）
　　图 5. Import 菜单
　　　
　　选择 File System，然后选择 Next。
　　定位到 C:\JSFArticleSeries\Part1\WebContent，展开 WebContent 然后选择 theme 复选框。确保指定 Into folder 为 PersonalTradeJSF\WebContent 并且选中了 Create selected folders only。选择 Finish。（图 6）
　　图 6. 导入 Web 内容
　　　
　　现在 theme 文件夹中会有一些 gif 文件，如图 7 所示。
　　图 7. 导入的 Web 内容
　　　
　　
　　利用 Faces 组件创建页面模板
　　使 Web 页面保持一致的外观和风格是一种常见并可取的做法。WebSphere Studio 利用页面模板的概念来达到这个目的。JSF 工具可以用来构建通用的页面模板，需要遵循下列步骤：
　　
　　首先，我们需要为其余的 JSF 页面创建一个页面模板文件。
　　假如您不在 Web 透视图中，现在就转到它。在 Project Navigator 中，展开 PersonalTradeJSF 项目。右键单击 WebContent 文件夹。选择 New => Page Template File，如图 8 所示。
　　图 8. 创建页面模板文件
　　　
　　在“New Page Template” 对话框中输入或选择下列值（图 9）：
　　Folder：/PersonalTraseJSF/WebContent
　　File Name：StockPageTemplate
　　Model：Template Containing Faces Component
　　选择 Finish。
　　图 9. Page Template 向导
　　　
　　页面模板将会在编辑窗口中打开。在弹出对话框要求至少输入一个 Content Area 时，选择 OK（图 10），因为马上会添加一个。假如页面模板没有打开，您可以在 WebContent 文件夹中找到它，如图 11 所示。
　　图 10. Content Area 警告