在 WebLogic Workshop 中使用 ICEfaces 入门

作者：Tom Stamm
07/16/2007

摘要

ICEsoft的 ICEfaces 框架提供了一种开发支持Ajax的标准JavaServer Faces (JSF)应用程序的方法，并且不需要在客户端编写Javascript代码。本文简要介绍了如何在BEA WebLogic Workshop中使用ICEfaces增件工具。文章涵盖了ICEfaces工具的安装，如何创建支持ICEfaces的项目，以及如何使用ICEfaces和JSF轻松地创建支持Ajax的应用程序以显示输入数据。ICEfaces的本质是将Ajax功能添加到常规JSF编程模型中，因此阅读本文需要对JSF有一定的了解。

简介

ICEfaces框架构建于JSF组件模型之上，它提供了一种以服务器为中心的开发方式，用于创建具有各种功能的Internet应用程序。在常规JSF组件的生命周期中，需要处理一些事件并创建一些组件，最终会在服务上创建一个HTML DOM用以呈现页面。使用ICEfaces时，服务器组件可以响应操作并只修改DOM中的一部分并将其呈现出来。然后，不必重新加载整个页面，经过修改的DOM部分将发回客户端，只有页面中相应的部分才会得到更新。这可以通过客户机发起的异步请求，或者通过服务器的“推送（push）”技术来实现。使用FireBug之类的Javascript调试程序，我们可以在这些更新过程中查看消息的来回传递情况。ICEfaces提供了所有核心JSF组件的实现，以及一些其他利用到异步更新的实现。在这篇教程中，我们将使用到一个选项卡控件、一个可以实现动态排序和分页的数据表格和一个模式弹出对话框。图1显示了最终完成的应用程序：

Datatable-Runtime
图1.示例用户数据表格

安装ICEfaces支持

ICEfaces工具提供在WebLogic Workshop 10.1的一个更新中，必须通过一个Eclipse更新单独安装。为此，运行Workshop中的软件更新工具（可以在Help->Software Updates-> Find and Install中找到）。选择“Search for new features to install”并单击Next。单击New Remote Site并输入以下URL：http://dev2dev.bea.com/eclipse/icefaces-tooling/。确保选择的是新站点，然后单击Finish。在下一个向导中，确保选择了归档文件，然后单击Next。接受许可证条款并单击Next，然后单击Finish。然后会出现Feature Verification窗口，请单击Install All。更新完成之后，将弹出提示框询问是否重新启动Workshop以使改动生效。

注意：由于这个更新加入了一个片断到已有插件中，因此Workshop必须使用-clean选项进行重启。可以在用于启动Workshop的命令行中加入这个选项，也可以将其添加到<BEA Home>/workshop_10.1/workshop4WP/workshop4WP.ini文件中的-vmargs一行前面。

创建一个支持ICEfaces的项目

ICEfaces工具更新包含有一个WTP项目面（project facet），它将ICEfaces运行时库安装到一个项目中，并对项目的配置文件进行必要的修改。创建支持ICEfaces的项目最简单的方法是运行New Dynamic Web Project向导（选择File->New->Project...，然后选择Web/Dynamic Web Project作为项目名称）。输入项目名称，并在Configurations下拉菜单中选择ICEfaces Project或ICEfaces Project with WLS 10.0。后一个选项将使用WebLogic库模块完成所有处理，除了ICEfaces本身之外。单击Next查看面（facet）的选择，然后再单击Next查看各个库的选择。对于ICEfaces，我们需要单击Add...按钮并从BEA网站下载最新的ICEfaces库。最后，单击Finish创建项目。

现在可以打开生成的web.xml，查看为支持ICEfaces所做的一些修改；尤为明显的是，其中添加了一些Persistent Faces Servlet和Blocking Servlet条目。这些条目分别可以提供服务器端的DOM呈现和ICEfaces运行时所使用的异步通信。其中还添加了一个映射，这样匹配模式*.iface的请求将路由到ICEfaces servlet而不是常规的JSF servlet。可以将*.iface更新为*.faces或*.jsf，并且可以移除Sun JSF servlet，从而所有面的请求都将使用ICEfaces进行处理。这篇教程将使用默认的配置和.iface扩展。

ICEfaces还要求JSP在导入标记库时使用XML名称空间语法，而不是JSP的taglib导入命令。ICEfaces运行时无法解析JSP命令，因此如果遇到此类情况将抛出错误。比如说，新Web应用程序中的默认页面（/WebContent/pages/welcome.jsp）中含有以下打开标记：

<f:view xmlns:f="http://java.sun.com/jsf/core"

        xmlns:h="http://java.sun.com/jsf/html"

        xmlns:ice="http://www.icesoft.com/icefaces/component">

可以使用类似的方式导入其他的标记库。JSP编辑器目前只生成JSP taglib导入命令，因此如果要从调色板中还未导入的库中拖放某个标记出来，那么必须移除生成的导入命令并添加一个等价的XML名称空间声明。在这个项目中创建新JSP时，可以选择新JSP向导中的New ICEfaces JSP模板使用这种语法生成各种页面。

至此，您可以运行/WebContent/index.jsp，该页面将重定向到/WebContent/pages/welcome.iface，因此会使用ICEfaces servlet执行欢迎页面。欢迎页面中的默认内容毫无新意可言，因此我们将添加一些其他的功能。

使用ICEfaces显示数据

首先，我们需要添加数据表格。这与JSF数据表格极其类似，而且实际上ICEfaces的dataTable标记是JSF HTML dataTable标记的一个超集。然而，通过使用ICEfaces扩展和一些其他的标记，这个表格将具有排序和页面切换的特性，而不需要对整个页面进行更新。

要支持这个示例的开发，首先我们必须将一些文件(下载部分提供了 imports.zip 文件的下载) 导入到项目中。在Project Explorer中右击该项目，打开Import->Import...选项并选择Archive File。在新出现的窗口中，浏览到imports.zip并选择所有的文件，确保Into Folder中的文本框显示的是正确的项目名称，然后单击Finish。这样会将beans和businessObjects导入到该项目的src目录中，并且一些样式表和图像导入到WebContent目录中。

businessObjects包中的类是表示Customer数据的简单的POJO。beans.CustomerBean类将被注册为一个JSF bean，并提供了一些示例Customer数据和一些应用程序控制逻辑。在实际应用程序中，这个bean可以查询数据库中的Customer数据，不过此处我们是硬编码的。导入源代码之后，必须在面配置（faces configuration）文件中注册CustomerBean。为此，打开/WebContent/WEB-INF/config/faces-config.xml并右击Managed Beans，然后选择New Managed Bean。输入customers作为bean的名称，将作用域修改为session并输入beans.CustomerBean作为bean的类型。单击Finish，然后保存文件。

现在，打开欢迎页面（/WebContent/pages/welcome.jsp）。对于这个示例，所有的功能都将包含在该页面中，与服务器的所有交互都将异步地执行，页面初次载入后就不再需要刷新。首先，删除body标记中的所有内容，这样我们便可以从一个空页面开始。对于使用ICEfaces小部件的页面，其样式表引用是一个关键因素：

<link href="./xmlhttp/css/xp/xp.css"
      rel="stylesheet"
      type="text/css" />

这个样式表是ICEface运行时的一部分，用于为一些小部件提供默认的样式。由于它是运行时的一部分，因此我们不需要将它复制到各个ICEfaces Web应用程序中。大多数标记都有style和styleClass属性，因此我们可以覆盖其默认样式，但是这个示例仍然坚持使用默认样式。注意，应用程序还需要xmlhttp servlet的支持，它也是ICEfaces运行时的一部分。由于Workshop工具并不清楚这个servlet的访问权限，因此会弹出一个警告框提示无法找到样式表；我们可以安全地忽略这一点。

这个应用程序的接口将有两个选项卡：一选项卡个用于显示数据，另一个选项卡包含一个用于添加数据的表单。ICEfaces panelTabSet标记提供了该表单的实现。panelTabSet标记必须封装在一个form标记中，因此首先从调色板的ICEfaces区域拖动一个form标记到页面上。这个表单不需要id或任何其他的属性。然后，将panelTabSet标记拖放到表单中。这时将弹出一个对话框。单击“Tab items”旁边的“...”按钮添加选项卡。我们将需要一个id标记为viewTab的View选项卡和一个id标记为addTab的Add选项卡。同时，设置样式类为componentPanelTabSetLayout。最终的结果类似于以下代码：

<ice:form>

        <ice:panelTabSet var=""

                         styleClass="componentPanelTabSetLayout">

                <ice:panelTab id="viewTab" label="View">

                </ice:panelTab>

                <ice:panelTab id="addTab" label="Add">

                </ice:panelTab>

        </ice:panelTabSet>

</ice:form>

可以在各个选项卡中添加一些文本，然后运行页面查看运行是否正常。确保是将页面作为/pages/welcome.iface调用或者运行/index.jsp，从而可以确定是由ICEfaces servlet执行的。

现在，我们将在第一个选项卡中添加一个数据表，该数据表将绑定后备bean（backing bean）所提供的Customer对象列表中的数据。表格中将包含一个可点击的头部，用于对数据进行排序，还有一个分页控件（paginator control）用于移动各页中的数据。最终结果可以从下载部分提供的project.zip文件中获得。可以将完整的项目导入执行过clean操作的工作空间中。要执行此操作，可以打开File->Import并选择“Existing Projects into Workspace”，然后使用“Select archive file”选项选择下载的zip文件。本节将带您了解该项目中的一些重点内容。

要创建表格，请将dataTable标记拖放到tabset中的第一个选项卡上。这时会弹出一个表格对话框，选择customers JSF managed bean的customers属性为可枚举类型（enumerable），然后将迭代变量命名为“customer”。对话框将自动识别其类型为businessObjects.Customer。就是这个变量将在表格列中被引用。单击Next并选择要显示的first、id和last属性，然后单击Next对它们进行排序。这样将生成一个基本的表格，类似于一个无格式的JSF dataTable 。如果愿意的话，还可以选择显示一些地址属性。使用智能编辑器（smart editor）将表格的id设置为custTable、以便稍后引用，并将rows属性设置为5以避免一次显示太多行的数据。

现在可以加入排序功能了。拖放一个commandSortHeader标记到id列的header facet中，调用列名称“id”并单击“arrow”复选框以指示排序的顺序。接下来，将带有列名称的outputText标记移动到commandSortHeader标记中。然后，对last列执行同样的步骤，并将其命名为“LastName”，这样表格将可以根据用户id和姓氏（last name）进行排序。ICEfaces要依靠后备bean才能启用排序功能；bean将跟踪哪一列中的数据需要排序，并能知道如何对基于该列的数据进行排序以及排序的方向。数据表格访问customers属性时，将返回一个预排序的列表。在本例中，bean只对一个内部列表进行了排序；如果执行的是数据库查询操作，则可以指定对查询结果进行排序。要实现这一目的，我们需要将数据表格中的sortColumn属性与后备bean中的sortColumnName属性绑定在一起。为此，可以在智能编辑器中单击各个属性旁边的按钮，并浏览到相应的bean属性。