IBM Cognos 最佳实践: 在 IBM Cognos 8 Go! Dashboard 中修改 UI

文档性质:技巧或技术;产品:IBM Cognos 8,IBM Cognos 8 Go! Dashboard;关注领域:基础架构

如何更改 IBM Cognos Go! Dashboard UI。

Cognos Proven Practices Team, Cognos 最佳实践团队, IBM USA

Cognos 最佳实践团队。



2011 年 7 月 22 日

免费下载:IBM® Cognos® Express V9.5 或者 Cognos® 8 Business Intelligence Developer Edition V8.4 试用版
下载更多的 IBM 软件试用版,并加入 IBM 软件下载与技术交流群组,参与在线交流。

简介

目的

本问讨论了如何更改 IBM Cognos Go! Dashboard UI。

适用性

本文档已在 IBM Cognos 8.4 和 8.4.1 上测试。

本文档是写给那些想要了解 IBM Cognos Go! Dashboard 运行方式以及 XML 和样式表知识的管理员。


更改 IBM Cognos 8 Go! Dashboard 中的 UI

学习本文的过程中,可以引用以下文件夹中的修改文件

  • \cognos8\tomcat6.0.14\webapps\cognos

该位置是安装和配置 IBM Cognos Go! Dashboard 的过程中部署 war 文件的地方。这是 Go! Dashboard 的有效位置。

所以这意味着,无论什么原因,如果 war 文件被重新部署,所有的改变都会丢失。当 IBM Cognos 构建指示板 war 文件时,会从这个位置取内容

  • ..\cognos8\dashboard\cognos

如果将文件夹和文件结构相比较,所有的文件都是一样的。

如果想要您的更改包含在随后构建的 war 文件中,.\cognos8\dashboard\cognos 文件夹中的文件也需要更改。要实现这一点,最快捷的方法是,如果您对定制比较满意,则使用 \cognos8\tomcat6.0.14\webapps\cognos 部署位置的更改文件覆盖此处的文件。

更改 Logo

以下过程将从左上角的 banner 中移除 IBM logo 并应用于所有的样式。

  1. 把新的 logo 复制到每个皮肤(样式)文件夹:
    • \cognos8\tomcat6.0.14\webapps\cognos\WEB-INF\applications\dashboard\web\skins\<SKIN>\fragments\banner\images
  2. 编辑位于 \cognos8\tomcat6.0.14\webapps\cognos\WEB-INF\applications\dashboard\fragments\css 文件夹的 default.xml 文件。
  3. 找到以下的类名称。

    <class name=".cogstyle-banner-title">

  4. <set name="background-image"> 行,用新名称替代此处之前的图像名。在这个类会话中还需要更改高度和宽度行,如此图像才能适合屏幕。
  5. 保存 default.xml 文件。
  6. 启动浏览器会话并打开一个指示板。 您将看到新 logo 位于屏幕的左上角。

更改颜色方案

根据指示板需要更改的部分确定修改什么。主要有两个区域:

  • 内容面板和 banner
  • 画布面板
IBM Cognos GO! Dashboard 屏幕的图片

内容面板和 Banner

要更改这里的颜色,必须在以下的位置编辑 <skin>.xml 文件。

  • ..\cognos8\tomcat6.0.14\webapps\cognos\WEB-INF\applications\dashboard\fragments\css \skins

在这个文件中,颜色被定义为两部分:调色板和颜色。

调色板部分可以定义您想要的调色板,由于颜色通常是由 16 位进制代码定义的,您可以给颜色选项指定友好的名称。

示例:

<palette>
		<!-- basic b/w  -->
		<color name="black">#000000</color>
		<color name="white">#ffffff</color>
		<!-- 6 shades of colours -->
		<color name="color.lighter">#fef0d7</color>
		<color name="color.light">#d6e0cd</color>
		<color name="color.medium">#b3e283</color>
		<color name="color.normal">#669966</color>
		<color name="color.dark">#336666</color>
		<color name="color.darker">#003333</color>
		<!-- 5 shades of gray -->
		<color name="gray.light">#f3f3f3</color>
		<color name="gray.medium">#efefef</color>
		<color name="gray.normal">#cccccc</color>
		<color name="gray.dark">#858585</color>
		<color name="gray.darker">#666666</color>
		<!-- others colours -->
		<color name="tooltip">#ffffcc</color>
		<color name="hyperlink">#405890</color>
		<!-- special colours -->
		<color name="special01">#f8fae8</color><!-- #16 -->
		<color name="special03">#dbca86</color><!-- #20 -->
		<color name="special04">#db8a11</color><!-- #21 -->
		<color name="special05">#bf7300</color><!-- #22 -->
		<color name="special06">#cc9f5b</color><!-- #23 -->
		<color name="special07">#003333</color><!-- #30 -->
</palette>

在颜色部分将颜色设置成指示板的功能区。这部分使用已在调色板部分创建的友好名称。

示例:

<!-- common set of colour names -->
		<color name="text" paletteColor="black"/>
		<color name="textDisabled" paletteColor="gray.dark"/>
		<color name="textError" paletteColor="black"/>
		<color name="textHilight" paletteColor="color.dark"/>
		<color name="background" paletteColor="white"/>
		<color name="anchor" paletteColor="hyperlink"/>
		<color name="selection" paletteColor="color.medium"/>
		<color name="darkBorder" paletteColor="gray.dark"/>
		<color name="lightBackground" paletteColor="color.lighter"/>
		<color name="nameColor" paletteColor="special07"/>

注意:指示板服务可以必须停止且重新启动,更改才能生效,而且可能也需要清理浏览器缓存。

画布面板

画布面板是放置所有的查看器 portlet 的地方。在查看器 portlet 中,右上角有一个 action 按钮。这里还有两个帮助改变 portlet 颜色方案的选项。

  • 调色板 — 用于更改图表或表格中的颜色方案。
  • 布局和风格 — 用于更改标题字体和背景色

Banner

IBM Cognos GO! Dashboard 顶部的 banner 部分

在以下的文件中可以更改 banner 样式。

banner 中的主要背景色实际上是几个不同的图像。这些图像位于 ...\cognos8\tomcat6.0.14\webapps\cognos\WEB-INF\applications\dashboard\web\skins\<SKIN>\fragments\banner\images。

改变颜色的最好方式是创建一个类似的所需样式和色彩的图像。然后把文件名保存成您要替代的文件名称。(注意:备份之前的图像。)这也适用于 banner 中显示的其他图标。

至于文字的字体,查看 2.2.1 部分来改变颜色。

要控制字体的大小和粗细,编辑 ...\cognos8\tomcat6.0.14\webapps\cognos\WEB-INF\applications\dashboard\fragments\css 文件夹中的 default.xml 文件。

查看标题 banner styles – cogstyle-banner-*

类名称对于它们影响的 banner 区域是非常具有描述性的。

参考资料

学习

获得产品和技术

讨论

  • 参与 developerWorks 博客 并加入 developerWorks 中文社区,developerWorks 社区是一个面向全球 IT 专业人员,可以提供博客、书签、wiki、群组、联系、共享和协作等社区功能的专业社交网络社区。

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Information Management
ArticleID=677098
ArticleTitle=IBM Cognos 最佳实践: 在 IBM Cognos 8 Go! Dashboard 中修改 UI
publish-date=07222011