级别: 中级 Charu Malhotra, 助理软件工程师, IBM
2009 年 10 月 26 日 本文描述了在 IBM® Rational® Application Developer V7.5 中为在 IBM® WebSphere® Portal V6.1 或更高版本的 IBM WebSphere Portal 服务器上运行的 portlet,以及门户程序所引入的的 Web 2.0 工具支持。本文可以帮助您更好地理解该工具支持,此外还讨论了 Web 2.0 技术的基础知识和优势。
本文向您介绍了怎样利用 IBM® Rational® Application Developer V7.5 中引入的,对于运行在 IBM® WebSphere ® Portal V6.1 上的 portlet 以及门户程序的 Web 2.0 工具支持带来的优势。在一个典型的 portlet 程序中,每一个对服务器的请求都将导致对整个浏览器页面的刷新,这就产生页面的不稳定以及性能缺陷。Web 2.0 技术使您可以创建更动态和更具响应性的程序。该技术通过规划用户界面逻辑,以进行页面设计、导航、聚合,并在用户浏览器中跨 portlet 交流,旨在将 Web 浏览器转化为半个用户。
Rational Application Developer 提供的 Web 2.0 工具支持可以帮助您创建这样的动态和高响应性 portlet 以及门户程序。提供的工具支持使得您可以:
- 使用客户端的点击操作创建交流性的 portlets,这是在 WebSphere Portal V6.1 中引入的新事件图例,以方便 portlets 之间的协作。
- 插入个人菜单以及功能以扩展 Person Menu。
- 使用 portlet 程序的 Ajax 代理。
- 使用客户端的编程模型,来高效地获取 portlet 偏好,执行客户端上的 portlet 状态更改。
本文按顺序讨论了以上四个话题。对于每一个话题,本文从描述一个特定的基于 Web 2.0 技术开始,然后介绍一个简单的例子,展示其工具支持。
适宜的读者人群:portlet 和基于 portal 程序的开发员。
本文的目的:本文描述了怎样开发高效、交流性强、响应性高的 portlet 以及基于 portal 的程序,并探讨了对 Ajax 代理以及客户端编程模型实现工具支持所带来的优势。
使用客户端点击操作来开发交流性强和协作性高的 portlets
点击操作(C2A)事件是 portlets 相互之间交流以及共享信息的一种方式。
点击操作(C2A)
使用 C2A 交付方法,您可以轻松点击一次,就可以将数据从源 portlet 传递给一个或者多个目标 portlets 中。当您点击目标元素时,会显示一个弹出菜单,给出一个与被选择元素相匹配的目标操作的列表。当您选择一个菜单项时,相应的目标就会被激活,而源数据就会传递给它了。在源数据成功传递之后,目标 portlet 就会激发一次操作并显示出结果。
客户端的点击操作
客户端的点击操作是在 WebSphere Portal V6.1 中引入的 C2A 框架的新型实施。它基于 Web 2.0 技术,并使用语义标签来定义源和目标。
语义标签的主要目的是再使用 HTML 文件的正常内容,并使用在 Document Object Model(DOM)分析期间评价的源信息对其进行注解。
语义标签以及 Live Object Framework
客户端的点击操作构建在 Live Object Framework(LOF)的基础之上,它将 C2A 源定义为系统中的活动对象。通过向元素添加指定的类来标记语义标签的根元素,其中元素是由活动对象框架指定的。
LOF 还提供了基本的 DOM 分析以及菜单管理服务。
与早期 C2A 技术相比的优势
与早期 C2A 技术相比,WebSphere Portal 引入的新客户端点击操作技术具有许多的优势。
- IBM 和 Java™Specification Request(JSR)portlets 都可以使用新引入的事件创建图例,而早期的 C2A 技术只能被遵循 IBM Portlet API 的 portlets 使用。
- 它支持客户端的 JavaScript C2A 目标操作以及服务器端操作。例如,当您在源 portlet 中选择一个菜单项时,源数据就会传递给相应的目标,在目标 portlet 上激发的操作,可以是服务器端的操作或者 JavaScript 操作。
- 使用新的客户端点击操作技术,对 C2A 源和目标的评价与执行都可以在浏览器中进行。源和目标的匹配不再需要在服务器上匹配,而且该技术还从服务器上删除了菜单生成代码。这就降低了服务器的负载。
- 只当点击 C2A 源菜单图标时,才会生成菜单标记。
所有这些优势可以造就一个高反应性和高响应性的 UI,而不会产生服务器死循环以及页面不稳定。另外,它会可以产生更高级的用户经验。
术语
图 1 显示了 C2A 构件。表格 1 列出了本文对客户端点击操作介绍时将会用到的术语。
图 1. 客户端的点击操作
表格 1. 术语
| 术语 | 描述 |
|---|
| C2A 源 | 语义上被标记为 C2A 源的类型数据。 | | C2A 目标 | 为特定 C2A 源类型定义的操作。 | | 源 portlet | 包含一个或者多个 C2A 源对象定义的 portlet 。 | | 目标 portlet | 包含一个或者多个 C2A 目标对象定义的 portlet 。(注意:一个 portlet 可以同时是源 portlet 以及目标 portlet。 | | C2A 悬停 UI | 在 C2A 源对象旁边出现的图标,指示有一个与对象相关的菜单。 | | C2A 弹出菜单 | 在您点击 C2A 悬停 UI 时,会出现的菜单。它可能包含了一个可选的菜单头(见于图 1)。 | | 菜单头 | 菜单的顶部区域,C2A 源可能将会在此进行标记。它通常用于描述源对象的信息。 | | Live Object Framework | C2A 作为该框架中的服务来实施。 |
Rational Application Developer 对客户端的点击操作的支持
Rational Application Developer 对客户端的点击操作的支持,提供了像自觉性向导、配置板和菜单栏项、自动代码生成以及潜在数据类型匹配这样的功能。这些功能可以帮助您,尽可能简单地创建支持客户端点击操作的 portlet 程序。
该工具使您能够创建执行以下操作的 portlet :
- 向其他 portlets(源 portlet)发送数据。
- 从其他 portlets 接受数据,然后有根据地升级它自己的视图(目标 portlet)。
一个 portlet 可以同时是源 portlet 和目标 portlet,向一个 portlet 发送数据,并从其他 portlet 接受数据。
范例程序
本文讨论了两种范例程序,以决定客户端点击操作的特性:
- 第一个程序向您展示了怎样从源 portlet 向目标 portlet 发送数据,在接受数据之后,激活目标 portlet 上的简单 JavaScript 操作。
- 第二个程序是传输公司使用的 portlet 程序,以维护顺序和客户的具体信息。在这里将会讨论程序中的五个 portlets 。
-
OrdersPortlet,维护顺序每月的具体信息 。
-
Order DetailsPortlet,它显示了顺序的具体信息。
-
Account DetailsPortlet,它显示了顺序的帐户细节信息。
-
Customer DetailsPortlet,它显示了特定客户的具体信息。
-
Tracking DetailsPortlet,它显示了顺序的追踪具体信息。
在传输程序中,您将会看到 Order Details 和 Tracking Details portlets 是怎样使用客户端的点击操作,来交换数据的。为了响应该操作,服务器端的操作可以在 Tracking Details portlet 上执行。
如果您使用 Rational Application Developer 提供的工具,那么以上的操作将会得到最大程度的简化。
范例程序 1
在这个范例程序中,您可以从源 portlet 传递数据到目标 portlet 。一旦接受到值,目标 portlet 会访问 JavaScript 以在目标portlet 上显示“Hello [your name]”。
图 2. Display Myname 范例
您可以按照以下步骤,来取得上面描述的结果:
- 创建一个新的 portlet 项目(C2A 源)。
- 在 C2A 源 portlet 项目中创建一个新的(C2A 目标 portlet)。
- 使用客户端点击操作使得 C2A 源 portlet 可以向目标 C2A portlet 发送数据。
- 将客户端点击操作菜单头添加到源弹出菜单中。
- 使用客户端点击操作使得 C2A 目标 portlet 可以从源 C2A portlet 接受数据。
- 在 WebSphere Portal 上发布 portlet 程序。
创建一个 C2A Source Portlet 项目。
- 选择 File > New > Project > Portlet Project 并点击 Next。New Portlet Project 向导就会启动。输入以下的信息,如图 3 所示。
- 输入
C2aSource 作为 portlet 的 Project name。
- 选择 WebSphere Portal 6.1作为 TargetRuntime。
- 选择 JSR 168 Portlet(在本例中),JSR 286 Portlet,或者 IBM Portlet 作为 Portlet API。
- 选择 Faces portlet(在本例中),或者 Basicportlet 作为 Portlet type。
- 点击 Next,然后点击 Finish。
图 3. 为新 portlet 项目指定名字和位置
创建 C2aTarget portlet。
在您刚刚创建的 C2A 源 portlet 中,创建一个新的 portlet(C2A 目标)。
- 右击 Project Explorer 中的 C2A 源项目。
- 选择 New > Portlet。这样 New Portlet 向导就会启动了。输入以下的信息,如图 4 所示。
- 输入
C2ATarget 作为 portlet 的 Name。
- 保持 C2ATarget portlet 的 Portlet type 与 C2ASource portlet 相似。
- 点击 Next,然后点击 Finish。
图 4. 为 portlet 新选择一个 portlet 项目
使 C2ASource portlet 能够发送数据
使 C2ASource portlet 能够使用客户端点击操作向 C2ATarget portlet 发送数据
- 双击 C2ASourceView.jsp 以在 Page Designer 中将其打开。
- 在 Palette 视图中选择 PortletDrawer。
- 从配置板中拖拉 Client-Side Click-to-Action Output Property 菜单项到 C2ASourcePortletView.jsp 中,如图 5 所示。
图 5. 拖拉配置项以设计 tab
- 您还可以从菜单项中选择 Insert > Portlet > Client-Side Click-to-Action Output Property,如图 6 所示。
图 6. 选择菜单命令
接着就会显示 Insert Client-Side Click-to-Action Output Property 向导。
您需要向以下两个区域输入信息,以使得 portlet 可以发送数据:
-
Data Type URI:输入描述数据格式和语义的名字
-
Value:传递给目标操作的实际数据
按照以下步骤实现这一点,如图 7 所示:
- 在 Data Type URI 区域中指定
http://C2Asource#Myname。
- 在 Value 区域中指定您的名字(或者您想要向目标 portlet 发送的值),然后点击 Finish。
图 7. 描述 portlet 可以传递数据的类型
- 保存 C2ASourceView.jsp。
- 为了查看插入的代码,点击 Source 项。
列表 1 中显示的客户端点击操作源对象代码,是自动生成的,并会插入到 C2ASourceView.jsp 中。
列表 1. 源对象代码
<div class="C2A:source">
<span class="C2A:typename" style="display: none">http://C2Asource#MyName</span>
<span class="C2A:value" style="display: none">Charu</span>
<span class="C2A:anchor">Anchor Data</span>
</div> |
正如您在代码中观察到的那样,<div> 和 <span>标签是语义上有意义的,以提供带有特殊意义的类属性,它是通过 LOF 分析 DOM 期间得到评价的。
Anchor Data 是 C2A 悬停 UI 中插入的默认值(这就是说,在浏览器中显示的值),它指示了一个 C2ASource。当 portlet 程序发布到 WebSphere Portal 上时,悬停 Anchor Data 会向您显示源 portlet 菜单。源菜单对每一个目标 portlet 都有一个条目,每一个目标 portlet 都包含了源 portlet 发送的值。
您可以将该值从 Anchor Data 更改为 C2A hover UI String(在本场景中一般是您的名字)。
图 8 显示了 C2ASourceView.jsp 的 Design 视图。
图 8. C2aAnchor
插人菜单头
按照以下操作,向源弹出菜单插入客户端的点击操作菜单头。
- 双击 C2ASourceView.jsp 以将其在 Page Designer 中打开。
- 在 Palette 视图中选择 PortletDrawer。
- 从配置中拖拉 Client Side click-to-action Menu Header 菜单项到 C2ASourcePortletView.jsp,如图 9 所示。
图 9. 拖拉菜单项到 Design 项上
- 您还可以选择从菜单项上选择 Insert > Portlet > Client-Side Click-to-Action Menu Header Property。
接着就会显示 Insert Menu Header 向导。
- 指定
Display Myname 作为菜单头的内容,如图 10 所示,并点击 Finish。
图 10. 指定源 portlet 的菜单头内容
- 保存 C2ASourceView.jsp。
- 为了查看插入的代码,您可以点击 Source 项。
列表 2 中所示的客户端点击操作,是自动生成的,并会插入到 C2ASourceView.jsp 中。
列表 2. 菜单头代码
<p class="c2a:display" style="display: none"> Display Myname </p> |
客户端的点击操作源对象代码得到了更新,如列表 3 所示。
列表 3. 源对象代码
<div class="c2a:source">
<span class="c2a:typename" style="display: none">http://c2asource#MyName</span>
<span class="c2a:value" style="display: none">Charu</span>
<span class="c2a:anchor">Charu Malhotra</span>
<p class="c2a:display" style="display: none"> Display My name </p>
</div> |
使 C2ATarget portlet 能够接受数据
使 C2ATarget portlet 能够使用客户端的点击操作,从 C2ASource portlet 接受数据。
设计 C2ATarget portlet
(如果您在第 1 步中的“创建一个 C2A Source Portlet 项目”选择 Basic portlet 作为 Portlet type,那么您就可以忽略以下的步骤,因为基本的 portlet 已经带有默认的格式,文本区域以及提交按钮。)
- 双击 C2ASourceView.jsp 以打开它。
- 切换至 Design 视图。
- 在 Palette 视图中选择 Form TagsDrawer。
- 从配置板中选择 Form 对象到 C2ATargetView.jsp 中。
- 现在,从配置板中拖拉 Text Field 对象到它的表格中。
- 接着就会显示 Insert Text Field 对话框。在 Name 区域中指定
C2AInput,并点击 OK。
- 再一次从配置板中拖拉 Submit 按钮到前面的表格,以及您插入文本区域的旁边,如图 11 所示。
- 接着就会显示 Insert Submit Button 对话框。在 Name 区域以及 Label 区域中的
Submit 中选择 my submit,然后点击 OK。
图 11. 在 C2aTarget portlet 成为 C2A 目标之前的 Design 视图
使 C2ATarget portlet 能够接受数据
使 C2ATarget portlet 能够从 C2ASource Portlet 接受数据。
- 选择 Palette 视图中的 Portlet Drawer。
- 从配置项中选择 Client-Side Click-to-Action Input Property 菜单项到您在前面创建的 Submit 按钮上(或者默认的 Submit 按钮),如图 12 所示。
图 12. 拖拉 Input Property 配置项
- 您还可以从菜单项中选择 Insert > Portlet > Client-Side Click-to-Action Input Property。
接着就会显示出 Insert Client-Side Click-to-Action Input Property 向导。
用户需要提供三个输入,以使 portlet 能够接受数据
-
Data Type URI:输入描述数据格式和语义的名字。它需要精确匹配 C2A 源 portlet 的 Data Type URI 区域值。
-
Action Value:当 C2A 源 portlet 发送的信息到达目标 portlet 时,会执行的操作。它可以是一种服务器端的操作或者 JavaScript 操作。
-
Action Label:作为该目标 C2A 弹出菜单显示的标签。该标签相应于 C2A 源 portlet 弹出菜单项的条目,如前面的 图 1 所示。
Data Type URI区域显示了下拉列表中匹配的潜在数据类型,如图 13 所示。
- 从 Data Type URI 区域下拉菜单中选择 http://C2Asource#Myname,如图 14 所示,然后点击 Next。
图 13. 描述您的 portlet 可以接受的数据的类型
- 从该场景中指定 Action Value 区域中的
javascript:void(0);,以避免信息在服务器中往返传送。在接下来的章节中,您将会看到 JavaScript 操作是怎样在提交事件中执行的。
- 在 Action Label 区域中指定
Send My name to Target,如图 14 所示,然后点击 Finish。
图 14. 指定操作的具体信息
- 保存 C2ATargetView.jsp。
- 为了查看插入的代码,您可以点击 Source 项。
列表 4 中所示的客户端点击操作对象代码,是自动生成的,并插入到 C2ATargetView.jsp 中。
列表 4. 目标对象代码
<form class="c2a:target" action="javascript:void(0);">
<input type="text" name="c2aInput" size="20" class="c2a:action-param"><br>
<input type="submit" name="mysubmit" value="Submit">
<span class="c2a:typename" style="display: none">http://c2asource#MyName</span>
<span class="c2a:action-label" style="display: none"> Send My name to Target</span>
</form> |
c2aInput文本区域,会被标签为 c2a:action-param,接受 C2A 源发送的值。
图 15 显示了 C2ATargetView.jsp 的 Design 视图。
图 15. 在 C2aTarget portlet 成为 C2A 目标之后的 Design 视图
- 切换至 C2ATargetView.jsp 的 Source 视图。
- 在
form 标签之上的 C2ATargetView.jsp 中,添加以下的代码和 JavaScript 操作,如列表 5 所示。
列表 5. 表格标签之上的 JavaScript 操作
<b><div id="mydiv"></div></b>
<br><br>
<script type="text/javascript">
function displayName()
{
var name = window.ibm.portal.c2a.event.value;
var myname=document.getElementById("mydiv");
myname.innerHTML= "Hello " +name +"!!";
myname.value="Hello " +name + "!!";
}
</script>
|
目标 portlet 会调用的“Hello [yourname]” JavaScript 显示屏幕。
- 接下来,在表格标签中,添加
onsubmit="displayName();return false;"属性。
在 C2A 源 portlet 发送的值达到目标 portlet 时,会调用以上的 JavaScript,如列表 6 所示。
列表 6. 从源到目标传递的值
<form class="c2a:target" onsubmit="displayName();return false;"
action= "javascript:void(0);">
<input type="text" name="c2aInput" id=mytext size="20" class="c2a:actionparam"><br>
<input type="submit" name="mysubmit" value="Submit">
<span class="c2a:typename" style="display: none">http://c2asource#MyName</span>
<span class="c2a:action-label" style="display: none" >Send Myname to Target </span>
</form> |
- 保存 C2ATargetView.jsp。
在 WebSphere Portal 上发布 portlet 程序。
现在 portlet 程序已经做好在 WebSphere Portal 上发布的准备了。
右击 C2ASource portlet 项目并选择 Run on Server。图 16 显示了程序发布时范例应该是什么样的。
图 16. 显示发布在 WebSphere Portal V6.1 上的 Myname 范例
点击以放大
范例程序 2
您拥有 Shipping Details portlet 程序中的以下 portlet :
-
Orders:该 portlet 会显示特定月份中顺序的总结。它作为一个 C2A 源,发送:
- 对 Order Details 和 Account Details 的 Order_ID
- 对 Customer Details 的 Customer_ID
-
Order Details:该 portlet 会显示特定顺序的细节信息。它作为一个 C2A 目标,从 Orders portlet 中获取 Order_ID 。本文介绍了怎样使该 portlet 使用 C2A 源选项向 Tracking Details portlet 发送 Tracking _ID 。
-
Account Details:该 portlet 显示了特定代码的账户信息。它作为一个 C2A 目标,从 Orders portlet 中获取 Order_ID。
-
Customer Details:该 portlet 显示了对特定用户的细节信息。它作为一个 C2A 目标,从 Orders portlet 接受 Customer_ID 。
-
Tracking Details:该 portlet 显示了特定传输的细节信息。本文介绍了怎样使其使用 C2A 目标选项,从 Order Details portlet 接受 Tracking_ID。
开始时,从本文的结尾下载范例,并在 WebSphere Portal 上运行它。
当前的场景是 OrdersPortlet 发送的:
- 对 Order Details 和 Account Details 的 Order_ID
- 对 Customer Details 的 Customer_ID
当一个范例在服务器上发布出来时,执行以下的操作:
- 在 OrdersPortlet 中的文本框中输入任意的月份(例如,
September,然后点击 Submit。该指定月份的顺序就会显示出来。
- 当顺序细节信息显示时,在 Order_ID 上逗留一下。会出现一个菜单。
- 点击 Show Order Details 菜单项。特定代码的细节信息会显示在 Order Details portlet 中。
- 点击 Show Account Details 菜单项。特定顺序的细节信息会显示在 Account Details portlet 中。
- 现在在 Customer_ID 上逗留一下,您可以看见一个菜单。
- 点击 Show Customer Details 菜单项。特定客户的细节信息会显示在 Customer Details portlet 中。
图 17 显示了在发布时范例是什么样的(在 Order Details 成为能够向 Tracking Details 发送 Tracking_ID 的 C2A 源之前)。
图 17. Shipping Details 范例
正如您在发布的范例中看到的那样,在 Order Details portlet 与 Tracking Details portlet 之间并没有任何交流。
现在您将会学习怎样使 Order Details portlet 成为能够向 Tracking Details portlet 发送 Tracking_ID 的 C2A 源。Tracking Details portlet 反过来,又会使 C2A 目标能够从 Order Details portlet 接受 Tracking_ID 。在它接受 Tracking_ID 之后,显示特定传输追踪的 Details portlet 会调用服务器端的操作,如图 18 所示。
图 18. Shipping Details 范例目的
执行以下的步骤,来达到以上的结果:
- 使 OrderDetail 成为一个 C2A 源
- 使 TrackingDetail 成为一个 C2A 目标
- 在 WebSphere Portal 上发布 portlet 程序
使 OrderDetail 成为一个 C2A 源
- 双击 OrderDetailsView.jsp 并将其在 Page Designer 中打开。
- 从配置项中拖拉 Client side Click-to-Action Output Property 到 OrderDetailsView.jsp 的 Design 视图 Tracking_ID 列上。
图 19. 拖放属性到 Tracking_ID 列
- Insert Client-Side Click-to-Action Output Property 向导会显示出来。为 Data Type URI 和 Value 区域输入值,如图 20 所示,然后点击 Finish。
图 20. 使 OrderDetail 成为一个 C2A 源
- 打开 Design 视图中的 OrderDetailsView.jsp。
- 将 Anchor 值从
AnchorData 更改为您想要的值。保持 C2A Hover UI 字符串与传递的 C2A 值相同。例如,在当前的场景中,Order Details portlet 传递的 Tracking_ID 应该向用户显示。
图 21. C2aAnchor2
- 打开 Source 视图中的 OrderDetailsView.jsp 文件。插入如列表 7 所示的代码 。
列表 7. Tracking ID 代码
<td>
<div class="c2a:source">
<span class="c2a:typename" style="display: none">
http://clientsidec2a#TrackingID</span>
<span class="c2a:value" style="display: none"><%=od.getTrackingId() %></span>
<span class="c2a:anchor"><%=od.getTrackingId()%></span>
</div>
</td> |
- 与 Display Myname 程序相类似,您可以向源添加一个菜单头。指定
Send Tracking Id to Tracking Details 作为头内容。
- 保存 OrderDetailsView.jsp。客户端点击操作源对象代码会更新至如列表 8 所示。
列表 8. 更新的源对象代码
<td>
<div class="c2a:source">
<span class="c2a:typename" style="display: none">
http://clientsidec2a#TrackingID</span>
<span class="c2a:value" style="display: none">
<%=od.getTrackingId() %></span>
<span class="c2a:anchor"><%=od.getTrackingId()%></span>
<p class="c2a:display" style="display: none">
Send Tracking Id to Tracking Details</p>
</div>
</td> |
使 TrackingDetail 能够成为 C2A 目标
- 双击并打开 Page Designer 中的 TrackingDetailEntry.jsp
- 从配置项中拖拉 Client-Side Click-to-Action Input Property 菜单项到 TrackingDetailEntry.jsp 文件 Design 视图的 Submit 按钮上,如图 22 所示。
图 22. TrackingDetail 上的 Palette DND
接着就会显示 Insert Client-Side Click-to-Action Input Property 向导。
- 从 Data Type URI 下拉框中选择
http://clientsideC2A#TrackingID
,如图 23 所示,然后点击 Next。
图 23. 使 TrackingDetail 成为 C2A目标 1
- 对于这个场景,保持 Action Value区域内的默认值不变。
- 在 Action Label 区域中指定 Show Tracking Details,如图 24 所示,然后点击 Finish。
图 24. 使 TrackingDetail 成为 C2A 目标 2
- 在Source视图中打开 TrackingDetailEntry.jsp,以查看插入的代码,如列表 9 所示。
列表 9. 更新 TrackingDetail 源代码
<FORM method="POST"
enctype="application/x-www-form-urlencoded"
name="TrackingDetails"
class="c2a:target" action="<%= tdb.getActionURL() %>">
<LABEL class="wpsLabelText" for="<%= TrackingPortlet.TRACKING_ID %>"> Enter tracking id
to display details:</LABEL><BR/>
<INPUT name="<%= TrackingPortlet.TRACKING_ID %>" type="text"
class="wpsEditField c2a:action-param"/><BR/>
<INPUT class="wpsButtonText" name="tracking details" type="submit" value="Submit"/>
<span class="c2a:typename" style="display: none"> http://clientsidec2a#TrackingID</span>
<span class="c2a:action-label" style="display: none">Show Tracking Details</span>
</FORM> |
注意:更改提交按钮的名字,以追踪细节信息并保存 TrackingDetailEntry.jsp。
在 WebSphere Portal 中, submit 按钮不能命名为客户端点击操作目标代码的“Submit”以合适地工作。
- 对 TrackingView.jsp 重复以上的步骤。
在 WebSphere Portal 上发布 portlet 程序
现在 portlet 程序已经做好准备在 WebSphere Portal 上发布了。
- 右击 portlet 项目并选择 Run on Server。图 25 显示了在发布时它应该是什么样的。
图 25. 在 WebSphere Portal 上发布的 Shipping Details 范例
点击以放大
在 portlet 程序中插入 Person Menu 并展开 Person Menu
接下来是关于 Rational Application Developer 以及 WebSphere Portal 构件的一些基本信息。
Person Java™Server Page(JSP™)标签提供了与个人相关的协作功能。它生成了指定系列操作以显示在 Person Menu 的 HTML。它最初是作为不能从 JavaScript 代码中访问的服务器端 JSP 标签实施的。为了试着降低服务器载荷以得到更好的性能和评测性,以及支持 Ajax 客户,Person JSP 标签会升级到 WebSphere Portal,以得到可以在客户端访问的 JavaScript API。
升级的 Person Menu 通过指定 hCard 属性,来显示一系列关于被选中个人的信息(hCard 是 vCard 的 HTML 代表)。
通过编写能够执行的 JavaScript 操作,个人菜单扩展使您能够扩展 Person Menu。Rational Application Developer 会提供对相同操作的工具支持。
Live Object Framework(LOF)以及 Semantic Tagging
个人名字使用标准 hCard 微格式来得到语义上的标签,因此表现的类似系统中的活动对象。个人服务能使 hCards 的 Person Menu 插入到 Live Object Framework(LOF)。
对原始 Person JSP 标签的优势
- 新的语义 Person Menu 提供了与传统 JSP 私人标签相同的功能,但是可以获取更高级的用户经验:
- 对每一个 hCard 它还提供了悬停功能。
- 它提供了对像 Show Profile,Send E-mail 等等之类菜单项的访问功能。
- 只有在个人弹出信息出现在门户时才会获取个人信息,服务器的负载会达到最小,直到个人的名字被点中。由于这种数据的获取,从未被点击过的个人名字就不会浪费什么工作时间了。
- Person Menu 扩展允许您展开 Person Menu。您可以添加不止一个扩展。它允许您定制外观和用户注册。
范例程序
现在您需要创建一个简单的程序,以弄清 Rational Application Developer 是怎样简化插入 Person Menu 的任务的,并使用 portlet 程序中的 Person Menu 来扩展它。
向 Person Menu 添加操作
按照以下步骤设计这个程序:
- 创建一个 WebSphere Portal 目标的 portlet 项目。
- 在 portlet .jsp 文件中插入一个 Person Menu。
- 通过插入 Person Menu 扩展到 portlet .jsp 文件来扩展 Person Menu 。
- 为 Person Menu 扩展提供 JavaScript。
在设计 portlet 程序之后,将其发布到 WebSphere Portal 上。
Portlet 项目创建
- 选择 File > New > Project > Portlet Project,然后点击 Next。接着就会显示 New Portlet Project 向导。
- 输入
PersonMenuExample 作为 portlet 的 Name。
- 选择 WebSphere Portal 6.1 作为 Target Runtime。
- 选择 JSR 168 Portlet,JSR 286 Portlet,或者 IBMPortlet 作为 Portlet API。
- 选择 Faces 或者 Basic 作为 Portlettype。
- 点击 Next,然后点击 Finish。
插入一个 Person Menu
- 在 Page Designer 中双击以打开 PersonMenuExampleView.jsp 。
- 在 Palette 视图中选择 PortletDrawer。
- 从 PersonMenuExampleView.jsp 的 Palette 视图中拖拉 Person Menu 对象,如图 26 所示。
图 26. Person Menu 配置项
- 您还可以选择从菜单栏中选择 Insert > Portlet > Person Menu 。然后 Insert Person Menu 向导就会自动打开了。
- 指定以下的 hCard 属性,如图 27 所示。
- 名字
- 电子邮件
- 地址(可选的)
- 电话号码(可选的)
图 27. 指定个人菜单属性
- 点击 Finish 并保存 PersonMenuExampleView.jsp。
- 在 Source 视图中打开 PersonMenuExampleView.jsp 。列表 10 中的代码已经被插入。
列表 10. 插入的源代码
<div class="vcard">
<span class="fn">Charu Malhotra</span>
<span style="display: none"class="email">charumalhotra@in.ibm.com</span>
</div> |
插入 Person Menu Extension
继续以上的场景。
- 再一次从 Palette 视图中选择 Portletdrawer 。
- 从 Palette 视图拖拉 Person Menu Extension 对象到 PersonMenuExampleView.jsp 中,如图 28 所示。
图 28. Person Menu Extension 配置项
- 您还可以选择从菜单栏中选择 Insert > Portlet > Person Menu Extension。接着就会显示“Insert Person Menu Extension”向导(见于图 29)。
图 29. 指定个人菜单扩展属性
您需要输入以下内容以插入 Person Menu Extension:
-
Action details ID:工具支持会为您自动生成操作 ID,在特定的 Person Menu Extension 中它必须是独一无二的。
-
JavaScript: 在选中菜单项时会被调用操作的 JavaScript 名。在以下的目录中应该可以使用它:
[WebSphere Portal Server Home]\ui\wp.tagging.liveobject\semTagEar\Live_Object_Framework.ear\liveobjects.war\javascript
-
Label:Person Menu Extension 的一个标签。
-
Description:Person Menu Extension 的描述。
-
Specify ShowIf:该功能决定了 Person Menu Extension 的可视性。
-
Specify Action:这是在点击 Person Menu Extension 时会执行的功能。功能的参数应该是:
@@@ARGS@@@。
- 点击 Finish 并保存 PersonMenuExampleView.jsp。
- 在 Source 视图中打开 Open PersonMenuExampleView.jsp。列表 11 中的代码也会自动生成 。
列表 11. 自动生成的源代码
<div class="com.ibm.portal.action" style="display: none">
<span class="action-id">action_0</span>
<span class="action-impl">/javascript/TestAction.js</span>
<span class="action-context">person</span>
<span class="action-label">Test Action</span>
<span class="action-description">This is a test action for adding
a Person Menu Extension </span>
<span class="action-showif">javascript:TestAction.showif</span>
<span class="action-url">javascript:TestAction.execute(@@@ARGS@@@)</span>
</div> |
Person Menu Extension(前面指定的是 TestAction.js)的JavaScript,应该在下面的目录下可以找到:
[WebSphere Portal Server Home]
\ui\wp.tagging.liveobject\semTagEar\Live_Object_Framework.ear\liveobjects.war\javascript
TestAction.js 中所举例子的内容如列表 12 所示。
列表 12. TestAction.js 范例内容
var TestAction = {
showif: function(person) {return true;
},
execute: function(person) { alert("TestAction executed for: " + person.fn);
}
} |
在新的 Test Action 菜单项被选中时,就会产生一个警告框。
向 WebSphere Portal 发布 portlet 程序。
现在 portlet 程序已经为在 WebSphere Portal 上发布做好准备。
- 右击 PersonMenuExample portlet 项目并选择 Run on Server。图 30 显示了在发布时它是什么样的 。
图 30. 发布在 WebSphere Portal 上的 Person Menu 范例
使用 portlet 程序中的 Ajax 代理
使用背景中处理的异步请求,Ajax 允许 Web 页面从服务器中载入数据或者标记。因此,请求并不会与当前在浏览器中显示的 Web 页面相交流。
Ajax 程序
您可以使用 Ajax 来显著的提高 portlet 程序的响应性和可用性。通过和服务器交换小部分的数据,然后刷新标记的一小部分来实现这一点。
相同的起源
基于 Ajax 的 Web 程序有时想要对不同于服务 HTML 文件的服务器发送 Ajax 请求。
例如,假设您正在设计一个想要实现的 Web 程序:
- 使用一个外部的代表性状态转移(REST)服务,例如 Google 建议,Yahoo 拼写检查等等。
- 使用内部网上可用的远程公司 REST 服务。
- 从外部服务器(例如 CNN)上包含新的原料。
对 XMP HTTP 请求的限制
为了防止从一个服务器到另一个服务器的恶意 Ajax 代码,将您的浏览器作为攻击其他服务器的基础,请求只允许发送给服务当前文件的服务器,如图 31 所示。相同来源政策防止客户端的脚本(特别是 JavaScript),根据不同来源的协调协议来载入内容。
图 31. 相同来源政策
Ajax 代理
为了克服相同来源的限制,WebSphere Portal 提供了一个基于服务器端的 HTTP 代理方案,也就是 Ajax 代理层。Ajax 代理层会截获访问,从远程站点上获取内容,如图 32 所示。它还允许中央服务器获取这批资源。该安全性模型允许管理员以一种非常灵活的方式,来限制对受信任站点的访问。
图 32. Ajax代理层
范例程序
本文中使用的 AjaxProxyPortletSample 程序由使用 XMLHttpRequests 访问外部域的 portlet 组成。为了克服相同来源政策,portlet 会使用 Ajax 代理层来访问这些域。
- 从下拉框中选择类别(Rational 或者 Lotus),如图 33 所示。
- 接下来,点击 Get the articles 按钮。portlet 会从 IBM 网站上获取 developerWorks 文章(Rational 或者 Lotus)。然后它会显示出对这些话题的链接。
图 33. 范例 Ajax 代理
完整的范例可从文章结尾的下载部分处获得。本文介绍了 Rational Application Developer 中的 Ajax 代理工具支持。但是在实施的视角上本文只做简单介绍。
接下来的章节讨论了怎么样来:
- 使 Ajax 代理能够支持新的 portlet 项目。
- 在 Web 部署描述器中注册代理 servlet。
- 指定 Ajax 代理配置参数。
- 通过 Ajax 代理发送一份 XMP HTTP 请求。
- 在 WebSphere 上发布 AjaxProxyPortletSample 程序。
- 使 Ajax 代理能够支持已存在的 portlet 项目。
- 使 Ajax 代理不能够支持已存在的 portlet 项目。
使 Ajax 代理能够支持新的 portlet 项目。
- 选择 File > New > Project > Portlet Project 然后点击 Next。接着就会显示 New Portlet Project 向导,如图 34 所示。
- 输入
AjaxProxyPortletSample 作为 portlet 的 Name。
- 选择 WebSphere Portal 6.1 作为 Target Runtime。
- 选择 JSR 168 Portlet,JSR 286 Portlet,或者 IBMPortlet 作为 Portlet API。
- 选择 Faces,Basic,Empty,或者 Struts 作为 Portlet type。
图 34. Ajax 代理支持的新 portlet 项目
- 点击 Show Advanced Settings。Project Facet 页面就会显示出来。
- 展开 Web 2.0 facet 并选中 Ajax proxy 复选框,如图 35 所示。点击 OK。
图 35. Project Facets 页面
- 点击 Next,然后点击 Finish。
- 代理 servlet 在 Web 部署描述器中注册。展开 Web Content > WEB-INF 文件夹,然后双击 Web.xml。
- Web 部署描述器会显示出来。点击 Servlet 项,如图 36 所示。
图 36. 显示 servlets 和 JavaServer Pages(JSPs)的 Web 部署描述器
点击以放大
- Ajax Proxy servlet 与名字为 com.ibm.wps.proxy.servlet.ProxyServlet 的类在 Web.xml 中得到注册。
(注意:如果您想访问需要认证的资源,那么您可以指定第二个与安全性限制相关联的 servlet 映射。为了指定一个新的 servlet 映射,您可以点击 如图 36 上面所示的 URL Mappings 里的 Add 按钮。它将会打开 Add Servlet Mapping 对话框。)
- 点击 Web Deployment Descriptor 视图内的 Source 项,以查看在 Web.xml 中添加的代码,如列表 13 所示。
列表 13. 添加 Web.xml 中的代码
<servlet>
<servlet-name>ProxyServlet</servlet-name>
<servlet-class>com.ibm.wps.proxy.servlet.ProxyServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ProxyServlet</servlet-name>
<url-pattern>/proxy/*</url-pattern>
</servlet-mapping> |
- Ajax 代理配置文件会得到创建。展开 Web Content > WEB-INF 文件夹,如图 37 所示。
图 37. Ajax 代理配置文件
- 双击 proxy-config.xml,它将会打开如图 38 所示的 Ajax Proxy Configuration Editor 窗口。
图 38. 在远程域上指定对一个 URL 的映射路径
- 使用 proxy-config.xml,您就可以指定 Ajax 代理配置参数了。首先,您可以向代理规则添加一个项目,如图 39 所示。
图 39. 添加代理规则
内容路径映射
映射元素用于将请求映射为一个基于内容路径的目标 URL 。因此,每一个映射元素都需要指定 contextpath 属性(或者一个 URL 属性),如图 40 所示。
图 40. 指定内容路径映射
点击以放大
访问政策
这些政策元素用于为特定的 URL 模式定义访问政策,如图 41 所示。它包含了以下的子元素,如图 42 所示:
- Actions
- Headers
- Mime-types
- Cookies
- Users
图 41. 指定访问政策
点击以放大
图 42. 指定政策元素
通用的配置参数
您可以指定与 HTTP 相关的参数,例如:
- Socket -timeout
- Retries
- Max-total-connections
- 每一个主机最大的链接数
发送一份 XML HTTP 请求
假设您创建了一个在 proxy-config.xml 文件中映射的文件,如列表 14 所示。
列表 14. 文件映射
<proxy:mapping contextpath="/proxy" url="*"/> |
文件路径:
/proxy
URL:
*
现在,如果您想要通过代理 servlet 从 http://www.ibm.com/developerworks/myfeed.rss网站得到回应,那么您就必须按照以下方式来构筑它的 URL 来创建 XHR 请求:
http://www.myhostname.com/wps/myapplication/proxy/http/www.ibm.com/developerworks/myfeed.rss
这个完整的 URL 包含了 URL http://www.ibm.com/developerworks/myfeed.rss 的编码路径(就是 http://被 http 替换的部分/)。
通过像列表 15 那样构筑功能,您可能在 JavaScript 文件中获得这种编码。
列表 15. 在 URL 中替换它的字符
encodeURL: function(url) {
return url.replace(/:\/\//, "/");
} |
它会产生一个文件映射,如列表 16 所示。
列表 16. 由指定功能产生的文件映射
<proxy:mapping contextpath="/dw" url="http://www.ibm.com/developerworks/*"/> |
文件路径:
/dw
URL:
http://www.ibm.com/developerworks/*
在这种情况下,如果您想通过代理 servlet,从 http://www.ibm.com/developerworks/myfeed.rss 网站获取回应,那么您就必须按照以下方式构建它的 URL:
http://www.myhostname.com/wps/myapplication/dw/myfeed.rss
AjaxProxyPortletSample 中的 proxy.js 文件包含了执行以下操作的代码:
- 编码 URL
- 为该 URL 构筑 XHR 对象
- 向服务器发送 XHR 请求,并载入回应
- 分析响应以将其显示在 AjaxProxyPortletSampleView.jsp 文件中
为了完整地查看 JavaScript 文件,展开 AjaxProxyPortletSample 中的 Web Content > JS 文件夹,然后打开 proxy.js。
将 portlet 程序发布在 WebSphere Portal 上。
- 右击 AjaxProxyPortletSample 并选择 Run on Server。
- 当发布项目时,从下拉列表中选择类别(Rational 或者 Lotus)。
- 接下来,右击 Get the articles 。范例在选择的类别中显示了对最新话题的链接 。
当您点击 Get the articles 按钮时,会使用与被选择项目(Rational 或者 Lotus)相应的 URL 创建 XMLHttpRequest 对象。然后该请求会传递给 ProxyServlet,然后又发送至目标服务器上,获取回应,最终,将 XML 响应返回致客户浏览器上。然后 JavaScript 会以一种用户友好的方式,分析并显示这种回应,如图 43 所示。
图43. 发布在 WebSphere Portal 上的 Ajax 代理 portlet
使 Ajax 代理能够支持已存在的 portlet 项目
- 右击项目并选择 Properties > Project Facets。然后就会出现 Project Facet 窗口。
- 展开 Web 2.0 并选择 Ajax proxy 复选框,然后点击 OK。
使 Ajax 代理不能支持已存在的 portlet 项目
- 右击项目并选择 Properties > Project Facets。然后就会出现 Project Facet 窗口。
- 在 Project Facets 页面中,清除 Ajax proxy 的选择(如图 44 所示),然后点击 OK。
- 注意 proxy-config.xml 会从 WEB-INF 文件夹中删除,而 ProxyServlet 条目会从 Web.xml 中删除。
图 44. 停止 Ajax 支持
使用 WebSphere Portal 中客户端的编程模型支持功能
以前的 WebSphere Portal 版本,需要为每一次 portlet 操作向服务器发送请求。例如,如果您更改 portlet 窗口的状态为最大化或者最小化,那么就必须向服务器发送请求,然后浏览器接受返回的回应。这就导致页面刷新,然后 portlet 才会以最大化或者最小化状态显示出来。这种类型的服务器端操作需要信息的往返循环。
为了减少这种类型的服务器信息过载,WebSphere Portal 现在支持一种客户端的编程模型,这种模型允许 portlet 状态在客户端更有效率地执行。
为了实现这一点,Rational Application Developer 提供了客户端编程模型所需的工具支持。
接下来的章节探讨了这一点:
- 创建一个客户端编程模型支持的 portlet 项目。
- 使用客户端的编程模型支持,以在基本 portlet 项目中获取 portlet 偏好。
- 在 WebSphere Portal 上发布 portlet 程序。
客户端编程模型对新 portlet 项目的支持
按照以下操作来创建一个客户端编程模型支持的新 portlet 项目 。
- 选择 File > New > Project > Portlet Project 并点击 Next。然后就会出现 New Portlet Project 向导。
- 输入
ClientSideSample 作为 portlet 的 Name。
- 选择 WebSphere Portal 6.1 作为 Target Runtime。
- 选择 JSR 168 Portlet 或者 JSR 286 Portlet 作为 Portlet API。
- 选择 Basic 作为 Portlet type。
- 点击 Next 三次。.然后就会出现 Advanced Settings 页面,如图 45。
图 45. 客户端支持的 portlet 项目向导
- Web2.0 Portlet Feature 组下面的 Client Side Capabilities 复选框默认条件下会被选中。选中它会使客户端的编程模型能够支持新的 portlet 项目。点击 Finish。
ClientSideSample portlet 项目会得到创建,而 ClientSideSampleView.jsp 会在 Page Designer 中打开。
为了查看插入的代码,点击 Source 项,如列表 17 所示。
列表 17. 自动生成的客户端代码
<%@ taglib
uri=http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model
prefix="portlet-client-model" %>
<portlet-client-model:init>
<portlet-client-model:require module="ibm.portal.xml.*"/>
<portlet-client-model:require module="ibm.portal.portlet.*"/>
</portlet-client-model:init> |
列表 18 中的 taglib 会添加至 ClientSideSampleView.jsp 文件中。
列表 18. 添加至 ClientSideSampleView.jsp 的 taglib
<%@taglib
uri="http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model"
prefix="portlet-client-model" %> |
列表 19 中的标签也会添加至 Java™Server Page(JSP)文件。
列表 19. 添加 JSP 文件的标签
<%@taglib
uri="http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model"
prefix="portlet-client-model" %> |
这意味着:
- taglib 包含了在客户端使用模型需要的标记和工件。
-
ibm.portal.portlet.*模型使您可以在客户端上使用 PortletWindow,PortletPreference,PortletState 以及 XMLPortletRequest 。
- 模型
ibm.portal.xml.* 允许您在客户端上使用 XSLT 和 XPath。
使用客户端编程模型支持功能来获取基本 portlet 项目中的 portlet 偏好
现在您就可以看到怎样使用客户端的编程模型支持功能,来获取客户端的 portlet 偏好,如图 46 所示。这些行为以前都是在服务器端执行的。继续以前创建的 ClientSideSample 项目。
- 打开 Portlet Deployment Descriptor。
- 点击 Portlets 项并选择 portlet(ClientSideSample)。
- 切换至 Persistent Preference Store 部分,并添加一种偏好(将其命名为
MyPreference)。
- 给该偏好赋值。
图 46. 在 Portlet Deployment Descriptor 中添加偏好
- 打开 ClientSideSampleView.jsp 文件。
- 打开 Page Data 视图。
- 展开 Page Data 视图并选择 PortletPreferences 节点。
- 右击 Preferences 节点并选择 New > PortletPreferences,如图 47 所示。
图 47. 在 Page Data 视图中添加偏好
- 在 Add Attribute 对话框中创建一个新的偏好,如图 48 所示。给该偏好,起一个与您在 Portlet Deployment Descriptor 中指定偏好相同的名字(在本例中,将其命名为
MyPreference)。
图 48. 向 portletPreferences 添加一个属性
- 打开 ClientSideSampleView.jsp。
- 在 Page Data 视图中从 PortletPreferences 节点拖拉 MyPreference,如图 49 所示,将其拖拉到 ClientSideSampleView.jsp 上。
图 49. 从 Page Data 视图中拖拉一个偏好
Insert Java Bean 对话框会显示出来,如图 50 所示。
图 50. 配置数据控制
- 点击 Finish。
- 为了查看插入的代码,点击 Source项,如列表 20 所示。
列表 20. MyPreference 的插入代码
<script type="text/javascript">
var preferenceJSONObject= {"bindings": [{
"pref":"MyPreference","id":"ibm__pref_MyPreference_uq_1"}
]
};
function <portlet:namespace/>_getPref(portletWindow, status, portletPrefs) {
if (status==ibm.portal.portlet.PortletWindow.STATUS_OK) {
portletWindow.setAttribute("preferences", portletPrefs);
var portletPref_ =portletPrefs;
var len = preferenceJSONObject.bindings.length;
for(var i=0; i<len ; i++)
{
var pref = preferenceJSONObject.bindings[i].pref;
var pref_val = portletPref_.getValue(pref,"");
document.getElementById(preferenceJSONObject.bindings[i].id).innerHTML=pref_val;
}
}
else { alert("error loading feed"); }
}
function callOnLoad(){
<portlet:namespace/>_portletWindow =new ibm.portal.portlet.PortletWindow
("<%=portletWindowID%>");
<portlet:namespace/>_portletWindow.getPortletPreferences(<portlet:namespace/>_getPref);
}
dojo.addOnLoad(callOnLoad);
</script> |
以上自动生成的代码会获取客户端上的 portlet 偏好。
注意:自动生成的代码可能会生成不合适的 dojo_101.addOnLoad(callOnLoad); ,而不是正确的 dojo.addOnLoad(callOnLoad);
如果在 JSP 中生成的是不合适的代码,那么您就必须手动校正它,这样在发布程序时,它才会在 WebSphere Portal 中正常的运行。
preferenceJSONObject 内容显示在列表 21 中。
列表 21. preferenceJSONObject 的内容
var preferenceJSONObject= {"bindings": [
{"pref":"MyPreference","id":"ibm__pref_MyPreference_uq_1"}
]
}; |
列表 22 中的 HTML 代码也会添加至源视图中。
列表 22. 生成的 HTML 代码
var preferenceJSONObject= {"bindings": [
{"pref":"MyPreference","id":"ibm__pref_MyPreference_uq_1"}
]
}; |
- 与之类似的是,您可以在 Portlet Deployment Descriptor(为它指定一个值)中添加另一个偏好(MyPreference2),并在 Page Data 视图中添加相同的偏好(与您在前面对 MyPreference 所做的相同)。
- 打开 Design 视图。将该偏好拖拉至 JSP 中。
- 现在打开 Source 视图。
您可以看到 preferenceJSONObject 内容现在已经得到了更新,如列表 23 所示。
列表 23. 更新的 JSONObject 内容
<table>
<tbody>
<tr>
<td align="left">MyPreference:</td>
<td>
<div id="ibm__pref_MyPreference_uq_1"></div>
</td>
</tr>
</tbody>
</table> |
在 WebSphere Portal 上发布 portlet 程序。
- 右击 ClientSideSample Portlet 项目并选择 Run on Server。
- 您可以观察到在 Portlet Deployment Descriptor 中指定的偏好值,会得到合适的显示,如图 51 所示。
图 51. 在 WebSphere Portal 上发布的 ClientSideSample
您学到了什么
Rational Application Developer 提供的工具,简化了基于 portal 的高效、交流性强、响应性强的程序的开发。它们利用了客户端编程模型、客户端点击操作、Person Menu、 Person Menu Extension,以及 Ajax 代理带来的优势。您需要根据程序的需求只定制生成的代码。
下载 | 描述 | 名字 | 大小 | 下载方法 |
|---|
| Ajax proxy portlet 示例代码 | AjaxProxyPortletSample.zip | 5,024 KB | HTTP |
|---|
| Shipping 细节示例代码 | ShippingDetailsSample.zip | 57 KB | HTTP |
|---|
参考资料 学习
获得产品和技术
讨论
关于作者  | 
|  | Charu Malhotra 是一名软件工程师,开发 Rational Application Developer 的门户和 portlet 工具组件。她关注于 Web 2.0 工具支持和 JSF portlet 的支持。Charu 在位于印度 Delhi 的 IBM 研究部工作。
|
对本文的评价
|