页面树结构
转至元数据结尾
转至元数据起始

Smartbi扩展插件可以方便的替换Smartbi原有的文件,包括图片、样式、HTML、JSP和JS文件等。当需要替换原有的文件时,在扩展插件中建立与该文件在smartbi.war包中一致的目录结构,在该目录中建立同名的文件。Smartbi会优先加载扩展插件中的文件。
替换文件最常用的场景:

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

替换图片文件

示例说明:
Smartbi默认登录界面的背景图如下所示:

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

实现步骤:

  1. 在smartbi.war包中找到登录背景图片所在目录:"smartbi.war\vision\img\login\"。
  2. 把需要替换的背景图、输入框的LOGO图及登陆按钮图,分别命名为login_bg_default.png、logo.png、loginbutton_zhCN.png
  3. 在Sample项目中按背景图文件在smartbi.war中的目录结构创建相同的目录,并把制作好的三个图片文件放到该目录中。
  4. 将Sample项目打包为sample2.ext,参照上节在Smartbi应用服务器中加载扩展插件
  5. 重启Smartbi应用服务器后,再次登录即可看到替换的效果。

替换css样式:

示例效果:

修改前:

修改后:

实现步骤:

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;
}

 


示例代码下载

Sample2.rar

  • 无标签

2 评论

  1. 黄潮勇 发表:

    在实现步骤中,需要进一步补充如何找到smartbi.war文件,包括window默认安装、linux、weblogic、websphere、jboss等服务器环境。

  2. 徐晓兰 发表:

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