版本比较
标识
- 该行被添加。
- 该行被删除。
- 格式已经改变。
1.说明
Smartbi插件可以方便的替换Smartbi原有的文件,包括图片、样式、HTML、JSP和JS文件等。
当需要替换原有的文件时,在插件中建立与该文件在smartbi.war包中一致的目录结构,在该目录中建立同名的文件。Smartbi会优先加载插件中的文件。
替换文件最常用的场景:
- 通过替换图片及样式来改变Smartbi的皮肤。
- 通过替换HTML文件来改变Smartbi的布局。
关于如何查找定位对应图片、css或js,请见Smartbi前端框架介绍及调试定位入门。
2.替换图片文件
2.1效果
Smartbi默认登录界面的背景图如下所示:
按某项目要求,需要将原登录界面修改为:
2.2实现步骤
1、在smartbi.war包中找到登录背景图片所在目录:"smartbi.war\vision\img\login\"。
2、把需要替换的背景图、输入框的LOGO图及登陆按钮图,分别命名为login_bg_default.jpg、logo.png、loginbutton_zhCN.png。
3、在插件包项目中按背景图文件在smartbi.war中的目录结构创建相同的目录,并把制作好的三个图片文件放到该目录中。
4、将插件包项目打包为***.ext,参照 插件部署扩展包部署 加载插件。
5、重启Smartbi应用服务器后,再次登录即可看到替换的效果。
5、示例代码下载 ReplacePictureFile.rar
3.替换css样式
3.1效果
修改前:
修改后:
3.2实现步骤
1、在smartbi的插件包中vision\js\ext\目录创建文件:ConfigurationPatch.js,在文件中指定项目使用的css文件。
代码块 | ||
---|---|---|
| ||
var ConfigurationPatch = { extensionPoints: { css : [ 'vision/css/castc.css' ] } }; |
2、在css文件中实现定制化的样式:直接覆盖已有的css样式即可,示例:替换报表的刷新按钮
代码块 | ||
---|---|---|
| ||
.queryview-toolbar-refresh { background: #ffffff url(../img/querygrid/refresh.png) no-repeat left center; } |
3、示例代码下载 ReplaceCSSStyle.rar
面板 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
|