本文列举了几种IBM WebSphere Portal 7下开发支持AJAX的JSF Portlet的方法。 需实现的Portlet界面包括两个元素: 一个列表框和一个文本输出框,列表框包括两个选项。 列表框选项变化会触发AJAX调用以刷新文本输出框.
方法1 - 使用IBM JSF Portlet bridge 1.2和IBM JSF Extension Components
IBM WebSphere Portal 7提供支持JSF 1.2的JSF Portlet bridge 1.2, JSF 1.2本身并不提供AJAX支持, 所以需要使用IBM JSF Extension组件库来实现AJAX功能, 代码示例如下:
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%> <%@taglib uri="http://www.ibm.com/jsf/html_extended" prefix="hx"%> <%@taglib uri="http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model" prefix="portlet-client-model"%> <%@page language="java" contentType="text/html" pageEncoding="ISO-8859-1" session="false"%><portlet:defineObjects /> <portlet-client-model:init> <portlet-client-model:require module="ibm.portal.xml.*" /> <portlet-client-model:require module="ibm.portal.portlet.*" /> </portlet-client-model:init> <f:view> <hx:scriptCollector id="scriptCollector1"> <h:form styleClass="form" id="form1"> <h:selectOneListbox id="listbox1"> <f:selectItem itemLabel="Label1" itemValue="Value1" id="selectItem1" /> <f:selectItem itemLabel="Label2" itemValue="Value2" id="selectItem2" /> </h:selectOneListbox> <hx:behavior event="onchange" target="listbox1" behaviorAction="get" targetAction="group1"></hx:behavior> </h:form> <h:panelGroup styleClass="panelGroup" id="group1"> <h:outputText styleClass="outputText" id="text1" value="Hello, #{param.listbox1} "></h:outputText> </h:panelGroup> <hx:ajaxRefreshRequest target="group1" id="ajaxRefreshRequest1" params="listbox1"> </hx:ajaxRefreshRequest> </hx:scriptCollector> </f:view>
方法2 - 使用JSF 2.0 Portlet Bridge for IBM WebSphere Portal
IBM在Greenhouse Lotus上提供一个基于MyFaces 2.0的JSF 2.0 Portlet Bridge, 使用JSF 2.0内置AJAX支持的代码示例如下:
<div xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:portlet="http://java.sun.com/portlet_2_0" > <f:view> <h:form> <h:selectOneListbox styleClass="selectOneListbox" id="listbox1" value="#{testBean.text}"> <f:selectItem itemLabel="Label1" itemValue="Value1"/> <f:selectItem itemLabel="Label2" itemValue="Value2"/> <f:ajax render="text1" execute="@this"/> </h:selectOneListbox> <h:outputText id="text1" value="Hello, #{testBean.text} "> </h:outputText> </h:form> </f:view> </div>
方法3 - 使用ICEfaces Enterprise Edition (EE) 3.0
ICEfaces Enterprise Edition 3.0提供支持WebSphere Portal 7的JSF 2.0 Portlet Bridge, 并支持在MyFaces 2.0或Mojarra 2.1上运行上述方法2的代码, 但需要在portlet.xml中增加以下设置。
<container-runtime-option> <name>javax.portlet.renderHeaders</name> <value>true</value> </container-runtime-option>
在WebSphere Portal 7.0.0.2和WAS 7.0.0.19下测试以上三种方法, 结果如下:
方法 | Page Builder theme - SSA | Page Builder theme - CSA | Portal theme - SSA only | 备注 |
IBM JSF Portlet bridge 1.2和IBM JSF Extension Components | 正常运行 | portlet可以显示, 但AJAX不工作, 没有Javascript错误 | 正常运行 | |
使用JSF 2.0 Portlet Bridge for IBM WebSphere Portal (MyFaces 2.0) | 正常运行 | 正常运行 | 正常运行 | 非官方产品, IBM不提供任何支持 |
ICEfaces Enterprise Edition 3.0(MyFaces 2.0/Mojarra 2.1) | 正常运行 | portlet无法显示, Portlet Bridge异常 | portlet可以显示, 但AJAX不工作, Javascript报错 | 需要购买商业许可 |