portal主题页面开发介绍.docVIP

您可能想知道如何将您门户网站上的徽标换成您公司的徽标。或者您想在门户网站上添加一个左侧导航窗格，或更改其背景颜色。通过了解 WebSphere Portal 用于显示门户页面的 JSP 流程以及这些 JSP 的内容，您可以创建或修改主题或皮肤，使您的门户网站看上去象您公司的 Web 站点。 2003 International Business Machines Corporation. Allrights reserved.引言您可能想知道如何将您门户网站上的徽标换成您公司的徽标。或者您想在门户网站上添加一个左侧导航窗格，或更改其背景颜色。通过了解 WebSphere Portal 用于显示门户页面的 JSP 流程以及这些 JSP 的内容，您可以创建或修改主题或皮肤，使您的门户网站看上去象您公司的 Web 站点。IBM WebSphere Portal Enable for Multiplatforms V4.2 使用不同的 Java Server Page（JSP）、级联样式表（Cascading Style Sheet，CSS）和图像来显示门户页面。它使用位于 C:WebSpherePortalServerappwps.earwps.war 目录下 themes 、 skins 和 screens 目录中的 JSP 来构造门户页面。这些目录中的每一个都包含 html 、 wml 和 chtml 子目录，WebSphere Portal 将它们用于服务不同客户机，例如桌面浏览器和移动设备。 本文是一系列文章的第一篇，这一系列将讲解 WebSphere Portal 如何为通过 Internet Explorer（IE）访问 WebSphere Portal 的客户机使用缺省主题和缺省皮肤显示门户页面。对于所有其他的主题和皮肤，处理过程也是类似的。 本系列文章说明了: 用于显示门户页面的 JSP 流程 如何使用 engine.tld 中定义的 JSP 标记 如何使用级联样式表（CSS）元素 如何使用属性文件显示门户网站标题和其它属性本文描述了缺省主题定义的 Default.jsp 、 Head.jsp 和 ToolBarInclude.jsp 的内容和流程。 Default.jsp所有屏幕聚集都从 Default.jsp 开始。用于缺省主题的 Default.jsp 位于 wp_rootappwps.earwps.warthemeshtml 。这个 JSP 包含其它用于显示标题、工具栏的 JSP 以及用于往可用位置及页面植入内容的 JSP。在 Default.jsp 的末尾处， screenRender JSP 标记选择被请求的屏幕（例如 login 或 forgotpassword ）。图 1 演示了 Default.jsp 的流程。 图 1：Default.jsp 的流程 下面的讨论将带您了解 Default.jsp 的内容。当您阅读这些讨论时，您可能想要 查看 Default.jsp 的清单。 1. Default.jsp 文件包含一个 JSP 标记库 engine.tld ，该库使用下列 URI： 2.3. 这一标记库提供了植入位置名称、页面以及在所要求的主题和皮肤定位图像所需的 JSP 标记。您需要了解这一标记库以便定制您门户网站的外观和感觉。4. 为获取门户网站的基本 URL 以及文档 URL，在 Default.jsp 中使用了 constants JSP 标记。这一元素使得下列两个脚本变量可用于该页面。 o wpsBaseURL：用于获取门户网站 URL，例如 /wps/ 。使用此变量可生成指向 wp_rootappwps.earwps.war 目录中资源的链接。 o wpsDocURL：用于生成指向门户网站帮助文件的链接。 5. html 内容的头部分通过包含 Head.jsp 而生成，该 Head.jsp 与 Default.jsp 在同一个目录下。本文下一部分将描述 Head.jsp 。 6. 接下来， Default.jsp 包含 extension/PageBeginInclude.jsp 。这个 JSP 只包含用于 WebSphere Portal Enable 版的注释；其内容不在此处加以讨论。 7. 对于所有版本， Default.jsp 都包含下列三个 JSP。 o ToolBarInclude.jsp o PlaceBarInclude.jsp o PageBarInclude.jsp 这些 JSP 与 Default.jsp 位于同一目录下。 ToolBarInclude.jsp 在本文中进行讨论。 PlaceBarInclude.jsp 和 PageBarInclude.jsp 文件将在下一篇文章中讨论。 8. 在包含了这些 JSP 页之后，定义下面的链接。 9. 这个链接就定义在 screenRender JSP 标记前面。该链接是从 ToolbarInclude.jsp 引用，并包含一个隐藏的图像 dot.gif 。利用此链接，使用支持语音合成的浏览器（例如 Home Page Reader）收听页面内容的人，可以跳过导航链接直接收听页面上用户定制的 portlet 的内容。为满足可访问标准，需要此链接。 10. 这时，WebSphere Portal 使用 screenRender 标记开始处理来自当前页面上用户定制的 portlet 的内容。该标记的执行将调用 skins 和 screens 目录中的 JSP。这些 JSP 的流程和内容将在后继文章中讨论。 11. Default.jsp 包含 extension/PageEndInclude.jsp 。这个 JSP 只包含用于 WebSphere Portal Enable 版的注释；其内容不在这里讨论。 Head.jspHead.jsp 生成标题并嵌入指向样式表文件的链接。它还定义了支持 BIDI（双向）文本所需的变量。这个 JSP 的内容将在这里描述。当您阅读这些讨论时，您可能想要 查看 Head.jsp 的清单。 text JSP 标记使您可以读取由 bundle 属性指定的文件中的 key 属性定义的属性。下列代码从位于 C:WebSphereAppServerlibappnls 目录的 engine_perties 文件读取 title 属性，以便浏览器访问时以英语作为首选语言。要更改门户页面的 title ，请修改 engine_perties 文件。 urlFindinTheme JSP 标记生成指向门户网站所使用的主题中资源的 URL 链接。下列代码生成指向由 file 属性指定的样式表的链接。 link href= rel=styleSheet type=text/css link href= rel=styleSheet type=text/css 对于通过 IE 访问的英语使用环境，用于门户网站样式及帮助样式的文件都位于 wp_rootappwps.earwps.warthemeshtmlieen 。 每次修改过包含的 JSP，请务必保存 Default.jsp 。否则，门户网站将显示来自先前编译过的 JSP 中的内容。 ToolBarInclude.jspToolBarInclude.jsp 显示公司徽标、欢迎消息以及为用户提供的链接 工具栏。门户网站上显示什么样的链接工具栏取决于用户上下文。例如，登录的用户看到 Edit Layout、 Edit my profile和 Log Off之类的链接；而注销的用户看到 I forgot my password、 Log in和 Sign up之类的链接。图 2 显示某用户登录之后的门户网站。 图 2：用户已经以 wpsadmin 的身份登录到门户网站图 3 显示用户注销之后的门户网站。图 3. 用户注销之后的门户网站ToolbarInclude.jsp 文件显示两个表格行。第一行包含两列。第一列在左侧显示 logo.gif ，第二列在右侧显示链接工具栏。对于 BIDI 语言这两列的显示情况与此相反。 第二行被用作工具栏和 PlaceBarInclude.jsp 显示的位置名称之间的分隔符。它显示使用 Styles.css 中指定的 wpsToolbar CSS 元素的背景颜色的条纹。该 JSP 的内容在此描述。当您阅读这些讨论时，您可能想要 查看 ToolBarInclude.jsp 的清单。 指定公司徽标公司徽标使用下列代码显示。 img align=absmiddle alt=Portal Title title= src= 对于缺省主题， logo.gif 文件位于 wp_rootappwps.earwps.warthemeshtml 目录下。通过替换 logo.gif 或将您公司的徽标复制到缺省主题的目录中并修改上述代码中的 file 属性，您就可以更改公司的徽标。 alt 属性的文本从 engine_perties 文件读取。 链接到wpsMainContent 下列代码嵌入一个链接以满足可访问性标准。 img width=1 height=1 border=0 src=/images/dot.gif alt= title= 这一链接允许残障用户跳过工具栏链接直接访问门户网站的内容。此链接使用一个非常小的图像 dot.gif ，使用桌面浏览器看不到该图像，除非用户在 logo.gif 后面缓慢的移动光标。此链接定义于前面说明的 Default.jsp 中。 定义firstButton 变量 下列代码阐明了 firstButton JSP 脚本编制变量。 在门户网站右上方，所有链接和欢迎消息都用定界符 |进行分隔。初始化时置 firstButton 变量为 true ，这意味着 WebSphere Portal 不在链接之前放置 |。在生成第一个链接之后，它将该值设置为 false 并在后面所有链接之前放置 | 。图 2 和 3 显示工具栏链接之间的定界符 |。 执行if JSP 标记 后两个子段的代码片段放置在 if JSP 标记的主体（body）之内。 只有当用户登录进去而屏幕是 Home 或 LoggedIn 时才执行这一 if JSP 标记的主体。 显示欢迎消息下面的代码片段从带有 Welcome 0! 值的 nlsengine_perties 文件中读取 welcome 属性的值。 当用户以 wpsadmin 身份登录到门户网站之后，图 2 显示 Welcome Wps!，因为 Wps 是 wpsadmin 注册用的名字。在上面的代码中，用第一个 textParam JSP 标记的值替换了 0 这个值。 由于 welcome 属性的值并不包含 1 ，第二个 textParam 标记的值被忽略。同样的，为显示 textParam JSP 标记生成的用户姓氏，把 welcome 属性的值更改为 welcome 0 1! 。修改过属性文件之后，您需要重新启动门户服务器。 user 标记允许您使用 givenName、familyName 或 userid 属性并返回相应值。 快速定制器链接WebSphere Portal 4.2 引入了一个新的 JSP 标记 urlselect ，使您可以为指定的属性 placeName 和 pageName 创建链接。此标记使链接在标记主体内可用作 wpsSelectURL 脚本变量。 urlselect 标记用于生成指向 Edit Layout和 New Page的链接。 下面的代码定义了 Edit Layout工具栏链接。 &|& a class=wpsToolBarLink href= 下面的代码定义了 New Page工具栏链接。 &|& a class=wpsToolBarLink href= 您可以使用 urlSelect JSP 标记添加其它页面链接。 I forgot my password 链接 如果用户登录失败，则使用 url 标记生成指向 I forgot my password的链接。当用户单击此链接时，将显示位于 screens 目录中 forgotpassword.jsp 的内容。下列代码说明了如何创建指向 I forgot my password的链接。 &|& a class=wpsToolBarLink href= Edit my profile 链接 带有 PrepareSelfCare 命令值的 url 标记生成指向 Edit my profile的链接。单击此链接，将显示位于 screens 目录下的 UserProfileForm.jsp 。下列代码演示了用于显示该链接的代码。 &|& a class=wpsToolBarLink href= Sign up 链接 带有 PrepareEnrollment 属性的 url 标记使您可以生成指向 Sign up的链接，以便用户能够自行登记。单击此链接，将显示位于 screens 目录的 UserProfileForm.jsp 。下列代码展示了用于显示 Sign up链接的代码。 &|& a class=wpsToolBarLink href= 如果您想禁止用户自行登记到门户网站，您可以从 ToolBarInclude.jsp 中除去前面的代码。 Help 链接 Help链接通过 wpsDocURL JSP 变量生成。通过包含 Default.jsp部分说明的 constants JSP 标记，就可以访问此变量。 &|& a class=wpsToolBarLink href=/InfoCenter/help/index.html target=PortalHelpWindow onClick=javascript: window.open(/InfoCenter/help/index.html, PortalHelpWindow, resizable=yes,scrollbars=yes,menubar=no,toolbar=yes,status=no,width=800, height=600,screenX=10,screenY=10,top=10,left=10).focus(); return false; Log in link 带有 hom