页面历史

Smartbi扩展插件可以方便的替换Smartbi原有的文件，包括图片、样式、HTML、JSP和JS文件等。

当需要替换原有的文件时，在扩展插件中建立与该文件在smartbi.war包中一致的目录结构，在该目录中建立同名的文件。Smartbi会优先加载扩展插件中的文件。

1.说明

       Smartbi插件可以方便的替换Smartbi原有的文件，包括图片、样式、HTML、JSP和JS文件等。

       当需要替换原有的文件时，在插件中建立与该文件在smartbi.war包中一致的目录结构，在该目录中建立同名的文件。Smartbi会优先加载插件中的文件。

       替换文件最常用的场景：

• • 通过替换图片及样式来改变Smartbi的皮肤。
  • 通过替换HTML文件来改变Smartbi的布局。
• 修改某JavaScript对象的方法，参考第四课：如何修改Smartbi JS文件。

关于如何查找定位对应图片、css或js，请见       关于如何查找定位对应图片、css或js，请见Smartbi前端框架介绍及调试定位入门。

2.替换图片文件

示例说明：

2.1效果

       Smartbi默认登录界面的背景图如下所示：

Image Modified

按某项目要求，需要将原登录界面修改为：       按某项目要求，需要将原登录界面修改为：

Image Modified

实现步骤：

2.2实现步骤

       1、在smartbi.war包中找到登录背景图片所在目录："smartbi.war\vision\img\login\"。

       2、把需要替换的背景图、输入框的LOGO图及登陆按钮图，分别命名为login_bg_default.jpg、logo.png、loginbutton_zhCN.png。

       3、在插件包项目中按背景图文件在smartbi.war中的目录结构创建相同的目录，并把制作好的三个图片文件放到该目录中。

替换css样式

示例效果：

修改前：

Image Removed

修改后：

Image Removed

实现步骤：

1、在smartbi的扩展包中vision       4、将插件包项目打包为***.ext，参照 扩展包部署 加载插件。

       5、重启Smartbi应用服务器后，再次登录即可看到替换的效果。

       5、示例代码下载 ReplacePictureFile.rar

3.替换css样式

3.1效果

       修改前：

Image Added

       修改后：

Image Added

3.2实现步骤

       1、在smartbi的插件包中vision\js\ext\目录创建文件：ConfigurationPatch.js，在文件中指定项目使用的css文件。

var ConfigurationPatch = {
    extensionPoints: {
    	css : [ 'vision/css/castc.css' ]
    }
};

2、       2、在css文件中实现定制化的样式：直接覆盖已有的css样式即可，示例：替换报表的刷新按钮

.queryview-toolbar-refresh {
	background: #ffffff url(../img/querygrid/refresh.png) no-repeat left
		center;
}

示例代码下载Sample2       3、示例代码下载 ReplaceCSSStyle.rar