在 IBM Lotus Quickr 8.5 for WebSphere Portal 中定制主题

最新推荐文章于 2024-09-06 10:49:39 发布

cuinaozun7188

最新推荐文章于 2024-09-06 10:49:39 发布

阅读量305

点赞数

文章标签： json javascript 测试 ViewUI

Richa Verma, 软件工程师, IBM

Richa Verma 是 IBM Lotus Quickr 团队的一名软件工程师。她于 2004 年加入位于 Research Triangle Park 的 IBM Software Group。

简介： 本文概述了 IBM® Lotus® Quickr® 8.5 for WebSphere® Portal 中的主题特性，详细向您介绍了创建主题和皮肤并进行更新定制的相关知识，如更改标识，修改配色方案，进行高级布局更改和整合定制组件。

先决条件

本文假定您已经很好地理解基本的 HTML、JavaServer™ Pages (JSP)、Cascading Stylesheets (CSS) 和 JavaScript™ 等技术。Lotus Quickr 8.5 是基于 Websphere Portal V6.1.5 构建的，它的主题实现是现有 Portal 页面构建器主题的一个扩展。要从本文中得到最大受益，您还必须熟悉 IBM WebSphere Porta V6.1.5 的页面构建器主题。请参考 WebSphere Portal Information Center 6.1.5 了解更多关于 Portal 主题定制的信息。

入门

一个主题是由组成父 JSP 文件（Default.jsp）的一组文件及父 JSP 的其余部分所组成。各部分的 JSP 是包含在父 JSP 中的，而且通常它们被保存为 JSPF 扩展名。除了主题的 JSP 文件之外，这个主题还包含一些图像文件（主题图片）、样式表、JavaScript. 文件和 Dojo 小部件。下一节将详细介绍主题的布局和如何修改主题的各个元素。

主题布局

正如在上一节所介绍的，主题是分成许多片段的，它们是通过一个父 JSP 文件拼凑成为一个主题的。下面是其中主要的主题片段：

全局导航
标题栏
位置栏
侧边导航栏
Portlet 显示区
页脚

各部分的布局如图 1 所示。

图 1. 主题布局

为了保持主题简单，这里布局的每一部分只使用一个 JSP 或 JSP 片段。例如，globalNav.jsp 用于生成全局导航栏。类似地，topNav.jspf 和 sideNav.jspf 则分别用来渲染标题栏和侧边导航栏。图 2 显示了一个简化的主题 JSP 结构。

图 2. 主题结构

主题定制

主题定制包括简单的样式表修改，如添加新的配色方案到页面，也包括高级修改，如修改主题的现有元素，以及整合定制应用和组件。下面的章节将讨论主题定制的基本机制，以及修改主题布局和新组件整合的高级场景。

创建定制的主题

默认主题和皮肤本身是能够在生产环境使用的，它们被部署在一个名为 QuickrThemeApp.ear 的 EAR 文件中。要对其进行修改，您必须拥有服务器的管理员权限。要创建一个定制主题或皮肤，您需要复制 QuickrThemeApp.ear 到一个临时位置，然后进行修改。您的新主题将打包为一个新的 EAR 文件进行部署。

要点：在修改这个主题之前，您需要创建一个定制主题。原始的 Lotus Quickr 主题可以在应用主题的临时修改或增加普通的修复包后重新部署。

下面是创建一个主题 EAR 文件的详细步骤。

将默认的主题文件 wp_profile/installableApps/QuickrThemeApp.ear 复制到一个临时位置。
解压 QuickrThemeApp.ear 文件。
修改 QuickrThemeApp.ear/META-INF/application.xml 文件，添加一个惟一显示名称、模块 ID 和上下文根目录。
重新创建 EAR 文件。新的 EAR 文件的名称必须与原始的 QuickrThemeApp.ear 文件不同。
将新的 EAR 文件复制回服务器进行部署。请参考 WebSphere Portal 6.1.5 Information Center 的部署主题。
注册这个新主题和皮肤。请参考清单 1 所示的示例 xmlaccess 脚本，它用于导入所定制的主题。

注意：在脚本中，您必须提供一个惟一的上下文根目录（在步骤 3 中提供）来标识这个定制主题应用。

清单 1. DeployYourTheme.xml

<?xml version="1.0" encoding="UTF-8"?>
QkrSkin_customQkrThinSkin_customQkrTheme_custom

欲了解更多信息，请参考 WebSphere Portal 6.1.5 Information Center 的导入一个主题。

您会看到您定制的主题和皮肤位于 Home – Advanced Administration – Portal User Interface – Themes and Skins。

对于最初的开发，您可以创建一个测试页面或者位置，然后将定制主题应用到它上面。这个主题可以使用 Place Actions – Edit Place 进行分配。在修改主题并完成单元测试后，将服务器的默认主题修改为您所定制的主题。这个操作可以在高级管理的主题和皮肤页面进行。除非已经有一个位置已经设置非默认主题，否则所有位置都会自动更新为使用这个定制（默认）主题。

修改主题文件

正如上一节所介绍的，这个主题是由一组 JSP 和样式表组成的，它们定义了主题的呈现语义。在 Lotus Quickr 8.5 中，主题样式表是在多个组件中共享的，包括主题、位置目录和单个 Lotus Quickr 组件，如博客、库等。同时，这其中还有一些布局，如页脚，这在 Lotus Quickr 的 teamplace、位置目录和位置管理中是很常见的。为了简单起见，所有这些资源都会在一个通用资源应用程序中单独绑定。主题应用程序和通用资源应用程序的位置都列在下面。

主题：

wp_profile\installedApps\\
QuickrThemeApp.ear\wp.theme.quickrtheme.war\themes\html\Quickr

普通资源：

wp_profile\installedApps\\
QuickrCommonResourcesApp.ear\qkr.common.resources.war

在本文的其余部分，我们将上面的主题位置引用为 theme_root 目录，而通用资源应用程序位置则为 common_resources_root 目录。

要点：创建和部署一个定制的普通资源 EAR 文件。请根据 "创建一个定制主题” 中的步骤进行操作。

添加样式表

Lotus Quickr 8.5 包含了一组即用型样式表。这些样式表可以从 Lotus Quickr 定制调色板中选择和应用。图 3 显示的是已有的样式表和应用到一个 teamplace 的示例配色方案。

图 3. 定制架样式
定制架 —— 样式

如果没有任何一个现有样式表提供了您需要的配色方案，您可以创建一个新的样式表，然后将它们添加到定制调色板上，然后选择性地将它们应用到位置中。此外，您也可以修改默认的样式表（在通用资源应用程序中）来修改所有位置和 Lotus Quickr 首页的配色方案。

创建定制的样式表

创建样式表是非常简单的。由于主题中只使用了少数的颜色，所以通过将现有的颜色代码替换成您的新颜色，您就可以使用现有的样式表来创建新样式表。样式表中需要修改的颜色主要有：

正文背景
文本、按钮文本、标题，包括选择和未选择的样式
按钮背景颜色
侧边导航栏，包括背景和边框

前面的元素颜色会被用在几个样式类中，以实现主题的整体配色方案。在确定这里每一个元素的新颜色代码后，样式表中每一个现有的颜色代码都可以替换成新的颜色代码。

下面的步骤介绍了如何创建样式表，以及如何将它们添加到定制调色板中。

打开

custom_common_resources_root \css 中的 QuickrCommonResourcesApp.ear 文件
这里有一些文件夹（greyTheme、purpleTheme 等），每一个都与定制调色板中所列的样式相关联。每一个文件夹都包含一个样式表，它定义了配色方案以及与配色方案匹配的图像。
通过复制现有的样式文件来定义您的定制样式表。例如，greyTheme。将这个文件夹重命名为。同时将这个样式表重命名为 .css。
修改定制的 CSS 文件，使之包含您公司的主题颜色。保存修改。
下一步，您需要将您定制的样式表添加到定制调色板上。
打开并编辑 custom_theme_root\system\styles.json 文件。
这个 JSON 文件包含了定制调色板上所列的每一个样式表的条目。要为定制样式表添加一个条目，您需要复制一个现有条目，然后编辑 ID，将它指向您定制的样式表的路径。下面是一个新条目示例：
{'label':'','id':'/
.css','thumbnail':ibmPortalConfig.themeRootURI+'/images/changeStyle/
.gif','help':''}

注意：这个文件如果出现任何错误，您都会无法将这个定制调色板加载到服务器上。如果出现这样的问题，您需要检查文件是否有漏掉逗号、大括号，或者出现其他语法错误。

在完成这些步骤之后，您就可以在定制架（Customize shelf）中看到您定制的样式表。图 4 显示的是这个定制的样式表。

图 4. 带有定制主题按钮的定制架

修改位置目录样式

登录之后的页面（位置目录）显示了包含所有位置的列表。这个页面的样式是使用存储在通用资源应用程序的一个 JSP 设置的。以下步骤展示如何将您定制的样式表应用到位置目录页面。

将 custom_common_resources_root\defaultTheme\commonstyles.jsp 文件复制到 custom_common_resources_root \ 文件夹。
打开 custom_common_resources_root \\commonStyles.jsp 文件，使用 .css 文件替换 defaultTheme.css 文件。
最后，编辑所列的 JSP 文件，替换以下所示的内容：

要替换的 JSP：
1. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/catalog.jsp
2. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/search.jsp
3. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/templates.jsp
4. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/noPermission.jsp
5. wp_profile/installedApps/qkr/searchApp.ear/searchCenterUI.war/WEB-INF/jsp/PlaceSearchCenter.jsp
6. wp_profile/installedApps/qkr/searchApp.ear/searchCenterUI.war/WEB-INF/jsp/ECMSearchCenter.jsp
将文本行

替换为

保存您的修改，然后刷新浏览器，您就可以看到定制的样式表已经应用到位置目录页面了。

修改默认的样式表

标识

要修改您的公司标识，您需要用新的标识文件替换下面的文件：

custom_theme_root\css\images\logo_black.png
custom_theme_root \css\images\logo_white.png
custom_theme_root \css\images\logo.png

标识样式类位于 themeroot\css\themeStyles.jsp 文件。修改这个文件可以调整标识的高度、宽度、背景颜色等。

全局导航和位置标签

位于页面顶部的导航链接在 Lotus Quickr 的所有页面上都是保持不变的。这些链接是作为全局导航链接使用的。图 5 显示了所呈现的现成全局导航栏。

图 5. 现成的全局导航栏

现有的全局导航栏是使用 Dojo 小部件生成的。您可以在不修改 Dojo 代码的情况下修改导航栏。下面的例子说明了如何添加一个导航项到导航栏中，如图 6 和清单 2 所示。

图 6. 定制的全局导航栏

清单 2. 全局导航：globalNav.jspf

类似地，您可以通过编辑 custom_theme_root\topNav.jspf 文件在位置标签行上增加一个标签。清单 3 就是在位置标签行上增加一个标签的代码段，如图 7 所示。

清单 3. 顶部导航栏：topNav.jspf

图 7. 定制的位置标签

此外，您也可以使用现有的小部件代码来创建指向 LotusQuickr-config 文件中所增加的定制服务的链接。关于如何添加一个定制服务到 Lotus Quickr 配置服务的更详细信息，请参考 Lotus Quickr 8.5 Information Center 中的步骤。

侧边导航栏

侧边导航栏，也称为左侧导航栏，它是用来在一个 Lotus Quickr 位置内呈现页面的。默认情况下，侧边导航栏是使用 Dojo 小部件创建的。用户可以修改侧边导航栏，如编辑配色方案或元素布局，或者添加条目。虽然诸如修改颜色或其他呈现语义等修改是可以通过修改通用资源应用程序的 CSS 来实现，但是其他的修改，如添加类似于已有的 Members 链接的链接，则需要修改位于的 sideNav.jspf 文件。

清单 4 是一个说明如何在侧边导航栏中添加更多条目的例子。

清单 4. 侧边导航栏：sideNav.jspf

class="lotusSelected"> style="cursor:pointer">
Item 1
Item 2
Item 3 \

图 8 显示的是修改了颜色、菜单样式和布局的示例侧边导航菜单。应用到这些侧边导航栏的样式存储在通用资源应用程序中。

图 8. 侧边导航栏

定制架

定制架是位置管理员用来定制其位置的工具，其中包括选择页面布局、颜色主题和 Lotus Quickr 组件。非管理员的用户是不能使用这个定制架的。

在处于可用状态时，定制架由三个标签组成：Add Content、Change Layout 和 Change Styles。您可以使用 Add Content 来给一个位置添加一些组件，您也可以使用 Change Layout 和 Change Styles 来定制位置呈现的布局和样式。

上一节 “添加样式表” 描述了如何为一个定制主题创建和添加样式表。类似地，您可以修改 custom_theme_root\new_quickr.json 文件，添加定制的组件到定制架上。在添加之后，您的定制组件就可以被 Lotus Quickr 的所有位置管理员使用。

下面的步骤说明了添加组件到定制架所需要的更改。

打开并编辑 custom_theme_root\new_quickr.json 文件。

JSON 文件包含了定制调色板所列的每一个组件的条目。要为这个定制组件添加一个条目，您需要复制现有条目，然后编辑您的定制组件的值标签：component_title、description, portletID (uid for portlet)、id (uid for portlet) 和 thumbnail。清单 5 是一个新条目示例。

清单 5. 示例条目：new_quickr.json

						
{'label':'CustomComponent’,
'component_title':' CustomComponent ', 
'description':'This is my custom component', 
'applicationID':ibmPortalConfig.appID,
'portletID':'wps.p.teamCalendar',
'id':'wps.p.teamCalendar', 
'redirect':'true', 
'nodesOnLevel':ibmPortalConfig.nodesOnLevel, 
'samePage':'true', 
'cmdUrl':ibmPortalConfig.myurl, 
'thumbnail': 'class:qkrSprite-components qkrSprite-components-events-16x16'}

在完成这些步骤之后，您可以看到定制架上会出现您定制的组件。

提示：如果在 JSON 文件中添加一个新条目作为最后的条目，您需要在前一行末尾插入一个逗号，保证文件格式是正确的。如果这个文件出现任何错误，您可能就无法在服务器上加载这个定制调色板。

请参考 Lotus Quickr wiki 文章，“ 添加组件到定制架上：qp85”，了解更多关于添加组件到定制架的信息。

页脚

主题页脚位于主题页面的底部，它在 Lotus Quickr 位置、位置目录或位置管理页面上的所有页面都是通用的。这个通用页脚位于 Lotus Quickr 通用资源应用程序中。可以定制页脚 JSP，如增加或删除条目，修改布局，或者修改页脚样式等。您可以通过编辑 custom_common_resources_root/jsp/footer.jsp 文件来修改主题页脚。

皮肤定制

Portlet 皮肤是 Portlet 的包装层。Portlet 标题、Portlet 菜单操作和标记 Portlet 区域的边框都是由皮肤所渲染的。皮肤附带在主题 EAR 打包文件内，它位于：

wp_profile\installedApps\\
\wp.theme.quickrtheme.war\skins\html

图 9 显示的是 Lotus Quickr 的默认皮肤。

图 9. Portlet 默认皮肤

在可用状态下，Lotus Quickr 带有两种主要的皮肤：

XQkrSkin（Lotus Quickr 主题使用的默认皮肤）
QkrThinSkin

用户可以根据需要选择使用其中一种皮肤。图 9 显示的是默认的 QkrSkin，而 QkrThinSkin 则隐藏了皮肤包装层，只有在鼠标指针移动到 Portlet 区域时才会显示这个皮肤包装层。类似地，用户也可以定制皮肤，并将它们应用到位置中。图 10 显示的是一个使用 QkrThinSkin 的位置。

图 10. 未应用皮肤的 Portlet

注意这时 Portlet 周围没有皮肤包装层。然而，如果您指向这个 Portlet，那么这个包装层就会显示。可以定制这个包装层为永远不显示皮肤，或者总是只显示 Portlet 菜单。

翻译文件

Lotus Quickr 主题的语言包位于：

\portalserver\shared\app\nls\quickr_xx.properties

它们采用的命名模式是：quickr_[language].properties。您可以通过添加新的资源包到这个目录来增加新的字符串到主题。更多关于添加资源包的信息可以参考 WebSphere Portal Information Center V6.1.5。

结束语

本文概括在 Lotus Quickr 8.5 中定制主题的一些常见场景。通过阅读本文，您应该能够动手创建主题，并将它们定制为您的主题。本文可用作理解如何修改主题各个部分的指南。

原文链接：http://www.ibm.com/developerworks/cn/lotus/quickr-custom-theme/index.html

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/14751907/viewspace-675102/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/14751907/viewspace-675102/

cuinaozun7188

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在 IBM Lotus Quickr 8.5 for WebSphere Portal 中定制主题

Richa Verma, 软件工程师, IBMRicha Verma 是 IBM Lotus Quickr 团队的一名软件工程师。她于 2004 年加入位于 Research Triangle Park 的 IBM Soft...
复制链接

扫一扫