在新的fineui 后台框架中，是使用  type : dec.provider.tab_pane 来展示模板内容和显示网页，但是做自定义主题开发的时候不能直接使用它，需要给封装一个父类。

本文将讲述一个主题的例子效果如下图


其中红框部分就是

type : dec.provider.tab_pane

骨架部分代码


    BI.config("dec.provider.layout", function (provider) {
        provider.setConfig({
            type: "bi.absolute",
            cls: "demo-background",
            items: [
                {
                    el: {
                        type: "zxl.tabs",//展示tabs实际是对于dec.provider.tab_pane的封装
                    },
                    top: 120, left: 0, right: 0, bottom: 0
                }, {
                    el: {
                        type: "dec.header"//自定义的头部
                    },
                    height: 120,
                    top: 0, left: 0, right: 0
                },
              
            ]
        });
        return provider;
    });
}());

上面代码中使用了一个zxl.tabs 他是对于dec.provider.tab_pane的封装，直接使用dec.provider.tab_pane会导致调用 下面代码 时无法打开模板


BI.Services.getService("dec.service.frame.tab_pane").addItem(item)


看下封装的 zxl.tabs  的代码


    (function () {
        var Widget = BI.inherit(BI.Widget, {

            _store: function () {
                return BI.Models.getModel("dec.zxl.tabs")
            },
            beforeInit: function (e) {
                this.store.initFavs(e); //初始化收藏和所有目录
            },
            render: function () {
                var self = this;
                return {
                    type: "bi.absolute",
                    items: [{
                        el: BI.Providers.getProvider("dec.provider.tab_pane").getTabPaneComponent({//不能直接用type:"dec.provider.tab_pane" 要使用Providers来获取el
                            ref: function (e) {
                                initHomepage();//初始化首页
                            },
                            showTabBar: true,
                            cls: "bi-background-tab",
                        }),
                        top: 0, bottom: 0, right: 0,
                        left: 0
                    }]
                };
            }
        });
        BI.shortcut("zxl.tabs", Widget);
    })();


这里有两个点第一个是自定义了一个model，第二个是使用 BI.Providers.getProvider("dec.provider.tab_pane").getTabPaneComponent

注意：不能直接用type:"dec.provider.tab_pane" 要使用Providers来获取el

其中自定义model是因为dec.provider.tab_pane中需要这两个content （上下文） 看代码


(function () {
    var e = BI.inherit(Fix.Model, {
        state: function () {
            return {//定义两个属性
                favorites: [],
                entries: []
            }
        },
        childContext: [ "favorites","entries"],//把这两个属性传到子控件的model中
        actions: {
            initFavs: function (callBack) {
                var self=this;
                this.model.loading = true;
                //初始化收藏和完整的所有的models这些都是dec.provider.tab_pane需要的
                Dec.Utils.getFavoritesList(function(e) {
                    self.model.favorites = BI.Services.getService("dec.service.frame.entry").normalizeEntries(e.data, false);
                    callBack();
                    self.model.loading = false;
                });
                Dec.Utils.getCompleteDirectoryTree(function(e) {
                    self.model.entries = BI.Tree.transformToTreeFormat(BI.Services.getService("dec.service.frame.entry").normalizeEntries(e.data))
                })
            }
        }
    });
    BI.model("dec.zxl.tabs", e)
})();


在这个代码中注意是调用Dec.Utils.getFavoritesList， Dec.Utils.getCompleteDirectoryTree获取初始化了 两个dec.provider.tab_pane 需要的属性，并通过childContext 传给子控件。

到这一步基本上就可以使用收藏和取消收藏的功能了。