定制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. 浏览查看定制