WebLogic Portal 8.1展现原理研究

　　1. Request Overview

　　在文章开始之前，我们先看下面的三张图：

　　

　　

　　

　　

　　

　　

　　图一是 Weblogic Portal8.1 自身带的例程的运行界面，在页面的上方有一栏菜单选项，页面的主体是三个 Portlet 。图一的界面显得比较单调，而图二、三则分别是两个采用 Weblogic Portal8.1 实现的商业网站，可以看到商业网站不仅仅是颜色多样，菜单栏的显示和 Portlet 的布局方式也有所不同。

　　Weblogic Portal8.1 自身携带的表现方式主要是做一个示范作用，往往不能直接应用在实际的应用中，因此开发商就要根据客户的需求定制相应的显示界面。关于 Portal 应用界面的需求一般包括：

　　对 Portal 表现结构的需求，例如各个摆放位置、提供树形菜单等；

　　对 Portal 外感感觉的需求，例如 Portlet 标题的颜色、字体等；

　　应该具备多种显示方案，可以动态选择；

　　最终用户能够定制自己的表现方案

　　本文的目的是说明如何在Weblogic Portal 8.1展现框架上进行定制和扩充。首先说明Portal应用的结构，然后说明其渲染机制和原理，最后说明如何定制和扩充。

　　2. Portal Component Tree, Single File and Streaming Portal

　　2.1. Portal Component Tree

　　当我们提及 Portal 的时候，首先第一个问题就是“什么是 Portal ？”，这里是 BEA 的官方回答（ http://edocs.bea.com/workshop/docs81/doc/en/portal/overview/ovWhatIsAPortal.html）。简单地说 Portal 就是 Portlet 的集合，对于 Portal 应用而言， Portlet 是最小的应用单位，表现为一个个小“窗口”。

　　一个 Portal 应用可能包含十几个到上百个 Portlet ，为了分门别类地管理、显示这些 Portlet ，需要引入新的组件对 Portlet 进行组织。在 WebLogic Portal 8.1 中， Portal 应用的体系结构如下图：

　　

　　

　　从图中可以看到，一个 Portal 应用是一个 Java Web 应用，内部可以包含多个 Portal ，每个 Portal 可以包含多个 Desktop （桌面）。 Desktop 是用户访问 Portal 的入口，一个 Desktop 包含多个 Book 和 Page ， Book 之间可以自保函。通过 Book 和 Page 的组织，用户访问到具体的 Portlet 应用。

　　在 WebLogic Portal 8.1 中， Portal 体系结构中的各部分称之为 Portal Component ，它们的组称之为 Portal Component Tree （组件树）。当用户访问 Portal 应用的时候，实际上是在访问这棵组件树，那么这个组件树是如何产生的呢？

　　2.2. Single File Porta　　当开发人员通过 WebLogic Workshop 创建 Portal 应用的时候，将会创建相应的 .portal 文件。 .portal 文件实际上对应的是一个 Desktop ，是一个 xml 格式的文件，包含了 Portal Component Tree 的完整内容，所以称之为 Single File Portal 。如下图：

　　

　　

　　

　　因为在一个文件中就包含 Portal Component Tree 的完整内容，所以在显示的时候不需要使用到数据库，适合于在开发阶段使用。由于以文件形式存放，所以无法对 Single File Portal 进行个性化，每个用户都是访问同一个文件；同时 Single File Portal 的 Book 、 Page 等组件也不能进行授权。

　　在开发过程中要注意的是，由于 Single File Portal 的特性，当开发人员应用某个功能，例如为 .portal 文件指定一个 Look &Feel 的时候，其实是把这个 Look &Feel 的说明拷贝到 .portal 文件中。如果之后开发人员在去修改这个 Look &Feel ，对 .portal 文件是没有影响的，只能重新为 .portal 文件指定 Look &Feel 才能导致新的修改会拷贝到 .portal 文件中。

　　2.3. Streaming Portal

　　一个 Portal 应用的结构，往往不是在开发阶段确定的，而是在系统上线后有管理人员根据实际情况决定。 WebLogic Portal 8.1 提供基于 Web 界面的管理控制台，管理人员可以通过控制台创建相应的 Portal 应用。如下图：

　　

　　

　　通过控制台创建的 Portal 应用，其 Portal Component Tree 是存放在数据库中，最终用户访问 Portal 应用的时候，系统就从数据库读取信息，构造出相应的 Portal Component Tree ，并将其展现为 HTML 。这种形式的 Portal 在 WebLogic Portal 8.1 中称之为 Streaming Portal 。

　　Streaming Portal 中的各个组件是存放在数据库中，每个组件都可以单独被管理，管理员可以设置每个组件的授权控制信息。对于同一个 Portal 应用，每个用户的 Portal Component Tree 可以有所不同，这样就能实现应用的个性化。 WebLogic Portal 8.1 提供 Visitor Tools 工具，可以让最终用户设计自己的 Portal Component Tree 。

　　3. How Portal Components Are Rendered?

　　从上一章我们知道，无论是 Single File Portal 还是 Streaming Portal ，都是提供一颗 Portal Component Tree ，那么用户最终看到的 HTML 页面怎么来的呢？

　　3.1. Rendering Process

　　为了简单起见，我们假设有如下的一个简化的 Portal Component Tree ：

　　

　　

　　最终需要转换为如下的 HTML 页面

　　

　　

　　为了做到这一点，直接的方法开发人员实现构造出整个 HTML ，然后在适当的地方插入 Portlet 的内容。但这样的做法显然过于固定， Portal 的渲染引擎应该能够根据不同的组件树动态生成 HTML 页面。

　　Portal 的展现引擎能够遍历组件树，那么在这个遍历的过程中就能够根据组件树的结构生成 HTML 页面框架，如下 :

　　

　　

　　

　　但是渲染引擎如何渲染每一个组件呢？例如上图中，对于 Page 组件，应该产生什么 HTML 代码？

　　这个问题的解决方法就是让组件来决定自己应该如何渲染。这样遍历过程中，渲染引擎只需调用每个组件的渲染方法，将所有组件的渲染输出组合起来，就成了最终的、完整的 HTML 页面。

　　

　　

　　3.2. WLP Look &Feel

　　在 WebLogic Portal 8.1 中，将界面输出的机制称之为： Look &Feel ，有以下部分组成：

　　Shells

　　Skeletons

　　Skins

　　Navigation Menus

　　Layouts

　　Themes

　　其中最主要的是Skeletons和Skins两部分。

　　3.2.1. Sekletons

　　Skeletons 部分负责将 Portal Component Tree 渲染为 HTML 代码，由一系列的 JSP 文件组成，这些 JSP 文件的名称大部分都是固定的，分别对应不同的 Portal 组件，如下表：

　　This portal component... uses this skeleton JSP... to:

　　Desktop desktop.jsp Insert the HTML document declarations and insert and comments.

　　Shell shell.jsp Insert the HTML document's opening and closing tag and insert and comments.

　　Shell - The tag in a .shell file head.jsp Insert the HTML document's opening and closing tag and insert and comments.

　　Shell - The tag in a .shell file body.jsp Insert the HTML document's opening and closing tag and provide presentation logic.

　　Shell - The tag in a .shell file header.jsp Render the desktop's header region.

　　Shell - The tag in a .shell file footer.jsp Render the desktop's footer region.

　　Book book.jsp Render the book framework and styles.

　　Navigation Menu singlelevelmenu.jsp Render the Single Level Menu provided by WebLogic Portal.

　　Navigation Menu multilevelmenu.jsp Render the Multi Level Menu provided by WebLogic Portal.

　　Navigation Menu submenu.jsp Used by multilevelmenu.jsp to create a book's navigation links. Also provides rendering for nested books and pages.

　　Page page.jsp Render a page framework and styles.

　　Layout - The tag in a .layout file gridlayout.jsp Render placeholders in the layout using the Grid Layout style.

　　Layout - The tag in a .layout file borderlayout.jsp Render placeholders in the layout using the Border layout style.

　　Layout - The tag in a .layout file. flowlayout.jsp Render placeholders in the layout using the Flow layout style.

　　Layout - The tag in the .layout file placeholder.jsp Render an individual placeholder in a Layout.

　　Portlet titlebar titlebar.jsp Render a portlet titlebar.

　　Portlet titlebar buttons for floating windows buttonfloat.jsp Render a button that launches separate portlet mode windows (for example, Edit and Help).

　　Portlet titlebar toggle buttons togglebutton.jsp Render a button that toggles between portlet states (for example, Minimize/Restore and Maximize/Restore).

　　Portlet titlebar Delete button buttondelete.jsp Render a button that removes a portlet from a page.

　　Portlet error.jsp Display error messages in a portlet.

　　Portlet webflowportlet.jsp Render a Webflow portlet created in previous versions of WebLogic Portal and running in a compatibility domain.

　　Book, Page, and Portlet window.jsp Rendering the container for the content area.

　　Theme theme.jsp Render books, pages, and portlets in the themes applied to them.

　　通过 Skeletons 部分，可以决定 Portal 应用的最终渲染出来的结构。在 WebLogic Portal 8.1 中，系统还能根据接入设备的不同选择不同的 Skeleton ，以适应不同的要求。例如通过 PC 机浏览和通过 Pocket PC （屏幕小）来访问。

　　3.2.2. Skins

　　Skins 部分负责界面的图像、颜色、字体等部分，主要影响 Portal 应用的观感。对于同一个 Portal 应用，选择不同的 Skin ，能够给最终用户带来不同的感觉。在 WebLogic Portal 8.1 中，一个 Portal 应用的外观可以分为如下的部分：

　　

　　

　　这些部分的外观分别有以下的 CSS 文件所控制：

　　If the book is set to Single-Level Menu

　　Description Style(s) Style sheet

　　1 Top-level unselected menu item .bea-portal-book-primary-menu-single a book.css

　　Rollover on top-level unselected menu item .bea-portal-book-primary-menu-single a:hover book.css

　　2 Top-level selected menu item .bea-portal-book-primary-menu-single span book.css

　　3 Top-level menu background .bea-portal-book-primary-menu-single book.css

　　4 First-level unselected menu item .bea-portal-book-menu-single a book.css

　　Rollover on first-level unselected menu item .bea-portal-book-menu-single a:hover book.css

　　5 First-level selected menu item .bea-portal-book-menu-single span book.css

　　6 First-level menu background. Also applies to the background that displays sub-books and pages. .bea-portal-book-single book.css

　　7/8 Second-and-higher-level selected menus use the same style classes as the first-level menus. book.css

　　9 Portlet titlebar background: .bea-portal-window-titlebar title: .bea-portal-window-titlebar-title window.css

　　10 Portlet titlebar icons These are not determined by style classes. They come from the skin's /images directory. This information is presented for convenience. N/A

　　11 Portlet border .bea-portal-window window.css

　　12 Page background .bea-portal-book-page book.css

　　13 Portlet content (mainly for padding) The content in the portlet itself (JSP, HTML, or JPF) are not skin-related and controls the styles used within itself. .bea-portal-window-content window.css

　　If the book is set to Multi-Level Menu

　　Description Style(s) Style sheet

　　1 Top-level unselected menu item .bea-portal-book-primary-menu-root a book.css

　　Rollover on top-level unselected menu item .bea-portal-book-primary-menu-root a:hover book.css

　　2 Top-level selected menu item .bea-portal-book-primary-menu-root a book.css

　　3 Top-level menu background .bea-portal-book-primary-menu-root book.css

　　4 Sub-level menu items in a drop-down list from the top-level menu (not shown in the figure) .bea-portal-book-primary-menu-nested-item a book.css

　　3.3. Summary

　　让我们来看看在 WebLogic Portal 8.1 中， Portal 界面是如何被渲染出来的：

　　

　　

　　在开发过程中，开发人员创建出 Portal 应用的相应组件

　　运行过程中，根据开发人员事先创建的组件以及相关的配置， Portal 系统在内存中创建出相应的 Portal 组件树

　　渲染引擎调用相关的 Skeleton 部分，在渲染过程中， JSP 页面还需要引用相关的 Skin 信息

　　融合 Portlet 自身的输出，组成最终的 HTML 页面

　　在接下的一章，我们将讲述开发人员如何创建自己的渲染规则。

　　4. How to Customize the Look &Feel

　　在本章中，并不试图提供完整的 Look &Feel 开发手册，这个部分读者可以参考 WebLogic Portal 8.1 的在线帮助以及相关的例程。本章着重讲述的 Look &Feel 开发过程中容易碰到的一些问题。

　　4.1. beginRender &endRender

　　打开每个 Skeleton 的 JSP 文件，我们都可以发现里面包含着来个 JSP Tag ： beginRender &endRender 。这两个 Tag 是如何作用的呢？

　　让我们再来回顾 Portal 的渲染过程：

　　

　　

　　在遍历 Portal 组件树的过程中，除了叶子节点外其他节点都会经过两次。在上图中，我们可以看到 Page 组件的输出内容是需要包含 Portlet 组件的输出内容，为了做到这一点，就必须：

　　首先输出 Page 组件的开始内容

　　然后输出 Portlet 的内容

　　最后输出 Page 组件的结束内容

　　在WLP的渲染过程中，每个JSP页面实际上会被调用两次，通过对当前状态的判断，每次只有beginRender &endRender其中的一个Tag起作用，从而能够在一个JSP文件中分别输出开头和结尾两部分。

　　4.2. Control API Overview

　　在渲染的过程中，除了直接输入 HTML 代码之外，我们往往还需要更多的信息，包括当前组件的属性（例如标题等）；另外在构造菜单的时候还需要了解组件树的结构。

　　在 WebLogic Portal 8.1 中，每个展现的组件都是继承于 com.bea.netuix.servlets.controls.PresentationContext 类，这个类提供了获取属性和获取所有子组件的方法，通过这些方法我们可以做到：

　　获取每个组件的属性信息

　　在程序中遍历整个组件树

　　那么开发人员如何获得这个类的具体实例呢？每个组件类都提供了获取自身实例的静态函数，开发人员可以在 JSP 页面踵调用适当的静态函数获得相应的实例。

　　

　　PagePresentationContext pageCtx =

　　PagePresentationContext.getPagePresentationContext(request);

　　BookPresentationContext bookCTX =

　　BookPresentationContext.getBookPresentationContext(request);