IBM Rational Application Developer V7.5 Portal Toolkit，第 4 部分: 静态页面聚合

文档选项 未显示需要 JavaScript 的文档选项 英文原文

级别： 初级

Jatin K. Varshney, 助理软件工程师, IBM

2009 年 10 月 26 日

进行静态页面聚合，您可以从 IBM® WebSphere® Portal V6.1 项目的静态 HTML 布局或者模板中，创建门户页面。本文一步步地指导您，使用 IBM® Rational® Application Developer V7.5，来创建、设计、编辑和聚合这样的静态布局，目标确定为门户服务器运行时环境。按照本文中介绍的步骤，您不需要懂太多基础的门户 API 知识。

系统需求

作者假设您的电脑上安装有 IBM® Rational® Application Developer V7.5，并在一个您拥有管理员权限的本地或者远程系统中安装有 IBM® WebSphere® Portal V6.1 服务器。

回页首

使用静态页面的好处

到现在，网站设计者们使用像 HTML、瀑布式的工作表（CSS）以及 JavaScript 这样的简单网络技术，来设计网站的总体外观，但是 portlets 通常是由 Java™或者 Java™Server Page （JSP™）开发员们创建的。现在，通过将 portlets 与静态网络页面聚合起来，您可以使用静态页面聚合（SPA）来开发 portlets 的潜力。您可以在静态网络页面中使用简单的 HTML 标记来创建完整的门户页面，来实现这一点。

使用简单的 Web 技术，通过使用您喜好的 Web 管理工具，例如 Rational Application Developer 中的 Page Designer 或者简单的文本编辑器，您可以设计网站的布局。比起使用门户布局模型，您可以更好地控制页面的布局。

您可以使用 portlets 作为动态元素，使用容器作为页面中 portlets 的占位符。通过使用服务器端的聚合，Ajax，或者一个 IFrame 元素来显示它们。您还可以使用静态页面之中的 portlet 交流。

静态页面聚合使用起来不但简单容易，而且在和简单的 Web 技术（例如，CSS 和 JavaScript）一道开发 portlets 的功能方面，它的功能非常强大。本文首先描述了 SPA 的概念，然后一步步地指导您使用 SPA 和 Rational Application Developer V7.5：

1. 首先，创建一个门户项目，然后是静态布局的门户页面。
2. 接下来，创建一个添加至静态页面的门户项目。
3. 然后，创建一个静态布局（静态页面）的门户页面。
4. 再接下来，编辑该静态页面以添加主题，门户容器和门户窗口。
5. 然后发布您的项目，以查看上面列出的第一个简单操作的结果。
6. 然后为静态布局创建主题，为静态页面中的 portlets 创建皮肤。
7. 接下来，您可以使用 portlets 的动态功能来自动生成网站的导航栏。
8. 在此之后，使用国际化功能来使全世界各个地方都能访问您的静态页面。
9. 然后使用静态布局资源档案文件，来创建其他的页面，并编辑您在前面创建的静态页面。
10. 最后，发布您所创建的包含静态页面的门户 Web 网站。

回页首

关键术语

静态布局
页面的布局构建在普通的 HTML 页面基础之上，并且可以包含对 portlets 的引用。反过来，一个动态门户页面的布局是由服务器中的数据库定义结构的，并由页面编辑器管理。

静态页面
一个引用静态布局的静态页面。静态页面可以是门户页面技术任意位置的一部分（查看 SPI 内容和导航模型）。除了传递，它的表现就像一个默认的门户页面，例如访问控制。

动态布局
标准的门户布局，由行和列组成；它在数据库中永久存在。

嵌入的静态页面
在门户内容区域中表示的静态页面。门户引擎决定标题，注脚以及导航，但是内容却是由静态布局决定的。

独立静态页面
决定整个浏览器内容的静态页面。它是由门户 servlet 服务，但是却控制着整个的页面。

回页首

创建一个门户项目

通过使用 New Portal Project 向导，您可以创建一个 Rational Application Developer 中的门户项目。您可以使用 Import Project 向导，来从 WebSphere Portal Server V6.1 中导入项目。导入项目的一个好处是它列出了所有已经在服务器上部署了的 portlet 定义，这样就可以在项目中的任意门户页面中使用它们了。当然，这些定义包含了 SPA 导航 portlets，在静态页面中将其当作工具 portlets 对待。

按照以下方式创建一个新的门户项目：

1. 在 Rational Application Developer V7.5 中，选择 File > New > Other。
2. 选中 Show all wizards 复选框。
3. 在门户类别中，选择 Portal project，然后点击 Next。
4. 点击 OK 以激活门户开发功能，然后打开 New Portal Project 向导（见于图 2）。

5. 输入项目名，例如，FirstPortalProject。
6. 选择 6.1 作为 Portal 服务器的版本，然后点击 Next。
7. 选择一个主题，然后点击 Next。
8. 选择一种皮肤，然后点击 Finish。

图 3 显示了 Portal Designer 中的新门户项目以进行编辑。

新门户项目的默认配置会列出三个 portlets。您可以使用其中的任意一种，或者门户项目任意页面中相同工作区内的新通用 portlets 。

9. 为了查看在门户配置中可以使用什么 portlets，切换至 Outline 视图并展开 Elements > Portlets。

在图 4 中，您可以看到三个 portlets：

• Login
• Edit My Profile
• Search Sitemap

从服务器中导入一个门户项目

您不但可以随意创建一个新的门户项目，还可以从服务器中导入配置和其他的主题及皮肤文件：

1. 在 Rational Application Developer 中，选择 File > Import。
2. 展开门户类别，选择 Portal，并点击 Next。
3. 定义一个新的 WebSphere Portal V6.1 服务器。
   1. 指定一个本地服务器为 localhost，或者提供它的 IP 地址的远程服务器。
   2. 确定服务器已经启动，并且您拥有管理员权限。
   3. 输入密钥，并点击 Finish。
4. 选择新创建的服务器。
5. 为项目输入名字，例如 SecondPortalProject，并点击 Finish。

门户项目在工作区内会以您指定的名字创建，并包含所有需要的文件，以及您从服务器中导入的门户配置。项目可能含有比 FirstPortalProject 更多的 portlets，因为配置包含了部署到服务器中的所有 portlets 。在门户项目中可以使用这些 portlets 。

回页首

创建一个 portlet 项目

接下来的一步是创建一个新的通用 portlet 项目（例如，一个支持 JavaServer Faces 的标准 JSR168 portlet ）。您将会看到，在门户项目中的静态页面里是怎样编辑 portlet 的。

按照以下步骤创建一个 portlet 项目：

1. 选择 File > New > Other。
2. 选中 Show all wizards 复选框。
3. 在门户类别中，选择 Portlet project，并点击 Next，以打开 New Portlet Project 向导（见于图 5）。

4. 输入项目名，例如，MyWorkspacePortlet。选择 WebSphere Portal v6.1 作为目标运行时环境。
5. 对于 Portlet API，选择 JSR168 Portlet ，对于 Portlet 类型，选择 Faces portlet。
6. 点击 Next 两次，然后点击 Finish。
7. 在创建 portlet 项目之后， MyWorkspacePortletView.jsp 文件会打开以进行编辑。用 This is my simple JSR168 Faces portlet 替换“Place content here”文本。
8. 保存文件并关闭编辑器。

回页首

创建一个页面

门户页面是门户内容模型中的一个元素。门户项目中的页面，可以使用动态或者静态布局来进行定义。使用动态布局的页面叫做规范门户页面，而是用静态布局的页面叫做静态页面。静态页面可以只在门户的内容区域中决定（使用门户提供的标题，导航和注脚），或者在浏览器区域完全决定。

在这种决定操作的基础之上，静态页面可以被归类为嵌入式的静态页面或者独立的静态页面。开始时创建一个嵌入式的静态页面，然后创建一个独立的静态页面。

创建一个静态页面

如果您想要门户页面使用您刚刚创建的静态 HTML 文件的布局，或者想要创建一个刷新的布局，那么您就需要使用 Rational Application Developer V7.5 中的静态页面创建向导。

按照以下步骤创建一个嵌入式的静态页面：

1. 在 Portal Designer 中，选择以下选项中的一个 ：Page， Label，或者 URL。
2. 右击并选择 Insert Static page，然后选择这些选项中的一个：Before，After， As child。注意：如果您使用的是 URL 节点，那么它不能有子层次的页面。
3. 当静态页面创建向导打开时（图 6），输入页面的名字为 MyStaticPage。

4. 保存 Markup， File 名字以及 Portlet 窗口显示选项的默认设置值，并点击 Finish。

MyStaticPage 添加至门户配置中， index.html 静态布局文件会在 Page Designer 中打开以进行编辑。

接下来的几点帮助您理解向导的一部分：

• Markup 复选框：支持的标记，静态标记可以提供给门户页面。当前的 SPA 规格只支持 HTML 标记。
• 标题：门户页面标题。如果页面是嵌入式的静态页面，那么标题会出现在导航栏中。
• 文件名： :新静态布局文件的名字会在 Page Designer 中打开以进行进一步的编辑，其功能相当于 MyStaticPage 门户页面的布局文件。重点：该文件必须有一个 .html 或者 .htm 的扩展名。

• “Create using existing ZIP or HTML page”复选框和区域：它们用于指定包含 HTML 静态布局文件以及文本框中相关资源的档案的位置，并在下拉框中选择档案中的布局文件。您也可以选择，使用“ZIP or HTML file location”区域及其相关的菜单，以直接指定已存在 HTML 或者 HTML 静态布局文件的位置。它将会复制到工作区中，并用作门户页面的静态布局，而不是您早期指定的 index.html 。
• Portlet 窗口显示选项：为页面指定元数据参数，它用于在显示页面时决定 portlets ：
  • 包含的标记：portlets 与静态页面同时得到决定。
  • Ajax： portlet 的内容不同时获得，然后 portlet 片段会嵌入到静态页面中。
  • IFrame：包含决定 portlets 的 IFrames 的静态页面。

既然您已经弄明白了向导的一部分，那么我们就开始进一步地探讨静态页面创建的操作。

在静态页面得到创建以后， index.html 文件会在 Page Designer 打开以进行编辑。该文件位于门户项目 PortalConfiguration/Static Layout 文件夹中的门户项目之中，一个叫做 uniquename 的文件夹中，这里，uniquename 是静态页面的内部名字，例如 page.ae354734c1。

您可以为静态布局和其他的资源（例如图片和样式）创建目录结构，在该文件夹内但是保持静态布局文件的位置。如果 您更改了该结构，那么您就必须使用静态页面的 Properties 视图，来重新指定静态布局的位置。

页面的初始内容如列表 1 中的代码所示。

				
<table>
	<tr>
		<td> <div class="portlet-container" name="layoutcontainer1"></div> </td>
		<td> <div class="portlet-container" name="layoutcontainer2"></div> </td>
	</tr>
</table>

正如您看到的那样，该文件并没有含有 <html> 标签。这就是为什么它是一个嵌入式的静态页面的原因。如果您编写含有<html>标签及其相关标签静态布局的内容时， 您就得到了一个独立的静态页面。.

现在查看一下门户配置中的更改。现在在导航栏的层级结构中，已经可以看到名为 MyStaticPage 的页面，在 Portal Designer 以及 Outline 视图中也可以看到它（图 7）。您将会在文章的后续部分学到，怎样为 portlets 和容器配置该页面。

回页首

编辑静态布局

现在您需要编辑页面的内容。如果您关闭了静态页面的 HTML 布局文件，那么您可以在 Portal Designer 右击页面并选择 Edit Layout 来重新打开它（见于图 8）。

在静态布局文件中（例如 index.html ），删除所有的内容，然后保存文件。

创建内容和标记

现在您可以使用漂浮布局瀑布式工作单（CSS）来决定网站的结构。
图 10 显示了带有报头、边导航、内容区域和注脚的基本网站结构。

为了创建一个这样的基本布局，向 index.html 文件添加如列表 2 所示的内容。

				
<div id="wrapper">
	<div id="header">
		<h1>Static page aggregation</h1>
	</div>
	<div id="left">The side navigation area</div>
	<div id="right">
           The content area <br> 
	</div>
	<div id="footer">IBM</div>
</div>

注意：
为了让其尽可能的简单，该 HTML 代码只使用<div>标签。您可以试用一下该标签，或者创建更加复杂的布局以满足您的需要。

为主题添加样式工作单

现在，为了给<div>标签如图 10 所示的布局结构，您可以包含外部的 CSS，或者在 index.html 页面的顶部的<style>标签中创建一个 CSS 类定义，或者您可以使用 inline CSS。例如，使用外部 CSS。

按照以下操作添加样式工作单：

1. 创建包含 index.html 静态布局文件的 PortalContent > StaticLayout> page.uniquename 内部的“theme”文件夹 。
2. 然后创建该主题文件夹中的新 CSS 文件。
3. 选择项目，然后选择 File > New > CSS。
4. 浏览主题文件夹，然后输入 CSS 文件的名字作为主题。
5. 点击 Next和 Finish。

CSS 文件会在 CSS 编辑器中打开。现在您可以在 CSS 编辑器的源窗格中创建 CSS 样式。

6. 右击源窗格，并点击 New。
7. 在向导中，选择 HTML 标签以及主体（默认选择），然后点击 OK。
8. 在 New Style 向导中，选择字体。浏览至字体列表框中的 Verdana，然后点击 Add 以将其添加至列表框中。
9. 在布局类别中，选择 margin 并输入 0。然后选择 padding 并输入 0，然后点击 OK。

样式会插入到 theme.css 文件中，如列表 3 所示。

				
BODY {
	margin: 0px;
	padding: 0px;
	font-family: Verdana
}

10. 与之类似，您可以为div类添加其他的样式，如列表 4 所示。

				
div#wrapper{
	width: 100%;
	height: 100%
}

div#header {
	clear: both;
	height: 50px;
	background-color: #e3dffd;
	padding: 15px;
	text-align: center;
}

div#left {
	float: left;
	width: 20%;
	height: 100%;
	background-color: #e9fed3;	
}

div#right {
	float: right;
	width: 80%;
	height: 100%;
	background-color: #fffce1;
}

div#footer {
	clear: both;
	background-color: #ffebdf;
	text-align: center;
}

11. 最终，添加 index.html 文件中的 theme.css 的链接：
    <link rel="stylesheet" href="theme/theme.css" type="text/css">

主题现在已经应用到 index.html 页面，您在 Page Designer 中就可以看到它了。

添加 portlet 容器和 portlet 窗口

静态页面可以包含像规范门户页面这样的 portlets 和 portlet 容器。为了使用静态页面中的 portlets 或者容器，包含在带有<div> 标签的 SPA 规格指定的类属性值。这些类属性值带有 <div> 标签，具有特殊的意义。

添加一个 portlet 容器

使用带有portlet-container 属性值的 <div> 标签，您可以添加静态布局中的容器。例如：

<div class="portlet-container" name="container_0"></div>

该<div>标签需要更多的一个属性：name。它是容器的名字，在页面中需要是独一无二的。该属性区别于相同页面中容器的实例（但是您可以使用门户中不同页面的相同名字）。

按照以下方式，创建 index.html 页面静态布局中的容器：

1. 打开 Page Designer 中的 Palette 视图。
2. 打开门户 drawer。
3. 您将会找到静态页面容器的两个条目，以及静态页面 portlet （见于图 10）：
   
   • Static Page Container
   • Static Page Portlet

4. 将静态页面容器拖放到内容区域 <div> 标签的镜头布局文件中，该标签位于 <br> 标签之后：

<div id="right">  The content area <br>  </div>

5. 在静态页面容器窗口中（图 11），保持或者更改单独的默认容器名，并点击 OK。（您可以通过选择 Insert > Portal > Static page container 来打开对话框）。

6. 保存文件。

“container_0”标签会插入静态布局中，您可以在下面看到这一点：

<div class="portlet-container" name="container_0"></div>

现在，查看 Portal Designer 的 Outline 视图中的门户配置。图 12 显示了 Layout 目录之下 MyStaticPage文件的配置。

MyStaticPage 的第一列是默认的根容器。根容器的一个子级是 Row 容器。该行容器是通过使用 <div> 标签在静态布局中添加的静态容器。在您放入静态布局文件的每一个<div>标签，都会在根列中创建一个行。

重点：
不要像列表 5 那样放置<div>容器标签，因为放置的容器在静态页面中并不支持。如果您非要这样做，那么它只会在顶级容器中起作用（本例中的 container_0 ），而其他所有的容器都会被忽略。

				
<div class="portlet-container" name="container_0">
	<div class="portlet-container" name="container_1"></div>
</div>

根容器的另一个默认的子代，也是它的第一个子代和列容器，被认为是一个隐藏的容器。如果在静态布局中您没有定义任何的容器<div>标签，那么它会在静态页面配置中一直存在。该容器保持有所有您添加至静态布局的 portlets，它们没有任何的父代容器。该隐藏的容器会采用所有的孤儿 portlets。

添加一个 portlet 窗口

通过使用带有 portlet-window 类属性值的<div>标签，来将 portlet 添加至静态布局中，如列表 6 所示。

				
<div class="portlet-window" name="portlet-window_0"
	style="portlet-definition: 'wps.p.Login'"></div>

这个 portlet 窗口的<div>标签，仍然需要更多的两个属性以完成：

• 名字：portlet 的名字在页面中是独一无二的（但是在门户的不同页面间并不是唯一的）。页面中相同类型的不同 portlet 是有区别的。
• 样式：portlet 定义或者您想要在静态页面中实例化的 portlet 的类型。样式属性的值包含 portlet-definition 属性的值。

将 portlet<div>标签插入到静态布局页面中：

1. 从 Palette 视图的门户 drawer 中，拖放静态页面 portlet 到容器内的静态布局中。
2. 在 静态页面 portlet 窗口内， portlet 表格中选择一个 portlet，例如 MyWorkspacePortlet（见于图 13）。

3. 编辑或者保持默认的 portlet 窗口名，因为它会自动维护不同页面之间的唯一性。点击 OK 以完成操作。

portlet 代码会插入到静态布局中，如列表 7 所示。

				
<div class="portlet-window" name="portlet-window_1" 
        style="portlet-definition: 'com.ibm.faces.portlet.FacesPortlet.ae95c684c1'"></div>

您刚刚执行的操作可以完成以下的任务：

• 在门户的环境下生成 portlet 唯一的名字（通过在 Elements > Portlets 之下 Portal Designer 的 Outline 视图中选择 portlet，来在 Properties 视图中编辑这个唯一性的名字）。

注意：如果您在 Properties 视图中更改 portlet 唯一的名字，那么在静态布局文件中您就必须更改所有对它的引用，以保持静态页面中 portlet 的完整性。

• 为<div>标签的名字属性，生成唯一的值。
• 添加包含 portlet 定义和静态布局的<div>标签。
• 注册与门户配置中该 portlet 相关的条目（如果它还没有注册的话）
• 添加 MyWorkspacePortlet 项目作为门户项目中引用的项目

重点：
当在文本编辑器的静态布局中直接编辑 portlet<div>标签时，注意在门户配置中必须已经注册了 portlet 。如果还没有注册， portlet 还没有添加到门户配置中，那么保存静态布局时，会返回 portlet 不能获得的出错信息。因此，更好的选择是使用 portlet 向导，因为它为您执行所有相关的任务。

回页首

发布带有静态页面的门户项目

既然您已经创建 了包含基本静态页面的门户项目，那么通过将其发布到本地或者远程的 WebSphere Portal V6.1 服务器上，您可以查看它是如何工作的。但是在您可以发布门户项目之前，您需要在 Server 视图中创建一个新的服务器。

1. 右击门户项目，并选择 Run As > Run on Server（见于图 14）。

2. 在 Run on Server 向导中，点击 Next。
3. 选择 Remove all（如果您在相同的工作区中已经执行 Run on Server 操作的话）。
4. 点击 Next，然后点击 Finish。

当项目发布以后，浏览器会打开门户项目，您就可以浏览静态页面了（见于图 15 ）。

回页首

添加门户导航栏

如果您创建一个静态页面作为嵌入式的镜头页面，在服务器上运行页面时，您就可以轻松浏览不同的门户页面了，因为门户已经提供了导航功能。但是如果您添加了静态页面作为门户项目中的独立静态页面，您可能就需要导航至门户项目中其他页面的方法了。

默认的 WebSphere Portal V6.1 服务器向您提供了一些工具，以方便导航。通过使用它们独一无二的名字，您可以轻易地将它们包含在静态布局中。如果您在处理从服务器导入的门户项目，那么您就可以使用对其他 portlet 执行的相同拖放操作，来将这些 portlet 插入到静态布局中。

您可以使用这些导航 portlets 中的一种：

				
<div class="portlet-window" name="portlet-window_0" 
        style="portlet-definition: 'wps.p.SpaNavigataion'"></div>

使用 Navigation portlet 来向静态页面添加动态门户导航功能。该 portlet 使用门户导航模型，来为您的静态页面生成导航链接。

				
<div class="portlet-window" name="portlet-window_0" 
        style="portlet-definition: 'wps.p.SpaBreadCrumbTrail'"></div>

使用 Breadcrumb Trail portlet 来向静态页面添加导航功能。

				
<div class="portlet-window" name="portlet-window_0" 
        style="portlet-definition: 'wps.p.SpaResourceList'"></div>

使用 Page List portlet，来向静态页面添加门户资源的链接的动态计算列表。该列表随着 POCURI 动态的产生（ Content URI 的一部分）。

回页首

编辑 portlet 皮肤和导航

您已经知道，静态布局文件中特定位置的<div>标签，可能会引用 portlets，容器或导航。在设计页面时，服务器会使用 portlet 的动态内容以及为这些 portlets 定义元数据的微格式，替换<div>标签。

出于这个目的考虑，门户会提供以下的信息：

• portlet 微格式：定义 portlet 窗口和 portlet 操作，例如 编辑默认设置， Configure，Maximize， Minimize， Personalize，以及 Delete。
• container 微格式：定义 portlet 容器作为 portlets 的占位符。
  对于拖放操作， portlet 微格式提供了源以拖放目标，而容器微格式提供了拖放的目标。
• 导航微格式：如果您的静态页面是独立 Web 页面，就定义导航。

portlet 窗口和 portlet 容器可以包含对象 IDs，服务器可以动态地处理它。当您在创建静态页面时，您可以使用 CSS 或者 JavaScript 技术，该技术使用微格式来产生用户友好的界面。

现在查看这些微格式的具体信息，以查看怎样在代码中实施它们。

Portlet 微格式

图 16 显示了在静态页面中定义 portlet<div>标签的服务器返回的 portlet 标记。当带有 portlet 的静态页面在浏览器中打开时，使用浏览器（例如 Mozila Firefox 中的 Firebug）中的标记检查工具，来查看这个标记。

范例中的一些 HTML 标记故意地分解显示，因为它们包含了服务器处理的对象 ID 引用。您将会找到 <div> 标签， <ul> 标签，而 <li> 标签有特定的类属性类。这些前面指定的类属性值的标签定义了 portlet 标签的完整结构。查看这些类属性定义的以下章节：

类属性

Portlet 窗口在静态页面中定义 portlet 时提供的相同值。包含该类的<div>标签其他属性的所有值与以前相同，除了服务器为窗口的对象 ID 添加的 ID 属性。

xoxo
列表以下项目的指示。

Portlet 信息
引入 portlet 的元数据部分。所有这些元数据都会包装在该容器内，这样它可以被 CSS 所隐藏。 xoxo 类进一步指示了它包含了项目的列表。

Portlet 标题
代表了 portlet 的本地化标题。语言 （lang=en）属性标示着场所。

Portlet 操作
列出了在 portlet 窗口中可以调用的 portlet 操作。注意：这样的操作在 HTTP 方面并不是必需。相反，有些操作是安全的交流，而其他的操作可能很危险，因为它们更改了服务器。在操作的列表中，每一次交流要么使用link来表示安全的交流，而使用 form来表示不安全的交流（例如 Delete 操作）。

Portlet 操作
描述了实际操作或者行为。这些导致实际操作的行为，是由选中的属性代表的。另外，每一个操作是由特定行为的属性分类的，以使用 CSS 来设置这些操作的样式（例如，通过添加特定行为的图标）。可能操作的列表是在服务器上计算的。新的操作会随着时间增加而增加。

portlet-window-body
代表 portlet 的主体。

选中的
标示一个选中的项，要么是 portlet 要么是一次操作。如果它出现在 portlet 窗口的<div>标签上，那么 portlet 就是生成页面交流的目标。

portal-drag-source
（可选的）用户可以在屏幕周围拖放 portlet 窗口。该属性只在 portlet 窗口是可编辑 portlet 容器的一部分时，才会有效，如果用户有权编辑页面，那么容器就不会锁定。查看容器微格式，以弄清拖放操作是怎样执行的。注意：拖放操作是从客户端激活的，但是却是在服务器上执行的 。

为皮肤添加样式

如果您看到包含在服务器上运行的 portlet 的静态页面（图 15），那么就会注意到显示的 portlets，而无需格式化，而在 portlet 主体之上的列表中会简单地显示 portlet 操作。因此，您可能需要使用微格式类属性值，来设置它们的格式，如前面描述的那样。

1. 在页面下的皮肤文件夹中添加一个 CSS 文件。静态页面的 uniquename 文件夹。
2. 将其命名为 skin.css。
3. 使用新样式向导或者直接使用文本编辑器，来添加 skin.css 文件中列出的以下类值。

				
.xoxo{
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.xoxo ul{
	margin:0px;
	padding-left:0px;
	font-weight: bold;
	color: #FF9966;
	background-color: #F5F4EF;
	list-style-type: none;
	display: none;
}

.portlet-title{
	margin: 5;
	font-weight: bold;
	color: #85C329;
	background-color: #FAFBF7;
	border-top: 10px solid #CDCDCD;
	list-style-type: none;
	border-top-width: 5px;
}
.portlet-actions{
	margin:1;
	padding-left:10px;
	font-weight: bold;
	color: #FF9966;
	background-color: #F5F4EF;
	list-style-type: none;
	border-bottom: 3px solid #CDCDCD;
	cursor: pointer;
	padding-left: 10px;
}
.portlet-actions li{
	margin: 1;
	font-weight: bold;
	color: #FF9966;
	background-color: ##F5F4EF;
	list-style-type: none;
	text-align: left;
	cursor:auto
}

.portlet-window-body{
	border-bottom: 6px solid #CDCDCD;
	margin-left:10px;
}

注意.xoxo ul 类的 display 属性是 none。这就是 xoxo 类的 <div>标签内部的 第一个 UL 元素，它只是带有 portlet-actions 属性值的<ul>标签。对于这些值， portlet 操作会显示在浏览器中，直到用户点击减号符号以展开它们。您将会被提供一个简单的展开-收缩机理，使用 JavaScript 来设计 portlet 操作作为 portlet 皮肤的一部分。

4. 现在在静态布局文件中添加 skin.css 的链接：

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

下一步是添加 JavaScript 以使皮肤可以分解。

添加 JavaScript 以使皮肤可以分解

您可以看到，在 portlet 的初始状态中，您将不会看到 portlet 操作，因为您可以使用 none 的样式显示属性。为了让 portlet 皮肤操作可以分解，您需要添加 JavaScript。在该任务中，您可以在页面的皮肤文件中，创建一个名为 skin.js 的新 JavaScript 文件。静态布局的 uniquename。

按照以下步骤，创建一个新的 JavaScript 文件：

1. 点击 File > New > Other。
2. 在对话框中，展开 JavaScript 章节，并选择 JavaScript Source 文件。
3. 点击 Next。
4. 输入名字为 skin.js 。
5. 切换至您需要创建 JavaScipt 文件的文件夹。点击 Finish 以在 JavaScript 编辑器中打开 skin.js 文件。
6. Rational Application Developer V7.5 使用 Java 类的编辑器，来提供对 JavaScript 的编辑支持功能。
7. 向 skin.js 文件添加如列表 X 所示的以下代码。

				
/**
 * Registers the onclick event of the document
 */
document.onclick = function(e) {
	if (!e) e = window.event; // Now e is available to be used in all browsers
	var elem = getEventTarget(e);
	/* test if the element is a UL tag (case insensitive) */
	if (/UL/i.test(elem.tagName)) return;
	else elem = getAncestorElement(elem, 'tagName', /li/i);
	if (elem) {
		/*
		 * if xoxo is not prepended to className 'portlet-actions' i.e.
		 * portlet-actions is not a list, hence return
		 */
		if (!/\bportlet-actions\b/i.test(elem.className)) return;
		/*
		 * get the first UL child of the portlet-actions since it contains all
		 * the actions
		 */
		var ulStyle = elem.getElementsByTagName('ul')[0].style;
		/* toggle between the style of UL from block to normal */
		ulStyle.display = (!ulStyle.display) ? 'block' : '';
	}
};

/**
 * Returns the element node where the mouse was clicked
 */
function getEventTarget(e) {
	var eventTarget;
	if (e.target)
		eventTarget = e.target; // for W3C standards and Netscape
	else if (e.srcElement)
		eventTarget = e.srcElement; // IE
	/* If node type of eventTarget is not ELEMENT return its parent */
	return eventTarget.nodeType == 1 ? eventTarget : eventTarget.parentNode;
}

/**
 * Returns the ancestor element of the node elem whose prop value is equal to
 * regexVal
 */
function getAncestorElement(elem, prop, regexVal) {
	while (elem) {
		if (regexVal.test(elem[prop]))
			return elem;
		elem = elem.parentNode;
	}
	return undefined;
}

JavaScript 代码包含三个功能：

• document.onclick 功能会处理文件中所有点击事件，并对<ul class="xoxo portlet-actions">标签的分解操作负责，它定义了所有的操作。
• getEventTarget 功能返回了点击的文件中的元素节点。document.onclick 功能需要该元素节点，以确定是否有用户点击包含 Actions 的 <div>标签。
• getAncestorElement 功能返回 <li> 标签（由 document.onclick 功能定义），它要么与点击的 <div> 标签相同，要么是其先代。

容器微格式

图 17 显示了容器的标记，该容器是由服务器为定义容器<div>标签而返回的。

容器为类属性提供了以下的值：

Portlet 容器
在主页范围内独一无二容器的名字，它与在静态布局中您为 portlet 容器提供的值相同。ID 属性包含了窗口的对象 ID。

portal-drop-target
拖放操作中的拖拉目标的可编辑容器。

portal-drop-handler
 代表拖放操作召回管理员的格式 。该操作包含一个独一无二的标示拖放目标的 URL。您可以添加额外的线索，并动态地拖放源。对于拖放源，在定义 portlet 时从 portlet 微格式中使用属性。

导航微格式

图 18 显示了导航 portlet 的标记，它是由定义导航<div>标签的静态页面的服务器返回的。因为它是一个 portlet，在这里总体结构的 portlet 微格式仍然有效。

注意只有 portlet-window-body 的 <div> 标签会定义带有特定类属性值的额外标记，以处理不同的导航状态。它们都是类属性值：

first
列表中的第一个子代，CSS 样式需要。

last
列表中的最后一个子代，CSS 样式需要。

expanded
一个展开的节点。一个节点只是在它拥有子代，而且其导航状态被设置成展开时，该节点才可以展开。

collapsed
一个分解的节点。一个节点只是在它拥有子代，而且其分解状态被设置成展开时，该节点才可以分解。

page-actions
页面中可使用的操作的列表，这些操作一般用于展开或者分解导航节点。对于在导航栏中选择的页面，该列表还包含了页面中可执行的操作。

selected
当前在导航栏中选择的页面。

pageoperation-expand
展开一个可分解节点的属性。

pageoperation-collapse
分解一个可展开节点的属性。

就像您们对皮肤可以应用 CSS 和 JavaScript 技术一样，您还可以在静态页面中，将容器和导航栏转化为用户友好的界面。

回页首

选项

添加本地文件

如果您想要静态页面支持不同的语言或者场所，那么您可以轻易地使用静态页面聚合技术。它支持本地化而不需要费多大力。您所要做的，就是根据基底文件的命名习惯来起不同的名字。这些文件可以是 HTML 文件，图像文件（JPG， GIF，或者其他格式），CSS 文件， JavaScript （.js）文件等等。

本地化文件的命名习惯

如果您的基底文件名是 base_file_name.extension，那么您需要为文件的本地版本命名为 base_file_name_locale.extension 。

例如，对于名为 my_page.html 的基底文件，文件的英语版本是 my_page_en.html，而文件的美国英语版本名是 my_page_en_us.html 。这些文件需要放到相同的目录之下以作为基底文件，my_page.html。尽管这些文件拥有不同的文件名，它们在逻辑上代表相同的资源，并通过它们的基底名来引用。在合适的时候 门户会服务资源的本地化版本。

创建一个在多页面中使用的文件

既然现在您已经创建了带有引用样式工作单、JavaScript、图片或者其他可能资源的静态布局的静态页面，那么您就可以创建带有所有这些资源的 .zip 文件，并在门户项目中对不同的静态页面再使用相同的工作。

通过使用已存在的布局文件，来创建一个新的静态页面：

1. 选择 Portal Designer 中的节点（页面，标签，或者 URL）。
2. 选择 Insert static page > Before 或者 After 或者 As child（记住 URL 不能拥有子层次的属性）。
3. 当新页面随着静态布局对话框一起打开时，就像您在前面看到的那样，输入静态页面的标题：MyStaticPage2。
4. 选中“Create using existing ZIP or HTML page”复选框，以选择已存在的布局。
5. 点击 Browse 以定位 .zip 文件或者自我包含的 HTM 或者 HTML 布局文件，然后点击 OK。
6. 如果您选择 .zip 文件，从 “Select the Layout file”下拉菜单中选择一个 HTM 或者 HTML 文件。
7. 保持所有其他选项的默认值不变，或者根据您的需要更改它，然后点击 Finish。
8. 静态页面会随着您在 .zip 文件中的静态布局文件一起创建，而该静态布局文件现在会打开以方便编辑。保存门户配置。

该操作会导入 .zip 档案文件中的所有内容到页面下的文件夹中。uniquename 文件夹。它位于门户项目中的 PortalConfiguration > StaticLayout 文件夹之下，uniquename 是 Portal Designer 使用的静态页面的内部唯一性的名字。

编辑带有静态布局的门户页面属性

如果您不喜欢为静态页面设置的静态布局，那么您就可以使用从您的 .zip 文件或者不同 .zip 文件中的其他布局文件来替换它。您还可以更改 portlet 窗口显示的方式。选择 Portal Designer 中的静态页面，然后执行 Properties 视图内 Static Page 项需要的步骤（见于图 19）。

按照以下方式， 从相同的.zip 文件升级静态页面的静态布局到不同的布局文件：

1. 选择 Update Layout File 下拉菜单，并选择您想要使用的布局文件
2. 静态文件会升级到您刚刚选择的静态布局文件，该布局文件会打开以方便编辑。保存门户配置。

按照以下步骤，从不同的 .zip 文件升级静态页面的静态布局文件到布局文件或者新的静态布局：

1. 点击 New 以打开“Replace static layout file”窗口（见于图 20）。
   1. 为了创建一个 MyStaticPage 的新布局文件，点击 Finish。
   2. 选中 Create using existing ZIP or HTML page 复选框以选择已存在的布局。
   3. 浏览文件位置并点击 Finish。

2. 该静态页面会升级到使用选中的静态布局文件，该布局文件会打开以进行编辑。
3. 保存门户配置。
4. 为了更改静态页面的 portlet 窗口显示选项，您可以在 Properties 视图中选择 Portlet window display 选项，并将其更新为您想要的值。
5. 再次保存门户配置。

发布带有静态页面的门户项目

既然您已经创建包含静态页面的门户项目，那么现在您就可以将其发布到本地或者远程的 WebSphere Portal V6.1 服务器上。

如果您不需要定制的门户主题和皮肤（就像在独立静态页面中那样），那么您就可以使用 Deploy portal configuration only 选项来完整地部署静态页面。这种方法要比部署带有主题和皮肤的完整门户项目更快。

其他的选项

本文介绍了静态页面聚合，并指导您使用 Rational Application Developer V7.5 来实施这个过程。对于静态页面您还可以做的更多。您可以使用 Portal Designer，来将协作性的 portlets 包含在静态页面中，并在静态页面中创建用户友好的 URLs，以让用户搜索起来更加容易。

参考资料

• 在 IBM WebSphere Portal 信息中心 中查找更多有关静态页面聚合的内容。
  
  
• 查看 IBM Rational Application Developer V7.5 中的新特性。
  
  
• 在 WebSphere Portal Model SPI 概览 中浏览主题。
  
  
• 查看 IBM Rational Application Developer 信息中心 的技术指南。
  
  
• 检查 IBM® developerWorks® 上的 Rational Application Developer for WebSphere Software 产品专题，可以连接到产品文档、文章、教程、课程、下载，以及其它有用的区域。
  
  
• 在 IBM Rational 软件交付平台 中了解其它应用程序，包括适用于并行开发和地域分布式团队的协作工具，以及用于架构管理、资产管理、变更和发布管理，集成需求管理、过程和组合管理，和质量管理。
  
  
• 访问 developerWorks 上的 Rational 专区，了解有关 Rational 软件交付平台产品的技术资源和最佳实践。
  
  
• 查看 Rational Edge 电子期刊中文版，获得了解高效软件开发背后概念的文章。
  
  
• 订阅 IBM developerWorks 时事通讯，获得有关最佳的 developerWorks 教程、文章、下载、社区活动、网络广播和事件的每周更新。
  
  
• 浏览 技术书店，获得有关这些和其它技术主题的书籍。
  
  

• 下载 Rational Application Developer 的免费试用版。
  
  
• 下载 IBM Rational 软件的试用版。
  
  
• 下载这些 IBM 产品评估版，并着手使用来自于 DB2® 、Lotus® 、Tivoli® ，以及 WebSphere® 的应用程序开发工具和中间件产品。

• 参与 Rational 开发工具讨论区，并加入到 developerWorks 社区。
  
  
• 查看 developerWorks 博客，并加入 developerWorks 社区。
  
  

关于作者

		Jatin Varshney 是位于印度 Delhi 的 IBM 印度软件研究部的一名软件工程师。他从事于 IBM Rational Application Developer 的门户工具组件的 Portal Designer 和 Web 2.0 特性工作。

对本文的评价

太差！ (1) 需提高 (2) 一般；尚可 (3) 好文章 (4) 真棒！(5) 建议？