1、下载Java开发工具
工欲善其事必先利其器,做开发首先要有个好用的开发工具。在这里推荐一个开源的工具 Eclipse 集成开发平台。
1、搭建开发环境
工欲善其事必先利其器,做开发首先要有个好用的开发工具,以及配置好开发环境。
1、如果您是资深开发人员,经常使用Eclipse工具做开发,可以参考 手动配置插件开发环境,搭建好环境后,就可以开始定制功能了。
2、如果您是新手,没有Eclipse,可以参考插件开发IDE,直接下载smartbi配置好的插件开发环境,根据文档做相关设置后,可以开始定制功能。
搭完环境,做了这个入门,投入实际工作之前,建议都先看下Smartbi前端框架介绍及调试定位入门。
2、通过扩展包实现定制功能
2.1示例说明
下面介绍的示例项目源码,可下载:HelloDemo.rar 参考。
这是一个简单的应用开发,它演示了"如何在资源树的右键菜单添加第三方的功能菜单"的开发过程。具体需求如下:
面板 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
文档目录:
|
2、开始一个简单的应用
2.1 示例说明
这是一个简单的应用开发,它演示了"如何添加一级模块菜单,如何在资源树的右键菜单添加第三方的功能菜单"的开发过程。具体需求如下:
- 需求一:在Smartbi主界面的"浏览"菜单旁边添加"163网站",点击后即在浏览面板中显示163网页。
需求二:在Smartbi"定制 -> 展现定制"
需求1:通过接口、扩展点插入右键菜单
在Smartbi"定制管理"界面资源树右键菜单中添加"Hello 163"菜单项,点击"Hello 163"菜单弹出163网站页面。
需求2
.2 创建扩展插件请参考“插件开发框架”,利用 extscaffold-Smartbi 工具帮我们生成项目的框架代码。在 Eclipse 开发工具中导入创建的 HelloDemo 项目,该项目的目录结构如下所示:
:前端界面修改
很多时候,客户的需求比特殊,smartbi并未有相关的接口提供,如果是前端需求,可通过扩展js文件修改。
具体需求:修改定制管理首页的“新建分析”为“新建报表”,并修改背景颜色
2.
32 定制开发
需求一:在需求1:在"
浏览定制管理"
菜单旁边添加界面资源树右键菜单中添加"
163网站Hello"
1、打开“HelloDemo\src\web\vision\js\ext”目录中的 ConfigurationPatch. js 扩展点声明文件,在其中添加新的扩展项。然后在“HelloDemo\src\web\vision\js\ext\samples\”目录中添加动作对象类 UrlAction.js。此时项目的目录结构应该如下所示。
代码块 | ||||
---|---|---|---|---|
| ||||
var ConfigurationPatch = {
patches : [ {
path : "/extensionPoints/MainFrame/actions", /*一级模块扩展点*/
key : 1, /*指功能模块位置,这里指放在第1位,也就是浏览模块之前*/
operation : "insert", /*执行插入的动作,这里指插入163网站功能模块*/
value : { /*功能模块信息*/
"groupId" : "default", /*组的ID,这里使用默认值*/
"className" : "ext.samples.UrlAction", /*功能模块执行的动作类,这里我们定义了UrlAction动作类*/
"text": "163网站" /*功能模块显示名称*/
}
}]
}
|
代码块 | ||||
---|---|---|---|---|
| ||||
var UrlAction = function(treeSlot, toolbarSlot, viewSlot, leftPane, splitter, tabSlot) {
//执行父类结构方法
UrlAction.superclass.constructor.call(this, treeSlot, toolbarSlot, viewSlot, leftPane, splitter, tabSlot);
//模块的显示名称
this.text = "163网站";
//打开链接地址
this.url = "http://www.163.com";
this.treeSlot = treeSlot;
this.toolbarSlot = toolbarSlot;
this.viewSlot = viewSlot;
this.leftPane = leftPane;
this.splitter = splitter;
this.tabSlot = tabSlot;
this.status = "hidden";
};
/*
* 指定继承AbstractAction
*/
lang.extend(UrlAction, "bof.baseajax.common.AbstractAction");
/*
* 当打开模块时调用
*/
UrlAction.prototype.open = function(arg) {
//隐藏左边的目录树
this.leftPane.style.display = "none";
//隐藏左边目录树与右边主界面之间的分隔线
this.splitter.style.display = "none";
//隐藏主界面的工具栏
this.toolbarSlot.style.display = "none";
//生成IFrame,在IFrame中打开指定的jsp文件
this.viewSlot.innerHTML = "<iframe src='" + this.url + "' style='width: 100%; height: 100%'></iframe>";
//返回true表示成功
return true;
};
/**
* 当模块关闭时调用
*/
UrlAction.prototype.close = function(arg) {
//恢复目录树、分隔线、工具栏可见
this.leftPane.style.display = "";
this.splitter.style.display = "";
this.toolbarSlot.style.display = "";
//释放IFrame
this.viewSlot.innerHTML = "";
return true;
};
|
- 需求二:在"定制"->"浏览"界面资源树右键菜单中添加"Hello"菜单项
1、首先修改 Configuration.js 声明文件,添加资源树右键菜单的声明。然后在"HelloDemo\src\web\vision\js\ext\samples\"目录中添加自定义右键菜单句柄类 HelloPopupMenuHandler.js。接着在HelloPopupMenuHandler 对象中新建"hello"菜单项。
2、Configuration.js 声明文件修改如下:(具体的说明请参照"扩展点配置")
代码块 | ||||
---|---|---|---|---|
| ||||
var ConfigurationPatch = {
/*extensionPoints.CatalogTree.displayCustomHandler是"定制"->"浏览"资源树扩展点路径*/
extensionPoints : {
CatalogTree: {
displayCustomHandler:[{className : "ext.samples.HelloPopupMenuHandler"}]
}
},
patches : [ {
path : "/extensionPoints/MainFrame/actions", /*一级模块扩展点*/
key : 1, /*指功能模块位置,这里指放在第1位,也就是浏览模块之前*/
operation : "insert", /*执行插入的动作,这里指插入163网站功能模块*/
value : { /*功能模块信息*/
"groupId" : "default", /*组的ID,这里使用默认值*/
"className" : "ext.samples.UrlAction", /*功能模块执行的动作类,这里我们定义了UrlAction动作类*/
"text": "163网站" /*功能模块显示名称*/
}
}]
}
|
3、HelloPopupMenuHandler.js 源代码如下:
代码块 | ||||
---|---|---|---|---|
| ||||
/*
* 构造函数
*/
var HelloPopupMenuHandler = function(popupMenu) {
this.popupMenu = popupMenu;
};
/*
* 析构函数
*/
HelloPopupMenuHandler.prototype.destroy = function() {
}
/*
* 初始化菜单,只会调用一次。一般在这里创建菜单项
*/
HelloPopupMenuHandler.prototype.initMenu = function() {
//创建菜单项:参数为【显示名称】、【功能编号(传递到doCmd方法中)】、【快捷键】、【图标】、【插入在哪个菜单项之前】
this.popupMenu.helloMenu = this.popupMenu.createMenuItem("hello 163", "HelloCommand", "H", null, "刷新");
};
/*
* 清空菜单状态,每次弹出前调用。一般应在这里隐藏本Handler所创建的所有菜单
*/
HelloPopupMenuHandler.prototype.clearMenuState = function() {
this.popupMenu.helloMenu.setVisibility(false);
}
/*
* 根据传入的node控制菜单的显示与否
*/
HelloPopupMenuHandler.prototype.resetMenuState = function(node) {
if(!node)
return;
this.popupMenu.helloMenu.setVisibility(true);
};
/*
* 当点击菜单时,响应的代码
*/
HelloPopupMenuHandler.prototype.doCmd = function(node, func) {
if (!node)
return;
if(typeof func == "string"){
if(func == "HelloCommand")
window.open("http://www.163.com");
}
};
|
2.4 扩展包运行和调试
要在开发工具中运行并调试代码,请参考“插件开发框架”从第 5 步开始的内容。主要是客户端的 JS 代码,可以在其中添加 debugger 断点,然后单步运行调试。
2.5 打包和部署扩展包
在生成的插件代码中,包含有 build.xml 文件,可以直接用 Ant 工具打包。打包后会在 dist 目录下生成 HelloDemo.ext 扩展包,接着您可以参考“扩展包部署”,把它部署到任意 Smartbi 服务器上。
2.6 示例代码下载
前述介绍的示例项目,代码下载:HelloDemo.rar菜单项
实现步骤:
首先修改 ConfigurationPatch.js 声明文件,添加资源树右键菜单的声明。然后根据声明文件实现具体的句柄类 HelloPopupMenuHandler.js。接着在实现类中实现具体功能:新建“hello"菜单项。
1、 ConfigurationPatch.js 声明文件修改如下:
2、 根据上图,在web目录下创建:ext/samples目录,然后创建HelloPopupMenuHandler.js ,配置文件中的跟路径相对vesion/js目录:
3、 实现HelloPopupMenuHandler.js ,添加新的菜单项:
需求2:修改定制管理首页文字内容及样式
实现步骤:首先找到定制管理首页的实现文件,从war包中找到对应的js文件以及具体的实现方法,在扩展包中修改为需求内容
1、 找到定制管理首页的实现文件(smartbi中很少有页面是使用独立的jsp实现的,基本都是动态拼HTML片段到主界面,定制管理的首页也是如此),可以通过charles工具获取(也可以使用chrome的开发者工具>network跟踪):登录smartbi后,第一次打开“定制管理”界面前打开charles,然后点击“定制管理”功能,可以在charles看到下面内容。
图片中看到加载了很多js文件,最后2个就是我们要找的文件了。
2、 根据路径找到并打开SuperviseDefaultCommand.js文件
可以看到右边的菜单项是通过数组对象拼装内容的
3、 在扩展包对应的路径下新建SuperviseDefaultCommand.js.patch文件,并修改getItems方法的返回信息。
2.3功能测试和调试
启动应用后即可查看修改效果,如果是客户端的 JS 代码,可以在其中添加 debugger 断点,通过浏览器工具可以单步调试。
2.4 打包和部署扩展包
功能开发及测试完成后,直接用 Ant 工具打包,会在 dist 目录下生成 HelloDemo.ext 扩展包,参考“扩展包部署”,把它部署到任意 Smartbi 服务器上。