6.应用系统统一开发平台（SG-UAP)V1.1培训_快速开发-平台前端MX框架应用示例20130228

应用系统统一开发平台 SG UAP 培训MX展现框架示例讲解 2020年4月 目录 2 引言 课程内容及目标 3 掌握前端控件使用方法 掌握查询API的方法 掌握JS调试方法 能够开发简单的页面 课程目标 了解SG UAP平台框架及功能 目录 4 MX展现框架 示例讲解 5 6 新建一个表单将表单数据保存到数据库展现要编辑的数据定制表单 皮肤 表单示例功能 MX展现框架 表单 7 创建一个表单主要包括以下步骤 导入创建表单所需的js类 定义与表单交互数据的服务器url 创建表单数据容器 创建表单实例 切记表单要load才能显示 将表单添加到容器中 如何创建一个表单 MX展现框架 表单 8 1 导入类代码 import mx datacontrols DataForm import mx datacontainers FormEntityContainer 2 定义服务端urlvarrestUrl mxdemo rest uapsb 3 创建表单数据容器 初始化表单数据容器EntityContainer me formEntityContainer newmx datacontainers FormEntityContainer baseUrl weblet的ID值 mappath restUrl primaryKey objId 4 创建表单实例 表单示例代码讲解 MX展现框架 表单 9 me form newmx datacontrols DataForm fields name objId caption 主键 editorType TextEditor visible false name mc caption 设备名称 editorType TextEditor name sbxh caption 设备型号 editorType TextEditor name bdz caption 变电站 editorType TextEditor name jgdy caption 间隔单元 editorType NumberEditor width 145px name azrq caption 安装日期 editorType DateTimeEditor width 145px name sblx caption 设备类型 editorType DropDownEditor width 145px name sfzy caption 是否在用 editorType DropDownEditor width 145px name ssbm caption 所属部门 editorType DropDownEditor width 145px name sfwx caption 是否已维修 editorType DropDownEditor width 145px name sysm caption 使用说明 editorType TextEditor entityContainer me formEntityContainer 5 表单要load才能显示me form load 6 将表单添加到页面上me addControl me form 表单示例代码讲解 MX展现框架 表单 10 定制一个表单皮肤主要包括以下步骤 导入创建表单皮肤所需的js类 定义与表单交互数据的服务器url 创建表单数据容器 创建表单实例 注册皮肤所在目录url 切记表单要load才能显示 将表单添加到容器中 如何定制一个表单皮肤 MX展现框架 表单定制 皮肤 11 1 导入类代码 import mx datacontainers FormEntityContainer import mx datacontrols SkinDataForm 2 定义服务端urlvarrestUrl mxdemo rest uapsb 3 创建表单数据容器 初始化表单数据容器EntityContainer me formEntityContainer newmx datacontainers FormEntityContainer baseUrl weblet的ID值 mappath restUrl primaryKey objId 4 创建表单皮肤实例 表单示例代码讲解 MX展现框架 表单 12 me skinForm newmx datacontrols SkinDataForm skinUrl mxdemo form resources skins form html 参见项目文件entityContainer me formEntityContainer 5 表单要load才能显示me skinForm load 6 将表单添加到页面上me addControl me skinForm 表单皮肤示例代码讲解 MX展现框架 表单 目录 13 14 表格数据的显示 表格数据的编辑 表格数据的新建 表格数据的删除 表格数据的导出成excel文件 表格数据的查询 表格示例功能 MX展现框架 表格 15 与表单类似 创建一个表格主要也包括以下步骤 导入创建表格所需的js类 定义与表格交互数据的服务器url 创建表格数据容器 创建表格实例调用表格load方法 将表格添加到容器中 如何创建一个表格 MX展现框架 表格 16 1 导入类代码 import mx datacontainers GridEntityContainer import mx datacontrols DataGrid 2 定义服务端urlvarrestUrl mxdemo rest uapsb 初始化表单数据容器EntityContainer me gridEntityContainer newmx datacontainers GridEntityContainer baseUrl restUrl primaryKey objId 3 创建表格实例 表格示例代码讲解 MX展现框架 表格 17 4 创建表格实例me dataGrid newmx datacontrols DataGrid columns name objId caption 主键 editorType TextEditor name mc caption 设备名称 editorType TextEditor name sbxh caption 设备型号 editorType TextEditor name bdz caption 变电站 editorType TextEditor name jgdy caption 间隔单元 editorType TextEditor name azrq caption 安装日期 editorType TextEditor name sblx caption 设备类型 editorType DropDownEditor name sfzy caption 是否在用 editorType DropDownEditor name ssbm caption 所属部门 editorType DropDownEditor name sfwx caption 是否已维修 editorType DropDownEditor name sysm caption 使用说明 editorType TextEditor displayCheckBox true displayPrimaryKey false 列表是否显示主键allowEditing true 列表默认不可编辑entityContainer me gridEntityContainer 表格示例代码讲解 MX展现框架 表格 18 5 调用表格load方法me dataGrid load 6 将表格添加到页面上me addControl me dataGrid 表格示例代码讲解 MX展现框架 表格 目录 19 20 MX前端主要布局控件有如下几个 手风琴式菜单将窗口竖向分割将窗口横向分割 布局控件示例功能 MX展现框架 布局控件 21 创建一个布局控件主要包括以下步骤 导入所需的js类 创建实例 将实例添加到容器中 创建布局控件 MX展现框架 布局控件 22 1 导入类代码 import mx containers Accordion 2 创建菜单实例me accordion newmx containers Accordion height 60 width 20 panels title 综合评价 name zhpj title 参建队伍 name cjdw onselectionchanged me controller accordionChanged 3 将实例添加到容器中me addControl me accordion 手风琴式菜单示例代码讲解 MX展现框架 布局控件 23 1 导入类代码 import mx containers HSplit 2 创建实例me hsplit newmx containers HSplit rows 300 auto 窗口的两部分大小 3 将实例添加到容器中me addControl me hsplit 横向分割窗口布局示例代码讲解 MX展现框架 布局控件 24 1 导入类代码 import mx containers VSplit 2 创建实例me vsplit newmx containers VSplit cols 300 auto 窗口的两部分大小 3 将实例添加到容器中me addControl me vsplit 纵向分割窗口布局示例代码讲解 MX展现框架 布局控件 目录 25 26 树与表格的显示 树与表格的联动 树表联动示例主要功能 MX展现框架 树表联动 27 创建一棵树主要包括以下步骤 导入所需的js类 定义与树交互数据的服务器url 调用树的load方法 将树实例添加到容器中 创建一颗树 MX展现框架 树表联动 28 1 导入类代码 import mx datacontainers TreeEntityContainer import mx datacontrols DataTree 2 定义服务端urlvarrestUrl mxdemo rest uapbm tree 3 创建树实例me treeView newmx datacontrols DataTree baseUrl restUrl displayCheckBox true 是否需要在树中显示选中框onselectionchanged me controller tree selectionchanged 创建树示例代码讲解 MX展现框架 树表联动 29 4 调用树的load方法me treeView load 5 将树实例添加到页面上me addControl me treeView 创建树示例代码讲解 MX展现框架 树表联动 30 树表联动主要代码讲解 MX展现框架 树表联动 树节点选中事件 me tree selectionchanged function e if e selection hasChildren 如果选中节点有子节点 则展开该节点e selection expand 展开该节点 switch e selection itemType 根据返回的itemType 设置不同的业务逻辑 case uapbm 选中节点为部门节点 则初始化部门表 initDepartView e selection id break case uapsb 选中节点为设备节点 则初始化设备视图 initDeviceView e selection id break 目录 31 32 列表显示数据 列表新增数据 以表单形式新增 列表编辑数据 表单显示数据 列表与表单联动示例功能 MX展现框架 列表与表单联动 33 列表与表单示例部分代码讲解 MX展现框架 列表与表单联动 新增数据 新增按钮点击事件me btnNew onclick function 通过视图控制器获取视图对象varmvc newform views FormDetailViewController var detailView newmvc getView detailView objID null 将视图对象展现出来me showView detailView 34 me showView function p view TODO 表单视图保存后事件处理 p view formEntityContainer on saved function e mx indicate info 保存成功 me view dataGrid load me view hsplit removeControl p view 加载详细信息页面对象 p view load if me view hsplit controls length 3 将表单视图对象添加到hsplit中me view hsplit addControl p view 1 列表与表单联动示例代码讲解 MX展现框架 列表与表单联动 目录 35 36 根据输入的节点名 定位到该节点并展开 树节点定位示例功能 MX展现框架 树节点定位 37 实现树节点示例定位主要包括以下步骤 创建一颗树 前端发送输入请求数据到服务器端 服务器端接收数据并处理 返回 前端接收并处理 树节点定位部分代码 MX展现框架 树节点定位 38 树节点定位示例代码讲解 MX展现框架 树节点定位 前端发送请求数据到服务器端 me btnLocate click function 获取输入值varnodeValue me view textEditor value 创建ESTClient实例 用于发送请求varrestClient newmx rpc RESTClient restClient get mxdemo rest uapbm tree check 请求url nodeName nodeValue 将appSuite先转换为JSON字符串 然后作为POST参数传递到服务端function p context 回调函数 p context为返回数据 if p context null for vari 0 i p context length i varnode me view treeView findNode p context i 查找节点node expand 展开节点me view treeView selectNode node false 选中节点 39 else alert REST服务调用失败 Endofcallbackfunction Endofclient post 树节点定位示例代码讲解 MX展现框架 树节点定位 40 服务端示例代码讲解 MX展现框架 树节点定位 前端发送请求数据到服务器端 me btnLocate click function 获取输入值varnodeValue me view textEditor value 创建ESTClient实例 用于发送请求varrestClient newmx rpc RESTClient restClient get mxdemo rest uapbm tree check 请求url nodeName nodeValue 将appSuite先转换为JSON字符串 然后作为POST参数传递到服务端function p context 回调函数 p context为返回数据 if p context null for vari 0 i p context length i varnode me view treeView findNode p context i 查找节点node expand 展开节点me view treeView selectNode node false 选中节点 41 服务端示例代码讲解 MX展现框架 树节点定位 服务端Controller层接收并处理前端请求 RequestMapping value tree check method RequestMethod GET RawResponseBodypublicObjectfindNode RequestParam nodeName StringnodeName ListidList treeBizc findNodeId nodeName if idList size 0 returnidList else returnnull 42 服务端示例代码讲解 MX展现框架 树节点定位 服务端Biz层访问数据库 publicListfindNodeId StringnodeName Stringsql selectobj idfromuap bmwherebmmclike nodeName ListidList hibernateDao executeSqlQuery sql returnidList 目录 43 44 proMgr模块表格联动代码讲解 MX展现框架 proMgr模块 proMgr模块的表格联动代码实现步骤 创建两个表格 表格布局 两个表格间的联动 45 表格的创建 MX展现框架 proMgr模块 表格创建代码 请参考proMgr项目在face目录下的xmjc这个weblet中的MainView js文件 代码如下 varapp1 newpromgr views MainViewController varapp1View app1 getView varapp2 newrightgrid views MainViewController varapp2View app2 getView 46 表格的创建 MX展现框架 proMgr模块 说明 不同于以前的示例 它并没有在js文件中直接创建表格 而是单独的在两个weblet中创建了表格 而后通过获取表格所在的视图对象 从而获得表格 优点 视图之间独立 这样便于后期系统的维护 视图之间低耦合便于拓展 47 表格布局 MX展现框架 proMgr模块 表格布局代码 请参考proMgr项目在face目录下的xmjc这个weblet中的MainView js文件 代码如下 function initDataGrid1 p container p position p container addControl app1View p position function initDataGrid2 p container p position p container addControl app2View p position 48 表格联动 MX展现框架 proMgr模块 请参考proMgr项目在face目录下的promgr这个weblet中的MainView js文件 代码如下 me click1 function e