Skip to Content

原文链接 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. 浏览查看定制

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply