OneCode-RAD 平台采用了灵活的配置体系,通过多个核心配置文件来控制设计器的行为、组件属性和系统参数。主要配置文件包括:
xuiconf.js
主要用于配置设计器的外观和开发环境参数。
// [[Page Appearance
xui.ini.$PageAppearance = {
"theme":"default"
};
// ]]Page Appearance
// [[Font Icons CDN
// ]]Font Icons CDN
// [[Develop Env Setting
xui.ini.$DevEnv = {
"designViewConf":{
"width":800,
"height":600
}
};
// ]]Develop Env Setting
属性 | 类型 | 说明 | 默认值 | 示例 |
---|---|---|---|---|
theme | String | 设计器主题 | "default" | "dark", "light", "custom" |
属性 | 类型 | 说明 | 默认值 | 示例 |
---|---|---|---|---|
designViewConf.width | Number | 设计视图默认宽度 | 800 | 1024 |
designViewConf.height | Number | 设计视图默认高度 | 600 | 768 |
conf.js
是系统的核心配置文件,包含字体图标定义、组件通用属性、设计器参数等配置。
定义了设计器中使用的所有内置字体图标,包括 Font Awesome 和自定义 spa-icon 系列图标。
xui.builtinFontIcon = {
"fa fa-lg fa-calendar-plus-o": "fa fa-lg fa-calendar-plus-o",
"fa fa-lg fa-close": "fa fa-lg fa-close",
"fa fa-lg fa-circle-o-notch": "fa fa-lg fa-circle-o-notch",
'spafont spa-icon-data': '',
'spafont spa-icon-debug': '',
// ...更多图标定义
};
通过 xui.merge(window.CONF, {...})
合并的方式定义系统级配置,包括:
conf.js
中定义了各种组件的通用属性配置,包括编辑器类型、默认值、选项等。
编辑器类型 | 说明 | 示例 |
---|---|---|
checkbox | 复选框,用于布尔值设置 | {type: "checkbox", dftValue: true} |
input | 文本输入框,用于字符串设置 | {type: "input", maxlength: 50} |
textarea | 多行文本输入框 | {type: "textarea"} |
combobox | 下拉选择框 | {type: "combobox", editorListItems: "left", "center", "right"} |
spin | 数字微调框 | {type: "spin", precision: 0, increment: 1, min: 0, max: 100} |
listbox | 列表选择框 | {type: "listbox", editorListItems: "", "AUTO", "WRAP"} |
color | 颜色选择器 | {type: "color"} |
conf.js
中为各类组件定义了属性模板,包括列表组件、表单组件、容器组件等。
items: {
"xui.UI.List": {
header: ["id", {
id: 'type',
type: "listbox",
editorListItems: ["", "split"]
}, "caption", "imageClass", "disabled", "hidden", "tagCmds", "tips", "tag", "tagVar"],
uniqueKey: "id"
},
// ...更多组件配置
}
conf_widgets.js
定义了设计器左侧工具箱中的组件结构、分类和初始属性。
组件按照功能和类型进行分组,常见的分类包括:
每个组件定义包含以下核心属性:
属性 | 类型 | 说明 |
---|---|---|
id | String | 组件唯一标识符 |
key | String | 组件类型键值 |
caption | String | 组件显示名称 |
comment | String | 组件描述 |
imageClass | String | 组件图标类名 |
draggable | Boolean | 是否可拖拽 |
iniProp | Object | 组件初始属性 |
{
id: 'xui.UI.MTabs',
key: 'xui.UI.MTabs',
comment: '移动TAB导航',
caption: '',
imageClass: 'spafont spa-icon-c-tabs',
draggable: true,
iniProp: {
"barLocation": "left",
"barSize": "12em",
"sideBarStatus": "fold",
items: [
{"caption": "item 1", "id": "a", "imageClass": "xui-icon-number1"},
{"caption": "item 2", "id": "b", "imageClass": "xui-icon-number2"}
],
value: 'a'
}
}
{
id: 'xui.UI.FormLayout',
key: 'xui.UI.FormLayout',
caption: '',
comment: '$RAD.widgets.esd.FormLayout',
imageClass: 'spafont spa-icon-c-grid',
draggable: true,
iniProp: {
"properties": {
"name": "TestForm",
"showEffects": "Classic",
"width": "50em",
"height": "20em",
"defaultRowHeight": 35,
"defaultColWidth": 150,
"layoutData": {
"rows": 3,
"cols": 2,
"merged": []
}
}
}
}
conf_widgets.js
中定义了多种图表组件的默认配置,包括饼图、柱状图、折线图等。
FCPie: {
"chart": {
"caption": "Monthly Sales Summary",
"subcaption": "For the year 2006",
"xaxisname": "Month",
"yaxisname": "Sales",
"numberprefix": "$",
"useroundedges": "1",
"bgcolor": "FFFFFF,FFFFFF",
"showborder": "0",
"enablerotation": "0"
},
"data": [{"label": "January", "value": "17400"}, {"label": "February", "value": "19800"}]
}
fcconf.js
定义了图表组件的详细配置属性和编辑器设置。
window.FCCONF = {
gridAttr: {
numVisiblePlot: {type: "spin", precision: 2, increment: 0.1, min: 2, max: 100},
animate3D: {type: "checkbox"},
animation: {type: "checkbox"},
exeTime: {type: "spin", precision: 2, increment: 0.1, min: 0, max: 10},
palette: {type: "spin", precision: 0, increment: 1, min: 1, max: 5},
// ...更多图表属性配置
}
};
属性 | 类型 | 说明 | 默认值 |
---|---|---|---|
animate3D | Boolean | 是否启用3D动画 | false |
animation | Boolean | 是否启用动画效果 | false |
exeTime | Number | 动画执行时间(秒) | 0 |
palette | Number | 调色板编号 | 1 |
paletteThemeColor | String | 主题颜色 | - |
showLabels | Boolean | 是否显示标签 | false |
rotateLabels | Boolean | 是否旋转标签 | false |
showShadow | Boolean | 是否显示阴影 | false |
use3DLighting | Boolean | 是否使用3D光照效果 | false |
maxLabelHeight | Number | 最大标签高度 | 0 |
labelDisplay | String | 标签显示方式 | "AUTO" |
通过修改 xuiconf.js
中的 $PageAppearance.theme
属性,可以切换设计器的主题:
// 修改为暗色主题
xui.ini.$PageAppearance = {
"theme":"dark"
};
在 conf_widgets.js
中,可以添加自定义组件或修改现有组件的配置:
// 添加自定义组件
xui.merge(window.CONF, {
widgets: [
{
id: 'custom.group',
key: 'custom.group',
comment: '自定义组件组',
group: true,
view: 'Gallery',
imageClass: 'fa fa-puzzle-piece',
sub: [
{
id: 'custom.component',
key: 'custom.component',
caption: '自定义组件',
comment: '我的第一个自定义组件',
imageClass: 'fa fa-star',
draggable: true,
iniProp: {
"width": "20em",
"height": "10em",
"caption": "自定义组件"
}
}
]
}
]
});
在 fcconf.js
中,可以修改图表的默认配置,例如启用3D效果和动画:
window.FCCONF = {
gridAttr: {
// ...现有配置
animate3D: {type: "checkbox", dftValue: true},
animation: {type: "checkbox", dftValue: true},
exeTime: {type: "spin", precision: 2, increment: 0.1, min: 0, max: 10, dftValue: 2},
// ...更多配置
}
};
通过修改 xuiconf.js
中的 designViewConf
属性,可以调整设计器的默认画布尺寸:
xui.ini.$DevEnv = {
"designViewConf":{
"width":1200,
"height":900
}
};
OneCode-RAD 配置文件的加载顺序为:
了解加载顺序有助于正确覆盖和扩展配置。
通过合理配置这些文件,可以完全定制 OneCode-RAD 设计器的外观和功能,打造符合团队需求的开发环境。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。