iBizModel 工具栏(PSDETOOLBAR)与应用菜单(PSAPPMENU)模型详解

iBizModel工具栏模型与应用菜单模型详解

引言

iBizModel作为全面的企业级建模体系,提供了完整的界面交互模型支持。其中,工具栏模型(PSDETOOLBAR)和应用菜单模型(PSAPPMENU)是构建用户界面的核心组件,分别针对不同层次的交互需求。本文将深入探讨这两个模型的详细特性、应用场景、关系结构及完整的DSL建模示例。

一、工具栏模型(PSDETOOLBAR)详细介绍

1.1 模型定义与核心特性

PSDETOOLBAR是实体工具栏部件模型,作为通用的命令栏模型,支持层级化的工具栏项管理。该模型不仅可用于传统工具栏,还能适应菜单、上下文菜单等多种交互场景。

核心属性分析:

  • codename:唯一代码标识
  • name:工具栏显示名称
  • toolbarstyle:定义工具栏样式,支持工具栏、菜单、上下文菜单等6种模式
  • iconalign:图标方向控制,支持左、上、右、下四个方向
  • mobflag:移动端专属标识,实现响应式设计

样式枚举详解:

  • TOOLBAR:标准工具栏样式
  • MENU:传统菜单样式
  • CONTEXTMENU:右键上下文菜单
  • 三种移动端专属样式满足不同移动交互需求

1.2 应用场景分析

实体级操作场景:

  • 数据表格的批处理操作工具栏
  • 实体视图的快速操作栏
  • 卡片视图的分组操作工具栏

上下文交互场景:

  • 树形节点的右键菜单
  • 日历事件的上下文操作
  • 地图数据项的快捷菜单

移动端适配场景:

  • 移动端导航栏菜单
  • 流程操作专用菜单
  • 底部操作栏设计

1.3 成员模型架构

PSDETBITEM(工具栏项):

  • 支持界面行为项、分隔项、分组项、直接项四种类型
  • 丰富的动作类型:界面行为、打开视图、数据操作等
  • 灵活的显示模式:图标+短词、纯图标、纯文本

PSDETOOLBARLOGIC(工具栏逻辑):

  • 支持定时器、视图事件、部件事件等多种触发方式
  • 可绑定实体界面逻辑、系统预置逻辑或自定义脚本
  • 实现动态界面行为控制

1.4 外部引用关系

工具栏模型被多个视图部件引用:

  • 实体视图部件(PSDEVIEWCTRL)的主工具栏
  • 数据表格(PSDEGRID)的批操作和快速操作工具栏
  • 树形节点(PSDETREENODE)的上下文菜单
  • 门户部件(PSSYSPORTLET)的工具栏配置

1.5 完整DSL建模示例

groovy 复制代码
psdetoolbar(
    codename: "complete_example_tb", 
    name: "完整工具栏示例", 
    psdeid: "base.EXAMPLE_ENTITY",
    toolbarstyle: "TOOLBAR",
    iconalign: "LEFT",
    pssyscssid: "default_toolbar_style"
){
    // DEUIACTION类型项 - 界面行为项
    psdetbitem(
        tbitemtype: "DEUIACTION",
        btnactiontype: "UIACTION",
        psdeuiactionid: "New",
        name: "new_action",
        caption: "新建",
        showmode: "ICONANDSHORTWORD",
        actionlevel: 200,
        pssysimageid: "new_icon",
        tooltipinfo: "创建新记录"
    )
  
    // DEUIACTION类型项 - 编辑行为
    psdetbitem(
        tbitemtype: "DEUIACTION",
        btnactiontype: "UIACTION",
        psdeuiactionid: "Edit",
        name: "edit_action",
        caption: "编辑",
        showmode: "ICONANDSHORTWORD",
        actionlevel: 100,
        pssysimageid: "edit_icon"
    )
  
    // SEPERATOR类型项 - 分隔项
    psdetbitem(
        tbitemtype: "SEPERATOR",
        name: "separator1"
    )
  
    // ITEMS类型项 - 分组项(包含子项)
    psdetbitem(
        tbitemtype: "ITEMS",
        name: "more_actions_group",
        caption: "更多操作",
        showmode: "ICONANDSHORTWORD",
        pssysimageid: "more_icon"
    ){
        // 分组内的DEUIACTION子项
        psdetbitem(
            tbitemtype: "DEUIACTION",
            btnactiontype: "UIACTION",
            psdeuiactionid: "Copy",
            name: "copy_subitem",
            caption: "复制",
            showmode: "SHORTWORD"
        )
      
        // 分组内的SEPERATOR子项
        psdetbitem(
            tbitemtype: "SEPERATOR",
            name: "group_separator"
        )
      
        // 分组内的RAWITEM子项
        psdetbitem(
            tbitemtype: "RAWITEM",
            contenttype: "RAW",
            rawcontent: "自定义文本内容",
            name: "custom_text_item",
            caption: "自定义文本"
        )
      
        // 分组内的另一个DEUIACTION子项
        psdetbitem(
            tbitemtype: "DEUIACTION",
            btnactiontype: "OPENVIEW",
            openpsdeviewid: "export_view",
            name: "export_subitem",
            caption: "导出视图",
            showmode: "SHORTWORD"
        )
    }
  
    // 另一个SEPERATOR类型项
    psdetbitem(
        tbitemtype: "SEPERATOR",
        name: "separator2",
        spanflag: 1
    )
  
    // RAWITEM类型项 - 直接内容项(HTML内容)
    psdetbitem(
        tbitemtype: "RAWITEM",
        contenttype: "HTML",
        htmlcontent: "<div style='color: blue; font-weight: bold;'>状态指示器</div>",
        name: "status_indicator",
        width: 100
    )
  
    // RAWITEM类型项 - 直接内容项(直接文本)
    psdetbitem(
        tbitemtype: "RAWITEM",
        contenttype: "RAW",
        rawcontent: "版本: 1.0.0",
        name: "version_info",
        itemstyle: "version-style"
    )
  
    // RAWITEM类型项 - 直接内容项(图片)
    psdetbitem(
        tbitemtype: "RAWITEM",
        contenttype: "IMAGE",
        pssysimageid: "company_logo",
        name: "logo_item",
        width: 120,
        height: 40
    )
  
    // DEUIACTION类型项 - 打开链接
    psdetbitem(
        tbitemtype: "DEUIACTION",
        btnactiontype: "OPENHTMLPAGE",
        htmlpageurl: "https://example.com/help",
        name: "help_action",
        caption: "帮助",
        showmode: "ICON",
        pssysimageid: "help_icon"
    )
  
    // 工具栏逻辑定义 - 定时器触发
    psdetoolbarlogic(
        name: "autoRefreshLogic",
        triggertype: "TIMER",
        timer: 30000,
        dstlogictype: "SCRIPT",
        customcode: "refreshToolbarState()"
    )
  
    // 工具栏逻辑定义 - 视图事件触发
    psdetoolbarlogic(
        name: "initLogic",
        triggertype: "VIEWEVENT",
        eventnames: "onInit,onLoad",
        dstlogictype: "DEUILOGIC",
        psdelogicid: "toolbar_initialize"
    )
  
    // 工具栏逻辑定义 - 部件事件触发
    psdetoolbarlogic(
        name: "itemClickLogic",
        triggertype: "CTRLEVENT",
        eventnames: "onItemClick",
        psdetbitemid: "new_action",
        dstlogictype: "DEUIACTION",
        psdeuiactionid: "PreCreateCheck"
    )
}

二、应用菜单模型(PSAPPMENU)详细介绍

2.1 模型定义与核心特性

PSAPPMENU是应用级菜单模型,定义前端应用的导航菜单系统,支持多类型、多层级的菜单项管理,具备丰富的布局和样式配置能力。

核心属性分析:

  • name:唯一标识符,在应用中必须唯一
  • appmenustyle:菜单样式,支持图标视图、列表视图等11种样式
  • layoutmode:布局模式,支持栅格布局和Flex布局
  • customizedflag:支持用户自定义菜单配置
  • publicflag:公共菜单标识,支持跨应用复用

2.2 应用场景分析

应用导航场景:

  • 主应用菜单和侧边栏导航
  • 功能模块分类展示
  • 用户个性化菜单配置

多端适配场景:

  • 响应式布局适应不同屏幕尺寸
  • 移动端专属菜单样式
  • 门户部件的菜单集成

2.3 成员模型架构

PSAPPMENUITEM(应用菜单项):

  • 支持分隔项、用户自定义项、菜单引用、菜单项、直接内容项五种类型
  • 丰富的功能类型:应用功能、界面行为、视图打开等
  • 强大的布局控制:Flex布局、栅格布局、边界布局

PSAPPMENULOGIC(应用菜单逻辑):

  • 与工具栏逻辑类似的触发机制
  • 支持菜单项动态显示、启用状态控制
  • 可绑定应用功能逻辑处理

2.4 完整DSL建模示例

groovy 复制代码
psappmenu(
    name: "complete_example_menu",
    codename: "completeExampleMenu",
    pssysappid: "example_application",
    appmenustyle: "LISTVIEW",
    customizedflag: 1,
    publicflag: 0,
    name: "完整应用菜单示例"
){
    // SEPERATOR类型项 - 分隔项
    psappmenuitem(
        amitemtype: "SEPERATOR",
        name: "top_separator"
    )
  
    // MENUITEM类型项 - 系统管理菜单项(带子菜单)
    psappmenuitem(
        amitemtype: "MENUITEM",
        name: "system_management",
        caption: "系统管理",
        pssysimageid: "system_icon",
    ){
        // 子菜单项 - 用户管理
        psappmenuitem(
            amitemtype: "MENUITEM",
            name: "user_management",
            caption: "用户管理",
            btnactiontype: "OPENVIEW",
            openpsappviewid: "example_application.user_management_view",
            pssysimageid: "user_icon"
        )
      
        // 子菜单项 - 角色管理
        psappmenuitem(
            amitemtype: "MENUITEM",
            name: "role_management",
            caption: "角色管理",
            btnactiontype: "APPFUNC",
            psappfuncid: "role_management_func"
        )
      
        // 子菜单中的SEPERATOR
        psappmenuitem(
            amitemtype: "SEPERATOR",
            name: "system_sub_separator"
        )
      
        // 子菜单项 - 系统设置
        psappmenuitem(
            amitemtype: "MENUITEM",
            name: "system_settings",
            caption: "系统设置",
            btnactiontype: "UIACTION",
            psdeuiactionid: "SystemConfig",
            counterid: "setting_count",
            countermode: 1
        )
    }
  
    // SEPERATOR类型项
    psappmenuitem(
        amitemtype: "SEPERATOR",
        name: "middle_separator"
    )
  
    // USERITEM类型项 - 用户自定义项
    psappmenuitem(
        amitemtype: "USERITEM",
        name: "custom_dashboard",
        caption: "自定义面板",
        customcode: "openCustomDashboard()",
        pssysimageid: "dashboard_icon",
        menuitemstate: 2,
        tooltipinfo: "个性化工作台"
    )
  
   
    // RAWITEM类型项 - 直接内容项(直接文本)
    psappmenuitem(
        amitemtype: "RAWITEM",
        contenttype: "RAW",
        rawcontent: "快速链接区域",
        name: "quick_links_header",
        itemstyle: "section-header"
    )
  
    // RAWITEM类型项 - 直接内容项(HTML内容)
    psappmenuitem(
        amitemtype: "RAWITEM",
        contenttype: "HTML",
        htmlcontent: "<div class='notice'><i class='icon-info'></i> 系统公告</div>",
        name: "notice_board",
        layoutmode: "FLEX"
    )
  
   
  
    // 菜单逻辑定义 - 定时刷新
    psappmenulogic(
        name: "menuRefreshLogic",
        triggertype: "TIMER",
        timer: 60000,
        dstlogictype: "SCRIPT",
        customcode: "updateMenuCounters()"
    )
  
    // 菜单逻辑定义 - 初始化逻辑
    psappmenulogic(
        name: "initMenuLogic",
        triggertype: "VIEWEVENT",
        eventnames: "onInit",
        dstlogictype: "SYSVIEWLOGIC",
        pssysviewlogicid: "menu_initializer"
    )
  
    // 菜单逻辑定义 - 项显示逻辑
    psappmenulogic(
        name: "dynamicVisibleLogic",
        triggertype: "ITEMVISIBLE",
        psappmenuitemid: "system_management",
        dstlogictype: "SCRIPT",
        customcode: "data.get('field') == 1"
    )
}

三、模型比较分析

3.1 相同点分析

架构设计相似性:

  • 均采用嵌套模型结构,支持层级化项目管理
  • 共享相似的逻辑处理机制
  • 都支持丰富的样式配置和布局控制
  • 具备移动端适配能力

功能特性共通点:

  • 支持界面行为绑定和视图导航
  • 提供动态内容显示控制
  • 具备权限管理和状态控制
  • 支持自定义代码扩展

3.2 不同点分析

应用层级差异:

  • PSDETOOLBAR主要服务于实体级操作,绑定特定数据实体
  • PSAPPMENU专注于应用级导航,属于前端应用组成部分

项类型支持差异:

  • PSDETBITEM支持4种类型:DEUIACTION、SEPERATOR、ITEMS、RAWITEM
  • PSAPPMENUITEM支持5种类型:SEPERATOR、USERITEM、MENUITEM、RAWITEM

布局能力对比:

  • 应用菜单支持更丰富的布局模式(Flex、栅格、边界布局等)
  • 工具栏更专注于操作按钮的紧凑排列

四、模型关系图例

PSDETOOLBAR
工具栏 PSDETBITEM
DEUIACTION项 PSDETBITEM
SEPERATOR项 PSDETBITEM
ITEMS分组项 PSDETBITEM
RAWITEM项 PSDETBITEM
子项1 PSDETBITEM
子项2 PSDETOOLBARLOGIC
工具栏逻辑 PSAPPMENU
应用菜单 PSAPPMENUITEM
SEPERATOR项 PSAPPMENUITEM
MENUITEM项 PSAPPMENUITEM
USERITEM项 PSAPPMENUITEM
APPMENUREF项 PSAPPMENUITEM
RAWITEM项 PSAPPMENUITEM
子菜单项1 PSAPPMENUITEM
子菜单项2 PSAPPMENULOGIC
菜单逻辑

五、高级应用场景深度分析

5.1 复杂工具栏设计模式

动态工具栏场景:

通过PSDETOOLBARLOGIC的项显示逻辑,实现基于数据状态的动态工具栏。结合ITEMS分组项,可以创建上下文相关的操作集合。

多级工具栏结构:

利用ITEMS类型项的嵌套能力,构建层次化的工具栏菜单,适合功能复杂的企业应用。

5.2 企业级菜单系统架构

混合类型菜单设计:

结合MENUITEM、USERITEM等多种类型,构建功能丰富且可扩展的菜单系统。

权限敏感的菜单项:

通过PSAPPMENULOGIC的项显示逻辑,实现基于用户角色的动态菜单显示。

个性化菜单体验:

利用customizedflag支持用户自定义菜单布局,提升用户体验。

总结

本文详细介绍了iBizModel中的工具栏模型(PSDETOOLBAR)和应用菜单模型(PSAPPMENU),通过完整的DSL示例展示了所有项类型的应用方式。工具栏模型专注于实体级操作界面,支持4种项类型;应用菜单模型侧重于应用级导航,支持5种项类型。两者在架构设计上具有高度一致性,同时在应用场景和功能特性上形成有效互补。

在实际项目中,应根据具体业务需求选择合适的模型和项类型组合,遵循最佳实践原则,充分发挥iBizModel建模体系的优势,构建高效、易用的企业级应用界面。通过合理的模型设计和配置,可以创建出既符合用户体验原则又满足复杂业务需求的完整交互体系。

相关推荐
iBizModel2 天前
iBizModel 树视图(PSDETREEVIEW)模型体系详解
ibizmodeling
iBizModel3 天前
iBizModel 应用程序(PSSYSAPP)模型体系详解
ibizmodeling
iBizModel4 天前
iBizAppHUB前端框架示例(1)-多应用融合
ibizmodeling