主题开发接口

概要：一个主题的美观度是由大背景图片＋主题配色＋主题包三大部分共同决定的。整体配色主要由背景图片和配色决定，这些可以在决策平台-管理系统-平台外观里自己配置；整体的交互和布局主要是由主题包来完成的，代码写的越多，可以变化的东西也越多，当然背景图片和主题配色可以都通过开放的API来在主题包的代码中来修改，并不局限于平台外观配置。

主题包格式

fs-theme-[主题名]  (注：主题名建议使用非中文)
        |----style.css   //导入样式
        |----theme.js      //导入脚本
        |----cover.png   //主题包封面( 建议尺寸240*170 )
        |----其他目录(包括需要使用到的一些自定义资源文件)

注：使用主题包导入功能的时候，只需要直接将上面所有文件打成zip包导入即可，不要对主题包根目录进行打包（zip包不需要包含“fs-theme-[主题名]”这个文件夹，只需包含其下的style.css、theme.js等文件即可），zip包名即为该主题的名字。zip包导入成功之后，会自动解压到 WebReport/WEB-INF/resources/fstheme/ 目录下、生成一个主题文件夹，文件夹名为“fs-theme-[zip文件名]”。

组件开放接口

框架中总共有5大组件，分别是框架布局，目录树组件，多tab组件，Navigation组件和Gallery组件。

主题总配置:

{
    isCustom: true, //是否是自定义主题
    name: 'myTheme', //主题名称
    //框架布局配置属性
    config4frame: {},
    //Navigation配置属性
    config4navigation: {},
    //目录树组件配置属性
    config4MenuTree: {},
    //多tab组件配置属性
    config4tabPane: {}
}

框架布局配置属性:

config4frame = {
    resizable: false,  //是否可以拖拽分割线调整左右区域的大小
    //上区域
    north: {
        height: 80 //上方导航栏高度设置(不设置默认60px)
        visible: true //是否可见
    },
    //下区域
    south: {
        visible: false //是否可见
    },
    //左区域
    west: {
        width: 220 //宽度
    },
    //右区域
    east: {}
}

目录树组件配置属性:

config4MenuTree = {
    region: 'west',  //默认所在区域
    onBeforeInit: null, //初始化前事件，参数：[element]
    onAfterInit: null, //初始化后事件，参数：[element]
    onDataFilter: null, //节点数据过滤事件，参数:[node, childNodes]
    onBeforeNodeClick: null, //函数，节点点击前事件，参数: [node, $node, $li]
    onNodeClick: null, //函数，节点点击事件，参数: [node, $node, $li]
    onAfterNodeClick: null, //函数，节点点击后事件，参数: [node, $node, $li]
    onBeforeNodeCreate: null, //函数，节点创建前事件，参数:[node, $node, $li]
    onNodeCreate: null, //函数，节点创建事件，参数:[node, $node, $li]
    onAfterNodeCreate: null, //函数，节点创建后事件，参数:[node, $node, $li]
    onBeforeNodeExpand: null, //函数，节点展开前事件，参数:[node, $node, $li]
    onNodeExpand: null, //函数，节点展开事件，参数:[node, $node, $li]
    onAfterNodeExpand: null, //函数，节点展开后事件，参数:[node, $node, $li]
    onBeforeNodeCollapse: null, //函数，节点收起前事件，参数:[node, $node, $li]
    onNodeCollapse: null, //函数，节点收起事件，参数:[node, $node, $li]
    onAfterNodeCollapse: null, //函数，节点收起后事件，参数:[node, $node, $li]
    onBeforeDisplayNodes: null, //函数，节点展示前事件，参数:[node, $node, $li]
    onDisplayNodes: null, //函数，节点展示事件，参数:[node, $node, $li]
    onAfterDisplayNodes: null //函数，节点展示后事件，参数:[node, $node, $li]
}

参数说明：
1. node - 节点对象
    node = {
        text: '日报', //entry名 
        id: '213',   //entry id
        isexpand: false, //是否展开
        hasChildren: true,  //是否具有子节点
        ChildNodes: [],  //子节点数组
        isModule: false, //是否是标签页节点
        level: 1 //树深度，从0计数
    }

2. $node - 节点的DOM对象
3. $li - 节点所处的父层DOM对象

多tab组件配置属性:

config4tabPane = {
    region: 'east', //默认所在区域
    style: 'alpha',  //内置样式，包括alpha和bravo两种选择
    tabWidth: 150,  //单个tab标签的最大宽度
    isCollapsible: true,  //是否可以收起
    hasHomepageBtn: false,  //是否有主页按钮
    onCreateTab: null,  //函数，创建Tab标签时的操作，可修改标签样式(全局)，参数:[$tab, entry]
    onSelectTab: null,  //函数，选中每个Tab页面时的操作，可修改内容(全局)，参数:[$tab, $content, entry]
    onCloseTab: null,  //函数，关闭每个Tab页面时的操作(全局)，参数:[$tab, $content, entry]
    afterLoadTab: null,  //函数，加载每个Tab页面时的操作(全局)，参数:[$tab, $content, entry]

}

开放方法：
1. FS.tabPane.addItem(item)
方法: 向多tab组件里添加并打开一个tab，如果tab已经存在，则直接选中；若不存在，则添加并选中。
参数: item {JSON} 
         item = {
             text: 'newTab', //必须, tab标签名
             id: '213', //entry id
             src: 'http://www.finereport.com', //可选，正文内容为链接，iframe嵌入
             onCreate: null,  //函数，创建Tab标签时的操作，可修改标签样式，参数:[$tab, entry]
             onSelect: null,  //函数，选中每个Tab页面时的操作，可修改内容，参数:[$tab, $content, entry]
             onClose: null,  //函数，关闭每个Tab页面时的操作，参数:[$tab, $content, entry]
             afterLoad: null,  //函数，加载每个Tab页面时的操作，参数:[$tab, $content, entry]
         }

Navigation配置属性:

config4navigation = {
    onBeforeInit: null,  //初始化前事件
    onAfterInit: null   //初始化后事件
}

Gallery配置属性:

config4Gallery: {
    region: null   //默认所在区域
}

主题包开发

自定义主题包实为引入的外部js、css以及资源文件等。

为了使用主题接口，首先我们在theme.js里需要对FS.Theme配置进行扩展，具体代码如下：

(function ($) {
    FS.THEME = $.extend(true, FS.THEME, {
        /**需要扩展的配置属性**/
    });
})(jQuery);

内置Classic主题采用默认配置：

{
    config4frame: {
        resizable: true,
        //上区域
        north: {
            visible: true //是否可见
        },
        //下区域
        south: {
            visible: false //是否可见
        },
        //左区域
        west: {
            width: 230 //宽度
        },
        //右区域
        east: {}
    },
    config4Gallery: {
        region: null
    },
    config4MenuTree: {
        region: 'west'
    },
    config4tabPane: {
        region: 'east',
        style: 'bravo',
        isCollapsible: false,
        hasHomepageBtn: true
    },
    config4navigation: {
        onBeforeInit: null,
        onAfterInit: null
    }
}

内置Modern主题采用如下配置：

{
    config4frame: {
        resizable: false,
            south: {
            visible: true
        }
    },
    config4Gallery: {
        region: 'east'
    },
    config4MenuTree: {
        onNodeExpand: function (node, $node, $parent) {
            return node.level !== 0;
        },
        onNodeClick: function (node, $node, $parent) {
            $('#fs-frame-wrapper') .empty();
            return false;
        }
    },
    config4tabPane: {
        style: 'alpha',
        region: 'south',
        isCollapsible: true,
        hasHomepageBtn: false
    }
}

Page tree

主题开发接口

主题包格式

组件开放接口

主题包开发