Theme - infoplus/docs GitHub Wiki
- InfoPlus支持对渲染界面的深度定制化二次开发，即开发主题
- 每个租户/企业只能使用多个主题（空格分隔），开发者需自行避免多主题间的筛选可匹配。
- 应用级主题的配置可以覆盖租户配置。
- 主题可以简单的认为是一个包含了一些js/css/images的文件夹
- 主题根目录下必须至少有一个manifest.json的配置文件
- 主题需支持多种屏(Multiscreen)，InfoPlus会按照场景不同而使用不同屏的js/css/images文件
- 主题和换肤的区别是：主题属于租户配置，换肤属于最终用户的行为，InfoPlus不提供显式的支持，可自行在主题内实现。
{
"name": {string}, // 主题名称
"version": {string}, // 主题版本
"description": {string}, // 主题描述
"authors": [ {string} ], // 作者列表
"kind": {string}, // 用于哪种表单引擎，`InfoPathDesigner`（默认） 或 `InfoPlusDesigner`
"screens": [{
// 屏的名字，可枚举，必填
// 目前支持下面5种：desktop/mobile/android/ios/wechat
// 其中并且后面3个会fallback到mobile，mobile会fallback到desktop
"screen": {string},
// 所需文件列表
"sources": [{
// 匹配路径，正则表达式，如不给出默认匹配所有
// 如果匹配成功，依然会匹配下一组，即所有匹配中的文件都会被加载
// 加载的顺序由匹配中的顺序严格保障
"matches": [ {regexp} ],
// 必填。css文件列表
// 关于文件名的规则：支持3种格式：
// 1. 如："js/render/Header.js"，表示相对于 /static/themes/{themeName}/ 的地址
// 2. 如："/static/js/Example.js", 相对于infoplus引擎根目录的地址
// 3. 如："https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"
"css": [ {string} ],
// 压缩后的css文件，如不给出使用"css"参数
"css_min": [ {string} ],
// 必填。js文件列表
// 注意有些内置的js请不要加载，这主要包括：
// jquery-1.7.1, jquery-ui-1.8.17
"js": [ {string} ],
// 压缩后的js文件，如不给出使用"js"参数
"js_min": [ {string} ]
}]
}]
}-
BaseComponent
描述：这是所有主题控件类的基类，所有主题类都从它继承
构造参数：{options}
接口：
1.init() 初始化方法，会在构造函数中调用，渲染并注册事件。如果继承的组件初始化中需要做更复杂的事情可以覆写该init方法。
2.render() 渲染方法，返回组件的dom元素，各组件可覆写该方法
3.initEvents() 注册事件方法，各组件如果有事件需要注册可覆写该方法
4.getElement() 返回组件的dom元素
5.show() 显示组件
6.hide() 隐藏组件
说明：所有主题类都应该从这个基类继承，根据需要覆写其中的接口方法。其中render方法最为重要，渲染的代码放在这里，这个方法返回组件的dom元素，这个dom会被调用者放到页面上，理论上如果没有额外需要注册的事件，那么组件只需要实现render接口即可，其它接口方法在基类中的都有实现，除非基类的实现不能满足主题类自己的需求，否则其它方法用基类的实现即可，如有特殊需求可以在自己的实现中覆写其余接口。 - preview\Introduce
描述：预览发起页面流程介绍
构造参数:options
{
app:{app} //流程对象
}- preview\Start
描述：预览发起页面发起流程按钮
构造参数:options
{
startable:{boolean}(true), //是否可以发起
onClick:{function} //发起按钮点击回调函数
}
- preview\Layout
描述：预览发起页面布局
构造参数:options
{
views:[{view}], //预览页上所有的view（dom），将来这里会做改变，变成view对象
introduce:{introduce}, //简介对象
start:{start} //发起按钮
}
- render\Dialog
描述：弹出式对话框
构造参数: options
{
container:{$(dom)}, //对话框的容器
title:{string}, //标题
titleColor:{string}, //标题颜色
content:{string}, //内容，可以是html
footerFlex{boolean}(false), //底部按钮是否是flex布局，如果不是的话靠右布局,缺省false
maxWidth:{number}, //对话框最大宽度
autoWidth:{boolean}(false), //是否设置自动宽度,缺省false
onShow:{function}, //对话框显示完毕后回调
onClose:{function}, //对话框关闭时候回调
overflow:{string}, //设置overflow
lowZindex:{boolean}(false), //是否用较低的zindex,缺省false
showCloseButton{boolean}(false), //是否显示右上角关闭按钮,缺省false
showMinimiseButton{boolean}(false), //是否显示右上角最小化按钮,缺省false
showFooter{boolean}(true), //是否显示footer,缺省true
modal{boolean}(true), //是否是模式对话框,缺省true
buttons: [{ //按钮对象，显示次序为从右向左
name:{string}, //按钮名称
defaultButton:{boolean}(false), //是否高亮显示,缺省false
callback:{function}, //回调
preventDefault:{boolean}(false), //回调是否可能阻止对话框的关闭,缺省false
callOnClose:{boolean} //是否在对话框隐藏时候调用该按钮的回调
}]
｝- render\Page
描述：移动端弹出页面
构造参数: options
{
title:{string}, //标题
content:{string}, //内容，可以是html
onShow:{function}, //对话框显示完毕后回调
onClose:{function}, //对话框关闭时候回调
isDoAction{boolean}(false), //是否是按了提交按钮而显示的page,缺省false
uri{string}, //内嵌iframe显示uri链接地址
buttons: [{ //按钮对象，显示次序为从右向左
name:{string}, //按钮名称
defaultButton:{boolean}(false), //是否高亮显示,缺省false
callback:{function}, //回调
preventDefault:{boolean}(false), //回调是否可能阻止对话框的关闭,缺省false
callOnClose:{boolean}(false) //是否在对话框隐藏时候调用该按钮的回调,缺省false
}]
}- render\ActionButton
描述：动作按钮
构造参数: options
{
id:{string} //动作id
text:{string} //按钮文字
textClass:{string} //按钮文字class
tip:{string} //提示文字
hide:{boolean}(false) //是否隐藏
onClick:{function} //按按钮时候的回调函数
}- render\CommandMenu
描述：命令栏菜单
构造参数: options 无
注意CommandMenu类需要额外实现addMenuItem方法
- render\NavMenu
描述：导航菜单
构造参数: options
{
onSaveClick{function} //按保存时候的回调函数
onPrintClick{function} //按打印时候的回调函数
onDownloadClick{function} //按下载时候的回调函数
onHistoryClick{function} //按历史时候的回调函数
onHelpClick:{function} //按帮助时候的回调函数
} 注意NavMenu类需要额外实现disableUnusedMenuItem方法
- render\TitleIcon
描述：标题栏图标
构造参数: options
{
id:{string} //id
back:{boolean} //是否显示退回图标
onClick:{function} //按图标时候的回调函数
}- render\TitleContent
描述：标题栏内容
构造参数: options
{
title{string} //标题(参数会给出缺省标题，如果需要定制标题，请根据step和workflowName自行定制)
step:{step} //步骤
workflowName{string} //流程名称
}- render\TitleDescription
描述：标题栏右侧的描述信息
构造参数: options
{
full:{string} //详细描述
compact:{string} //缩略描述
}- render\ToolButton
描述：工具按钮
构造参数: options
{
id:{string} //id
iconName{string} //图标名称
href{string} //链接
target{string} //链接target
hide:{boolean} //是否隐藏
disabled{boolean} //是否disable
tip{string} //提示(html)
scrollTip{ScrollTip} //滚动tip对象
helper{
message{string} //帮助信息(html)
class{string} //信息内容css类
doAfterAction{boolean} //是否立即执行
doText{string} //执行文字
}
onClick:{function} //按按钮时候的回调函数
}- render\ScrollTip
描述：工具栏的滚动提示(当滚动到表单最下方时候出现)
构造参数: options
{
toolbarId:{string} //工具栏id
text:{string} //提示文字
left:{boolean} //是否在工具栏左侧,非左即右
}在主题文件里可以使用inforCore内置的事件机制来响应某些事件
- 渲染完成事件
触发时机：在整个表单都渲染完后触发
调用语法：$$.ready(function(){});
- 表单尺寸变化事件
触发时机：在表单渲染完毕后以及表单尺寸变化时(手机翻转等)
调用语法：$$.resize(function(width){});目前支持一个参数width,即表单width
- 重复节表新增行事件
触发时机：在重复节表新增了一行数据的显示前后，显示前用addingRepeat,显示后用addedRepeat
调用语法：
$$.addingRepeat(function(repeatControl,newRow){});
$$.addedRepeat(function(repeatControl,newRow){});
两个参数分别为重复节表控件以及新增出来的行
- 相关用户查询完成事件
触发时机：在相关用户查询完成后触发
调用语法：$$.candidatesQueried(function(ul){});
ul参数是相关用户查询完后弹出的用户列表元素，可以修改其中的li子元素改变外观，所需的用户数据存在$(li).data("user")中