SG-UAP_快速开发实战指南

SG-UAP集成开发工具使用手册国家电网公司应用系统统一开发平台快速开发实战指南国家电网公司统一应用平台项目组2015年8月修订记录版本号修订说明修订人修订时间审核人2.0编制3快速开发指南丛兴滋2013/11/212.0修订功能开发陈耀灿2013-12-22.0调整3快速开发指南结构；修订3.4相关内容。丛兴滋2013-12-42.0完善3.4.3持续优化调整内容。丛兴滋2013-12-42.01.增加3.3业务对象建模指南内容；2.重新修订了3.2实例功能开发章节内容陈耀灿2013-12-6目录1引言11.1概述11.2适用范围11.3名词解释12开发环境部署22.1平台获取22.2平台的安装22.2.1SG-UAP SEVER的安装22.2.2SG-UAP IDE的安装32.2.3SG-UAP IDE的运行32.3数据库的安装42.4统一权限平台（ISC）的安装42.5统一流程平台（BPM）的安装43快速开发指南53.1创建UAP项目53.1.1创建UAP项目53.1.2配置UAP项目103.1.3创建模块项目173.1.4配置模块项目183.1.5验证开发环境203.2示例功能开发223.2.1业务对象建模233.2.2展现界面建模373.2.3设计效果预览433.3业务对象建模指南（陈耀灿补充）443.3.1业务对象建模453.3.2界面建模453.3.3效果预览453.3.4自定义调整453.4展现界面建模指南473.4.1常规操作步骤473.4.2界面效果预览583.4.3持续优化调整604流程快速开发指南734.1流程配置734.2流程集成744.2.1配置依赖包754.2.2服务端集成流程764.2.3前端集成流程794.2.4前端直接调用流程JS方法814.2.5工作台集成待办825任务调度825.1执行组件开发825.1.1远程组件部署配置835.1.2本地组件部署配置835.1.3执行组件实现845.1.4发布执行组件服务855.2任务配置865.2.1配置UAP项目865.2.2配置任务876报表开发886.1报表开发简介886.2报表配置886.2.1配置UAP项目886.3报表开发896.3.1网格报表896.3.2分组报表916.3.3自由报表926.3.4主从报表936.4图表开发946.4.1簇状条形图946.4.2簇状柱形图976.5报表集成976.5.1直接调用即席报表页面976.5.2HTML页面组件集成981 引言1.1 概述本文定位为“快速开发实战指南”，以案例代码贯穿全文，通过第二章、第三章内容达到快速了解SG-UAP平台开发环境运行环境、快速制作出直接运行例子的目的。第三章作为本文的重点，按照平台的开发步骤引导读者理解基于平台的开发过程，该章节针对平台的项目创建、场景代码生成、业务代码定制及权限集成等部分展开介绍了常用的设计、向导、方法，但不做深入介绍。对平台操作功能的深入介绍请参见用户开发手册。同时，本文也不会对组件、函数、属性展开介绍，这些部分的详细内容请参见API文档。1.2 适用范围本指南适合于在统一应用平台下进行软件开发的开发人员阅读和学习，是在用户手册基础之上的进阶资料，具有一定的参考价值。1.3 名词解释名称说明SG-UAP国家电网统一应用平台State Grid Unified Application Platform，英文缩写“SG-UAP”。国家电网公司新一代应用开发与运维平台，提供一套技术统一、架构柔性、性能高效、安全可靠的企业级信息系统基础框架和公共套件集，支撑业务系统的设计、开发、测试、发布、运行的全过程。（中文简称“统一应用平台”，英文简称“UAP”）SG-UAP SERVER统一应用平台服务端。提供统一应用平台的模块，整个项目组共用一个，由项目管理人员统一维护，开发人员只需要知道统一应用平台服务端的地址。（简称“服务端”）SG-UAP IDESG-UAP集成开发工具（SG-UAP Development Environment）UAP项目依赖于统一应用平台服务端的标准的空的Web应用。模块具有OSGi规范（Open Service Gateway Initiative ，开放服务网关规范）特定描述的Java程序包，是OSGi规范定义的模块化实体单元。统一应用平台的微内核对标准的OSGi模块进行扩展形成了动态模块，以上两者统称为模块。Weblet是种功能独立的部件，页面的最小组成单位。VO对象View Object 数据对象，也称为业务对象，存活在业务层的，供业务逻辑使用的。PO对象Persistence Object持久对象,是与数据库中表相映射的java对象。任务执行组件每个任务执行步骤的业务操作的实现组件，具体可包括脚本和插件表格1 名词解释2 开发环境部署2.1 平台获取业务项目组按照国网平台管理办法实施细则规定，按照平台使用申请流程，获得平台使用版权。2.2 平台的安装2.2.1 SG-UAP SEVER的安装将获得的SG-UAP Server服务端包文件放到tomcat的webapps目录下，启动tomcat容器，当出现Server startup in XXXX ms，说明SG-UAP Server的安装成功，如下图所示：图1 SG-UAP Server启动成功2.2.2 SG-UAP IDE的安装双击SGCC_UAP_IDE-X.X.X_XXXXXXXX.exe可执行文件，根据界面提示默认next下一步操作即可安装成功，成功后即可使用SG-UAP IDE。 2.2.3 SG-UAP IDE的运行在SG-UAP IDE中，找elipse目录，双击目录下的UAP Studio.exe文件，选择合适的工作空间，即可运行SG-UAP IDE，进入后界面如下：图2 运行SG-UAP IDE界面2.3 数据库的安装启动数据库，前提是您已经正确安装了数据库，如果没有安装请参考数据库的相关资料安装并启动数据库，以数据库管理员的身份登陆数据库，为UAP应用项目创建用户信息，并执行初始化建库脚本。2.4 统一权限平台（ISC）的安装按照统一权限平台的获取流程，获取ISC的使用版权，然后根据ISC提供的安装部署手册进行ISC的安装。2.5 统一流程平台（BPM）的安装按照统一流程平台的获取流程，获取BPM的使用版权，然后根据BPM提供的安装部署手册进行BPM平台的安装。3 快速开发指南SG-UAP引入了模型驱动架构（MDA）思想，业务模块的开发过程将围绕着“建模”展开，SG-UAP应用开发中模型主要包括对象模型和界面模型，分别对应于om文件和ui文件。3.1 创建UAP项目参照本文档第2部分完成开发环境的准备后，我们启动UAP Studio，创建一个磁盘目录（例如D:uapWorksQuickStart）用作当前会话的Workspace，然后依次完成 “创建UAP项目”、“配置UAP项目”、“创建模块项目”、“配置模块项目”、“验证开发环境”五个步骤。3.1.1 创建UAP项目1. 点击工具栏上的New按钮，选择“UAP项目”，也可以选择菜单栏中的“File-New-UAP项目”图3 新建UAP项目导航2. 在打开的“新建UAP项目”向导中输入项目名称，其他选项保持默认值。图4 新建UAP项目提示：在SG-UAP IDE中除了指明可以输入中文，一律要求输入英文。3. 点击“Next”按钮，进入下一个向导页面，保持默认设置不变，继续点击“Next”直至数据源配置页。图6 配置UAP项目数据库4. 点击“增加连接”按钮，打开新建数据库连接对话框，选择对应的数据库类型（当前示例选择“Oracle”）并设置连接名称。5. 点击“Next”按钮，点击箭头指向的小圆圈符号，配置oracle数据库的驱动6. 选中“Oracle Thin Driver oracle 10”，点击“OK”按钮。7. 在对话框中输入数据库ID、主机名、端口号、用户名、密码，并勾选“Save password”这样下次连接数据库时可以不用再次输入密码。8. 点击“Test Connection”对数据库连接进行测试，如果测试成功，会弹出提示对话框，点击“OK”按钮关闭对话框。9. 点击“Finish”完成数据库连接配置，返回UAP项目新建向导，如果连接成功会在Scheme中显示数据库的ID。点击“Finish”按钮完成新建向导的配置。图7 新建UAP成功后页面效果提示：UAP项目详细介绍请查阅SG-UAP_V2.0_高级开发手册_分册1.开发概述相关章节。3.1.2 配置UAP项目 配置服务端地址1. 点击“Window-Preferences”打开首选项（Preferences）配置窗口，在左侧导航树展开“Plug-in Development”，选中“Target Platform”配置项。2. 点击Add按钮，弹出目标平台定义窗口。3. 保持默认配置不变，点击Next按钮切换至下图所示界面，填写目标平台名称。 4. 点击Add按钮，选择Directory。5. 点击Next按钮，Location中输入SG-UAP Server的服务器地址，该地址格式形如http:/ip:port/webapp/environment/platform/VersionX.X.X，也可以简写为 http:/ip:port/webapp/v/X.X.X。6. 点击Finish按钮，会加载相关jar包到开发环境中，如下图所示7. 点击“保存服务端地址”按钮，在弹出的窗口中勾选3.1.1中创建的UAP项目，然后点击“OK”按钮返回。8. 点击Finish按钮，选择刚新建的Target Definitions,再点击OK按钮保存设置。至此，服务端地址配置完成。提示：如果您启用的是本机的uap-server,可以在完成jar插件加载后，关闭uap-server服务，节省本机的资源。 禁用统一认证UAP项目默认启用统一认证，在应用开发的初期可以将其禁用，完成主要功能开发后，再启用统一认证执行用户相关的测试工作。1. 打开“policy.xml”文件（uap项目下，webContent/configuration目录），切换到“平台属性配置”页。2. 将“统一认证模式”配置项的值更改为“FALSE”，保存后关闭。 配置Tomcat1. 打开“Servers”视图，在Apache Tomcat 实例上点击鼠标右键，选择“Add and Remove”项。2. 在弹出的“Add and Remove”对话框中，将3.1.1中创建的UAP项目从左侧“Available”组移动到右侧“Configured”组。3. 本例配置完毕后如下图所示，最后点击“Finish”完成配置： 界面设计器首选项1. 点击“Window-Preferences”打开首选项（Preferences）配置窗口，在左侧导航树展开“UAP IDE”，选中“界面设计器配置”配置项。2. 更改界面预览中“Url前缀”配置项的值，取值隐含Tomcat的端口号和UAP项目名称（本例为“:9000/uap-client/”），最后点击“OK”按钮保存配置。3.1.3 创建模块项目一个项目通常会划分为多个子项目（或者说子系统），SG-UAP平台中一个“模块项目”相当于项目中的一个“子项目”。 1. 点击工具栏上的New按钮，选择“模块项目”，也可以选择菜单栏中的“FileNew模块项目”。图12 新建模块项目导航2. 在打开的模块项目新建向导中，输入模块项目的名称，其他选项保持默认值。模块项目创建完成后的界面如下。图13 创建模块项目成功提示：模块项目详细介绍请查阅SG-UAP_V2.0_高级开发手册_分册1.开发概述相关章节。3.1.4 配置模块项目模块项目创建完毕之后，我们需要将其加入到UAP项目中，这样才能执行应用开发过程中的调试工作，具体步骤如下：1. 打开UAP项目中的WebContentWEB-INFconfigurationpolicy.xml配置文件，切换到“应用策略配置”页。2. 在“platform-dynamic-policy”项上点击鼠标右键，利用上下文菜单添加“module-repository”项。3. 为“module-repository”配置path属性，属性值为当前Workspace对应的磁盘目录（本例对应D:uapWorksQuickStart）。4. 在“module-repository”项上点击鼠标右键，利用上下文菜单添加“module”项，配置module的属性值为模块项目名称（本例为demo）。5. 保存后关闭。3.1.5 验证开发环境 创建测试页面在模块项目（本例对应于demo）的face目录下创建hello.jsp文件，修改html代码，在body标签中添加一段文本（本例为“第一个SG-UAP页面。”）并保存。 启动服务1. 打开“Servers”视图，在Apache Tomcat 实例上点击鼠标右键，选择“Publish”项完成UAP项目发布。图29 UAP IDE 服务器视图2. 点击右上角的Start按钮（调试时请点击前面的Debug按钮）启动UAP项目3. 应用启动成功后，控制台显示“Server startup in XXX ms”。图30 服务启动控制台信息 访问应用打开浏览器，在地址栏输入测试页地址，本例为http:/localhost:9000/uap-client/demo/hello.jsp，其中9000为端口号，uap-client为UAP项目名称，demo为模块项目名称。若正常展示如下界面，则证明SG-UAP应用开发的第一步工作（项目创建）顺利完成。3.2 示例功能开发在顺利完成“3.1创建UAP项目”章节内容后，开始正式进入示例功能开发。为便于初次使用UAP用户快速入门，本章节基于一个示意性质的“公司信息增删改查”功能场景，采用Step-By-Step的开发方式，引导您快速掌握SG-UAP的典型开发过程。3.2.1 业务对象建模提供手工建模和数据库逆向建模两种建模方式：1、手工建模采用图形化的设计器，协助您从零开始建立完整的对象模型，该方式适用于新建项目和熟悉面向对象设计和开发的用户。2、数据库方向建模通过向导方式，引导您将事先建好的数据库表转换成建业务对象模型，适用于改造项目或习惯于面向数据库开发的用户。两种方式创建的最终成果(业务对象模型)，在使用时效果一致。因此,您可任选一种方式完成本章内容的学习。 方式一：手工建模1. 打开手工建模向导：在当前模块项目下找到“model/om”文件夹，右键选择“New-业务对象模型(*.om)”，如下图所示：2. 为模型命名：在弹出窗口中，填写命名空间“com.quickstart.demo”、模型名称“hr”、显示名称“人力资源”，点击“finish”按钮。3. 打开OM文件：点击“Finish”后，系统在“model/om/”目录中创建“com.quickstart.demo.hr.om”文件，并自动打开该文件，如下图所示。4. 创建业务实体Company：从设计模型设计器的Palette面板中选择，鼠标左键按住，拖拽到画布区域并释放；在弹出窗口中设置名称为“Company”,设置显示名为“公司信息”、设置数据库表名“hr_company”。5. 创建主键属性id：在属性列表区域点击“新增属性”按钮，在弹出界面中设置名称为“id”，勾选，然后点击“Save&New”,保存并继续添加下一个属性“companyName”。具体配置如下图所示：6. 创建属性companyName：在弹出界面中设置名称为 “companyName”，设置显示名为“公司名称”，设置字段长度为“100”，点击“Save&New”,保存并继续添加下一个属性“address”。具体配置如下图所示：7. 创建属性address: 在弹出界面中设置名称为“adress”，设置显示名称 “公司地址”，设置字段长度为“500”，点击“OK”，显示业务实体编辑窗口，再次点击“OK”。具体配置如下图所示：8. 保存模型文件：点击UAP Studio工具栏上，或通过快捷键“Ctrl+S”,保存模型文件，最后完工的om模型文件如下图所示。提示：本步骤假定您的开发环境已做好以下准备：1、已按照 “3.1.1创建UAP项目”章节，完成数据库连接配置并测试连接成功；2、在该数据库中成功创建数据库表HR_COMPANY，建表语句如下：create table HR_COMPANY(ID VARCHAR2(32 CHAR) not null,COMPANYNAME VARCHAR2(32 CHAR),ADDRESS VARCHAR2(500 CHAR);comment on table HR_COMPANY is 公司信息;comment on column HR_COMPANY.ID is id;comment on column HR_COMPANY.COMPANYNAME is 公司名称;comment on column HR_COMPANY.ADDRESS is 公司地址;alter table HR_COMPANY add primary key (ID) using index ; 方式二：数据库反向建模1. 打开数据库反向建模向导：在当前模块项目下找到“model/om”文件夹，右键选择“New-数据库反向建模 (om)”，如下图所示：2. 选择/选择数据源：从数据源列表中选择一个，然后点击“Next”按钮。3. 选择(转换)数据库表：从表格中勾选“HR_COMPANY”表，然后点击“Next”按钮进入下一步。4. 新建/选择OM文件：点击“选择已有”选项，从模块项目中选择一个om文件，然后点击“Next”按钮(如模块项目中还没有om文件，则点击“新建om”,可参考下图设置文件存放路径、命名空间、模型名称及显示名)。5. 完善转换后的业务实体：双击业务实体HrCompany所在列，将其修改为“Company”,双击主键属性id显示名列，将其修改为“公司编号”，点击“Next”按钮，进入下一步。6. 为业务实体分配包：点击“分配所有”按钮，将左侧所有业务实体分配到默认包“hr”中，然后点击“Finish”，完成向导，系统自动使用业务模型设计器打开OM文件，如图所示： 生成服务端代码1. 打开生成代码向导：在对象模型设计器主界面中，点击工具栏上的“代码生成”按钮。2. 设置代码生成参数：勾选“同步到数据库”复选框(如采用方式二:数据库方向建模可不用勾选)，点击“OK”按钮，执行代码生成操作。在弹出的提示窗口中点击“确定”按钮。生成后台代码后，模块项目（本例为demo）的目录结构如下图所示：提示： 1、如采用“方式二“数据库方向建模”,可忽略此步骤；2、如在上一节的“生成后台代码”过程中勾选“同步到数据库，可忽略此步骤。 手工创建数据表 （可选）请手工在命令行或pl/sql工具中执行“demo/src/ddl/”目录下的“com.quickstart.demo.hr_Oracle.DDL”脚本。3.2.2 展现界面建模提供场景向导建模和手工建模两种方式：1、场景向导建模支持通过简单参数配置，引导您快速创建业务应用中典型的场景代码和UI模型(如：表格、级联表格、树表等)，您可基于此进行扩展开发，以便实现复杂的功能场景。2、手工建模提供图形化设计器，您可采用拖拽的方式，创建复杂的UI布局、交互逻辑和UI组件(如：树、表格、表单组件) 数据源绑定，并基于此此生成前端js代码。为便于您快速上手，本步骤选择场景向导建模方式进行界面建模，如需深入了解手工建模，请参考本文档“3.4”章节。 打开场景向导在当前模块项目根目录上，右键选择“New-界面模型2.0(*.ui)”，在弹出的向导窗口中，设置模型名称为“t1”，创建方式采用默认值“根据场景模板创建”,点击”Next”按钮，进入下一步,如下图所示： 选择场景模板从向导窗口左侧的模板树中选择“表格(可编辑)”，点击“Next”进入下一步。 选择数据源从向导窗口下方的数据源树中选择“公司信息”业务实体，点击“Next”进入下一步。 设置场景参数（可选）系统默认在表格中显示所有属性，点击“Finish”,完成向导。 生成UI模型及前端代码向导结束时，系统自动生成UI模型及前端js代码，UI模型自动被打开，效果如下图所示：生成的UI模型文件及js代码结构如下：3.2.3 设计效果预览 启动服务1. 打开“Servers”视图，在Apache Tomcat，点击右上角的Start按钮（调试时请点击前面的Debug按钮）启动UAP项目 预览界面效果1. 在“界面设计”页上方的工具条上点击“预览”按钮。2. 将调用默认浏览器打开当前界面对应的url，界面效果如下。提示：如不能访问，请确认Tomcat启动端口是否是9000，如不是，请修改。3. 在浏览器窗口中点击“新增”按钮，添加数据，然后点击“保存”按钮保存到数据库。4. 点选某条记录并修改，然后点击“保存”按钮，点击浏览器的“刷新”按钮确认更新后的值成功保存；选择表格复选框，点击“删除”按钮，记录被删除。3.3 业务对象建模指南本章节内容涉及知识点较多，适合有一定模型驱动开发基础的用户，如果您是初次使用，建议先完成“3.2 示例功能开发”章节内容。本章节使用UAP模型驱动开发方法，引导您开发一个简化版项目管理模块项目，该模块项目实现了项目计划、项目任务、项目成员的典型管理功能，通过本章节的内容你将掌握模型驱动的以下功能特性：1、数据库反向建模2、关联关系的应用3、枚举的应用4、编辑器和校验器应用5、业务树的应用6、基于模型驱动的前后端代码扩展3.3.1 业务对象建模为确保您能顺利完成本章节的学习内容，在正式学习本章内容前，请确保开发环境已经具备以下条件：1、 已参考“3.1创建UAP项目”章节指南，完成UAP项目的创建与配置；2、 已参考“3.1.3 创建模块项目”章节指南，完成了名为demo2的模块项目的创建与配置；3、 已参考“3.1.5 验证开发环境”章节指南，成功通过验证。 数据库反向建模1. 数据库表准备1） 请确认您已按照 “3.1创建UAP项目”章节，完成数据库连接配置，并测试连接数据库成功；2） 执行以下脚本文件，在数据库中创建 PROJ_MEMBERS、PROJ_PROJECT、 PROJ_TASK 三个数据库表。2. 打开数据库反向建模向导：在当前模块项目下找到“model/om”文件夹，右键选择“New-数据库反向建模 (om)”，如下图所示：3. 选择/选择数据源：从数据源列表中选择一个，然后点击“Next”按钮。4. 选择(转换)数据库表：从表格中勾选“PROJ_MEMBERS、PROJ_PROJECT、PROJ_TASK”三个表，点击“Next”按钮进入下一步。5. 新建/选择OM文件：从窗口中，点击“新建om”-点击“浏览”，在弹出窗口中选择模块项目“demo2”（或您当前的模块项目）； 设置命名空间为“com.quickstart.demo2”，设置模型名称为“project”，显示名为“项目管理”, 点击“Next”按钮进入下一步。6. 完善业务实体信息：双击业务实体“ProjTask”所在列，将其修改为“Task”,使用同样方式依次将ProProject修改为“Project”，“ProjMembers”修改为“Members”，点击“Next”按钮，进入下一步。7. 为业务实体分配包：点击“分配所有”按钮，将左侧所有业务实体分配到默认包“project”中，然后点击“Finish”，完成向导，系统自动使用业务模型设计器打开OM文件，如图所示：8. 改进实体关联属性可读性(可选步骤)1）在模型图中双击“项目信息”实体与“项目人员”之间的连线，弹出关联关系编辑窗口，将导航属性名“members”改成“manager”,表示项目经理，点击“OK”按钮，保存修改；2）在模型图中双击“项目人员”实体与“任务信息”之间的连线，弹出关联关系编辑窗口，将导航属性名“members”改成“executor”,表示任务执行人，点击“OK”按钮，保存修改；3）在模型图中双击“任务信息”实体与“任务信息”之间的自关联连线，弹出关联关系编辑窗口，将导航属性名“tasks”改成“children”,表示子任务；将导航属性名“task”改成“parent”,表示上级任务，点击“OK”按钮，保存修改；9. 创建枚举类1）从Palette面板中，选择“枚举”图标，拖动到画布中，即可弹出创建枚举类型窗口；2）依次创建“人员工种、任务优先级、任务状态、费率单位”4个枚举类型。人员工种,名称设置为：“WorkType”，显示名：“人员工种”；任务优先级,名称设置为：“Priority”，显示名：“任务优先级”；任务状态,名称设置为：“TaskState”，显示名：“任务状态”；费率单位,名称设置为：“RateUnit”，显示名：“费率单位”。各枚举的键值信息可按下图所示填写，完成后的效果如下图所示：10. 为实体属性指定合适的编辑器1）为“项目人员”实体“rateunit”属性，设置下拉框编辑器。在画布中，双击“项目人员”实体，在弹出窗口中，双击属性列表中的列，弹出属性编辑窗口，从 Tab页中选择“编辑器”选项,显示编辑器编辑界面，如下图所示。点击左侧编辑器类型选择树中的“选择类-下拉框”，然后点击“查找”，从弹出窗口中选择，单击“OK”，完成设置。2）为“项目人员”的“worktype”属性设置下拉框编辑器,参照上一步(选择枚举时，请选择即可)；3）为“项目信息”的“remark”属性设置富文本编辑框，参照上一步(选择“富文本框”编辑器，无需设置任何参数)，设置完成的效果如下图所示：4） 为“任务信息”的“state”属性设置下拉框，枚举类型选择；5）为“任务信息”的“priority”属性设置下拉框，枚举类型选择；11. 为实体属性设置校验器1） 为“项目人员”的“age”属性添加校验器，要求值大于18。在画布中，双击“项目人员”实体，在弹出窗口中，双击属性列表中的“age”列，弹出属性编辑窗口，从 Tab页中选择“校验器”选项,显示校验器编辑界面，如下图所示。点击按钮，弹出校验器窗口，选择校验器类型“整数”，设置校验参数最小值“18”，单击“OK”按钮。2） 为“项目信息”的“budget”属性添加校验器，要求值大于10000。参照上一步选择交易器类型“数字校验器”，设置校验参数最小值“10000”，完成效果如下： 生成服务端代码在对象模型设计器主界面中，点击工具栏上的按钮，弹出代码生成窗口，直接点击“OK”,完成代码生成。生成后台代码后，模块项目（本例为demo2）的目录结构如下图所示：3.3.2 展现界面建模 项目人员管理界面建模1. 打开界面建模向导：在当前模块项目下找到“model/ui”文件夹，右键选择“New-界面模型2.0(*.ui)”，在弹出的向导窗口中，设置模型名称为“member”,点击”Next”按钮，进入下一步,如下图所示：2. 选择场景模板：在向导窗口中，选择“表格+表单(单页)”场景模板；3. 选择数据源并完成向导。选择“项目人员”业务实体作为场景数据源，点击“Finish”按钮，完成界面模型创建及前端Weblet代码生成。生成前端代码后，模块项目（本例为demo2）的目录结构如下图所示：4. 项目人员管理功能运行预览1) 打开“Servers”视图，在Apache Tomcat，点击右上角的Start按钮启动UAP项目。2）双击“member.ui”文件，打开UI设计器，点击右上角的按钮。3) UI设计器自动调用默认浏览器，打开当前界面对应的url，请按下图提示检查使用各项功能是否正常：提示：如不能访问，请确认Tomcat启动端口是否是9000，如不是，请修改。 项目信息管理界面建模1. 打开界面建模向导：在当前模块项目下找到“model/ui”文件夹，右键选择“New-界面模型2.0(*.ui)”，在弹出的向导窗口中，设置模型名称为“project”,点击”Next”按钮，进入下一步,如下图所示：2. 选择场景模板：在向导窗口中，选择“表格 (可编辑)”场景模板；3. 选择数据源并完成向导。选择“项目信息”业务实体作为场景数据源，点击“Finish”按钮，完成界面模型创建及前端Weblet代码生成。4. 项目信息管理功能运行预览1) 打开“Servers”视图，在Apache Tomcat，点击右上角的Start按钮启动UAP项目。2）双击“project.ui”文件，打开UI设计器，点击右上角的按钮。3) UI设计器自动调用默认浏览器，打开当前界面对应的url，请按下图提示检查使用各项功能是否正常： 任务信息管理界面建模1. 打开界面建模向导：在当前模块项目下找到“model/ui”文件夹，右键选择“New-界面模型2.0(*.ui)”，在弹出的向导窗口中，设置模型名称为“task”,点击”Next”按钮，进入下一步,如下图所示：2. 选择场景模板：在向导窗口中，选择“树表场景”模板；3. 选择数据源并完成向导。选择“项目信息”和“项目人员”业务实体作为树的数据源，“任务信息”业务实体作为表的数据源，点击“Finish”按钮，完成界面模型创建及前端Weblet代码生成。4. 任务信息管理功能运行预览1) 打开“Servers”视图，在Apache Tomcat，点击右上角的Start按钮启动UAP项目。2）双击“task.ui”文件，打开UI设计器，点击右上角的按钮。3) UI设计器自动调用默认浏览器，打开当前界面对应的url，请按下图提示检查使用各项功能是否正常：3.3.3 代码自定义调整 服务端代码自定义调整服务端代码调整，需控制台通过OSGI 模块更新命令“update 模块id号”，重新发布模块项目后自动生效。自定义代码防覆盖用户对模型驱动生成的代码和配置文件(hbm文件)进行扩展或自定义修改后，可通过该功能对这部分代码进行保护，避免再次生成代码时被覆盖。具体做法如下：1、java代码防止覆盖 在要保护的java类中的属性和方法上，手工增加“/keep”关键字2、hbm文件防止覆盖在要保护的hbm文件中，手工增加“”关键字Bizc代码调整Bizc代码中有一些非必须的代码，为提高代码效率，默认为被注释状态，如果需要在列表中加载数据字典，打开如下注释： 前端代码自定义调整前端代码手工修改后，无需重新发布模块项目，直接刷新浏览器即可访问修改后内容(注意，需去掉浏览器的缓存选项)。 代码调整后效果验证如果不修改代码生成后的Bizc代码，保存后项目人员不显示对应的人员。修改后，加载数据字典内容，可读取到对应的人员。3.4 展现界面建模指南在阅读本节之前，请确保您已经完成了UAP项目和模块项目的创建（详见本文档3.1小节）， 并创建了业务对象模型（详见本文档3.2.1小节）。3.4.1 常规操作步骤 创建ui文件1. 模块项目下找到“model/ui”文件夹，右键选择“New-界面模型2.0(*.ui)”，如下图所示：2. 在弹出窗口中填写模型名称，创建方式选择“全新创建空白界面”。3. 点击“Finish”即可完成ui文件的创建，此时将自动打开如下图所示的界面设计器的主界面。 添加工具栏1. 在左侧边的调色板面板（Palette）的“基础控件”组找到“ToolBar”控件，鼠标按住后拖拽到画布区域的“mainView”上并释放。2. 同样的方式，鼠标拖拽“ToolBarItem”到刚才创建的“ToolBar”上释放。3. 选中新创建的 “ToolBarItem”，在右下角的“Properties”视图中更改text的属性值为“新增”，id属性值为“btnAppend”。4. 重复执行2、3两步，创建id值为“btnSave”、text值为“保存”的按钮；再创建一个id值为“btnDelete”、text值为“删除”的按钮。最终的效果如下图所示： 添加数据表格1. 在左侧边的调色板面板（Palette）的“数据控件”组找到“DataGrid”控件。 2. 鼠标按住后拖拽到画布区域的“mainView”上，释放鼠标时插入点光标须处于ToolBar的右侧（如下图所示）。 绑定数据1. 在右上角大纲视图（Outline）中切换到“数据源”选项卡。 2. 在“datasources”项上点击鼠标右键，在弹出的上下文菜单中选择 “创建模型数据源”。 3. 在弹出窗口中选择“公司信息”业务对象模型，点击“OK”按钮返回。 4. 展开“datasources”项，可以看到新加入的数据源。 5. 在画布区域的“DataGrid”上点击鼠标右键，在弹出的上下文菜单中选择“配置数据源”。 6. 在弹出窗口的关联数据源下拉框中选中“公司信息”，点击“OK”按钮返回。 7. 配置数据源后，将在DataGrid中自动创建列，效果如下图所示： 编写事件函数1. 在画布区域选中“新增”ToolBarItem，然后在属性视图（Properties）中点击“事件”按钮，切换到事件清单（再次点击将切换回属性清单）。2. ToolBarItem包含“onclick”事件，在事件名称上双击。 3. 主工作区将从“界面设计”页切换到“事件函数”页，并自动创建onclick事件函数。4. 在“me._btnAppend_onclick”函数体中输入下述代码。var dataGrid = me.getView().findControlById (DataGrid1);dataGrid.entityContainer.create();5. 切换到“界面设计”页。6. 重复上述步骤为“保存”ToolBarItem添加onclick事件处理函数，事件函数代码如下：var dataGrid = me.getView().findControlById(DataGrid1);dataGrid.save();7. 切换到“事件函数”页，在me._onactivate函数中为数据表格添加数据加载逻辑，代码如下：var dataGrid = me.getView().findControlById(DataGrid1);dataGrid.load();8. 最终的事件函数代码如下图所示： 生成脚本代码生成代码前注意保存ui文件。1. 在“界面设计”页上方的工具条上点击“生成MX脚本文件”按钮。2. 弹出的前端代码生成向导如下图所示，点击“Finish”按钮执行代码生成操作。3. 生成的代码将存放于当前模块项目的face目录下，如下图所示：3.4.2 界面效果预览 启动服务启动本机的开发调试服务（详见本文档“启动服务”章节）。 预览界面效果1. 在“界面设计”页上方的工具条上点击“预览”按钮。2. 将调用默认浏览器打开当前界面对应的url，界面效果如下。提示：如不能访问，请确认tomcat启动端口是否是9000。3. 在浏览器窗口中点击“新增”按钮，添加数据，然后点击“保存”按钮保存到数据库。4. 点选某条记录并修改，然后点击“保存”按钮，点击浏览器的“刷新”按钮确认更新后的值成功保存；选择表格复选框，点击“删除”按钮，记录被删除（DataGrid默认隐藏记录的主键列，可通过设置displayPrimaryKey属性值为“true”取消隐藏）。3.4.3 持续优化调整 完善事件函数根据上述步骤完成了“公司信息管理”的开发，但界面中“删除”按钮是无效的，下面我们将为其添加事件处理函数。1. 在画布区域选中“删除”ToolBarItem，然后在属性视图（Properties）中点击“事件”按钮，切换到事件清单（再次点击将切换回属性清单）。2. 在“onclick”事件名称上双击，主工作区从“界面设计”页切换到“事件函数”页，并自动创建onclick事件函数，在“me._btnDelete_onclick” 函数体中输入下述代码：var dataGrid = me.getView().findControlById (DataGrid1);/数据列表有复选框，只使用勾选删除数据if(dataGrid.getCheckedItems().length 0) if(confirm(您确认删除数据吗？) dataGrid.removeItems(dataGrid.getCheckedItems();else mx.indicate(info, 请至少勾选一条记录！);return;3. 保存ui文件，重新执行生成脚本代码步骤（详见）。4. 在“界面设计”页上方的工具条上点击“预览”按钮，在浏览器中重新打开当前界面。5. 在调整后的界面中点击“删除”按钮，验证删除逻辑。 调整展示效果前端界面的设计总是伴随着持续修改，在这里我们引入如下变更需求：1) 数据表格（DataGrid）要撑满整个浏览器界面，即高宽均为100%；2) 禁用数据表格（DataGrid）的编辑功能，在新弹出的Window中完成新记录添加和选中记录修改；3) 为了提高代码可读性，凡是在“事件函数”（ViewController）中用到的MX控件都要取一个易于理解的名字。可以参照下述步骤调整展现界面模型。.1 调整主界面布局效果1. 双击打开hrCom.ui文件，设置mainView的高宽属性值为100%。2. 在左侧边的调色板面板（Palette）的“基础控件”组找到“HSplit”控件，拖拽到mainView中释放（注意插入点位置）。3. 在大纲视图（outline）的组件树中展开新拖入的HSplit，鼠标选中ToolBar1节点拖拽到HSplit1的第一个area节点上，再选中DataGrid1拖拽到HSplit1的第二个area节点上。4. 选中HSplit1，设置rows属性值为“30,auto”，borderThick属性值为“0”。5. 保存ui文件，重新执行生成脚本代码步骤（详见），点击“预览”按钮查看主界面调整效果。.2 添加DetailView视图1. 在左侧边的调色板面板（Palette）中找到“View”控件，拖拽到画布空白区域释放（mainView区域外部）。2. 画布区域自动呈现新加入的View，修改其id属性值为“DetailView”。3. 选中DetailView，在属