2、开始一个简单的应用
2.1 示例说明
这是一个简单的应用开发，它演示了"如何添加一级模块菜单，如何在资源树的右键菜单添加第三方的功能菜单"的开发过程。具体需求如下：
- 需求一：在Smartbi主界面的"浏览"菜单旁边添加"163网站"，点击后即在浏览面板中显示163网页。
- 需求二：在Smartbi"定制 -> 展现定制"界面资源树右键菜单中添加"Hello 163"菜单项，点击"Hello 163"菜单弹出163网站页面。
2.2 创建扩展插件
请参考“插件开发框架”，利用 extscaffold-Smartbi 工具帮我们生成项目的框架代码。在 Eclipse 开发工具中导入创建的 HelloDemo 项目，该项目的目录结构如下所示：
2.3 定制开发
- 需求一：在"浏览"菜单旁边添加"163网站"
1、打开“HelloDemo\src\web\vision\js\ext”目录中的 ConfigurationPatch. js 扩展点声明文件，在其中添加新的扩展项。然后在“HelloDemo\src\web\vision\js\ext\samples\”目录中添加动作对象类 UrlAction.js。此时项目的目录结构应该如下所示。
2、ConfigurationPatch.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网站" /*功能模块显示名称*/
}
}]
}
3、UrlAction.js 源代码如下：（一级模块和二级模块的动作文件，必须继承AbstractAction基类）
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
