Skip to Content

定制BI Launchpad的图标和主题

原文链接 http://scn.sap.com/community/bi-platform/blog/2013/06/01/tutorial-branding-and-theming-of-bi-launch-pad

在上一篇教程里我已经教给过大家怎么改变BI Launchpad的名字和URL。但是常常这并不够用,合作伙伴和客户希望改变logo或者颜色主题。SAP BI4.0 SP4引入了图标和主题机制使变更不会被补丁覆盖。关于如何定制BI Launchpad、Crystal Report或者opendocument的详细文档可以从SAP BusinessObjects BI Customization Guide (Web Application Customization section)找到。关于这篇教程,我想只专注在BI Launchpad的定制上。请注意定制需要级联样式表(CSS)的知识。你可以更改小到图标文件或者大到整个BI Launchpad的颜色主题,这完全取决于你更改了多少样式。

获得示例文件

因为这个定制可能十分复杂,所以我们在安装包里提供了一份定制示例。template.zip位于安装包的collaterals\customizationTemplate文件夹下,并且包含图标包(jar文件)用于定制。这是定制你的web应用的起点。

1. 从Collaterals\CustomizatinTemplate文件夹拷贝template.zip到一个你本地文件夹

2. 解压缩template.zip文件

3. 解压好后找到子文件夹SAP BusinessObjects Enterprise XI 4.0\warfiles\webapps\BOE\WEB-INF\ecplise\plugins

4. 在这个文件夹里有一个com.businessobjects.webpath.infoViewBranding.jar包,包含了定制示例。使用winrar解压缩com.businessobjects.webpath.infoViewBranding.jar

5.  示例文件位于web\sample文件夹下。示例包含图片以及CSS文件,作为更改BI Launchpad样式的指导。你可以随意定制!

6. 用notepad++或者其他文本编辑器打开位于\web\sample\css下的customize.css

创建定制文件

建议你创建全新的customize.css然后使用示例文件作为范例向新文件里天价定制的样式而不是更改customize.css文件。

你可以定制favicon、图标,背景、样式等。大多数定制都通过更改customize.css文件里的CSS规则。所有的定制必须位于com.businessobjects.webpath.InfoViewBranding.jar的web文件夹里才起作用。web文件夹有以下子文件夹结构:

\web

\css

customize.css

\images

favicon.ico

\theme

*.png, *.gif

1. 在解压缩的com.businessobjects.webpath.InfoViewBranding.jar包下的com.businessobjects.webpath.InfoViewBranding文件夹下,创建上面所示的文件架结构

2.  BI Launchpad使用一些图片作为背景,在这篇教程里我创建了这些图片的一个定制的子集。从BI launch pad background images in light red.zip下载。解压缩并拷贝到theme文件夹。

3. 在css文件夹下创建新的customize.css文件

定制BI Launchpad登陆页面

作为参考,下面的图展示了定制的元素。方框里面的数字指的是示例customize.css文件里的各个部分。如果你想定制更多的部分,我们的官方文档包含更详细的图。对于使用十六进制值定义颜色的情况,我已经建议了新的颜色值;随意使用任何你喜欢的色值。

1. 通过使用示例customize.css文件和下面的图,增加新的CSS式样到customize.css文件

定制BI launchpad顶部

作为参考,下面的图展示了在这里定制的元素。方框里面的数字指的是示例customize.css文件里的各个部分。

1. 通过使用示例customize.css文件和下面的图,增加新的CSS式样到customize.css文件

定制BI launchpad主页

作为参考,下面的图展示了在这里定制的元素。方框里面的数字指的是示例customize.css文件里的各个部分。

1. 通过使用示例customize.css文件和下面的图,增加新的CSS式样到customize.css文件

定制BI Launchpad全局资源库浏览器

作为参考,下面的图展示了在这里定制的元素。方框里面的数字指的是示例customize.css文件里的各个部分。

1. 通过使用示例customize.css文件和下面的图,增加新的CSS式样到customize.css文件

定制BI Launchpad菜单

作为参考,下面的图展示了在这里定制的元素。方框里面的数字指的是示例customize.css文件里的各个部分。

1. 通过使用示例customize.css文件和下面的图,增加新的CSS式样到customize.css文件

定制BI Launchpad简单对话框

作为参考,下面的图展示了在这里定制的元素。方框里面的数字指的是示例customize.css文件里的各个部分。

1. 通过使用示例customize.css文件和下面的图,增加新的CSS式样到customize.css文件

定制BI Launchpad大对话框

作为参考,下面的图展示了在这里定制的元素。方框里面的数字指的是示例customize.css文件里的各个部分。

1. 通过使用示例customize.css文件和下面的图,增加新的CSS式样到customize.css文件

测试你的定制

在你的生产系统上执行定制之前,良好的实践是首先在测试系统上测试定制。在使用打包的Tomcat服务器的默认安装服务器上,通过临时修改Tomcat工作目录下的webpath.infoViewBranding文件夹,可以立即看到修改后的效果:
<INSTALLDIR>\SAP BusinessObjects\tomcat\work\Catalina\localhost\BOE\eclipse\plugins\webpath.InfoViewBranding\web\
这个文件夹具有包含在template.zip里的主题资源一样的结构。注意:Tomcat的工作目录不是永久的,你的临时修改会在打patch后丢失。你可能需要重启Tomcat并且清除浏览器缓存来看到临时修改变化。

建立定制包

1. 使用WINRAR打开示例com.businessobjects.webpath.InfoViewBranding.jar包

2. 删除包里的示例文件夹

3. 在web文件夹下增加定制的css和image文件夹以及内容。关闭WINRAR。

4. 拷贝com.businessobjects.webpath.InfoViewBranding.jar主题包到一下位置<INSTALLDIR>\SAP BusinessObjects Enterprise XI 4.0\warfiles\webapps\BOE\WEB-INF\eclipse\plugins

部署定制文件

为了能够看到定制在BI Launchpad起作用,必须运行WDEPLOY

1. 使用CCM停止Tomcat

2. 使用WDEPLOY重新部署BOE.war到Tomcat。

3. 等待WDEPLOY结束

4. 重启Tomcat

查看定制

1. 清除浏览器缓存来保证浏览器使用新的式样

2. 作为管理员登录到BI Launchpad

3. 浏览查看定制

Be the first to leave a comment
You must be Logged on to comment or reply to a post.