IBM WebSphere Portal主题与皮肤开发教程

第 1 章 主题与皮肤开发 ........................................................................................................................................... 3 1.1 入门：Portal 的主题与皮肤开发： .................................................................................................. 3 1.1.1 Default.jsp.................................................................................................................................. 4 1.1.2 Head.jsp ..................................................................................................................................... 4 1.1.3 AdminLinkBarInclude.jsp ........................................................................................................... 4 1.1.4 ToolBarInclude.jsp ..................................................................................................................... 4 1.1.5 PlaceBarInclude.jsp .................................................................................................................... 4 1.1.6 PageBarInclude.jsp .................................................................................................................... 5 1.1.7 Portal6.0 中的调用关系 ............................................................................................................ 5 1.2 初级：如何更换 Portal 系统的 logo 图标 ........................................................................................ 6 1.2.1 Default.jsp 的工作原理 ............................................................................................................. 6 1.2.2 换一个 logo ............................................................................................................................... 7 1.2.3 用 flash作 logo： ..................................................................................................................... 7 1.3 中级进阶：开发个性化的 Portal 主题 ............................................................................................. 9 1.3.1 理解各级菜单； ....................................................................................................................... 9 1.3.2 个性化工具栏 ......................................................................................................................... 10 1.3.3 个性化的管理标签 ................................................................................................................. 11 1.4 高级探索：开发自适应分辨率的主题与皮肤 ............................................................................... 11 1.4.1 1024*768 分辨率下的主题 .................................................................................................... 11 1.4.2 800*600 分辨率下的主题 ...................................................................................................... 11 1.4.3 1024 和 800 下自适应得主题 ................................................................................................ 12 1.5 高手过招：更改 Portal 系统的登录方式 ....................................................................................... 12 1.5.1 从首页上登录 ......................................................................................................................... 12 1.5.2 拒绝从系统自带的登录界面 ................................................................................................. 13 1.5.3 遗留问题 ................................................................................................................................. 13 1.6 Portlet 的皮肤开发 .......................................................................................................................... 14 1.6.1 更换标题背景图片 ................................................................................................................. 14 1.6.2 隐藏工具图标 ......................................................................................................................... 15 1.6.3 个性化左侧菜单 ..................................................................................................................... 15 1.7 合理使用 CSS 样式表 ....................................................................................................................... 16 1.8 主题与皮肤的安装 .......................................................................................................................... 17 1.8.1 安装皮肤 ................................................................................................................................. 17 1.8.2 安装新主题 ............................................................................................................................. 19 1.9 主题与皮肤开发的调试方式 ........................................................................................................... 21 1.9.1 自动装载法 ............................................................................................................................. 21 1.9.2 复制目录法 ............................................................................................................................. 21 ### IBM WebSphere Portal主题与皮肤开发教程 #### 第1章 主题与皮肤开发 ##### 1.1 入门：Portal的主题与皮肤开发 要理解如何开发IBM WebSphere Portal的主题，首先需要掌握Portal的显示流程。IBM WebSphere Portal通过不同的JavaServer Pages (JSP)、级联样式表 (Cascading Style Sheets, CSS) 和图像来构建门户页面。这些资源存储在`X:\WebSphere\AppServer\installedApps\YourNodeName\wps.ear\wps.war`目录下的`themes`、`skins`和`screens`目录中。 对于HTML客户端，具体来说，这些目录包括`html`、`wml`和`chtml`子目录，分别用于桌面浏览器和移动设备的服务。本节将重点讲解HTML客户端下的主题开发。 **1.1.1 Default.jsp** `Default.jsp`文件是每个主题的入口点，它定义了页面的基本结构和布局。该文件负责绘制整个页面的基础框架，并调用其他JSP文件来填充具体内容。例如，它会调用`Head.jsp`来添加页面头部的HTML标记，调用`ToolBarInclude.jsp`来显示工具栏等。 **1.1.2 Head.jsp** `Head.jsp`文件主要用于添加页面头部的信息，如`<head>`标签内的内容，包括元数据、链接到CSS文件等。这对于控制页面的外观和行为非常重要。 **1.1.3 AdminLinkBarInclude.jsp** `AdminLinkBarInclude.jsp`文件用于渲染管理链接栏，即管理员可以访问后台管理功能的地方。这个文件通常包含一系列链接，指向不同的管理功能页面。 **1.1.4 ToolBarInclude.jsp** `ToolBarInclude.jsp`文件负责创建工具栏，这个工具栏可能包含搜索框、用户账户信息等元素，便于用户进行快速操作。 **1.1.5 PlaceBarInclude.jsp** `PlaceBarInclude.jsp`文件负责创建位置栏，即显示用户当前所在位置的导航条。这有助于用户了解自己在门户中的位置，并方便地返回上级或特定页面。 **1.1.6 PageBarInclude.jsp** `PageBarInclude.jsp`文件用于创建页脚区域，其中通常包括版权信息、联系信息等。 **1.1.7 Portal 6.0中的调用关系** 在Portal 6.0中，`Default.jsp`文件作为入口点，它负责调用上述提到的所有JSP文件，以及其他可能需要的文件。这种结构使得门户页面的布局更加灵活和模块化，也便于维护和扩展。 ##### 1.2 初级：如何更换Portal系统的logo图标 **1.2.1 Default.jsp的工作原理** 在`Default.jsp`文件中，通常会有一个地方用来插入Logo图标。这个Logo可以通过设置路径或者直接在代码中指定图片来实现。 **1.2.2 换一个logo** 更换Logo图标非常简单，只需要找到Logo在代码中的引用位置，将其替换为新的图片文件即可。通常，新的图片文件应该具有相同的尺寸和格式，以确保页面布局不受影响。 **1.2.3 用flash作logo** 如果想使用Flash作为Logo，可以在`Default.jsp`中嵌入Flash文件。这需要确保服务器支持Flash文件的加载，并且用户的浏览器能够播放Flash内容。 ##### 1.3 中级进阶：开发个性化的Portal主题 **1.3.1 理解各级菜单** 要开发个性化的主题，需要深入理解门户系统中的各种菜单结构。一级菜单通常是导航的主要入口，而二级菜单则提供了更细粒度的导航选项。通过调整这些菜单的内容和布局，可以显著改变门户的用户体验。 **1.3.2 个性化工具栏** 工具栏是门户界面的重要组成部分，它包含了常用的操作按钮。为了满足不同用户的需求，可以通过修改`ToolBarInclude.jsp`文件来定制工具栏的功能和布局。 **1.3.3 个性化的管理标签** 对于管理员来说，管理标签是非常重要的。通过修改`AdminLinkBarInclude.jsp`文件，可以增加或删除管理链接，使管理功能更加符合实际需求。 ##### 1.4 高级探索：开发自适应分辨率的主题与皮肤 **1.4.1 1024*768分辨率下的主题** 针对1024*768分辨率的显示器，需要设计一个适合该分辨率的主题。这通常涉及到调整布局、图片大小和字体大小等，以确保在该分辨率下页面看起来既美观又实用。 **1.4.2 800*600分辨率下的主题** 对于较低分辨率的显示器，比如800*600，需要进一步优化页面布局，减少不必要的元素，确保所有内容都能清晰可见且易于导航。 **1.4.3 1024和800下自适应得主题** 为了提高用户体验，可以开发一种自适应主题，能够在不同的分辨率下自动调整布局。这可以通过使用响应式设计技巧来实现，例如媒体查询、流体网格布局等。 ##### 1.5 高手过招：更改Portal系统的登录方式 **1.5.1 从首页上登录** 默认情况下，Portal系统通常会引导用户到专门的登录页面。然而，有时希望用户可以直接从首页进行登录。这需要修改登录逻辑，以便在首页上嵌入登录表单。 **1.5.2 拒绝从系统自带的登录界面** 有时候，可能不希望用户访问默认的登录页面。这可以通过修改配置文件或编写自定义代码来实现，确保用户无法访问默认的登录界面。 **1.5.3 遗留问题** 更改登录方式可能会引入一些遗留问题，比如安全性问题、用户体验问题等。这些问题需要在开发过程中予以考虑并解决。 ##### 1.6 Portlet的皮肤开发 **1.6.1 更换标题背景图片** Portlet的皮肤开发允许开发者自定义Portlet的外观。例如，可以通过修改Portlet的CSS文件来更换其标题背景图片。 **1.6.2 隐藏工具图标** 有时，可能希望隐藏Portlet中的某些工具图标。这可以通过调整CSS样式或使用JavaScript来实现。 **1.6.3 个性化左侧菜单** 为了更好地整合Portlet与主题的整体风格，可以个性化Portlet的左侧菜单，使其与其他页面元素协调一致。 ##### 1.7 合理使用CSS样式表 合理的CSS使用对于构建高质量的主题至关重要。通过编写高效的CSS规则，可以显著提升页面的加载速度和视觉效果。 ##### 1.8 主题与皮肤的安装 **1.8.1 安装皮肤** 安装皮肤相对简单，只需要将皮肤文件复制到相应的目录下，并在Portal管理界面上激活即可。 **1.8.2 安装新主题** 安装新主题的过程与安装皮肤类似，但可能还需要进行额外的配置，以确保所有组件正确地加载。 ##### 1.9 主题与皮肤开发的调试方式 **1.9.1 自动装载法** 自动装载法是指通过配置Portal，使其在启动时自动加载最新的主题文件，从而避免手动刷新。 **1.9.2 复制目录法** 复制目录法是指在开发过程中，通过复制主题文件夹到测试环境中，而不是通过正式的安装过程来测试和调试主题。 IBM WebSphere Portal的主题与皮肤开发是一项复杂但至关重要的任务，需要深入理解门户系统的架构和机制。通过细致的设计和精心的调试，可以创建出既美观又实用的门户主题。