IBM Cognos 8 的整体外观定制与实践

作为开放性的重要特点,IBM Cognos 8 灵活的外观定制功能使企业能够快速地实现 Cognos 系统与企业既有系统之间的融合,能够适应国际客户和特定经销商的需求。本文从整体风格定制、报表外观修改和系统品牌再造三个方面出发,详细介绍了 Cognos 整体外观的定制修改过程,涵盖预定义样式的配置修改和自定义样式的开发发布。

林洪祥, 软件工程师, IBM

林洪祥,来自 IBM 中国软件开发中心,目前在 IBM Big Data,专注于 InfoSphere BigInsights 大数据分析处理平台。



2010 年 7 月 15 日

作为 IBM Cognos 8 开放性的重要特点,外观定制能够实现 Cognos 系统与企业既有系统在外观上的融合,能够适合国际客户和特定经销商的需求。Cognos 提供了整体、指定组件和单个报表三个层级的外观定制。用户可以为这三个层级分别选择系统预定义的样式,也能够按照规范开发自定义的样式,具有很大的灵活性。本文将详细介绍 Cognos 整体外观的修改定制。

Cognos 8 外观定制介绍

整体外观的定制特性介绍

IBM Cognos 8 提供了丰富灵活的整体外观定制功能,通过修改 Cognos 的层叠样式表、HTML 代码和图形,就可以方便地实现颜色、字体、图像和背景风格等外观样式的整体更改。整体外观定制不仅可以是预定义样式的修改配置,也可以是按规范重新开发并发布一套自定义样式。但无论何种方式,Cognos 良好的隔离特性都可以保证这些样式的修改只会对用户图形界面的整体外观进行更改,而不会影响产品的功能。

整体层次的外观定制能够在全局范围内修改外观,实现“一处定制,处处使用”的目标。从用途上看,整体外观的定制大致可以归结为整体风格、报表样式和品牌再造三个部分。

  • 整体风格定制能够通过选择预定义或自定义的风格样式,实现 Cognos 系统整体风格的快速切换。
  • 报表样式修改能够通过设置默认或自定义的报表模式,实现包括颜色,语言和显示格式等报表外观的全局更改。
  • 品牌再造可以通过全局替换公司名称和徽标,更改组件名称和文本消息等实现 Cognos 系统的重新包装。

关联的系统文件

为了方便用户定制外观,Cognos 专门将与外观关联的系统文件分离出来,并按类别进行了整理存放。IBM Cognos 8 安装成功之后,与外观关联的系统文件位于 $cognos_dir/c8/webcontent 目录。其中,$cognos_dir 指的是 Cognos 8 的安装目录。在 $cognos_dir/c8/webcontent 目录下,skins 文件夹定义了系统自带的七种整体外观样式。这七种不同风格的整体外观样式分属于七个独立的文件夹,每个文件包含名称相同、数量不等、内容不一的文件或文件夹。除了 Windows 样式外,其余六种样式的内容分布基本一致,各文件或文件夹的功能作用也大致固定。定制整体外观时,可以选择这些样式中的一种,也可以选取任意一种样式为蓝本,重新开发一个自定义的风格样式。表 1 总结了外观样式目录下各文件或文件夹的用途(如果安装的 Cognos 组件不同,文件夹的数量也会有所不同)。

表 1. 与外观样式关联的文件或文件夹名称及对应功能
名称 功能
ags Event Studio 的样式表及图标
ans Analysis Studio 的样式表及图标
branding Cognos Connection 与 Welcome Page 的品牌图标
cchl 提供 IBM Cognos Common HTML Library 的皮肤
hal 定义 Report Studio 的菜单和工具栏的默认界面样式
pat 定义 Report Studio 的默认界面样式,包括全局设置字体的部分
portal Cognos Connection 与 Welcome Page 样式表及图标
prompting Prompt Page 的样式表及图标
qs 与 Query Studio 关联的样式及一些专用图标
shared 通用的标题栏等的风格样式及图标
viewer 常用的风格样式表
cmm Metrics Manager 的默认界面和与管理界面样式表及图标
fonts.css 外观字体的样式表
preview.htm 提供整体外观风格预览

整体风格的全局定制

使用预定义的外观风格

为满足快速部署的需求,Cognos 8 提供了七种系统预定义的外观风格,如表 2 所示。

表 2. Cognos 8 的七种预定义风格
样式 适用场合说明
业务 使用柔和颜色,创建简洁、专业的外观
古典 匹配 Metric Studio 使用的样式
当代 使用特粗体、鲜艳的颜色
公司 匹配 IBM Cognos 公司品牌,这是默认的样式
现代 匹配 IBM Cognos ReportNet 使用的样式
演示 使用较大的字体和较强的对比度,适用于投影
windows 由 Windows 设置指定的显示模式,仅与 Report Studio 配合使用

这些预定义的风格样式存放在 $cognos_dir/webcontent/skins 目录,用户可以根据实际需求选择一个进行配置。通过配置不仅可以更改样式名称、说明和屏幕提示,还可以为不同语言版本的产品添加、更改或删除样式名称、说明和屏幕提示。样式配置的功能位于 Cognos Administrator 页面的“配置”选卡中。进入配置选卡后,点击左边区域的“样式”菜单就会显示预定义风格样式,如图 1 所示。

图 1. Cognos Administration 配置选卡的样式页面
图 1. Cognos Administration 配置选卡的样式页面

选择所需样式,单击如图 2 所示的 Actions 按钮(实心的倒三角形),选择 Set properties 就会跳转到属性设置页面。

图 2. 属性设置选项
图 2. 属性设置选项

在属性页面的常规和样式选卡上,可以根据需要设置属性。如图 3 所示,此处设置名称为“商务风格”,为屏幕提示和描述分别添加说明文字。值得注意的是常规选卡上的风格名称、屏幕提示和说明,都是根据选卡上选择的语言来显示。另外,“公司”风格的外观样式不能直接在此处重命名。

图 3. 样式选卡上的属性设置
图 3. 样式选卡上的属性设置

配置完成之后,重新命名为“商务风格”的外观样式就会显示出来,如图 4 所示。

图 4. 配置选卡的样式列表
图 4. 配置选卡的样式列表

为了使“商务风格”的外观样式生效,可以点击工具栏的 My Preferences,进入属性设置页面进行风格定制,如图 5 所示。

图 5. My Preferences 菜单
图 5. My Preferences 菜单

在弹出的偏好设置中,如图 6 所示,将外观风格设置为上文所述的“商务风格”, 点击“确定”,新的外观样式就可以生效。

图 6. 选择新的外观样式
图 6. 选择新的外观样式

开发自定义的风格样式

在外观上,如果要让 Cognos 系统与企业既有系统更好地融合,通常需要为 Cognos 开发一个自定义的外观样式。开发自定义的风格样式,必须遵照 Cognos 系统的外观文件规范来开发新的风格样式,然后为新的风格样式创建对象并将它与产品目录中的样式资源相关联。为了使开发出来的风格样式能符合规范,一个好的方法就是从 $cognos_dir/webcontent/skins 目录下拷贝一个系统预定义的风格样式文件,以此作为开发蓝本。

将拷贝出来的风格文件重命名后,存入 Eclipse 等开发工具的项目文件下进行修改开发,完成之后再将其重新拷贝回 $cognos_dir/webcontent/skins 目录。由于 Cognos 系统对整体外观样式文件作了比较清晰的划分,参考前文 “关联的系统文件”一节,开发人员很容易找到所需要修改的文件。

下文以 IBM Traceability Server (ITS)与 Cognos Connection 的整体外观整合为例,介绍如何开发并发布一个自定义的风格样式。拷贝 $cognos_dir/webcontent/skins 目录下的 corporate 文件夹并重命名为 ITSstyle 以用于后续修改。

步骤 1. 首先利用 Firefox 的 Firebug 插件查看 ITS 的 HTML 和 CSS。如所获得的清单 1 示, 在选中情况下 ITS 系统的菜单选卡背景颜色和上边缘颜色是 #C4C4C4 和 # FFCC66;在未选中情况下,菜单选卡背景颜色和上边缘颜色是 #646464 和 # 646464。

清单 1. ITS 的菜单样式代码片段
 a.menu_sel { 
	 background-color:#C4C4C4; 
	 border-top:4px solid #FFCC66; 
	 color:#000000; 
	 display:inline; 
	 height:25px; 
	 padding:2px 10px 7px; 
	 text-decoration:none; 
	 white-space:nowrap; 
 } 
 a.menu_unsel { 
	 background-color:#646464; 
	 border-top:4px solid #646464; 
	 color:#F4F4F4; 
	 display:inline; 
	 height:25px; 
	 padding:2px 10px 6px; 
	 text-decoration:none; 
	 white-space:nowrap; 
 }

步骤 2. 为了使 Cognos Connection 的菜单显示风格与 ITS 一致,需要修改与 Cognos Connection 关联的样式表。该样式文件位于 portal 文件夹下,名称为 default.css。参考 ITS CSS 的基本属性值,修改后的主要代码如清单 2 所示。

清单 2. Cognos Connection 的菜单样式代码片段
 .tabNormal 
 { 
  padding-right: 20px; 
  padding-left: 20px; 
  font-size: 70%; 
  text-align: center; 
	 background-color:#646464; 
	 color:#F4F4F4; 
  border-bottom:#999999 1px solid; 
  border-top:#e7e7e7 1px solid; 
	 border-top:4px solid #646464; 
 } 
 .tabSelected 
 { 
  padding-right: 20px; 
				 padding-left: 20px; 
	 border-top:4px solid #FFCC66; 
  font-weight: bold; 
  font-size: 70%; 
	 color:#000000; 
  text-align: center; 
	 background-color:#C4C4C4; 
 } 
 .tabSpacer 
 { 
  width:0px; 
  border-bottom:#999999 1px solid; 
 } 
 .tabTail 
 { 
  height:20px; 
  width:100%; 
  border-right: #999999 1px solid; 
  border-bottom: #999999 1px solid; 
  margin-right:2px; 
  font-size:1px; 
  background-color: #646464; 

 }

其中,tabNormal 和 tabSelected 分别应用于未选中和选中的菜单,tabSelected 和 tabTail 对应菜单选卡右边的空白栏。

步骤 3. 修改 Share 目录下的 Banner.css,使 Cognos Connection 菜单选卡的字体及字体颜色与 ITS 保持一致,同时将背景图片替换为 ITS 系统的背景图片,代码清单 3 所示。

清单 3. Cognos Connection 的菜单样式代码片段
 .mainHeader1 { 
	 background-color:#336699; 
	 height:28px; 
	 padding:1px; 
	 width:100%; 
 } 
 .headerTitle { 
  background-image: url(../shared/images/swoosh-bkgd.png); 
  background-repeat: repeat-y; 
  padding-left: 5px; 
  font-weight: bold; 
  font-size: 75%; 
  color: #FFFFFF; 
  vertical-align: middle; 
  white-space:nowrap; 
 } 
 .mainHeader1Middle { 
  width:100%; 
  background-image: url(../shared/images/swoosh-bkgd.png); 
  background-repeat: repeat-y; 
 }

步骤 4. 新的风格样式开发完成之后,需要添加到 Cognos 系统才能正常使用。在 Cognos Administrator 的样式配置页面,点击“新建样式”,然后输入属性值,如图 7 所示。

图 7. 新建一个外观风格样式
图 7. 新建一个外观风格样式

步骤 5. 点击“下一步”,指定新风格的资源位置及预览文件名,如图 8 所示。如果新开发的风格样式位于默认的 $cognos_dir/webcontent/skins 路径下,则直接填写文件名称;否则需要添加相对路径。

图 8. 指定新风格的资源位置及预览文件名
图 8. 指定新风格的资源位置及预览文件名

步骤 6. 点击“完成”,如图 9 所示,新添加的风格样式就会与系统预定义的样式一起显示。

图 9. 可供选择的风格样式
图 9. 可供选择的风格样式

步骤 7. 按照上节“使用预定义的外观风格”中描述的步骤,为 Cognos 系统选择新开发的整体外观样式,实现自定义样式的发布。

自定义整体外观样式的发布完成之后, Cognos Connection 的外观风格变为如图 10,与图 11 所示的 ITS 的外观基本一致。作为对比,图 12 展示的是 Cognos Connection 公司风格的整体外观样式。

图 10. Cognos Connection 的 ITS 风格外观
图 10. Cognos Connection 的 ITS 风格外观
图 11. ITS 的实际系统外观
图 11. ITS 的实际系统外观
图 12. Cognos Connection 的公司风格外观
图 12. Cognos Connection 的公司风格外观

风格样式的安全控制

用户可能需要在 Cognos 的 Web 界面中使用其它样式,这取决于公司品牌要求、区域或产品实施方案。例如,亚洲用户的样式可能具有其它地理位置的用户未应用的特性。为了保证风格样式的安全,可以通过在样式上设置访问权限来控制对它们的访问。要使样式适用于最终用户,可以仅将执行权限授予所需的用户、组或角色,而不授予其它权限。拥有执行权限的用户可以使用样式,但无法修改它。

在 Cognos Administrator 的样式配置页面,点击前文自定义的“集成风格”的属性设置按钮,然后选择权限选卡,就能够对风格样式进行安全控制。如图 13 所示,对于”集成风格“样式,门户管理员被赋予了最大权限,而任何人这个组就只有读和执行权限。

图 13. 风格样式的安全控制选卡
图 13. 风格样式的安全控制选卡

此外,管理员还可以为此风格添加或者删除用户、组和角色,实现灵活管理。


报表整体外观样式的修改

配置默认的报表样式

在多数情况下,Cognos 用户都是使用报表来查看数据,所以报表的外观样式与用户的使用体验直接相关,具有非常重要的作用。

对 IBM Cognos 而言,报表是指定义包含在报表中的信息规范或结果本身。对于 Report Studio 和 Query Studio,报表规范可以具有已保存结果或可以运行报表以生成新的结果。对于 Analysis Studio,报表始终使用多维数据集中的最新数据运行。Cognos 的报表外观设计充分考虑了不同用户的需求,提供了大量的设置选项或接口。用户可以修改默认的报表样式,也可以对单个需要报表进行独立修改,具有很强的灵活性。

为介绍报表默认样式的配置修改,此处不妨以 Query Studio 为例进行描述。在 IBM Cognos Connection 中,如图 14 所示,单击报表右侧“操作”工具栏上的“设置属性”按钮,

图 14. Query Studio 的报表属性设置
图 14. Query Studio 的报表属性设置

选择 Query 选卡(Report Studio 报表的“报表”选项卡,或 Analysis Studio 报表的“分析”选项卡)就可以对报表的输出格式和语言进行设置,如图 15 所示,选择格式为 Excel 2002,语言为简体中文。

图 15. 报表样式设置
图 15. 报表样式设置

点击“确定”按钮返回 Cognos Connection 页面,运行该报表,就可以在运行时选项页面看到,该报表默认的格式就是 Excel 2002,语言就是中文。然后点击“运行”, 如图 16 所示,报表以上面设置的格式显示。

图 16. Excel 2002 格式的中文语言报表
图 16. Excel 2002 格式的中文语言报表

使用新开发的报表模板

步骤 1. 在 Report Studio 中,创建新的空白报表,选择“文件”菜单中的“转换成模板”选项将其转换成模板,点击“工具”菜单中的“复制报表到剪贴板”,然后将该报表规范保存到文本编辑工具。该报表规范是完整的 XML 文件,删除 Report Studio 添加的但模板不需要的信息,比如 report 要素的 xmlns 和 template 属性,query 要素的 name 属性, page 要素的 name 属性及 list 要素的 refQuery 属性。注意只能删除 query 要素和 page 要素的 name 属性值,对应的双引号必须保留。修改后的代码如清单 4 所示。

清单 4. 新开发的报表模板代码片段
 <template name="IntegrationStyle"> 
 <report expressionLocale="zh-cn" > 
  <queries> 
  <query name=""> 
  <source> 
  <model/> 
  </source> 
  <selection/> 
  </query> 
  </queries> 
  <layouts> 
  <layout> 
  <reportPages> 
  <page name=""> 
  <style> 
  <defaultStyles> 
  <defaultStyle refStyle="pg"/> 
  </defaultStyles> 
  </style> 
  <pageBody> 
  <style> 
  <defaultStyles> 
  <defaultStyle refStyle="pb"/> 
  </defaultStyles> 
  </style> 
  <contents/> 
  </pageBody> 
  </page> 
  </reportPages> 
  </layout> 
  </layouts> 
  <classStyles> 
  <classStyle name="pd_1" label="Excellent"> 
  ...... 
  </classStyle> 
  </classStyles> 
  <XMLAttributes> 
  <XMLAttribute name="RS_CreateExtendedDataItems" value="true" output="no"/> 
  <XMLAttribute name="listSeparator" value="," output="no"/> 
  </XMLAttributes> 
  </report> 
  </template>

步骤 2. 根据项目的需求为模板添加所需显示的要素,然后在模板最外层包上 <modelPath/> 要素。

步骤 3. 为了在 Report Studio 中创建新报表能够选择新开发的报表模板,需要先将 XML 模板文件添加到 templates.xml 文件中。后者包含可供选择的报表模板,位于 $cognos_dir/webcontent/pat/res。

步骤 4. 创建要用于表示自定义报表模板的图标,该图标建议为 32 x 32 像素的 gif 格式。然后将报表图标的文件复制到 $cognos_dir/webcontent/pat/images 目录。此处创建一个如图 17 所示的集成风格图标。

图 17. 集成风格图标
图 17. 集成风格图标

步骤 5. 将自定义模板信息添加到位于位于 $cognos_dir/webcontent/pat/res 目录下的 Resources.xml 文件中,如清单 5 所示。

清单 5. 添加自定义模板信息的代码片段
<listView id="New" view="icon" clipLabels="false"> 
  <listItems> 
  <listItem idsLabel="IDS_LBL_NEW_BLANK_REPORT" icon="icon_blank.gif" 
templateName="Blank"/> 
  <listItem idsLabel="IDS_LBL_NEW_LIST_REPORT" icon="icon_list.gif" 
templateName="List"/> 
  <listItem idsLabel="IDS_LBL_NEW_CROSSTAB_REPORT" icon="icon_crosstab.gif" 
templateName="Crosstab"/> 
  <!--The new developed custom templates--> 
  <listItem label="IntegrationStyle" icon="IntegrationStyle.gif" 
templateName="IntegrationStyle"/> 
  <listItem idsLabel="IDS_LBL_NEW_CHART_REPORT" icon="icon_chart.gif" 
templateName="Chart"/> 
  <listItem idsLabel="IDS_LBL_NEW_MAP_REPORT" icon="icon_map.gif" 
templateName="Map"/> 
  <listItem idsLabel="IDS_LBL_NEW_FINANCIAL_REPORT" icon="icon_financial.gif" 
templateName="Financial"/> 
  <listItem idsLabel="IDS_LBL_NEW_REPEATER_REPORT" icon="icon_repeater.gif" 
templateName="Repeater"/> 
  <listItem idsLabel="IDS_LBL_NEW_TEMPLATE_RT" icon="icon_template_qs.gif" 
templateName="Template_RT"/> 
  <listItem idsLabel="IDS_LBL_NEW_BROWSE" icon="browse_32x32.gif" 
idsTooltip="IDS_TOOLTIP_NEWBROWSE" isBrowse="true"/> 
  </listItems> 
  </listView>

其中,IntegrationStyle 对应 Template,IntegrationStyle.gif 对应改报表样式的图标。

通过上述步骤,新开发的报表模板样式就可以使用了。在 Report Studio 工具中,点击“新建”按钮,就可以在弹出的模板选择页面上使用新开发的模板样式,如图 18 所示。

图 18. 可供选择的报表模板
图 18. 可供选择的报表模板

系统品牌的全局再造

对 Cognos 8 而言,可以通过使用新文本和相应的品牌图像来全局替换公司名称和徽标的所有实例,从而实现 Cognos 的品牌再造。

与品牌相关的图形文件位于 $cognos_dir/webcontent/skins/style/branding 的目录下,归为一组,其中 style 表示每个样式目录。根据使用的样式,可在相关联的样式目录中更改图形。根据实际需求,可以选择使用更合适的大小或设计替换各个 IBM Cognos 8 图像(通常为 GIF 文件)。为了使更改能够快速生效,注意保证名称的一致性。此外,在替换外观类似的徽标和图标时,需要仔细区分。例如,用于创建 Web 门户 (banner_cogsquare.gif) 品牌的内嵌正方形徽标与“关于”框中使用的内嵌正方形徽标 (about.gif) 不同。 在查找图形时,可以留意那些与产品组件配合使用的图形,它们的文件名通常以前缀 tools_ 开头。

为了实现组件名称和文本消息的更改,可以通过在文本编辑器中打开相关消息文件,并对要更改的文本字符串和调用执行搜索和替换操作,来更改 IBM Cognos 8 组件的名称,以及修改相关的文本消息。消息文件位于 $cognos_dir\msgsdk 目录中。完成之后,必须重新启动 Cognos 才能使更改生效。


结语

本文首先介绍了 Cognos 的整体外观定制特性,分析了与外观样式关联的系统文件,然后从整体风格的全局定制、报表整体外观样式的修改和系统品牌的全局再造三个方面,结合预定义和自定义风格样式的使用与开发,具体描述了 Cognos 整体外观的修改定制。

参考资料

学习

获得产品和技术

讨论

条评论

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=500659
ArticleTitle=IBM Cognos 8 的整体外观定制与实践
publish-date=07152010