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

核心提示：IBM® WebSphere® Portal V6.1引入了新的特性，例如客户端的聚合、Friendly URL 以及静态的页面聚合，IBM Rational Application Developer V7.5 Portal Toolkit，第 2 部分，WebSphere Portal V6.1 还

IBM® WebSphere® Portal V6.1引入了新的特性，例如客户端的聚合、Friendly URL 以及静态的页面聚合。WebSphere Portal V6.1 还提供了新的主题，它含有基于 Web 2.0 的主题。IBM® Rational® Application Developer V7.5 为这些新特性提供了支持功能。本文描述了这些特性和工具。

Rational Application Developer 和 WebSphere Portal

IBM®Rational®Application Developer V7.5 是 IBM® Rational® Software Delivery Platform 中的一部分。它是一种集成的开发环境（IDE），提供了从设计到构建、测试和部署的统一环境，从一个工作台中可以提供所有这些功能。反过来，门户工具构件使得门户网站开发和门户程序开发变得更加快捷和容易。

本篇文章向您展示了帮助设计 IBM® WebSphere® Portal V6.1 门户网站的新特性。本文关注的是 WebSphere Server 提供的定制和编辑新特性的支持功能，包括如下：

PortalWeb2 主题

Friendly URL 特性的支持

本文通过简单讨论 Rational Application Developer 提供的静态页面聚合（SPA）工具支持功能，来得出结论。

Web 2.0 主题支持

Rational Application Developer 使您能够编辑门户项目的结构、设置和工件。门户项目在 PortalConfiguration 文件夹的 XML 文件中存储了入口配置，在 PortalContent 文件夹中存储了 Web 工件。您可以使用 PortalConfiguration 来编辑 XML 文件，使用 Theme 编辑器编辑 Web 工件。本文同样还涉及到 PortalWeb2 主题编辑，它就是 WebSphere Portal 提供的基于 Web 2.0 的主题。

Rational Application Developer 中的门户工具，为编辑 WebSphere Portal 提供的新特性提供了工具支持功能。用户可以创建基于这些主题的自己的主题。WebSphere portal 工具支持的和门户服务器提供的两个基本主题，就是 Portal 和 PortalWeb2。

主题简介

本文中涉及到的两大主题是 Portal 主题和 PortalWeb2 主题。

Portal 主题

WebSphere Portal 中的门户主题是新外观的门户，它基于传统的 Java™Server Pages （JSP）客户端聚合主题。

门户主题是传统的基于 JSP 的主题，它替换了 WebSphere Portal 中的 IBM 主题。

PortalWeb2 主题

门户的 Portal Web 2.0 主题提供了改善了的用户经验和更佳的性能。Portal Web 2.0 主题叫做 PortalWeb2。

Portal Web 2.0 通过添加基于 Java™Script 的客户端聚合（CSA），来扩展传统的 JSP，或者基于 servlet 的门户主题。CSA 使用异步 Java™和 XML （AJAX）技术，以及门户模型 Representational State Transfer（REST）服务。通过这种方式，CSA 提供了一个更具代表性的用户经验，并使服务器的负载降低。

PortalWeb2 主题基于 Portal 主题，这样就能够使用 CSA
聚合器了。

主题 JSPs 的主要差异，就是 Portal 主题使得页面
能够通过通用的 JSP 标签来导航，尽管如此 PortalWeb2 主题简单的包含了

空的部分（<div>）标签，稍后会由 CSA 聚合器填充。

Portal 主题和 PortalWeb2 主题之间的差异

两个主题之间的基本差异，是 Portal 主题只支持
服务端的聚合（SSA）模式。在这个模式下，页面的请求会转至

服务器端，服务器端会生成标记然后返回至

用户。另一方面，PortalWeb2 主题同时支持 SSA 和 CSA。

表 1 列出了基于 SSA 和基于 CSA 主题之间的主要差异。

表 1. SSA 和 CSA 模式之间的差异

	SSA	CSA
用户 回应	因为所有功能都集成到服务器端，并且涉及到完全页面刷新，所以速度变得更慢。	因为，它使用 AJAX 技术来获取内容。除了为每一次用户交流更新和刷新整个页面，CSA 聚合器只部分更新实际更改的页面。所以速度变得更快。
页面 需求	每一次页面请求会转至 WebSphere Portal 引擎。	用户第一次选择带有 PortalWeb2 主题的页面时，门户会载入主题并启动 CSA 聚合器。从现在开始，CSA 聚合器只会处理更改的页面，而不是刷新整个页面。
赋值方法	所有的导航元素和页面布局都聚合到服务器端，标记会返回至浏览器以进行复制 赋值。	CSA 聚合器使用 XSLT 来赋值导航元素，并安排客户端的页面布局。
Main 菜单文件	mainMenu.jsp	mainMenu.xsl
Top 导航文件	topNav.jspf	topNavRender.xsl
Side 导航树形文件	sideNav.jspf	sideNavRender.xsl
Portlet 交付区域文件	Home.jsp	mainContentRenderLayout.xsl
IBM 皮肤文件	Control.jsp	IBM.xsl
没有皮肤文件	Control.jsp	NoSkin.xsl

图 1 显示了哪一部分的门户项目与哪一个文件相对应。

图 1. 门户项目中特定部分的文件

图片看不清楚？请点击这里查看原图（大图）。

注意：对于 SSA 和 CSA 来说，Default.jsp 才是关键。当您首次访问 PortalWeb2 主题分配的门户页面时，CSA 聚合器会通过它的 Default.jsp 进行初始化，就像传统的 SSA 主题一样。载入的初始页面只包含了页面的基本 HTML 结构。这些空的占位符显示了 CSA 聚合器应该将主题导航元素（例如，导航菜单，页面项，导航树形结构等等）置于何处, 以及页面本身的内容（例如行，列以及 portlets）。

与 Rational Application Developer 中的主题协作

当您在网站上使用 Rational Application Developer 时，您需要做的第一件事，便是从您的门户服务器导入门户配置和资源，或者创建一个新的入口项目。Rational 门户工具提供了 Import Portal 向导，它在工作区中创建一个门户项目，并从服务器复制门户配置和资源到当前的项目中。它还提供了 New Portal Project 向导，它在工作区中创建了一个新的门户项目。
尽管从导入开始有一定的优点，但是对于本文中介绍的用例，您将会使用 New Portal Project 向导，来查看添加的新功能，以提供对 WebSphere Portal Server V6.1 的支持功能。图 2 向您展示了 New Portal Project 向导的初始页面。

图 2. New Portal Project 向导

如图 2 所示，WebSphere Portal 就是您为本门户项目使用的版本。Select the portal server version 下拉菜单和 Target Runtime 列表包含了 WebSphere Portal v6.1 服务器。Target Runtime 下拉菜单还列出了相同的服务器。向导中的另一个页面（Select Theme），如图 3 所示，显示了 WebSphere Portal Server V6.1 提供的两大基本主题（如上所述）。

图 3. 主题选择页面

在您创建一个新的门户项目之后，Rational Application Developer 显示了门户项目（和它在浏览器中运行时是同一个界面）。图 4 显示了 Rational Application Developer 中新创建的 WebSphere Portal V6.1 项目是什么样的（假设您选择的是 PortalWeb2 主题）。

图 4. 应用 PortalWeb2 主题的门户项目

图片看不清楚？请点击这里查看原图（大图）。

新主题的功能包含了提高的编辑性。

编辑主题

本章节讨论了 Rational Application Developer 为基于 SSA 和基于 CSA 的主题，提供了改善了的主题编辑操作。

编辑 Main JSP 文件（Default.jsp）

为了编辑 JSP 文件，首先打开 Portal Configuration 编辑器。

切换到 Edit 菜单并选择 Edit Theme，如图 5 所示。

图 5. Edit Theme 选项

该选项同样作为 Rational Application Developer 中 Portal Configuration 编辑器中的弹出菜单而显示。

只需右击并选择该选项，如图 6 所示

图 6. Edit Theme 选项

这就会打开 Default.jsp 以进行打开，如图 7 所示。现在您就可以编辑并定制 Default.jsp。

图 7. Page Designer 中的 Default.jsp

编辑 CSA XSL 文件
您也可以在 XSL 编辑器中编辑 CSA 文件。

为了这样做，打开 Portal Configuration 编辑器。

转至 Edit 菜单并选择 Edit Theme XSL files，如图 8 所示。基于 XSL 文件的所有 CSA 的列表就可以进行编辑了。

图 8. Edit Theme XSL 文件选项

您可以选择任意一个 XSL 文件以进行编辑。

例如，选择 mainMenu.xsl。它将会在 XSL Editor 中打开 XSL 文件，如图 9 所示。

图 9. XSL 编辑器中的 mainMenu.xsl 文件

图片看不清楚？请点击这里查看原图（大图）。

接下来的章节，展示了 Rational Application Developer 门户工具功能，是怎样为顶级导航和边导航列出主题文件的。

编辑顶级导航工件

再一次打开 Portal Configuration 编辑器。

选择一个页面（Page 1 或者 Web 2.0）.

右击任意一个页面并选择 Edit Top Navigation，如图 10 所示。

图 10. Edit Top Navigation 选项

现在点击 topNav.jspf。这将为编辑 Page Designer 而打开 topNav.jspf 文件，如图 11 所示。如前面的表 1 所示，该文件对应于支持 SSA 主题的 Top Navigation 区域。现在您就可以编辑 .jspf 文件了。

图 11. Page Designer 中的 topNav.jspf 文件

图片看不清楚？请点击这里查看原图（大图）。

简单来说，您可以通过选择 topNavRender.xsl，来编辑相应的顶端 XSL 文件，如图 10 所示。这将会在 XSL 编辑器中打开 XSL 文件。如表 1 所示，该文件对应于支持 CSA 主题的 Top Navigation 区域。现在您就可以编辑 XSL 文件了。

编辑边导航工件

在 Portal Configuration 编辑器中右击 Page1 选择 Insert Page>As Child。

创建一个字页面（例如）MyChildPage，结构如图 12 所示。

图 12. 添加到 Page 1 的子页面

右击 MyChildPage 并选择 Edit Side Navigation，如图 13 所示。

图 13. Edit Side Navigation 选项

现在点击 sideNav.jspf。这将会为在 Page Designer 中编辑而打开 sideNav.jspf 文件。如前面在表 1 所示，该文件对应于支持 SSA 主题的 Side Navigation 区域。现在您就可以编辑 .jspf 文件了。

与之类似，对于基于 CSA 主题的边导航，右击 sideNavRender.xsl。这会为在 XSL 编辑器中而打开 sideNavRender.xsl 文件。如前面在表 1 中所述，该文件对应于支持 CSA 主题的 Side Navigation 区域。现在您就可以编辑 XSL 文件了。

编辑 Portlet Render Area 文件

与编辑顶级导航和边导航相类似，您可以为基于 SSA 和基于 CSA 的主题，编辑 Portlet Render 区域文件和皮肤文件。

为了编辑 Portlet Render 区域文件，右击 MyChildPage 内部的 Portlet Render Area （该区域就是文本 Place portlet here 出现的地方），并选择 Edit Portlet Render Area，如图 14 所示。

图 14. Edit Portlet Render 区域

图片看不清楚？请点击这里查看原图（大图）。

现在您就可以选择合适的文件以进行编辑了。

选择 Home.jsp（对于支持 SSA 的主题）或者 mainContentRenderLayout.xsl（对于支持 CSA 的主题）。

编辑 Portlet 皮肤文件

为了编辑 Portlet 皮肤文件，您首先必须添加一个 portlet 到页面中。

右击 Portlet Render 区域并选择 Insert Portlet>As Child。

选择一个 portlet 以添加到配置中（例如，LoginPortlet）。

接下来，点击 Portlet Render 区域中的 Login portlet。

右击并选择 Edit Skin，如图 15 所示。

图 15. 编辑皮肤

图片看不清楚？请点击这里查看原图（大图）。

选择任意一个列出的文件，以在各自的编辑器中打开并编辑它。如表 1 中所示，文件 Control.jsp 属于支持 SSA 的主题，IBM.xsl 文件是支持 CSA 主题 IBM 皮肤的 XSLT 文件。

本章节讨论了 Rational Application Developer 门户工具支持的，升级的主题编辑和赋值功能。

Friendly URL 工具支持

Friendly URL 是 WebSphere Portal Server V6.1 中的新特性，它允许您（作为门户管理员）为门户页面提供 URL 映射。您在创建 URL 时，就可以为它们定义人类可读的名字了。它们读起来更加容易，因此对用户更加友好。它允许用户在浏览器地址栏中输入一个完整的门户 URL，以切换至特定的页面。

Rational 门户工具向您提供了更加强大的功能，在设计门户页面时提供友好的 URL。

本段验证了怎样在 Portal Configuration 编辑器中做到这一点。

转至 Project Explorer 并展开您早期创建的门户项目。

打开 Portal Configuration。

打开 Outline 视图并选择 Home，如图 16 所示。

图 16. Portal Configuration 编辑器的 Outline 视图

接下来，右击并选择 Properties，以打开 Properties 视图，它会显示 Label 项。该 Label 项包含了一个 Friendly URL name 区域，您可以在这里为当前的 Label 指定友好的 URL，如图 17 所示。

图 17. Properties 视图

图片看不清楚？请点击这里查看原图（大图）。

您在这里为 Home 标签输入的名字，就是 Page 1 这样的页面的父代。

对于 Web 2.0 页面，如果您愿意就须为父类输入一个 Friendly URL name。

访问带有友好 URL 名字的页面。

输入一个友好的 URL 名字（在本例中，是，MyHome）

图 18. 为 Home 提供一个用户友好的 URL 名

图片看不清楚？请点击这里查看原图（大图）。

接下来，点击 Content Root 中 Home 下面的 Page 1，如图 19 所示。

图 19. 在 Outline 视图中选择的 Page 1

右击并选择 Properties，以打开 Properties 视图，它显示了 Page 项，该 Page 项有一个 Friendly URL name 区域，您可以在该区域为当前的页面指定友好的 URL，如图 20 所示（在本例中，MyPage）。

图 20. 为 Page 1 提供一个用户友好的 URL 名

图片看不清楚？请点击这里查看原图（大图）。

图 21 显示了以上浏览器上运行页面提供的 URL。

图 21. 浏览器中的友好 URL

图片看不清楚？请点击这里查看原图（大图）。

静态页面聚合工具支持

静态页面聚合（SPA）是 WebSphere Portal Server V6.1 中的另一个新特性。SPA 允许您使用静态 HTML 文件作为门户页面。

与静态内容页面协作具有以下的优势：

作为一个网络设计师，您可以通过标准的网络管理工具来创建门户页面。它们可以是 HTML 编辑器甚至是简单的文本编辑器。您不需要关于 JSP 的知识以创建 HTML。

使用门户布局模型，对页面的布局可以有更高的控制力。

您可以包含 portlets 作为动态元素，包含容器作为页面 portlets 的占位符。

您可以在保证页面上的 portlet 定制的同时，通过上传一个更改后的 HTML 文件，来更新一个已经存在的静态页面。

静态页面可以按以下两种方式，来输入到门户中：

作为控制整个浏览器区域的独立 Web 页面。

作为门户内容区域的一部分（在这种情况下，门户仍然控制标语和导航区域）。

Rational Portal 工具提供了对 SPA 的必要的工具支持。它使得您就可以为门户创建、更新和管理静态的 HTML 页面。完整的 SPA 工具支持会分散在各个章节中进行介绍。本文只给出了一个简单的概述。

为了创建一个 SPA 页面，右击 Page1 或者 Web 2.0 并选择 Insert Static Page > As Child，如图 22 所示。

图 22. Insert Static Page 选项

该操作会启动一个静态页面创建对话框，如图 23 所示。

图 23. New page with static layout 对话框

在 File name 区域中指定 HTML 文件名。

该对话框中值得一提的一个功能是 Create using existing ZIP or HTML page 复选框。如果您已经创建了一个 HTML 文件，并想将其作为 WebSphere Portal 中静态 HTML 文件来使用。您所需要提供的，是包含 HTML 文件的有效 HTML 文件或者 .zip 文件。如果您没有选中复选框，那么在包含基本 HTML 框架的工作区，会创建一个新的 HTML 文件。

点击 Finish 以打开 Page Designer 中的 HTML 文件以进行编辑。现在您可以执行更多的操作，例如更改 HTML 页面的 HTML 结构。

另一个重要的功能，就是向 HTML 页面添加 portlets 的功能。Rational 门户工具也为相同的功能提供了必要的支持功能。

如上所述，更多的具体细节超出了本文的讨论范围，在单独的文章中会有所介绍。

学到了什么

本文介绍了 Rational Application Developer V7.5 提供的门户工具支持功能，支持 WebSphere Portal V6.1 提供的 SPA、友好 URL 以及 Web 2.0 主题等新特性。本文中提供的信息，使您能够快速的开发 Portal 站点，并有效的使用 WebSphere Portal 提供的新特性。