转自：http://www.ibm.com/developerworks/cn/lotus/portal61-staticpage/index.html
在企业级开发当中，HTML 设计人员与掌握 J2EE/Portlet 技术的通常不是同一个人，而以前的 Portal 页面开发却需要两者的结合。这会使开发流程稍显复杂。现在，随着 WebSphere Portal 6.1 的新特性，使得我们能够直接使用标准的 HTML 静态页面作为 Portal 页面，甚至可以在其中引用 portlet 作为动态内容。
我们知道，在 WebSphere Portal 6.1 之前的版本中创建 / 开发 WebSphere Portal 页面布局主要是基于 Theme & Skin（主题与皮肤）来实现的。简单的来说，WebSphere Portal 页面设计人员需要精通 JSP/J2EE 以及 Portal API 的相关技术。需要定义 JSP 文件，其中又要利用 JSP tag 来生成导航元素以及嵌入 Portlet。而页面中嵌入的 Portlet 布局也必须遵循 WebSphere Portal 的布局模型。
这一切虽然灵活且功能强大，但无疑加重了页面设计人员的负担，需要额外掌握大量的开发技能才能胜任，并且在开发时无法实时预览最终展示的效果。有没有什么方法能让 Portlet 开发人员专注于 Portal 的相关开发，而页面设计人员专注于页面布局的设计而无需引入大量 Portal 技术呢？答案就是本文即将介绍的 WebSphere Portal 6.1 中对 HTML 静态页面的支持了！
WebSphere Portal 6.1 的新特性：对 HTML 静态页面的支持及其优势
在 WebSphere Portal 6.1 中引入了一种新的方法来创建页面布局，这就是 HTML 静态页面。说是静态页面，其实也不完全是传统意义上的静态页面，页面上也可以包含动态内容（甚至是 Portlet 都可以），我们在后文中会详细介绍动态内容的部分。这里所指的静态页面，很大的程度上是相对于传统的基于主题与皮肤的动态页面来说的。它能够让页面设计人员无需掌握任何 JSP/J2EE 相关知识，也无需了解 WebSphere Portal 相关的编程模型即可使用标准的 HTML/CSS/JavaScript. 来编写自己的页面布局。当然也支持标准的 HTML 编辑器来进行所见即所得的开发以及预览功能。甚至还能在其中包含 Portlet 作为动态内容，这无疑清晰了开发流程中的网页设计人员与 Portlet 开发人员之间的职责范畴，让每个人各司其职，降低了模块之间的耦合度。下面让我们来详细看看新旧两种方式给我们带来的差别。
首先让我们来简单回顾一下传统的页面布局开发方式。
如图 1 所示，主题所定义的 JSP 文件基于 WebSphere Portal 的编程模型，包含了一些展示时所需要的 HTML 标记，并且使用了 JSP tag 来使用 WebSphere Portal 提供的导航模型并生成相应的 HTML 标识。而皮肤则通过类似的方法来展示 Portlet 的标题以及边界框。至于内容区域，则是由 WebSphere Portal 的布局模型来负责安排以及展示其中的 Portlet。
在这种编程模型下，各种资源文件（例如图片、CSS 等）直接保存在服务器的文件系统中。引用时需要使用 WebSphere Portal 提供的一些 API tag 才行，而不能用 URI 相对路径来直接访问。
可以看出，这种模型无疑十分灵活并且功能强大，但是正如前面提到的那样，它也十分复杂，它需要 HTML 设计人员同时掌握 J2EE/Portlet 的相关技能。在企业级开发当中，HTML 设计人员与掌握 J2EE/Portlet 技术的通常并不是同一个人。这样，开发流程就会变得复杂起来
基于 HTML 的静态页面
好吧，让我们来看看新的基于 HTML 的静态页面能给我们带来什么。
如图 2 所示，这时我们的所有 HTML 页面、CSS、JavaScript. 以及图片均可以包含在一个压缩包里。而 WebSphere Portal 对这里所说的 HTML/CSS/JavaScript. 均提供标准功能的全面支持。我们可以用所见即所得（WYSIWYG）的方式，使用标准的 HTML 编辑器进行开发以及预览，而这是在传统的主题皮肤开发模式下无法享用的。
此时，页面的内容以及布局都包含在一个简单的 HTML 文件中，而各种资源文件都和这个 HTML 文件一起包含在同一个压缩文件里。并且，我们可以在 HTML 文件中通过相对 URI 而不是使用 Portal API 提供的相应 tag 来引用这些资源文件。
在 HTML 静态页面中引入动态 Portlet 内容
目前为止，这只是一个传统的静态页面而已，完全没有用上 WebSphere Portal 所能提供的强大功能。针对这点，我们可以通过将 Portlet 作为动态内容包含在这个静态页面上来扩展它的功能和应用范围。
这里我们可以顺便对目前为止的几个术语做一下简单的介绍：
- 静态布局：基于简单的 HTML 页面的布局，其中可能包含了对 Portlet 的引用。
- 静态页面：基于静态布局的 WebSphere Portal 页面。
- 动态布局：标准的 WebSphere Portal 的基于行 / 列的布局方式。
- 动态页面：基于动态布局的 WebSphere Portal 页面。
我们不仅能在静态页面上展示 Portlet 内容，还能够将其它 WebSphere Portal 特性在静态页面上提供支持，例如访问权限控制、个性化、Portlet 用户数据等等。可以参考 WebSphere Portal 信息中心来获取静态页面对更多 WebSphere Portal 特性的支持信息。
下面，我们来看一下在 WebSphere Portal 中具体是如何使用静态页面的。首先，如图 3 所示，我们的静态页面目录结构包括如下文件：
当然这只是一个简单的例子，但已经能完全包含我们所要讨论的内容。index.html 是整个包结构里唯一一个必须存在的文件，而其它的 CSS/JavaScript/ 图片等文件都是可选的，整个包里甚至可以只包含一个 HTML 文件。与 index.html 相同的目录可以存放 CSS/JavaScript. 等文件，而图片及其它资源文件可以放在子目录里。而且，整个目录结构都与标准的 Web 包结构一致。再把这个目录打包成一个 zip 文件就可以部署到 WebSphere Portal 上面了。需要注意的是，在当前的 WebSphere Portal 版本中，这个 zip 文件的大小要求在 1 MB 以内才能够被良好的支持。
HTML 静态页面的部署可以通过如下方式：
- WebSphere Portal 的管理控制页面；
- XMLAccess 命令；
- WebSphere Portal 脚本接口；
以第一种方式为例，在管理控制页面上创建新页面时，选择页面类型为“静态内容”，如图 4 所示。
而在接下来的页面属性（图 5）上，指定静态页面的起始页面文件名，以及压缩包或者 HTML 页面的本地路径。值得注意的是最后一个选项，Portlet 窗口的显示选项。
在上图的最后一个选项中，指定的是 Portlet 如何在最终的页面中展示。有如下几种选择：
- Included Markup：Portlet 生成的 HTML 片段会在页面展示的时候插入到页面当中，并且在同一个 HTTP 响应中返回。
- IFrame：Portlet 可以通过 IFrame. 来展示以实现异步加载。
- AJAX：Portlet 插入到 HTTP 响应中的 HTML 片段包含了一个指向 Portlet feed 的链接。 静态页面上提供的 Javascript. 脚本可以以 AJAX 请求的方式从这个链接中获取到内容。
在下面的例子里，将主要以第一种方式来展示 Portlet。
最后，看一下静态页面部署到 WebSphere Portal 上之后将以何种方式存储。
可以看出，所有的文件都是存储 WebSphere Portal 的数据库中的，而不是像主题皮肤那样存储在文件系统里。
了解了静态页面的概念之后，让我们先来看一个最简单的例子。一个单纯的 HTML 静态页面，不含任何 Portlet 动态元素，也不包含对 CSS/Javascript. 以及图片的引用。整个源代码就只有如下的这个 html 文件：
Sample Static Page
body,td,th {
font-size: 18px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
This is a static page sample as standalone Web pages. |
这是一个非常简单的 HTML 页面，这样一个标准的 HTML 页面如何集成到 WebSphere Portal 当中呢？我们用 WebSphere Portal 的管理控制页面来创建一个新页面 test1。其实创建一个静态页面的步骤和以前创建动态页面基本一致，所不同的就是需要填写一些额外的属性。
通过在 WebSphere Portal 的页面管理里点击“新页面”来创建一个新的 Portal 页面：
在页面属性里提供页面标题及唯一标识，这里我们把新静态页面叫做“test1”：
在页面类型里选择类型为“静态内容”，并且点击下面的链接来提供页面布局属性：
之后在新打开的页面布局属性页可以提供静态页面相关的各种选项：
- 静态页面布局文件名；
- 包含了上述文件的压缩包或者 HTML 文件的本地位置；
- Portlet 窗口的展现方式。
好了，大功告成。现在我们已经可以通过 WebSphere Portal 来访问新创建的静态页面了，如下图中的“test1”就是刚刚建立的静态页面。
点击之后会打开一个新的窗口：
恩，也许这样在新窗口显示页面并不是你想要的效果，是否想让新页面的内容只显示在内容区域里而不是新开窗口？像图 13 这样？
其实这种效果实现起来也很简单，只需要去除掉 HTML 页面源码中的 相关 tag 即可。注意在这种方式下，依然是由主题来控制导航栏和菜单条的展示，而 HTML 代码只负责内容区域里的相关展示。
p {
font-size: 18px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
This is a static page sample as part of the portal content area. |
之前介绍过静态页面也能够包含动态内容，下面就来看看都有哪些动态内容可以用： |
- Portlet 微格式：定义了 Portlet 的窗口及其动作，例如“修改缺省设置”/“配置”/“最大化”/“最小化”/“删除”等。
- Container 微格式：定义了 Portlet 容器以用来包含各种 Portlet。
- Navigation 微格式：定义了静态页面展示时对导航支持。
让我们来看一下如何在静态页面中引用 Portlet，其实很简单： |
清单 3. test3.html
This is a static page example with portlet. Manage My Portlets |
- 所有的语义标识都必须包含在
标签中。
- "portlet-container"微格式来定义一个 Portlet 容器，里面可以包含零个或多个 Portlet 窗口。
- "portlet-window"微格式定义了一个 Portlet 窗口，它用来展示页面上的一个 Portlet 实例。最后通过"portlet-definition"来引用一个具体的 Portlet。这里的“wps.p.Manage My Portlets”是我们所想引用的 Portlet 的唯一标识，这个标识可以通过 Portlet 的管理页面来获得。如下图所示：
最后这个包含了 Portlet 的静态页面效果如下： |
图 15. 静态页面（包含了 Portlet 动态内容）
你是否好奇这些动态语义片段最终将被 WebSphere Portal 解释成怎样的代码？我们来看一个 "portlet-window"微代码最终在客户端解释的样例：
这里可以看出，解释过的 Portlet 动作将遵循 REST 模式，即安全的可重复操作将被解释为“GET”动作，而非安全的不可重复的操作将被解释为“POST”动作（如上面的删除操作所使用的就是“POST”动作）。
还有一点值得注意的是，静态页面中包含的 Portlet 是不能像动态页面那样可以通过 WebSphere Portal 的页面管理功能来移动或者删除的。必须通过修改 HTML 文件然后在 WebSphere Portal 的页面编辑中更新它来实现。同样需要注意的是，静态页面和动态页面之间是不能互相转换的，如果需要更改页面类型，我们需要先删除此页面然后按照新需求来建立新类型的页面。
目前为止，本文只介绍了静态页面布局的几个简单例子。例如，如何部署一个纯静态的 HTML 页面，如何部署一个包含动态内容（Portlet）的静态页面。但其实 WebSphere Portal 还提供了对静态页面更多更高级的支持：
- 导航选项
- Breadcrumb
- 本地化支持
- 资源定位
- 拖拽功能
- Live text 功能
- Portlet 之间的通讯交互
这些方面的资料都可以通过 WebSphere Portal 的信息中心来学习。相信通过灵活的使用 HTML 静态页面，将会有助于我们更加方便的打造个性化的页面布局，并且有利于简化我们的开发流程。
来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/14789789/viewspace-631578/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/14789789/viewspace-631578/
115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
