IBM Rational Application Developer V7.5 Portal Toolkit，第 3 部分

核心提示：本文描述了在 IBM® Rational® Application Developer V7.5 中为在 IBM® WebSphere® Portal V6.1 或更高版本的 IBM WebSphere Portal 服务器上运行的 portlet，以及门户程序所引入的的 Web 2.0

本文描述了在 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 显示屏幕。

接下来，在表格标签中，添加 属性。

在 C2A 源 portlet 发送的值达到目标 portlet 时，会调用以上的 JavaScript，如列表 6 所示。

列表 6. 从源到目标传递的值
<form　class="c2a:target"　　
　　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