![关闭 [x]](http://dw1.s81c.com/i/c.gif){kind=small}
这个系列由 5 部分组成，第一部分首先使用 Java Server Faces（JSF）进行一系列实际操作练习，JSF 具有可视化开发J2EE Web 应用程序这个令人兴奋的新特征。
一年以来，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 版本的情况下，才应该进行应用程序产品的开发。
在这一部分中，我们将创建 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文件和上下文根
- “FeaturesPage” 对话框列出了可以添加到 Web 应用程序的特征。选择下列特征：（当使用 Faces 工具时，会自动添加 Faces 支持。）（图 4）
- Add Faces Base Components
- Default style sheet (CSS file)
- WDO Relational database runtime
- JSP Tag Libraries
图 4. Web 特征
- 转到 J2EE Hierarchy 视图。右键单击
Web Modules并选择
New => Dynamic Web Project。（图 1）
- 导入一些应用程序所需的图像。
- 切换到 Project Navigator 视图。展开 PersonalTradeJSF，右键单击 WebContent文件夹，然后从 Context Menu 中选择 Import。（图 5）
- 选择 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 内容
使 Web页面保持一致的外观和风格是一种常见并可取的做法。WebSphere Studio 利用页面模板的概念来达到这个目的。JSF工具可以用来构建通用的页面模板，需要遵循下列步骤：
- 首先，我们需要为其余的JSF 页面创建一个页面模板文件。
- 如果您不在 Web 透视图中，现在就转到它。在Project Navigator 中，展开
PersonalTradeJSF项目。右键单击 WebContent文件夹。选择
New => Page Template File，如图 8所示。
图 8. 创建页面模板文件
- 在“New PageTemplate” 对话框中输入或选择下列值（图 9）：
- Folder： /PersonalTraseJSF/WebContent
- File Name：
StockPageTemplate - Model： Template Containing Faces Component
图 9. Page Template 向导
- 页面模板将会在编辑窗口中打开。在弹出对话框要求至少输入一个 Content Area 时，选择
OK（图 10），因为立刻会添加一个。如果页面模板没有打开，您可以在
WebContent文件夹中找到它，如图 11 所示。
图 10. Content Area 警告
图 11. 新创建的页面模板
- 如果您不在 Web 透视图中，现在就转到它。在Project Navigator 中，展开
PersonalTradeJSF项目。右键单击 WebContent文件夹。选择
New => Page Template File，如图 8所示。
- 现在，我们将会第一次看到选项板中的Faces 组件，并且把一些可视组件拖到 StockTemplate 上。
- 如果您不在 Web 透视图中，现在就转到它。确保
StockTemplate.jtpl是打开的。您将会在工作台的右面看到 Palette。Faces Components 部分包括标准的 JSF 组件以及一些 IBM 扩展组件。展开 Faces Components部分，然后选择 Panel-Group Box组件。（图 12）
图 12.可视选项板
- 把Panel-Group Box 组件拖到空白的
StockTemplate.jtpl上，如图 13 所示。如果 JTPL 上有一些文本，则在拖动组件之前将其删除掉。将会显示一个对话框，要求您选择组件的类型。选择 List，如图14 所示。
图 13. 把组件拖到设计视图中
- 该面板允许 Web 开发人员并排布置组件。因此，我们将把两个图像拖到面板上。从Faces 面板（图 15）中选择
Image组件并把它拖到List 面板上。
图 15. Image组件
- 重复上述步骤，使两个图像并列，如图16 所示。
图 16. Panel 组件中的 Image 组件
- 可以通过添加属性来自定义组件。选择第一个图像然后转到左下角。这将会激活属性视图，其中应该包括Web 页面上所选项（在本例中为图像）的属性信息。选择File 文本框后面的
Browse按钮，如图 17 所示。
图 17. 选择图像
- 展开 Web 应用程序，一直到 theme 文件夹，然后选择
tradebanner1.gif。（图 18）
图 18. 选择图像
- 将会显示如图19 中所示的页面。接下来，在 JTPL 页面上，选择 section image组件。
图 19. tradebanner1 图像
- 为了本次练习的目的，转到 Attribute 视图，然后删除file 名称字段中的
/pts/，如图 20 所示，这样，最后得到的相对路径如图 21 所示。（进行此修改的目的是避免工具的 Beta版本工具中关于绝对路径名和页面模板的错误；否则，将不能正确解析tradebanner1.gif。）
图20. 使用本次练习中的相对路径
图 21. 相对路径结果
- 返回到属性页面并找到
tradebanner2.gif（图 22），记得改成相对路径。
图 22. 第二个图像的重复
- 两个图像之间将会有一个不必要的空白区。可以通过编辑面板框的属性来解决这个问题。回到属性框，我们需要显示面板的属性。由于图像是位于面板中的，所以我们可以利用如图23 所示的下拉箭头来选择面板并编辑它的属性。选择
HX:PANEL_BOX，如下所示。
图 23. 面板属性
- 选择
All标签 （图 24）。输入 border、cellpadding 和 cellspacing 的值0。
图 24. border 的面板属性
- 返回Web 模板，把光标放在面板下，然后按【
Enter】来添加一行。在 Palette 窗口，展开
HTML Tags部分，然后选择
Horizontal Rule（图 25）。
图 25. 从 HTML 标签选项板中选择 HR
- 把
Horizontal Rule属性拖到图像的下面，如图 26 所示。
图 26. Web特征
- 接下来，展开选项板中的 Page Template部分，然后选择 Content Area（图 27）。当创建了一个 JSP 之后，内容区就变成 JSP 中可编辑的部分。每个模板至少需要一个内容区。对模板的任何修改都将影响到使用该模板的所有JSP。把内容区拖到水平条的下面。
- 将会出现如图28 所示的弹出框。保留缺省名称并按一下
OK。
图 28. 内容区
- 在模板中输入另外一片空白，从 HTML Tags 选项板中拖动另一个水平条，然后添加另外的空白（图29）。
图 29. 添加另一个 HR
- 返回到 Palette 窗口，选择
Faces Component => Panel - Group Box，如图30 所示。
图 30. Panel -- Group Box
把 Panel - Group Box拖到页面的底部。此时，选择 Grid，如图31 所示。Grid 以叠放的方式组织组件。
图 31.选择 Grid
- 从选项板选择 Faces Components 下的
Image组件（图 32），然后把它拖到页面的底部。
图32. Image组件
图 33. 面板中的图像
- 高亮显示图像框，然后转到 Attribute 视图（图34）。像前面一样选择 File 文本框后的
Browse。
图 34. 浏览图像
- 选择
WEBSPHERE_22P.GIF，如图35 所示。（记得更改文件名以使用相对路径。）
图 35.选择 WEBSPHERE_22P.GIF
- 模板应该看起来如图36 所示。
- 最后，我们需要更新最后一个属性。页面中的所有组件都嵌入到一个
Body标签中。转到属性视图并从下拉菜单中选择 Body（图 37）。
图 37. 从 Attribute 视图中选择 BODY
- 单击Image 字段后面的下拉框，然后选择
Browse（图 38）。
图 38. 浏览图像
- 选择
theme文件夹中的 grid.gif（图 39）。
图 39.选择 grid.gif
- 最后得到的页面应该看起来如图40 所示。
图 40. 最后得到的页面
- 选择 Preview标签查看最后的结果，如图 41 所示。
- 如果您不在 Web 透视图中，现在就转到它。确保
保存并关闭模板文件。
在本文中，我们介绍了 WebSphere Studio Version 5.1.1 提供的新 Java Server Faces 工具，构建了一个 Web 项目，然后利用 Faces 组件创建了一个页面模板。在本系列的下一部分，我们将创建 JSF 提交表单并利用 WebSphere Universal 测试环境来测试它们。
作者非常感谢 Beverly DeWitt对本文作出的贡献。
| 名字 | 大小 | 下载方法 |
|---|---|---|
| JSFArticleSeriesP1.zip | 50 KB | HTTP |
标签
使用 滑动条 调节标签的数量。
热门标签 显示了特定专区最受欢迎的标签（例如 Java technology，Linux，WebSphere）。
我的标签 显示了特定专区您标记的标签（例如 Java technology，Linux，WebSphere）。