OneCode-Rad OOD移动组件编码规范开发文档(AI投喂专用）

1. 概述

本文档定义了OOD（Object-Oriented Design）组件的编码规范，适用于所有使用OneCode RAD Studio可视化设计器开发的业务功能代码。如果您正在使用OneCode-Rad 那么一定记得下载此文档将文档，喂给AI后，会让AI 快速的形成OOD规范记忆，生成符合规范的OOD 代码。亲测 腾讯CodeBuddy 阿里Qoder 100%兼容.

2. 核心原则

2.1 组件属性使用规范

1. 只使用DataModel中定义的属性

   • 所有组件属性必须严格遵循DataModel定义
   • 禁止使用DataModel中不存在的属性
   • 属性值为null表示该属性不可被显示修改

2. 属性设置方法

   • 使用setPropertyName(value)方法设置DataModel中定义的属性
   • 对于不支持的属性，使用setCustomStyle()方法

2.2 样式设置规范

1. setCustomStyle方法使用

   // 正确用法
   .setCustomStyle({
       "虚拟节点名称": {
           "样式属性": "值"
       }
   })
   

2. 虚拟节点命名规范

   • BORDER: 边框相关样式
   • PANEL: 面板内边距和背景
   • CAPTION: 文字标题样式
   • ICON: 图标样式

3. 组件属性校验规则（永久记忆）

3.1 通用组件属性表

组件类型	支持的属性	不支持的属性	替代方案
Dialog	setLeft, setTop, setWidth, setHeight, setCaption, setMinBtn, setMaxBtn, setTheme, setResponsive, setShadow, setResizer, setMovable, setDisplayBar	setResizable, setBorderColor, setPadding	setCustomStyle({"BORDER": {"borderColor": "#e0e0e0"}})
Block	setDock, setWidth, setHeight, setBorderType, setSideBarType, setSideBarStatus, setSideBarSize, setBackground	setPadding	setCustomStyle({"PANEL": {"padding": "1em"}})
Label	setCaption, setFontSize, setFontWeight, setDock, setTheme, setResponsive, setClock, setImage, setImagePos, setImageClass	setColor	setCustomStyle({"CAPTION": {"color": "#666"}})
TreeView	setItems, setDock, setDirtyMark, setIniFold, setSingleOpen, setValue, setTheme, setResponsive, setNoIcon, setAutoFontColor, setAutoIconColor	-	-
Gallery	setItems, setDock, setIconFontSize, setColumns, setItemMargin, setItemPadding, setBorderType, setTheme, setResponsive, setAutoColumns, setAutoFontColor, setAutoIconColor, setAutoItemColor, setTagCmds, setFlagText, setFlagClass	-	-
Tabs	setItems, setDock, setValue, setTheme, setResponsive, setAutoFontColor, setAutoIconColor, setAutoItemColor, setDirtyMark, setLazyAppend, setWidth, setHeight, setPosition, setItemWidth, setItemAlign, setHAlign	-	-
Input	setValue, setWidth, setHeight, setHAlign, setDisabled, setReadonly, setTextType, setPlaceholder, setLabelSize, setLabelPos, setLabelGap, setLabelCaption, setLabelHAlign, setLabelVAlign, setValueFormat, setMask	-	-
ComboInput	setValue, setItems, setTheme, setResponsive, setCachePopWnd, setBindClass, setFilter, setItemsExpression, setDateEditorTpl, setGroupingSeparator, setDecimalSeparator, setForceFillZero, setTrimTailZero, setParentID, setEnumClass, setPopCtrlProp, setPopCtrlEvents, setImage, setImagePos, setImageBgSize, setImageClass, setIconFontCode, setDropImageClass, setUnit, setUnits, setNumberTpl, setCurrencyTpl, setListKey, setDropListWidth, setDropListHeight, setType	-	-
ButtonLayout	setItems, setDock, setTheme, setResponsive, setAutoColumns, setAutoFontColor, setAutoIconColor, setAutoItemColor, setAutoImgSize, setAutoItemSize, setIconOnly, setIconFontSize, setItemMargin	-	-

3.2 详细属性定义

Dialog组件DataModel属性

theme, responsive, rotate, selectable, tips, border, disabled, dock, showEffects, hideEffects, 
initPos, iframeAutoLoad, ajaxAutoLoad, html, caption, image, imagePos, imageBgSize, imageClass, 
iconFontCode, shadow, resizer, movable, displayBar, minBtn, maxBtn, restoreBtn, infoBtn, optBtn, 
closeBtn, refreshBtn, pinBtn, landBtn, width, height, minWidth, minHeight, position, fromRegion

Block组件DataModel属性

disabled, tips, comboType, rotate, iframeAutoLoad, ajaxAutoLoad, selectable, html, borderType,
sideBarCaption, sideBarType, sideBarStatus, sideBarSize, background, width, height

Label组件DataModel属性

theme, responsive, selectable, expression, caption, clock, image, imagePos, imageBgSize, 
imageClass, iconFontCode, iconFontColor, hAlign, vAlign, fontColor, fontSize, fontWeight, 
fontFamily, excelCellFormula

TreeView组件DataModel属性

theme, responsive, expression, $subMargin, group, noIcon, iconColors, fontColors, itemColors,
autoFontColor, autoIconColor, autoItemColor, tabindex

Gallery组件DataModel属性

theme, responsive, autoColumns, tagCmds, expression, bgimg, iotStatus, tagCmdsAlign, flagText,
flagClass, flagStyle, iconColors, itemColors, fontColors, autoFontColor, autoIconColor, autoItemColor

Tabs组件DataModel属性

theme, responsive, rotate, iconColors, itemColors, fontColors, autoFontColor, autoIconColor, 
autoItemColor, expression, selectable, dirtyMark, lazyAppend, isFormField, dock, width, height, 
position, itemWidth, itemAlign, HAlign, dropKeysPanel, value

Input组件DataModel属性

selectable, expression, tipsErr, tipsOK, dynCheck, selectOnFocus, placeholder, labelSize, labelPos,
labelGap, labelCaption, labelHAlign, labelVAlign, valueFormat, mask, value, width, height, hAlign,
disabled, hiddenBorder, readonly, texttype

ComboInput组件DataModel属性

theme, responsive, cachePopWnd, bindClass, expression, filter, itemsExpression, dateEditorTpl,
groupingSeparator, decimalSeparator, forceFillZero, trimTailZero, parentID, enumClass, popCtrlProp,
popCtrlEvents, image, imagePos, imageBgSize, imageClass, iconFontCode, dropImageClass, unit, units,
numberTpl, currencyTpl, listKey, dropListWidth, dropListHeight, items, type

ButtonLayout组件DataModel属性

theme, responsive, autoColumns, tagCmds, expression, bgimg, tagCmdsAlign, flagText, flagClass,
flagStyle, autoFontColor, autoIconColor, autoItemColor, iconColors, itemColors, fontColors,
autoImgSize, autoItemSize, iconOnly, iconFontSize, itemMargin

3.3 函数命名规范

1. ActionEditor可调用函数

   • 不使用"_"前缀
   • 可以被ActionEditor事件绑定调用
   • 必须定义在functions: {}块中
   • 示例: searchInput_onchange, categoryTree_onchange

2. 内部函数

   • 使用"_"前缀
   • 只能在模块内部调用
   • 在ActionEditor中会被忽略，认为是不可调用的
   • 示例: _showIconsByCategory, _getCategoryTitle

3.4 函数组织结构

1. functions块使用

   functions: {
       // ActionEditor可调用的函数放在这里
       searchInput_onchange: function(profile, oldValue, newValue, force, tag) {
           // 函数实现
       },
       
       categoryTree_onchange: function(profile, oldValue, newValue, force, tag) {
           // 函数实现
       }
   }
   

2. 内部函数定义

   • 内部函数直接定义在Instance块中
   • 使用"_"前缀标识

3.5 事件处理规范

1. ActionEditor绑定模式

   .onChange([
       {
           "args": ["{page.method_name()}"],
           "desc": "方法描述",
           "method": "invoke",
           "target": "this",
           "type": "control"
       }
   ])
   

2. 事件命名规范

   • 使用componentName_oneventname格式
   • 事件处理方法不使用"_"前缀（因为已在functions块中）

3. target设置规范

   • 必须设置"target": "this"
   • 确保ActionEditor能正确找到函数

3.6 可视化逻辑编辑规范

1. ActionEditor支持的事件格式

   // 标准调用格式
   .onEventName([
       {
           "args": ["{page.function_name()}"],  // 调用页面函数
           "desc": "事件描述",
           "method": "invoke",
           "target": "this",                   // 必须设置为this
           "type": "control"                   // 事件类型
       }
   ])
   
   // 推荐的外部调用格式 (functions块调用)
   .onEventName([
       {
           "args": ["{page.functions.function_name}"],  // 调用functions块中的函数
           "desc": "事件描述",
           "method": "call",                          // 使用call方法
           "target": "callback",                      // 目标设置为callback
           "type": "other"                            // 类型设置为other
       }
   ])
   

2. 参数传递规范

   • 使用{page.function_name(arg1, arg2)}格式传递参数
   • 使用{page.functions.function_name}格式调用functions块中的函数引用
   • 参数可以是变量、字面量或表达式
   • 支持复杂表达式和函数调用

3. 方法调用规范

   • "method": "invoke" - 直接调用函数执行
   • "method": "call" - 调用函数引用（推荐用于functions块中的函数）
   • "target": "this" - 当前页面对象（用于invoke方法）
   • "target": "callback" - 回调函数对象（用于call方法）

4. 推荐的最佳实践

   // 推荐使用functions块 + call方法格式
   .onChange([
       {
           "args": ["{page.functions.categoryTree_onchange}"],
           "desc": "分类切换处理",
           "method": "call",
           "target": "callback",
           "type": "other"
       }
   ])
   
   // 传统格式（仍然支持）
   .onChange([
       {
           "args": ["{page.categoryTree_onchange()}"],
           "desc": "分类切换处理",
           "method": "invoke",
           "target": "this",
           "type": "control"
       }
   ])
   

5. 事件类型

   • "control": 控件事件
   • "page": 页面事件
   • "system": 系统事件
   • "custom": 自定义事件
   • "other": 其他类型事件（推荐用于functions块调用）
   • "system": 系统事件
   • "custom": 自定义事件

6. 方法调用规范

   • "method": "invoke" - 调用函数
   • "method": "set" - 设置属性值
   • "method": "get" - 获取属性值
   • "method": "fire" - 触发事件
   • "method": "animate" - 执行动画
   • "method": "show" - 显示元素
   • "method": "hide" - 隐藏元素

7. ActionEditor支持的操作类型

   // 常用操作类型
   "setProperties": "修改属性",
   "invoke": "调用方法", 
   "destroy": "销毁对象",
   "updateValue": "更新值",
   "resetValue": "重置值",
   "clearValue": "清除值",
   "show": "显示",
   "hide": "隐藏",
   "setData": "设置数据",
   "getData": "获取数据",
   "fireEvent": "触发事件",
   "setTheme": "设置主题",
   "play": "播放媒体",
   "pause": "暂停媒体"
   

8. 目标对象规范

   • "target": "this" - 当前页面对象
   • "target": "page" - 页面对象
   • "target": "control" - 控件对象
   • "target": "module" - 模块对象
   • "target": "global" - 全局对象

9. 完整事件绑定示例

   .onChange([
       {
           "args": ["{page.searchInput_onchange()}"],
           "desc": "搜索输入变化处理",
           "method": "invoke", 
           "target": "this",
           "type": "control"
       },
       {
           "args": ["{page.updateSearchResults()}"],
           "desc": "更新搜索结果",
           "method": "invoke",
           "target": "this", 
           "type": "control"
       }
   ])
   

10. ActionEditor函数发现机制

    • 只发现functions: {}块中定义的函数
    • 忽略以"_"开头的内部函数
    • 支持函数参数自动提示
    • 支持函数返回值类型推断

11. 设计器兼容性要求

    • 所有可被ActionEditor调用的函数必须在functions: {}块中定义
    • 函数命名必须使用驼峰命名法，不使用"_"前缀
    • 事件绑定必须设置"target": "this"
    • 函数参数必须使用正确的类型注解

12. 错误处理规范

    • 函数不存在时显示明确的错误信息
    • 参数类型不匹配时提供类型转换建议
    • 目标对象不存在时提示对象查找路径
    • 语法错误时提供代码修复建议

4. 代码结构规范

4.1 模块定义

ood.Class('命名空间.模块名', 'ood.Module', {
    Instance: {
        iniComponents: function () {
            // 组件初始化代码
        },
        
        events: {
            "onReady": "_page_onready",
            "onRender": "_page_onrender"
        },
        
        // 业务方法
        _methodName: function () {
            // 方法实现
        }
    },
    
    Static: {
        designViewConf: {
            // 设计视图配置
        }
    }
});

4.2 组件创建模式

append(
    ood.create("组件类型")
        .setHost(host, "组件实例名")
        .setProperty1(value1)
        .setProperty2(value2)
        .onEventName(事件处理配置)
);

5. 设计器兼容性规范

5.1 语法检查规则

1. 属性存在性检查

   • 设计器会验证所有set方法对应的属性是否在DataModel中存在
   • 不存在的属性会导致设计器解析错误

2. 类型检查

   • 属性值必须符合DataModel中定义的类型
   • 字符串、数字、布尔值必须正确转换

5.2 错误处理

1. 属性错误

   • 立即停止代码生成
   • 显示具体的属性错误信息

2. 语法错误

   • 提供详细的错误位置和原因
   • 建议正确的写法

6. 最佳实践

6.1 组件属性记忆规则

// 永久记忆的组件属性校验规则
const COMPONENT_PROPERTIES = {
    "ood.UI.Dialog": [
        "setLeft", "setTop", "setWidth", "setHeight", 
        "setCaption", "setMinBtn", "setMaxBtn"
    ],
    "ood.UI.Block": [
        "setDock", "setWidth", "setHeight", "setBorderType"
    ],
    "ood.UI.Label": [
        "setCaption", "setFontSize", "setFontWeight", "setDock"
    ]
};

// 样式替代方案映射
const STYLE_ALTERNATIVES = {
    "setBorderColor": "setCustomStyle({\"BORDER\": {\"borderColor\": \"#value\"}})",
    "setPadding": "setCustomStyle({\"PANEL\": {\"padding\": \"value\"}})",
    "setColor": "setCustomStyle({\"CAPTION\": {\"color\": \"#value\"}})"
};

6.2 永久记忆的组件属性校验规则

// 永久记忆的组件属性校验规则
const COMPONENT_PROPERTIES = {
    "ood.UI.Dialog": [
        "setLeft", "setTop", "setWidth", "setHeight", "setCaption", "setMinBtn", "setMaxBtn",
        "setTheme", "setResponsive", "setShadow", "setResizer", "setMovable", "setDisplayBar",
        "setInitPos", "setIframeAutoLoad", "setAjaxAutoLoad", "setHtml", "setImage", "setImagePos",
        "setImageBgSize", "setImageClass", "setIconFontCode", "setInfoBtn", "setOptBtn", "setCloseBtn",
        "setRefreshBtn", "setPinBtn", "setLandBtn"
    ],
    "ood.UI.Block": [
        "setDock", "setWidth", "setHeight", "setBorderType", "setSideBarType", "setSideBarStatus",
        "setSideBarSize", "setBackground", "setIframeAutoLoad", "setAjaxAutoLoad", "setHtml",
        "setSideBarCaption"
    ],
    "ood.UI.Label": [
        "setCaption", "setFontSize", "setFontWeight", "setDock", "setTheme", "setResponsive",
        "setClock", "setImage", "setImagePos", "setImageClass", "setIconFontCode", "setIconFontColor",
        "setHAlign", "setVAlign", "setFontColor", "setFontFamily", "setExcelCellFormula"
    ],
    "ood.UI.TreeView": [
        "setItems", "setDock", "setDirtyMark", "setIniFold", "setSingleOpen", "setValue",
        "setTheme", "setResponsive", "setNoIcon", "setAutoFontColor", "setAutoIconColor",
        "setAutoItemColor", "setTabindex"
    ],
    "ood.UI.Gallery": [
        "setItems", "setDock", "setIconFontSize", "setColumns", "setItemMargin", "setItemPadding",
        "setBorderType", "setTheme", "setResponsive", "setAutoColumns", "setAutoFontColor",
        "setAutoIconColor", "setAutoItemColor", "setTagCmds", "setFlagText", "setFlagClass"
    ],
    "ood.UI.Tabs": [
        "setItems", "setDock", "setValue", "setTheme", "setResponsive", "setAutoFontColor",
        "setAutoIconColor", "setAutoItemColor", "setDirtyMark", "setLazyAppend", "setWidth",
        "setHeight", "setPosition", "setItemWidth", "setItemAlign", "setHAlign"
    ],
    "ood.UI.Input": [
        "setValue", "setWidth", "setHeight", "setHAlign", "setDisabled", "setReadonly",
        "setTextType", "setPlaceholder", "setLabelSize", "setLabelPos", "setLabelGap",
        "setLabelCaption", "setLabelHAlign", "setLabelVAlign", "setValueFormat", "setMask"
    ],
    "ood.UI.ComboInput": [
        "setValue", "setItems", "setTheme", "setResponsive", "setCachePopWnd", "setBindClass",
        "setFilter", "setItemsExpression", "setDateEditorTpl", "setGroupingSeparator",
        "setDecimalSeparator", "setForceFillZero", "setTrimTailZero", "setParentID", "setEnumClass",
        "setPopCtrlProp", "setPopCtrlEvents", "setImage", "setImagePos", "setImageBgSize",
        "setImageClass", "setIconFontCode", "setDropImageClass", "setUnit", "setUnits",
        "setNumberTpl", "setCurrencyTpl", "setListKey", "setDropListWidth", "setDropListHeight", "setType"
    ],
    "ood.UI.ButtonLayout": [
        "setItems", "setDock", "setTheme", "setResponsive", "setAutoColumns", "setAutoFontColor",
        "setAutoIconColor", "setAutoItemColor", "setAutoImgSize", "setAutoItemSize", "setIconOnly",
        "setIconFontSize", "setItemMargin"
    ],
    
    // 简单基础组件
    "ood.UI.Icon": [
        "setImage", "setImagePos", "setImageBgSize", "setImageClass", "setIconFontCode",
        "setIconFontSize", "setIconColor", "setSelectable", "setHtml", "setAttributes",
        "setRenderer", "setDefaultFocus", "setTabindex"
    ],
    
    "ood.UI.Element": [
        "setSelectable", "setHtml", "setAttributes", "setRenderer", "setDefaultFocus", "setTabindex"
    ],
    
    "ood.UI.HTMLButton": [
        "setImage", "setImagePos", "setImageBgSize", "setImageClass", "setIconFontCode",
        "setIconFontSize", "setIconColor", "setCaption", "setFontColor", "setFontSize",
        "setFontWeight", "setFontFamily", "setHAlign", "setVAlign", "setSelectable",
        "setHtml", "setAttributes", "setRenderer", "setDefaultFocus", "setTabindex"
    ],
    
    "ood.UI.HTMLAnchor": [
        "setImage", "setImagePos", "setImageBgSize", "setImageClass", "setIconFontCode",
        "setIconFontSize", "setIconColor", "setCaption", "setFontColor", "setFontSize",
        "setFontWeight", "setFontFamily", "setHAlign", "setVAlign", "setHref", "setTarget",
        "setSelectable", "setHtml", "setAttributes", "setRenderer", "setDefaultFocus", "setTabindex"
    ],
    
    "ood.UI.HTMLImage": [
        "setImage", "setImagePos", "setImageBgSize", "setImageClass", "setIconFontCode",
        "setIconFontSize", "setIconColor", "setSrc", "setAlt", "setWidth", "setHeight",
        "setSelectable", "setHtml", "setAttributes", "setRenderer", "setDefaultFocus", "setTabindex"
    ],
    
    "ood.UI.HTMLInput": [
        "setImage", "setImagePos", "setImageBgSize", "setImageClass", "setIconFontCode",
        "setIconFontSize", "setIconColor", "setValue", "setType", "setPlaceholder", "setDisabled",
        "setReadonly", "setChecked", "setMaxlength", "setSize", "setSelectable", "setHtml",
        "setAttributes", "setRenderer", "setDefaultFocus", "setTabindex"
    ],
    
    "ood.UI.HTMLTextArea": [
        "setImage", "setImagePos", "setImageBgSize", "setImageClass", "setIconFontCode",
        "setIconFontSize", "setIconColor", "setValue", "setPlaceholder", "setDisabled",
        "setReadonly", "setRows", "setCols", "setMaxlength", "setSelectable", "setHtml",
        "setAttributes", "setRenderer", "setDefaultFocus", "setTabindex"
    ],
    
    "ood.UI.HTMLSelect": [
        "setImage", "setImagePos", "setImageBgSize", "setImageClass", "setIconFontCode",
        "setIconFontSize", "setIconColor", "setValue", "setItems", "setDisabled", "setReadonly",
        "setMultiple", "setSize", "setSelectable", "setHtml", "setAttributes", "setRenderer",
        "setDefaultFocus", "setTabindex"
    ]
};

// 样式替代方案映射
const STYLE_ALTERNATIVES = {
    "setBorderColor": "setCustomStyle({\"BORDER\": {\"borderColor\": \"#value\"}})",
    "setPadding": "setCustomStyle({\"PANEL\": {\"padding\": \"value\"}})",
    "setColor": "setCustomStyle({\"CAPTION\": {\"color\": \"#value\"}})",
    "setBackgroundColor": "setCustomStyle({\"PANEL\": {\"background\": \"#value\"}})",
    "setFontColor": "setCustomStyle({\"CAPTION\": {\"color\": \"#value\"}})"
};

// 自动属性校验函数
function validateComponentProperties(componentType, properties) {
    const validProps = COMPONENT_PROPERTIES[componentType];
    if (!validProps) return true;
    
    return properties.every(prop => validProps.includes(prop));
}

// 属性替换函数
function replaceInvalidProperty(componentType, property, value) {
    const alternative = STYLE_ALTERNATIVES[property];
    if (alternative) {
        return alternative.replace("value", value);
    }
    return null;
}

// 设计器属性校验中间件
function designPropertyValidator(componentType, property, value) {
    const validProps = COMPONENT_PROPERTIES[componentType];
    
    if (!validProps || !validProps.includes(property)) {
        const alternative = STYLE_ALTERNATIVES[property];
        if (alternative) {
            return {
                valid: false,
                alternative: alternative.replace("value", value),
                message: `属性 ${property} 不在DataModel中，请使用setCustomStyle方法`
            };
        }
        return {
            valid: false,
            message: `属性 ${property} 不在DataModel中且无替代方案`
        };
    }
    
    return { valid: true };
}

7. 附录

7.1 常用组件DataModel参考

• 查看src/main/resources/static/ood/js/UI/目录下的组件源文件
• 每个组件的DataModel属性在源代码中定义

7.2 设计器错误代码

• E001: 属性不存在
• E002: 类型不匹配
• E003: 语法错误
• E004: 组件未找到

---

7.3 简单基础组件DataModel属性

Icon组件 (ood.UI.Icon)

selectable, html, attributes, renderer, defaultFocus, tabindex, image, imagePos, imageBgSize,
imageClass, iconFontCode, iconFontSize, iconColor

Element组件 (ood.UI.Element)

selectable, html, attributes, renderer, defaultFocus, tabindex

HTML基础组件通用属性

selectable, html, attributes, renderer, defaultFocus, tabindex, image, imagePos, imageBgSize,
imageClass, iconFontCode, iconFontSize, iconColor

7.4 简单组件使用规范

1. Icon组件使用示例

   ood.create("ood.UI.Icon")
       .setImageClass("ri ri-home-line")
       .setIconFontSize("2em")
       .setIconColor("#007bff")
   

2. 样式设置规范

   • 使用setCustomStyle方法设置非DataModel属性
   • 虚拟节点使用"ICON"作为图标样式容器

3. 事件处理

   • Icon组件支持click事件
   • 使用ActionEditor格式绑定事件处理器

---

本文档最后更新: 2025-09-18 版本: 1.1.0