IBM WebSphere Portal主题与皮肤开发教程（1）
第1章 主题与皮肤开发
Portal的主题与皮肤开发，说穿了还是普通jsp的开发，只不过大量使用了ibm自带的标签库，而且页面之间的调用非常复杂，初级开发者甚至找不到页面元素所在的文件，所以开发起来显得比较麻烦。另外，IBM WebSphere Portal6.0较之以前的版本又做了较大的改动，或者说随着新版本的推出，我们将面对不断地技术更新与挑战。但是，如果您深刻洞悉了与主题、皮肤相关的这几个文件之间的调用关系，使用起来就能运用自如了。
1.1 入门：Portal的主题与皮肤开发：
所谓Portal的主题，指的是系统的整体界面风格与显示方式，主要包括网站页面初始化以前的调用，徽标Logo，一级菜单、二级菜单，网站下边的版权信息，以及页面初始化完成后的善后逻辑处理。我们要开发一套主题，可以直接复制themes/html下的一个包含有各个页面的文件的文件夹，重新命名并在管理界面里面添加、赋给县官页面就可以了。在这个文件夹里面，默认的初始调用文件为Default.jsp，这个文件绘制了一张表格，然后在各个格内调用不同的文件。在IBM Portal5.1中调用了如下几个文件：Head.jsp 、AdminLinkBarInclude.jsp、 ToolBarInclude.jsp、PlaceBarInclude.jsp、PageBarInclude.js以及延伸出来的PageBeginInclude.jsp、 PageEndInclude.jsp；在IBM Portal6.0中引入了jspf技术，所以调用也相应的发生了变化，主要有：head.jspf，topNav.jspf，foot.jspf，footfly.jspf等文件。下面主要针对5.1座以下介绍。
注意：这部分内容属于最初级的开发，您要弄懂这些介绍，必须具备一定的jsp、jspf基础、css基础和标签库的基础，最好做过相应的开发。
所有屏幕聚集都从 Default.jsp 开始。用于缺省主题的 Default.jsp 位于wp_rootappwps.earwps.warthemeshtml。这个 JSP 包含其它用于显示标题、公司徽标、工具栏的 JSP 以及用于往可用位置及页面植入内容的 JSP。在 Default.jsp 的末尾处，screenRender JSP 标记选择被请求的屏幕（例如 login 或 forgotpassword）。Default.jsp初始化一张表格，表格内部划分为任意的单元格，每个单元格几可以直接显示内容，也可以调用别的jsp页面。我们以从上到下、从做到有的顺序，来分别介绍开发主题所用到的页面。以下介绍的jsp就是以这样的顺序先后调用的。
1.1.2 Head.jsp
Head.jsp 位于Default.jsp所初始化的表格的最上一行单元格，负责生成标题并嵌入指向样式表文件的链接。它还定义了支持 BIDI（双向）文本所需的变量。这个页面一般没有实质性的显示内容，例外的是，开发者喜欢在这里初始化网页的标题，通常是读取属性文件，比如位于web_inf/下的engine.properties。这样安排比较灵活，后期维护可以直接在属性文件里面进行。当然，如果用户的网站标题是确定的而且是不在更改的，您也可以通过<title></title>在这里定死，这比IBM公布的以标签的方式写来的容易，也更易使用。如果您开发了多套主题，而且这几套主题的page title如果也一样的话（除了虚拟门户，一般是这样子），您可以把这几个文件放到themes/html的根目录下，其他主题的default.jsp都来调用这个文件就可以了。
AdminLinkBarInclude.jsp主要用来显示了“新建页面”、“编辑页面”、“分配页面许可权”三个标签。Default.jsp初始化表格中的第二行被调用。用户使用这三个链接来创建、修改自己的个性化页面，也可以由门户网站管理员来布局整个网站的风格，管理页面资源的权限。不过在开发实践中您会发现，大部分客户不喜欢这几个标记，他们宁肯要求我们将这些标签放到管理界面，取而代之的是一些欢迎信息，比如：“某某员工，欢迎您登陆！”。要实现这个也很容易，我们只要稍微修改一下这个页面页就可以了。比如我们可以写个标签，读出登陆用户的姓名，然后添加一个Label就解决了。
1.1.4 ToolBarInclude.jsp
ToolBarInclude.jsp 显示欢迎消息以及为用户提供的链接工具栏。门户网站上显示什么样的链接工具栏取决于用户上下文。例如，登录的用户看到“我的门户网站”、“管理”（仅管理员可见）、“编辑我的‘概要文件’”、“注销”等之类的工具；而注销的用户看到 “忘记密码”、“登录”、“帮助” 之类的工具。通常的做法是将“管理”链接放到一个portlet中，只有当登陆的用户是Portal系统管理员时才在该portlet中显示，或者先是为欢迎信息，或是其它的资源链接。
1.1.5 PlaceBarInclude.jsp
PlaceBarInclude.jsp用来显示一级菜单，即“首页”、“文档管理器”、“公司概况”、“业务简介”等，属于最高层的目录，您在任何一个一级菜单上都可以通过“新建页面”来创建二级菜单，你创建的内容将被存储到数据库（原始使用的是cloundscape），您也可以把它导入导出到db2、oracle等任何一个portal所支持的数据库中，此内容将在我的下一篇文章中详细论述，这里不再一一提及。
1.1.7 Portal6.0中的调用关系
现在我们拿出一节的篇幅来简要介绍Portal6.0中的文件调用关系以其职责。如图：
我们通常使用的是这几个：
本章导读：
所谓主题与皮肤，主要指门户系统的界面风格与显示方式。在企业门户项目的实施中，主题与皮肤的开发是重中之重。因为作为所有企业内外信息、应用的统一入口，可谓是一个企业的脸面。另一方面讲，在一个企业内，没有任何系统比他们的门户系统有更多的员工使用，在项目实践经验中我也发现，花在主题与皮肤开发上面的时间往往占很大的比重，对美工的要求也比较严格。所以本书把这一部分内容作为第一章讨论。
Portal的主题与皮肤开发，说穿了还是普通jsp的开发，只不过大量使用了ibm自带的标签库，而且页面之间的调用非常复杂，初级开发者甚至找不到页面元素所在的文件，所以开发起来显得比较麻烦。另外，IBM WebSphere Portal6.0较之以前的版本又做了较大的改动，或者说随着新版本的推出，我们将面对不断地技术更新与挑战。但是，如果您深刻洞悉了与主题、皮肤相关的这几个文件之间的调用关系，使用起来就能运用自如了。
本章主要是对5.1的介绍，附加了对6.0的延伸，尤其是变化比较大的地方。我们将从一下部分来讨论：
1、初级入门：什么是Portal的主题与皮肤开发？
2、中级开发：如何更换Portal系统的logo图标；
3、中级进阶：开发个性化的主题；
4、高级探索：开发自适应分辨率的主题与皮肤；
5、高手过招：更改Portal系统的登录方式；
6、Portal的皮肤开发简介 (1)、(2)、(3)、(4)
2、中级开发：如何更换Portal系统的logo图标；
3、中级进阶：开发个性化的主题；
4、高级探索：开发自适应分辨率的主题与皮肤；
5、高手过招：更改Portal系统的登录方式；
6、Portal的皮肤开发简介 (1)、(2)、(3)、(4)
1.1 入门：Portal的主题与皮肤开发：
要了解如何开发portal的主题，首先要了解IBM WebSphere Portal的显示流程。IBM WebSphere Portal 使用不同的 Java Server Page（JSP）、级联样式表（Cascading Style Sheet，CSS）和图像来显示门户页面。它使用位于X:WebSphereAppServerinstalledAppsYourNodeNamewps.earwps.war 目录下 themes、skins 和 screens 目录中的 JSP 来构造门户页面。这些目录中的每一个都包含 html、wml 和 chtml 子目录，WebSphere Portal 将它们用于服务不同客户机，例如桌面浏览器和移动设备。我们这里以通常使用的html方式下的主题开发为例，介绍Portal的主题开发。
所谓Portal的主题，指的是系统的整体界面风格与显示方式，主要包括网站页面初始化以前的调用，徽标Logo，一级菜单、二级菜单，网站下边的版权信息，以及页面初始化完成后的善后逻辑处理。我们要开发一套主题，可以直接复制themes/html下的一个包含有各个页面的文件的文件夹，重新命名并在管理界面里面添加、赋给县官页面就可以了。在这个文件夹里面，默认的初始调用文件为Default.jsp，这个文件绘制了一张表格，然后在各个格内调用不同的文件。在IBM Portal5.1中调用了如下几个文件：Head.jsp 、AdminLinkBarInclude.jsp、 ToolBarInclude.jsp、PlaceBarInclude.jsp、PageBarInclude.js以及延伸出来的PageBeginInclude.jsp、 PageEndInclude.jsp；在IBM Portal6.0中引入了jspf技术，所以调用也相应的发生了变化，主要有：head.jspf，topNav.jspf，foot.jspf，footfly.jspf等文件。下面主要针对5.1座以下介绍。
注意：这部分内容属于最初级的开发，您要弄懂这些介绍，必须具备一定的jsp、jspf基础、css基础和标签库的基础，最好做过相应的开发。
1.1.1 Default.jsp：
所有屏幕聚集都从 Default.jsp 开始。用于缺省主题的 Default.jsp 位于wp_rootappwps.earwps.warthemeshtml。这个 JSP 包含其它用于显示标题、公司徽标、工具栏的 JSP 以及用于往可用位置及页面植入内容的 JSP。在 Default.jsp 的末尾处，screenRender JSP 标记选择被请求的屏幕（例如 login 或 forgotpassword）。Default.jsp初始化一张表格，表格内部划分为任意的单元格，每个单元格几可以直接显示内容，也可以调用别的jsp页面。我们以从上到下、从做到有的顺序，来分别介绍开发主题所用到的页面。以下介绍的jsp就是以这样的顺序先后调用的。
1.1.2 Head.jsp
Head.jsp 位于Default.jsp所初始化的表格的最上一行单元格，负责生成标题并嵌入指向样式表文件的链接。它还定义了支持 BIDI（双向）文本所需的变量。这个页面一般没有实质性的显示内容，例外的是，开发者喜欢在这里初始化网页的标题，通常是读取属性文件，比如位于web_inf/下的engine.properties。这样安排比较灵活，后期维护可以直接在属性文件里面进行。当然，如果用户的网站标题是确定的而且是不在更改的，您也可以通过<title></title>在这里定死，这比IBM公布的以标签的方式写来的容易，也更易使用。如果您开发了多套主题，而且这几套主题的page title如果也一样的话（除了虚拟门户，一般是这样子），您可以把这几个文件放到themes/html的根目录下，其他主题的default.jsp都来调用这个文件就可以了。
1.1.3 AdminLinkBarInclude.jsp
AdminLinkBarInclude.jsp主要用来显示了“新建页面”、“编辑页面”、“分配页面许可权”三个标签。Default.jsp初始化表格中的第二行被调用。用户使用这三个链接来创建、修改自己的个性化页面，也可以由门户网站管理员来布局整个网站的风格，管理页面资源的权限。不过在开发实践中您会发现，大部分客户不喜欢这几个标记，他们宁肯要求我们将这些标签放到管理界面，取而代之的是一些欢迎信息，比如：“某某员工，欢迎您登陆！”。要实现这个也很容易，我们只要稍微修改一下这个页面页就可以了。比如我们可以写个标签，读出登陆用户的姓名，然后添加一个Label就解决了。
1.1.4 ToolBarInclude.jsp
ToolBarInclude.jsp 显示欢迎消息以及为用户提供的链接工具栏。门户网站上显示什么样的链接工具栏取决于用户上下文。例如，登录的用户看到“我的门户网站”、“管理”（仅管理员可见）、“编辑我的‘概要文件’”、“注销”等之类的工具；而注销的用户看到 “忘记密码”、“登录”、“帮助” 之类的工具。通常的做法是将“管理”链接放到一个portlet中，只有当登陆的用户是Portal系统管理员时才在该portlet中显示，或者先是为欢迎信息，或是其它的资源链接。
1.1.5 PlaceBarInclude.jsp
PlaceBarInclude.jsp用来显示一级菜单，即“首页”、“文档管理器”、“公司概况”、“业务简介”等，属于最高层的目录，您在任何一个一级菜单上都可以通过“新建页面”来创建二级菜单，你创建的内容将被存储到数据库（原始使用的是cloundscape），您也可以把它导入导出到db2、oracle等任何一个portal所支持的数据库中，此内容将在我的下一篇文章中详细论述，这里不再一一提及。
1.1.6 PageBarInclude.jsp
用来显示二级菜单，当您点击一级菜单中的任一标签时，系统会调用该文件，并检索出该菜单的所有子菜单，默认显示在PlaceBar的下面。该文件在Default.jsp初始化表格的第三行被调用，如果我们不调用该文件，那么，包含子菜单的一级菜单被调用时，其子菜单将在屏幕的左侧显示，该文件位于皮肤文件夹下，具体的文件操作我们将在接下来的皮肤开发中介绍。
用来显示二级菜单，当您点击一级菜单中的任一标签时，系统会调用该文件，并检索出该菜单的所有子菜单，默认显示在PlaceBar的下面。该文件在Default.jsp初始化表格的第三行被调用，如果我们不调用该文件，那么，包含子菜单的一级菜单被调用时，其子菜单将在屏幕的左侧显示，该文件位于皮肤文件夹下，具体的文件操作我们将在接下来的皮肤开发中介绍。
1.1.7 Portal6.0中的调用关系
现在我们拿出一节的篇幅来简要介绍Portal6.0中的文件调用关系以其职责。如图：
图：Portal6.0开发一套主题需要调用的页面清单
我们通常使用的是这几个：
详细的开发内容下面将一一介绍。
Ctrl+Enter 发表
作者其他文章
评论 0 · 赞 1
评论 0 · 赞 3
评论 0 · 赞 1
评论 0 · 赞 1
评论 1 · 赞 0
添加新评论0 条评论