FineBI支持

为了让主题能够有更广泛的使用面，现在主题插件中希望能加入对FineBI的支持。

效果图

我们以示例插件为例子，假如了FineBI的支持后，顶部导航栏会多出“新建分析”和“数据配置”两个按钮：

点击这两个按钮就可以进行FineBI相关的操作了。

实现实例

那么我们如何更改已有的插件来支持呢？很简单，只需要扩展主题接口中的FS.THEME.config4navigation.naviComponents即可，参见如下代码：

naviComponents : [
    {
        renderEl : $('<div id="bi-support"/>'),
        render : function (renderEl) {
            fixTools(this.$header);
        },
        visible : FS.config.supportModules.indexOf("bi") !== -1
    }
]

其中fixTools函数的实现如下：

fixTools函数实现

var fixTools = function ($header) {
    if (FS.config.supportModules.indexOf("bi") === -1) {
        return;
    }
    var header = BI.createWidget({
        type: "bi.absolute",
        element: $header
    });
    var newAnalysis = BI.createWidget({
        type: "bi.icon_text_item",
        cls: "new-analysis-font bi-new-analysis-button",
        text: BI.i18nText('BI-Add_Analysis'),
        height: 60,
        width: 120,
        iconWidth: 20,
        iconHeight: 20
    });
    newAnalysis.on(BI.IconTextItem.EVENT_CHANGE, function () {
        var id = BI.UUID();
        var newAnalysisBox = BI.createWidget({
            type: "bi.new_analysis_float_box"
        });
        newAnalysisBox.on(BI.NewAnalysisFloatBox.EVENT_CHANGE, function (data) {
            BI.requestAsync("fr_bi", "add_report", {
                reportName: data.reportName,
                reportLocation: data.reportLocation,
                realTime: data.realTime
            }, function (res, model) {
                if (BI.isNotNull(res) && BI.isNotNull(res.reportId)) {
                    FS.tabPane.addItem({
                        title: data.reportName,
                        src: FR.servletURL + "?op=fr_bi&cmd=init_dezi_pane&reportId=" + res.reportId + "&edit=_bi_edit_"
                    });
                }
            });
        });
        BI.Popovers.create(id, newAnalysisBox, {width: 400, height: 320}).open(id);
        newAnalysisBox.setTemplateNameFocus();
    });
    header.addItem({
        el: newAnalysis,
        right: 220,
        top: 0,
        bottom: 0
    });
    if (FS.config.isAdmin) {
        var dataConfig = BI.createWidget({
            type: "bi.icon_text_item",
            cls: "data-config-font bi-data-config-button",
            text: BI.i18nText("BI-Data_Setting"),
            height: 60,
            width: 120,
            iconWidth: 20,
            iconHeight: 20
        });
        dataConfig.on(BI.IconTextItem.EVENT_CHANGE, function () {
            FS.tabPane.addItem({
                title: BI.i18nText('BI-Data_Setting'),
                src: FR.servletURL + '?op=fr_bi_configure&cmd=init_configure_pane'
            });
        });
        header.addItem({
            el: dataConfig,
            right: 220,
            top: 0,
            bottom: 0
        });
        header.attr("items")[0].right = 340;
        header.resize();
    }
}

在主题的js中加入了上面的代码后，就可以在FineBI中使用该主题了。

注意：如果触发“新建分析”和“数据配置”的控件样式要自己实现，那么就不能直接在上面的代码，只需要在触发的地方调用以下两个函数

新建分析

var newBI = function () {
    var id = BI.UUID();
    var newAnalysisBox = BI.createWidget({
        type: "bi.new_analysis_float_box"
    });
    newAnalysisBox.on(BI.NewAnalysisFloatBox.EVENT_CHANGE, function (data) {
        BI.requestAsync("fr_bi", "add_report", {
            reportName: data.reportName,
            reportLocation: data.reportLocation,
            realTime: data.realTime
        }, function (res, model) {
            if (BI.isNotNull(res) && BI.isNotNull(res.reportId)) {
                FS.tabPane.addItem({
                    title: data.reportName,
                    src: FR.servletURL + "?op=fr_bi&cmd=init_dezi_pane&reportId=" + res.reportId + "&edit=_bi_edit_"
                });
            }
        });
    });
    BI.Popovers.create(id, newAnalysisBox, {width: 400, height: 320}).open(id);
    newAnalysisBox.setTemplateNameFocus();
};

数据配置

var dataSetting = function() {
   FS.tabPane.addItem({
      title: BI.i18nText('BI-Data_Setting'),
      src: FR.servletURL + '?op=fr_bi_configure&cmd=init_configure_pane'
   });
};

安装插件

下载最新的FineBI4.0（下载地址：ftp://env.finedevelop.com/finebi/stable/exe）并安装，再安装插件，访问FineBI即可看到效果。

示例源码

示例插件地址：http://cloud.finedevelop.com:2015/projects/PB/repos/plugin-theme-green/browse

Page tree