x5.2.7快速开发指南


X5 快速开发指南 2011 Justep Corp. 第 1 页 共 219 页 起 步 科 技 X5 平台手册 -快速开发指南 2012 年 12 月 北京起步科技有限公司 Beijing Justep Software Co,Ltd. www.justep.com X5 快速开发指南 2011 Justep Corp. 第 2 页 共 219 页 起 步 科 技 目 录 X5 平台手册................................................................................................................................................... 1 -快速开发指南 ............................................................................................................................................ 1 目 录 ........................................................................................................................................................ 2 前 言 ........................................................................................................................................................ 5 第 1 章 开发环境部署................................................................................................................................... 6 1.1 获取 X5 开发版 ............................................................................................................................... 6 1.2 准备数据库 ..................................................................................................................................... 6 1.2.1 使用 X5 自带 MySQL 数据库 ............................................................................................... 6 1.2.2 使用现有数据库 ................................................................................................................. 6 1.3 运行 X5 开发工具 ........................................................................................................................... 8 1.4 登录系统 ......................................................................................................................................... 9 1.5 其它 ................................................................................................................................................. 9 1.5.1 在 Studio 中配置数据源 ................................................................................................... 9 1.5.2 在 Studio 中使用 SVN ...................................................................................................... 10 第 2 章 建模过程介绍................................................................................................................................. 17 2.1 新建应用 ....................................................................................................................................... 17 2.2 新建业务模块................................................................................................................................ 19 2.3 数据建模 ....................................................................................................................................... 21 2.3.1 概念数据建模 ................................................................................................................... 21 2.3.2 物理数据建模 ................................................................................................................... 25 2.3.3 标准动作设置 ................................................................................................................... 29 2.4 流程建模 ....................................................................................................................................... 30 2.4.1 创建 Process 文件 ........................................................................................................... 30 2.4.2 动作设置........................................................................................................................... 32 2.5 界面建模 ....................................................................................................................................... 33 2.6 功能树配置 ................................................................................................................................... 38 2.7 分配权限 ....................................................................................................................................... 40 2.8 运行系统 ....................................................................................................................................... 43 第 3 章 数据建模 ........................................................................................................................................ 44 3.1 概念数据建模................................................................................................................................ 44 3.1.1 概念 .................................................................................................................................. 44 3.1.2 关系 .................................................................................................................................. 45 3.2 物理数据建模................................................................................................................................ 47 3.2.1 映射设置........................................................................................................................... 48 3.2.2 生成物理表 ....................................................................................................................... 48 3.3 反向生成本体................................................................................................................................ 49 3.4 标准动作设置................................................................................................................................ 51 3.4.1 标准动作介绍 ................................................................................................................... 51 3.4.2 KSQL 介绍 .......................................................................................................................... 53 3.4.3 KSQL 查询编辑器 .............................................................................................................. 53 第 4 章 流程建模 ........................................................................................................................................ 58 4.1 简单流程 ....................................................................................................................................... 58 4.2 流程规则 ....................................................................................................................................... 63 4.2.1 启动规则........................................................................................................................... 63 4.2.2 执行规则........................................................................................................................... 65 X5 快速开发指南 2011 Justep Corp. 第 3 页 共 219 页 起 步 科 技 4.2.3 转发规则........................................................................................................................... 68 4.2.4 流转规则........................................................................................................................... 69 4.2.5 回退规则........................................................................................................................... 69 4.3 流程事件 ....................................................................................................................................... 70 4.3.1 Process 事件 .................................................................................................................... 70 4.3.2 Activity 事件 .................................................................................................................. 73 4.3.3 Action 中的事件 .............................................................................................................. 75 4.4 函数 Fn .......................................................................................................................................... 76 4.4.1 常用函数........................................................................................................................... 76 4.4.2 表达式编辑器 ................................................................................................................... 76 4.4.3 自定义函数 ....................................................................................................................... 78 4.5 动作 Action .................................................................................................................................... 84 4.5.1 常用 Action ...................................................................................................................... 86 4.5.2 自定义 Action .................................................................................................................. 86 4.5.3 Action 参数赋值 .............................................................................................................. 89 4.6 Java 开发 ........................................................................................................................................ 91 4.6.1 常用 Java 类及方法介绍 ................................................................................................. 93 4.6.2 访问数据库 ....................................................................................................................... 94 4.6.3 调试 .................................................................................................................................. 96 第 5 章 界面建模 ...................................................................................................................................... 101 5.1 组件综述 ..................................................................................................................................... 101 5.1.1 使用设计器 ..................................................................................................................... 101 5.1.2 使用组件......................................................................................................................... 108 5.2 常用组件介绍...............................................................................................................................112 5.2.1 数据类组件 ......................................................................................................................112 5.2.2 布局类组件 ..................................................................................................................... 120 5.2.3 标准类组件 ..................................................................................................................... 135 5.2.4 工具栏类组件 ................................................................................................................. 151 5.2.5 对话框类组件 ................................................................................................................. 156 5.2.6 扩展组件......................................................................................................................... 162 5.3 JavaScript 开发 ............................................................................................................................. 164 5.3.1 常用 Js 方法介绍 ........................................................................................................... 164 5.3.2 JavaScript 调试 ............................................................................................................ 165 5.4 Action 调用 ................................................................................................................................... 169 第 6 章 报表图表 ...................................................................................................................................... 171 6.1 报表开发简介.............................................................................................................................. 171 6.2 报表流程建模.............................................................................................................................. 171 6.2.1 KSQLAction ..................................................................................................................... 171 6.2.2 Action............................................................................................................................. 174 6.2.3 Process 中添加 Action....................................................................................................... 177 6.3 报表界面建模.............................................................................................................................. 177 6.3.1 网格报表......................................................................................................................... 177 6.3.2 分组报表......................................................................................................................... 183 6.3.3 卡片报表......................................................................................................................... 186 6.3.4 交叉报表......................................................................................................................... 187 6.3.5 主从报表......................................................................................................................... 190 6.4 图表开发 ..................................................................................................................................... 191 6.4.1 使用向导......................................................................................................................... 191 6.4.2 使用设计器 ..................................................................................................................... 194 第 7 章 案例 .............................................................................................................................................. 197 X5 快速开发指南 2011 Justep Corp. 第 4 页 共 219 页 起 步 科 技 7.1 树型实例 ..................................................................................................................................... 197 7.1.1 数据建模......................................................................................................................... 197 7.1.2 流程建模......................................................................................................................... 199 7.1.3 界面建模......................................................................................................................... 199 7.1.4 授权运行......................................................................................................................... 202 7.2 主从实例 ..................................................................................................................................... 203 7.2.1 数据建模......................................................................................................................... 203 7.2.2 流程建模......................................................................................................................... 205 7.2.3 界面建模......................................................................................................................... 206 7.2.4 授权运行......................................................................................................................... 208 7.3 级联下拉实例.............................................................................................................................. 209 7.3.1 部门下拉列表 ................................................................................................................. 209 7.3.2 人员下拉列表 ..................................................................................................................211 7.4 弹出窗口实例.............................................................................................................................. 214 7.4.1 制作弹出窗口 ................................................................................................................. 214 7.4.2 制作主窗口 ..................................................................................................................... 217 X5 快速开发指南 2011 Justep Corp. 第 5 页 共 219 页 起 步 科 技 前 言 X5 平台是基于“业务模型驱动(BMD)”方法作为设计思想,X5 平台包含业务层和界面层,业 务层包括数据概念模型、流程模型,通过数据模型引擎和工作流引擎进行实现;表现层的界面模型 通过组件机制进行实现。X5 平台提供了一套快速建模、开发的 IDE 环境,以建模为主扩展代码开发 为辅,满足不同行业、不同业务的复杂业务系统的快速开发、快速定制及快速修改的需求。 本文定位为“快速开发指南”,以第二章的案例作为贯穿全文的主线,通过本文的第一章、第 二章内容达到快速了解 X5 平台开发环境运行环境、快速制作出直接运行例子的目的。第二章作为本 文的重点,重点以建模的方式按照平台建模的步骤引导读者理解建模过程,从第三章开始针对平台 的数据建模、流程建模、界面建模及报表等部分展开介绍了常用的设计器、向导、方法、事件,但 不做深入介绍。对平台模型的深入介绍请参见《X5 平台高级开发手册》。同时,本文也不会对组件、 函数、属性展开介绍,这些部分的详细内容请参见 X5-API.chm 文件。 本文中引用了大量的平台向导和设计器界面的截图,本文中截图的平台版本有可能与您使用的 X5 平台版本不一致,请注意此问题,如遇到此类情况请与 X5 技术服务部联系,X5 技术服务部将会 定期更新此文档。 由于作者的编写水平和时间有限,书中存在缺点和错误在所难免,欢迎广大读者批评指正和共 同交流、讨论、改进。 本文使用了下列约定: 重点或者特别进行强调的词语和语句使用粗体显示。 各章都有一些注意、提示和警告,为了方便阅读,用特殊的字体和背景色标出。 最后,谨以此书献给支持 X5 平台的用户们,感谢您们对起步的支持!我们将提供更好的产品和 服务给您们! X5 技术服务部 2012 年 12 月 X5 快速开发指南 2011 Justep Corp. 第 6 页 共 219 页 起 步 科 技 第1章 开发环境部署 本章要点:  获取 X5 开发版  准备数据库  运行 X5 开发工具  登录系统 1.1 获取 X5 开发版 从起步科技公司官网(www.justep.com)下下载 Justep X5 Studio 平台版,放到计算机的一个 目录下(不要放到中文目录下)。 1.2 准备数据库 1.2.1 使用 X5 自带 MySQL 数据库 为了方便用户体验 X5 平台,X5 平台自带 MySQL 数据库。执行 启动 MySQL 数据库.bat 即可。 1.2.2 使用现有数据库 用户也可以使用自己现有的数据库。X5 平台支持 Oracle、SQL Server、Sybase、DB2、MySQL 等五种数据库。通过执行 配置初始化其它数据库.bat 完成建表、初始化数据及 Studio 中数据源配 置等工作。 初始化过程如下:首先执行配置初始化其它数据库.bat。打开如下图的窗口,输入 a,按回车。 图 1.1 执行配置初始化其他数据库.bat X5 快速开发指南 2011 Justep Corp. 第 7 页 共 219 页 起 步 科 技 然后弹出数据源配置窗口,如下图所示。首先配置系统(system)数据源,根据现有数据库类型 进行相应的选择。例如:要使用的数据库为 SQL Server 数据库,请选择 jdbc.jtds.sqlserver; 要 使用的数据库为 Oracle 数据库,请选择 jdbc.oracle.thin 等等。 图 1.2 初始化数据库——选择数据源类型 图 1.3 系统(system)数据源配置 X5 系统中默认使用系统(system)、演示(demo)、文档服务(doc)等三个数据源。它们既可以连接 不同的数据库,也可以连接相同的数据库。如果使用同一个数据库,请选中上图中的复选框;如果 使用不同的数据库,请取消选中,点下一步继续配置其它两个数据源的详细信息。 注:仅当本机已安装 Oracle 客户端时,才能选择 jdbc.oracle.oci。X5 平台默认提供了 Oracle 10g 的 jdbc 驱 动包 ojdbc14.jar,如果安装了其它版本的 Oracle 客户端,请将 Oracle 提供的 jdbc 驱动包复制到 x5.2.3 \apache-tomcat\lib 目录下。 X5 快速开发指南 2011 Justep Corp. 第 8 页 共 219 页 起 步 科 技 图 1.4 是否初始化数据库 选中初始化数据库,并在输入框中输入 OK,则会执行新建表,插入数据等操作。无论是否初始 化数据库,点完成时都会使用刚才的配置更新 Studio 中数据源的配置信息。 1.3 运行 X5 开发工具 1、 启动 studio 执行开发版中的 启动 X5 开发工具.bat,即可打开 X5 Studio。 2、 启动 Tomcat 在Studio的工具条中,点击第一个猫形图标,启动Tomcat,当控制台最下面出现如“信息: Server startup in 3208 ms”这样的信息时,表示 Tomcat 启动成功。如下图所示: 图 1.5 启动 Tomcat X5 快速开发指南 2011 Justep Corp. 第 9 页 共 219 页 起 步 科 技 1.4 登录系统 在 IE 地址栏中输入 http://127.0.0.1:8080/x5 进入登录界面,输入默认的用户名 system,密 码 123456,登录后首页界面如下: 图 1.6 X5 首页 1.5 其它 1.5.1 在 Studio 中配置数据源 上面提到了使用平台自带的工具配置数据源,下面讲如何在 studio 中直接修改数据源信息。运 行 Studio,按照以下步骤进行数据源的配置: 在 Studio 中,打开菜单“窗口”->“首选项”,在弹出的对话框中,打开“Studio 配置”->“数 据源”,修改现有的两个业务服务数据源的配置信息,如下图所示: 注意: X5 平台支持的浏览器有 IE6、IE7、IE8、IE9、IE10、Chrome、Safari 和 FireFox。 X5 平台推荐使用的浏览器是 IE8、IE9、IE10、Chrome。 在 IE 地址栏中输入 http://127.0.0.1:8080/x5/portal/login.w 即可进入经典登录界面 X5 快速开发指南 2011 Justep Corp. 第 10 页 共 219 页 起 步 科 技 图 1.7 数据源配置 数据源名称保持不变,可以选择另一种数据库类型,输入数据库所在的 IP,数据库实例名称、 数据库名称、用户名、密码。点击下面的“测试连接”按钮,对数据源进行测试,当弹出“数据源 配置正确,连接测试成功!”的提示信息时,说明数据源配置正确,点击“提示”小窗口的“确定” 按钮,再点击“数据源设置”的“确定”按钮,再在“首选项”窗口中点击“应用”按钮。 测试连接提示信息如下图所示: 图 1.8 测试连接提示信息 1.5.2 在 Studio 中使用 SVN SVN 是目前使用最广泛的版本管理软件,X5 中附带了 SVN 的服务端版本和客户端版本,如需安 装请进入 X5.2.3_dev\其它工具\Subversion 目录下进行安装。安装配置好 SVN 服务端后,开始下面 的步骤。 首先进入 Studio,然后切换到资源管理器,将 model 目录改名,如下图所示。 X5 快速开发指南 2011 Justep Corp. 第 11 页 共 219 页 起 步 科 技 图 1.9 给 model 目录改名 改名后,切换回 Studio,点击右上角的 SVN,在左侧的 SVN 资源库中点鼠标右键弹出菜单,点 击新建->资源库位置,如下图所示。 图 1.10 新建 SVN 资源库 在弹出的添加 SVN 资源库的窗口中,输入已经建立好的 SVN 服务端路径,如下图所示。 X5 快速开发指南 2011 Justep Corp. 第 12 页 共 219 页 起 步 科 技 图 1.11 输入 SVN 服务端路径 点完成按钮,可以看到 SVN 资源库中已经添加了一个资源库,可以将这个资源库直接检出,也 可以在这个资源库中新建文件夹,再将这个新建的文件夹检出。在本例中直接检出资源库。在新建 好资源库上点鼠标右键弹出菜单,点击检出为,如下图所示。 图 1.12 检出资源库 在弹出的从 SVN 检出的窗口中,选择做为工作空间中的项目检出,并将项目名称修改为 model, 如下图所示。 X5 快速开发指南 2011 Justep Corp. 第 13 页 共 219 页 起 步 科 技 图 1.13 做为工作空间中的项目检出 点下一步按钮,取消使用缺省工作空间的勾选,点浏览按钮,选择 x5.2.3 目录,如下图所示。 图 1.14 选择项目位置 点完成按钮,切换到资源管理器,可以看到 x5.2.3 目录下多了一个 model 目录。如果已经安装 SVN 客户端,可以看到 model 的文件夹上面显示一个绿色对勾。如下图所示。 X5 快速开发指南 2011 Justep Corp. 第 14 页 共 219 页 起 步 科 技 图 1.15 SVN 资源库被检出为 model 目录 将已改名的 model 目录(model_目录)中的文件复制到新检出的 model 目录中,复制后在空白 处点击鼠标右键弹出菜单,点击 SVN Commit,将这些文件提交到 SVN 资源库中。如果提交失败,可 以先执行清理(Clean up,该菜单位于 TortoiseSVN 菜单中),再执行提交(Commit)。 图 1.16 提交文件到资源库中 X5 快速开发指南 2011 Justep Corp. 第 15 页 共 219 页 起 步 科 技 提交完成后,切换回 Studio,点击右上角的 java,在左侧的包资源管理器中,分别在 BIZ、UI、 mobileUI 上点击鼠标右键弹出菜单,点击刷新,如下图所示。可能会弹出刷新失败的提示,不用理 会,点确定按钮即可。 图 1.17 刷新 BIZ、UI、mobileUI 刷新后,点击右上角的 Studio,在左侧的模型资源中用鼠标右键点任意文件夹或文件弹出菜单, 在小组菜单中就会出现 SVN 选项菜单,说明已连接 SVN 资源库,可以进行更新和提交了。 图 1.18 SVN 提交 X5 快速开发指南 2011 Justep Corp. 第 16 页 共 219 页 起 步 科 技 图 1.19 SVN 更新 SVN 使用注意事项 Checkout(检出) 使用 Checkout 提取文件后,文件处于 SVN 版本控制中,之后才能更新和提交。不要将处于 SVN 控制 中的目录复制到另一 SVN 控制目录中,这样将会发生冲突,导致不能提交。 Commit(提交) 把握 Commit 的频率,不能太频繁,每修改一个小小的地方就提交,则会产生很多版本,而隔时间太 久再提交,则其他相关人员不能及时获取你的改动,在提交时就容易造成冲突,当然,要视团队的 具体情况而定了。在多人协作时,尽量修改自己撰写的部分,不要修改其他部分,这就要看团队协 作的能力了。 Update(更新) Update 对不同的人所做的修改会自动合并,如果无法自动合并则会发生冲突,需要手工用文件比较 工具进行合并,因此要注意经常更新自己的工作副本,以保证自己能够获得最新的修改内容,降低 发生冲突的可能性。 说明:在 Studio 中提交和更新不需要安装 SVN 客户端。 X5 快速开发指南 2011 Justep Corp. 第 17 页 共 219 页 起 步 科 技 第2章 建模过程介绍 本章要点:  新建应用  新建业务模块  数据建模  流程建模  界面建模  功能树配置  分配权限  运行系统 X5 通过数据建模、流程建模和界面建模来构建企业信息化。本章以“客户信息维护”为例,来 介绍 X5 的建模过程。 X5 的模型关系如下图所示: 图 2.1 X5 模型关系图 2.1 新建应用 一个项目的开发,是从新建应用开始的。X5 平台中,“应用”相当于“项目”。 1. 打开 Studio,在 Studio 的“模型资源视图”中,右键单击 BIZ 目录,选择“新建”->“应 用”,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 18 页 共 219 页 起 步 科 技 图 2.2 新建应用 2. 在弹出的“新建应用”对话框中,写入应用名称,选择在数据源配置中配好的数据源。如 下图所示: 图 2.3 新建应用 3. 应用名称和数据源配完后,点击上图中“完成”按钮,在 Studio 的模型资源视图中生成新 应用的相关目录,BIZ 和 UI 工程目录中,都生成了对应的应用目录。如下图所示: 提示:在 Studio 中除了指明可以输入中文,一律要求输入英文。 X5 快速开发指南 2011 Justep Corp. 第 19 页 共 219 页 起 步 科 技 图 2.4 新应用目录结构 上图中,BIZ 目录下生成了数据库连接配置文件(db.config.m);UI 目录下生成了配置目录 (config)和功能树配置文件(***.function.xml)。 2.2 新建业务模块 一个项目通常会划分为多个子项目(或者说子系统),X5 平台中一个“业务模块”相当于项目 中的一个“子项目”。如上图,“x5demo”就是一个应用。在一个“应用”中,可以继续创建新的“业 务模块”,按照以下步骤创建新“业务模块”: 1. 在 BIZ 中新建的应用上右键单击,选择“新建”->“新建业务模块”,如下图所示: 提示:在 BIZ 中生成目录后,会相应的在 UI 中生成同名目录,但不会在 mobileUI 中生成同名目录,mobileUI 中的目录需要在 UI 下的目录上点右键,选择同步到 mobileUI,才能生成。 X5 快速开发指南 2011 Justep Corp. 第 20 页 共 219 页 起 步 科 技 图 2.5 新建业务模块 2. 在弹出的对话框中,输入业务模块名称。如果业务模块的数据源和应用的相同,可以不选 择数据源名称;否则选择数据源配置中配好的数据源。如下图所示: 图 2.6 新建业务模块 3. 配置完新业务模块的名称和数据源后,点击上图中的“完成”按钮,生成新的业务模块, 目录结构如下图所示: X5 快速开发指南 2011 Justep Corp. 第 21 页 共 219 页 起 步 科 技 图 2.7 新业务模块目录结构 上图中,BIZ 工程目录下的 ontology 目录中存放的是概念数据模型文件;data 目录中存放的是 物理数据模型文件;logic 目录存放的是业务逻辑文件,包括 Action 和 Fn 定义文件、Java 源码文 件;process 目录存放的是流程模型文件。 2.3 数据建模 创建完新应用和业务模块后,就可以在应用中进行建模了。整个建模过程分为三个步骤,分别 是:数据建模、流程建模和界面建模。其中,数据建模实现概念与数据库交互,完成数据存取。数 据建模包括概念数据建模和物理数据建模两部分。 2.3.1 概念数据建模 概念数据建模起到了屏蔽物理数据库之间差异的作用。 概念数据建模,包括创建本体、创建概念、创建关系。所谓“本体”(ontology)可以理解成是 对对象的抽象的集合。“本体”中又包含“概念”和“关系”。其中,“概念”可以理解成是对单个或 者一类对象的抽象;“关系”可以理解成是对对象属性的抽象。在代码级别,“本体”可以看成是对 数据库表的集合的抽象,“概念”可以看成是对数据库表的抽象,“关系”可以看成是对表字段的抽 象。 2.3.1.1 新建本体 按照以下步骤创建本体: 1. 本体创建在“模型资源视图”的 BIZ 中的某个应用的下的业务模块下的 ontology 目录下。 本例中,在“x5demo/baseDemo/ontology”目录上,右键单击,选择“新建”->“Ontology 文件”,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 22 页 共 219 页 起 步 科 技 图 2.8 新建本体文件 2. 在弹出的对话框中输入本体名称,点击“完成”按钮。如下图所示: 图 2.9 新建本体向导 生成的本体文件默认通过本体设计器进行维护,界面如下: X5 快速开发指南 2011 Justep Corp. 第 23 页 共 219 页 起 步 科 技 图 2.10 本体设计器界面 2.3.1.2 新建概念 在本体设计器中,左上角,点击“添加概念”,在概念主信息中编辑概念信息,然后保存。如 下图所示: 图 2.11 创建概念 X5 快速开发指南 2011 Justep Corp. 第 24 页 共 219 页 起 步 科 技 2.3.1.3 新建关系 概念创建完成后,为概念创建关系。为概念创建关系有两种方式:添加新关系和从已定义关系 中选择。 1. 新增关系。 在本体设计器中,选中一个概念,在“概念关系设置”中,点击“添加新关系”按钮,新增关 系。在弹出的“新建关系”对话框中,输入关系名称、关系标识、选择关系类型,最后点击“确定” 按钮,就创建了一个新关系。如下图所示:可以为概念创建若干个关系。 图 2.12 添加新关系 2. 从已定义关系中选择 如果要新建的关系标识和已有的关系标识相同,则可以从已定义的关系中选择该关系。点击“概 念关系设置”中的“从已定义关系中选择”按钮,弹出“选择关系”对话框,选择需要的关系。如 下图所示: 注意 新建关系时,需注意以下几点: 1. 关系标识不能用中文及其它特殊字符,建议使用 f 加驼峰式写法,长度不要超过 30 个字符。 2. 在同一应用中,关系标识不能重复。 3. 关系名称可以输入中文 注意 新建概念时,需注意以下几点: 1. 修改概念标识时,须先在左侧“概念”目录下,选中该概念;修改后,点击其它输入框,左侧概念标识就 变成修改后的标识。 2. 概念标识不能用中文及其它特殊字符,建议使用前缀加驼峰式写法,长度不要超过 23 个字符。 3. 生成主键默认值的表达式是 guid(),该表达式在其它地方也可以用。 4. 概念名称可以输入中文 X5 快速开发指南 2011 Justep Corp. 第 25 页 共 219 页 起 步 科 技 图 2.13 选择关系 按照以上步骤,创建应用中需要的本体、概念和关系,点保存按钮,就完成了概念数据建模。 2.3.2 物理数据建模 概念数据建模完成后,接下来要进行的是物理数据建模。物理数据建模包括映射设置、生成物 理表和标准动作设置三部分。物理数据建模就是在概念和物理数据库之间建立映射关系。 2.3.2.1 映射设置 映射设置就是要把概念数据建模中创建的概念和关系跟物理表建立起联系。如果概念标识和表 名相同,关系标识和字段名相同,可以省略这一步,直接生成数据库表。 在本体设计器中,切换到“映射设置”页。如果概念标识与表名不同,则修改表映射中的表名; 如果关系标识和字段名不同,则在字段映射中,点“添加字段映射”按钮,弹出选择关系窗口。如 下图所示: X5 快速开发指南 2011 Justep Corp. 第 26 页 共 219 页 起 步 科 技 图 2.14 映射设置 在弹出的“选择关系”对话框中,选择要进行映射的关系。当关系标识与生成的字段名称不一 致时,需要进行映射。如果不选,默认关系标识与生成的物理表字段名称一致。如下图所示: 图 2.15 选择映射的关系 点击保存按钮,返回映射设置,在字段映射中修改字段名,映射设置完成。 X5 快速开发指南 2011 Justep Corp. 第 27 页 共 219 页 起 步 科 技 图 2.16 映射设置-修改表名及字段名 2.3.2.2 生成物理表 映射设置完成后,就可以生成物理表了。按照以下步骤,生成物理表: 1. 在本体设计器中,点击“生成数据库表”按钮,如下图所示: 图 2.17 生成物理表 2. 弹出“创建物理表向导”窗口,在左侧选中要创建的表,移到右侧。如下图所示: X5 快速开发指南 2011 Justep Corp. 第 28 页 共 219 页 起 步 科 技 图 2.18 选择要创建的表 3. 点击“下一步”按钮,进入“表详细信息”界面,如下图所示: 图 2.19 表详细信息 4. 点击“下一步”按钮,进入“建表方式和选项”界面,如下图所示: 提示:如果这里显示的字段不全,是因为概念主信息没有保存。 X5 快速开发指南 2011 Justep Corp. 第 29 页 共 219 页 起 步 科 技 图 2.20 建表方式和选项 5. 点击“下一步”按钮,进入“更新数据库”界面,如下图所示: 图 2.21 更新数据库 点击“完成”按钮,就完成了物理表的生成。可以到数据库中,查看生成的物理表。 2.3.3 标准动作设置 X5 平台中的 Action 描述了一个动作或者一个业务逻辑。通常每个概念都拥有创建数据、 保存数据、查询数据这三个动作,这些动作就称为标准动作。其中,保存、查询这两个动作 X5 快速开发指南 2011 Justep Corp. 第 30 页 共 219 页 起 步 科 技 实现了概念跟数据库之间的数据交互。 生成完物理表后,进行“标准动作设置”。在本体设计器的“标准动作设置”界面中,点击“添 加”按钮,如下图所示: 图 2.22 标准动作设置 弹出创建标准动作对话框,点击“确定”按钮,就完成了“标准动作设置”,如下图所示: 图 2.23 创建标准动作 至此,完成物理数据建模。 2.4 流程建模 整个建模过程分为三个步骤,分别是:数据建模、流程建模和界面建模。其中,流程建模实现 了业务流程和业务逻辑。 数据建模完成后,进行流程建模。流程建模需要创建 Process 文件,并设置相关属性。流程建 模根据具体的功能又可分为有流程的流程建模(工作流业务)和非流程的流程建模(普通的数据增 删改查的功能)。本章只介绍非流程的流程建模,有流程的流程建模在 4.1 简单流程 一节中再做详 细说明。 非流程的流程建模,包括创建 Process 文件和动作设置两部分。 2.4.1 创建 Process 文件 流程文件创建在 BIZ 中的 process 目录下。本例中,在“模型资源视图”的 BIZ 工程目录中, X5 快速开发指南 2011 Justep Corp. 第 31 页 共 219 页 起 步 科 技 右键单击“x5demo/baseDemo/process”目录,选择“新建”->“Process 文件”,如下图所示: 图 2.24 创建 Process 文件 在弹出的“新建 process 文件”对话框中,输入功能目录和 process 名称,功能目录不能输入 中文,如下图所示: 图 2.25 Process 文件信息 点击“完成”按钮,就生成了 Process 文件。新建的 Process 文件在应用中的目录结构如下图 所示: 提示:显示名称可以输入中文。 X5 快速开发指南 2011 Justep Corp. 第 32 页 共 219 页 起 步 科 技 图 2.26 Process 文件目录结构 Process 文件生成后,在 UI 模型目录中,也生成了相应的 process 功能目录。 2.4.2 动作设置 流程文件创建完成后,需要为其进行动作设置。动作设置就是添加标准动作和其它运行时需要 用到的 Action。在流程设计器左侧,单击“动作设置”后面的小按钮,如下图所示: 图 2.27 动作设置 在弹出的“动作设置”窗口中,点击左上角的“增加”按钮,弹出“请选择动作”窗口,选择 需要的动作。如下图所示: X5 快速开发指南 2011 Justep Corp. 第 33 页 共 219 页 起 步 科 技 图 2.28 选择动作 选完动作后,依次点击“确定”按钮,就完成了动作设置。同时,也意味着流程建模完成了。 流程建模完成后,“应用”的 BIZ 层开发也就完成了。 2.5 界面建模 整个建模过程分为三个步骤,分别是:数据建模、流程建模和界面建模。其中,界面建模实现 了人机交互、数据展现、界面逻辑等功能。 流程建模结束后,也就完成了后台开发,接下来进入前台开发,即界面建模。界面建模可以使 用平台提供的界面建模模板生成界面文件,也可以新建一个空白界面文件,使用平台提供的 UI 设计 器手动开发界面文件。 界面展现文件的后缀是.w,界面文件创建在“模型资源视图”的 UI 目录中的 process 目录下。 本节中使用平台提供的界面建模模板生成界面文件。按照以下步骤进行界面建模: 1. 新建.w 文件 本例中,在“模型资源视图”的 UI 模型目录中,右键单击“x5demo/baseDemo/process /customInfo”目录,选择“新建”->“W 文件”,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 34 页 共 219 页 起 步 科 技 图 2.29 新建 w 文件 2. 选择创建方式 在弹出的“新建 W 文件”对话框中,选择“向导”,文件名中列出对应 process 文件中定义的 所有的 activity 的 ID,默认是 mainActivity ,点击“下一步”。如下图所示: 图 2.30 新建 w 文件 3. 选择模板类型 在弹出的窗口中的模板类型中选择“经典风格-列表-单表-列表+详细(标签页)”,并点击“下 一步”。如下图所示: X5 快速开发指南 2011 Justep Corp. 第 35 页 共 219 页 起 步 科 技 图 2.31 选择模板 4. 配置主数据 在“配置项设置”界面中,选择配置项中的主数据,点击“concept”后面的小按钮,在弹出的 对话框中选择界面上要访问的概念, 图 2.32 选择概念 如果将概念中的关系全取到界面上,则不需要设置 relations;如果只取概念中的某些关系, 则需要在“配置项设置”界面中,点击“relations”后面的小按钮,在弹出的对话框中选择需要的 关系,version 关系一定要选上,点击“确定”按钮。如下图所示: X5 快速开发指南 2011 Justep Corp. 第 36 页 共 219 页 起 步 科 技 图 2.33 选择关系 5. 配置列表视图 在“配置项”的“列表视图”中,添加列表中显示的列。点击“根据主数据添加”按钮,在弹 出的对话框中,选择要显示的列,version 关系不必选,点击“确定”按钮,如下图所示: 图 2.34 列表视图 6. 配置详细视图 “配置项”的“列表过滤”先忽略,不进行设置。 在“配置项”的“详细视图”中,添加详细页中显示的数据项。选择一个布局方式,本例中选 择“绝对布局”,然后,点击“根据主数据添加”按钮,在弹出的对话框中,选择要显示的数据项, X5 快速开发指南 2011 Justep Corp. 第 37 页 共 219 页 起 步 科 技 version 不必选,点击“确定”按钮。最后,点击“完成”按钮,完成界面建模。如下图所示: 图 2.35 详细视图 生成的界面文件如下图所示: 图 2.36 模板生成的界面文件 至此,界面建模完成。同时,整个开发的建模过程也就完成了。 X5 快速开发指南 2011 Justep Corp. 第 38 页 共 219 页 起 步 科 技 2.6 功能树配置 开发完成后,接下来,进行功能树配置,就是把刚刚完成的功能添加到功能树中。功能树用来 进行权限分配和生成功能菜单。按照以下步骤进行功能树配置: 1. 打开功能树配置文件 在新建应用的时候,功能树配置文件***.function.xml 就已经生成,如下图所示:双击打开文 件。 图 2.37 功能树配置文件 2. 配置顶层菜单目录 点击“添加顶层菜单目录”按钮,系统在菜单项名称中生成一行顶级菜单目录,点击可修改菜 单项名称,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 39 页 共 219 页 起 步 科 技 图 2.38 配置顶层菜单目录 3. 配置菜单目录或菜单 选中一个菜单目录,可以添加子菜单目录或者修改目录名称,也可以添加功能菜单项或者修改 功能菜单项名称。本例添加功能菜单项,如下图所示:选择一个功能目录。 图 2.39 选择添加的功能 选择功能目录后点击确定,系统将 process 中定义的 activity 都加到功能树中,如下图所示: 图 2.40 添加功能菜单项 注意:在此处也可以直接添加子菜单目录,输入新建的子菜单目录文件名。 X5 快速开发指南 2011 Justep Corp. 第 40 页 共 219 页 起 步 科 技 最后,点击“保存”按钮,就完成了功能树配置。 2.7 分配权限 完成功能树配置后,接下来进行权限分配。启动 Tomcat,登录系统后,按照以下步骤分配权限: 1. 进入角色管理功能 点击功能树中,“协同平台”->“组织权限”->“角色管理”->“运行”,进入角色管理功能, 如下图所示: 图 2.41 运行功能 X5 快速开发指南 2011 Justep Corp. 第 41 页 共 219 页 起 步 科 技 图 2.42 角色管理 2. 给角色分配功能 打开“角色管理”界面,选中一个角色,也可以新建一个角色,点右侧的“分配功能权限”菜 单。如下图所示: 图 2.43 分配功能权限 在弹出的“选择功能”对话框中,选择新建的功能,点击“确定”按钮。如下图所示: 图 2.44 分配功能 3. 给组织单元分配角色 点击功能树中,“协同平台”->“组织权限”->“按组织授权”->“运行”,进入授权管理功 X5 快速开发指南 2011 Justep Corp. 第 42 页 共 219 页 起 步 科 技 能,在左侧的组织树上,选中所要授权的组织单元(可以是机构、部门、岗位、人员),点击右侧的 “分配”按钮,如下图所示: 图 2.45 授权管理 在弹出的选择角色的对话框中,勾选相应的角色,点击“确定”按钮。如下图所示: 图 2.46 选择角色 至此,完成权限分配。重新登录,就可以在功能书中看到新分配的功能菜单。 X5 快速开发指南 2011 Justep Corp. 第 43 页 共 219 页 起 步 科 技 2.8 运行系统 分配完权限后,重新登录就可以运行系统,查看功能了。运行系统请参见 1.4 运行系统 一节。 运行效果如下图所示: 图 2.47 运行效果 X5 快速开发指南 2011 Justep Corp. 第 44 页 共 219 页 起 步 科 技 第3章 数据建模 本章要点:  概念数据建模  物理数据建模  反向生成本体  标准动作设置 整个建模过程分为三个步骤,分别是:数据建模、流程建模和界面建模。其中,数据建模实现 概念与数据库交互,完成数据存取。建模包括概念数据建模和物理数据建模两部分。概念数据建模 起到了屏蔽物理数据库之间的差异的作用,概念数据建模,包括创建概念、创建关系;物理数据建 模就是在概念和物理数据库之间建立映射关系,物理数据建模包括映射设置、生成物理表和标准动 作设置三部分。数据模型示意图如下: 图 3.1 数据模型示意图 3.1 概念数据建模 概念数据建模起到了屏蔽物理数据库之间的差异的作用,概念数据建模,包括创建概念、创建 关系。 3.1.1 概念 “概念”可以理解成是对单个或者一类对象的抽象,也可以简单看成是对数据库表的抽象。第 二章 2.3.1.2 新建概念 一节 ,讲解了如何创建概念;本节中,补充讲解 2.3.1.2 新建概念 一节 中没有讲到的“概念”相关的知识点,包括主键默认值、包含引用。 1. 主键默认值 X5 平台中,每个概念都有主键默认值,并且主键默认值必须唯一,不能为空。新建一个概念时, 会默认添加“guid()”表达式函数作为概念的主键默认值,但并不只有“guid()”这一个表达式函 数可以作为主键默认值,其它的表达式函数或者编写一个表达式,都可以作为主键的默认值。比如 以当前日期时间作为主键默认值:toString(currentDateTime())。 2. 包含引用 X5 中“包含引用”就是在当前的业务模块中,引用其它业务模块中的资源,包括:概念、关系、 函数(Fn)、动作(Action)等。包含指的就是 INCLUDE;引用指的就是 USE。常用的是“引用(USE)”。 在本体设计器中,点击下方的“包含/引用”页签,在该页签中,在“引用”编辑框中,点击“添 加”按钮,在弹出的“选择模型”窗口中,选择一个模型资源目录,点击“确定”按钮,该模型资 数据库 流程模型 数据模型 Fn Action config dbconn ontology mapping 数 据 库 X5 快速开发指南 2011 Justep Corp. 第 45 页 共 219 页 起 步 科 技 源目录就被引入到了当前的文件所在的模型中。 例如:  引用系统的概念,需要选择“/system/ontology”;  引用系统的 Action,需要选择“/system/logic/action”;  引用系统的 Fn,需要选择“/system/logic/fn”。如下图所示: 图 3.2 包含引用 3.1.2 关系 X5 中“关系”可以是对对象属性的抽象,“关系”可以简单看成是对表字段的抽象。第二章 2.3.1.3 新建关系 一节,讲解了如何创建关系;本节中,讲解关系相关知识点,包括:version 关系、关系 默认值。 1. version 关系 X5 中,新建一个概念时,都会默认创建一个 “version”关系。version 关系的作用是防止在 并发时,多个人对同一条数据记录进行修改操作,也就是所谓的“乐观锁”。X5 平台自动对 version 关系进行了维护,开发者不必维护该关系,在界面模型中的 bizData 组件的“update-model”属性 的值,应该选择“whereVersion”; version 关系也可以不要,如果没有 version 关系,在界面模型 中的 bizData 组件的“update-model”属性的值,要选择“whereAll”。 bizData 组件可参见 5.2.1.2 bizData 组件 一节。 2. 关系默认值 有些功能需要新增记录时关系就有默认值,这就需要在数据建模过程中创建关系的时候,为关 系设置默认值,也相当于给数据库表中某个字段设置默认值,如 version 的默认值为 0。关系默认 值设置方式有两种:设置常量和设置表达式。  使用常量作为关系默认值 在关系的“默认值”处,直接输入常量默认值。如下图所示: X5 快速开发指南 2011 Justep Corp. 第 46 页 共 219 页 起 步 科 技 图 3.3 关系常量默认值  使用表达式作为关系默认值 在关系的“默认值”处,点击一下,出现一个小按钮,点击该按钮,弹出“表达式编辑器”对 话框。如下图所示: 图 3.4 关系默认值 在“表达式编辑器”对话框中,选择适当的表达式,也可以进行表达式嵌套。如下图所示: 注意:默认值中,字符串常量用单引号引起来。 X5 快速开发指南 2011 Justep Corp. 第 47 页 共 219 页 起 步 科 技 图 3.5 设置表达式默认值 关系默认值的数据类型要和关系的类型保持一致。这里介绍一些用作关系默认值的常用表达式: 1) 获取流水号作为关系默认值,可以使用表达式编辑器中“数据函数”目录下的几个表达式:  流水号---案例: nextSeq('20101010')=1  流水号字符串---案例: nextSeqString('ORDER', '000')=’ORDER001’  不占位流水号字符串---案例:tempNextSeqString('ORDER', '000')= ’ORDER001’ 2) 获取日期或时间作为关系默认值,可以使用表达式编辑器中“通用函数”目录下的几个表 达式:  当前日期时间---currentDateTime()  当前日期---currentDate()  当前时间---currentTime() 3) 获取组织机构相关信息作为关系默认值,可以使用表达式编辑器中“组织函数”目录下的 几个表达式:  当前人的 ID---currentPersonID()  当前人员成员的 ID---currentPersonMemberID()  当前人的 Name---currentPersonName()  当前组织 ID---currentOrgID()  当前部门 ID---currentDeptID()  当前岗位 ID---currentPosID() 以上只是介绍了几个常用的表达式函数,更多的表达式函数请参考 API 文档。 表达式具体用法请参见请参见 4.4 函数 Fn 一节。 如果平台提供的表达式函数不能满足需求,还可以自定义表达式函数,如何自定义表达式函数 请参见 4.4.2 自定义函数 一节。 3.2 物理数据建模 物理数据建模就是在概念和物理数据库之间建立映射关系。 X5 快速开发指南 2011 Justep Corp. 第 48 页 共 219 页 起 步 科 技 3.2.1 映射设置 为什么要进行映射设置? 在通常的开发中,后台程序往往都是直接访问数据库且直接操作数据库,这种方式虽然在开发 的过程中,比较直接、简洁,但是这种方式的弊端对整个项目带来的危害也是很大的,具体体现在 当数据库中的表或者字段变更了以后,开发的程序中所有与之相关的地方都要进行修改,这就增大 了开发的复杂度,降低了开发出来的系统的稳定性。 X5 中数据建模这一部分,完成了一件很重要的事情,就是在模型中的概念和物理数据库之间建 立起了映射,并且这种映射是可配置的。使用 X5 进行项目开发,后台程序在进行数据处理时,操作 的主要是概念,而不是物理数据库,这就避免了上面提到的通常开发遇到的数据库变更引发的问题。 也就是说,如果数据库中的表或者字段发生了变化,在 X5 中只需要对映射文件进行配置就可以了, 不必深入到程序中去修改。这种做法,也使 X5 具有了跨越不同数据库的能力。 映射设置就是要把数据建模中创建的概念和关系跟物理表建立起映射联系。在概念标识和表名 不同,关系标识与字段名不同,主键不叫 fID 等情况下,都需要进行映射设置。 在映射设置中,还有一个比较有用的设置,就是鉴别器设置。鉴别器的作用就是在概念级别起 到过滤的作用。鉴别器设置也很简单,在映射设置界面的表映射中,有“鉴别列”和“鉴别值”两 个输入框,分别输入要进行过滤的字段名和过滤条件值就可以了。如下图所示: 图 3.6 鉴别器设置 3.2.2 生成物理表 生成物理表就是把概念数据建模中创建的概念和关系,在数据库中生成具体的物理表。具体操 作参见 2.3.2.2 生成物理表 一节 。 注意:如果在鉴别器设置中,设置了某个关系作为鉴别器列的情况下,作为鉴别器列的这个关系不能再次出现在 概念的关系定义中。 X5 快速开发指南 2011 Justep Corp. 第 49 页 共 219 页 起 步 科 技 3.3 反向生成本体 第二章 2.3.2.2 生成物理表 一节,讲解了如何把一个概念生成一个对应物理表,可以看成是 一种正向的操作;反向生成本体,指的就是由物理表生成一个对应的概念和关系。具体操作如下: 1. 先在数据库中创建一个物理表。本例中使用的已有物理表是:DEMO_PRODUCT 2. 打开要进行反向生成本体的 ontology 文件。本例中,使用第二章中创建的本体文件 “x5demo/baseDemo/ontology/base.ontology.m”。: 3. 点击本体设计器右上角的“反向生成本体”按钮,弹出“反向生成本体”窗口,如下图所 示:选择名称为“system”的数据源,“system”数据源包含要用来反向生成本体的数据表; 图 3.7 选择数据源 4. 在上图中,点击“选择表”按钮,弹出“选择表”窗口,选择要反向生成本体的表,可以 选择多个表,点击“确定”按钮。如下图所示: X5 快速开发指南 2011 Justep Corp. 第 50 页 共 219 页 起 步 科 技 图 3.8 选择表 5. 选完表后,在“映射配置”界面中,先点击“添加概念”按钮,生成一个概念标识,再点 击“添加关系”按钮,弹出“选择映射字段”窗口,选中需要添加为关系的字段,本例中 全选。如下图所示: 图 3.9 选择字段 6. 添加后,如下图所示: 图 3.10 添加后效果 最后,点击“完成”按钮。本体文件中生成新的概念和关系。如下图所示: X5 快速开发指南 2011 Justep Corp. 第 51 页 共 219 页 起 步 科 技 图 3.11 生成概念和关系 3.4 标准动作设置 X5 平台中的 Action 描述了一个动作或者一个业务逻辑。每个概念都拥有创建数据、保存 数据、查询数据这三个动作,这些动作就称为标准动作。其中,保存、查询这两个动作实现 了概念跟数据库之间的数据交互。 第二章中 2.3.3 标准动作设置 一节中,讲解了如何为概念设置标准动作;本节中,补充讲解 2.3.3 标准动作设置 一节中没有讲到的“标准动作”的相关知识点,包括标准动作介绍、KSQL 介 绍、KSQL 查询编辑器等几个方面。 3.4.1 标准动作介绍 每个概念都可以有三个对应的标准动作,分别是:queryXxxxAction、saveXxxxAction、 createXxxxAction。其中,queryXxxxAction 封装了读取数据的业务逻辑,实现了从数据表中读取 数据并封装成 table 对象的功能;saveXxxxAction 封装了修改数据的业务逻辑,实现了将 table 对 象中的内容通过增删改的方式更新数据库的功能;createXxxxAction 封装了新建概念数据的业务逻 辑,实现了产生一条或多条空数据并封装成 table 对象的功能。标准动作设置如下图所示: 提示:目前支持 Oracle 数据库表和字段的注释信息导入为概念名称和关系名称。如果没有在 Oracle 中添加注释 或者使用的是 SQL Server 数据库,在反向生成本体后,需要手工编辑概念中文名称和关系中文名称。 X5 快速开发指南 2011 Justep Corp. 第 52 页 共 219 页 起 步 科 技 图 3.12 标准动作设置 表 3.1 queryXxxxAction 的参数 参数名称 用途 select 查询,标明查询概念中的哪些关系 from 作为查询的数据来源 dataModel 引用的业务数据模型,封装了数据源连接等底层操作 fnModel 引用的函数模型,封装了函数的底层实现 distinct 是否过滤查询出的重复的结果 condition 过滤条件,KSQL 编辑器中定义的查询条件 filter 过滤条件,UI 中 bizData 的 filter range 过滤条件,在数据权限中定义的过滤条件 返回值 封装成 Table 对象返回 表 3.2 saveXxxxAction 的参数 参数名称 用途 concept 概念,指明要存储的概念 dataModel 引用的业务数据模型,封装了数据源连接等底层操作 table Table 对象,存储数据改变信息 返回值 成功的影响了几条数据 表 3.3 createXxxxAction 的参数 参数名称 用途 concept 概念,新增这个概念的数据 说明 标准 Action 参数的属性说明 范围——public 公共的,可以接受前台传入的值 protected 保护的,表示可以在 process 中 has-action 时赋值 private 私有的,表示只能在 action 声明时赋值 permission 权限参数,只能从组织机构上传权限的值,在角色管理中设置 必须——该参数必须赋值 X5 快速开发指南 2011 Justep Corp. 第 53 页 共 219 页 起 步 科 技 fnModel 引用的函数模型,封装了函数的底层实现 table 传入一个空的 Table 对象,如在界面上设置了关系的默认值,会将界面的默认值 传过来 返回值 新产生的一条或者多条概念数据,封装成 Table 对象返回 3.4.2 KSQL 介绍 KSQL 是 Knowlog Structured Query Language 的简称。KSQL 是一个语法上靠近 SQL-92 的概念 数据操作语言。X5 中的 KSQL 是专门用来在 X5 中操作概念(Concept)和关系(Relation)的查询 语言。更多的介绍请参见 X5 提供的 API 文档中 KSQL 这个部分。 3.4.3 KSQL 查询编辑器 标准动作的参数值是可以编辑的。点击参数中的“值”处的输入框,会出现一个小按钮,点击 参数 select、from、condition、orderBy 后面的按钮,会弹出“KSQL 查询编辑器”窗口。如下图 所示: 图 3.13 标准动作参数 X5 快速开发指南 2011 Justep Corp. 第 54 页 共 219 页 起 步 科 技 图 3.14 KSQL 查询编辑器 “KSQL 查询编辑器”是通过选择概念、关系、函数的方式生成 KSQL 语句的工具,里面包含中 有四个页签,分别是“Select”、“Where”、“Order”、“Group”页签。这四个页签的作用就是分别完 成一个 KSQL 查询语句的 Select、Where、Order、Group 的部分。  Select 页签 点击“添加关系”按钮,弹出“请选择需要查询的关系”窗口,在该窗口中,可以从现有的概 念中选择添加要查询的关系,如果要添加某个概念下的所有关系,就选择该概念下的“*”号。如下 图所示: 图 3.15 选择需要的关系 X5 快速开发指南 2011 Justep Corp. 第 55 页 共 219 页 起 步 科 技 如果要从两个概念中取数据,除了选择两个概念中的关系外,还需要设置两个概念之间的关联 条件。如下图所示。 图 3.16 从多个概念中查询数据 点 on 列中的小按钮,弹出请配置关联条件(on)对话框,如下图所示。 图 3.17 配置概念之间的关联条件 在可选关系中列出了,已经选择的概念和它们拥有的关系。在此设置两个概念之间的关联条件, 例如:用品表的用品类型 ID 等于用品类型表的主键(主键用概念名表示)。  Where 页签 可以编辑查询条件,可以使用常量、变量、内存函数、KSQL 函数。如下图所示: X5 快速开发指南 2011 Justep Corp. 第 56 页 共 219 页 起 步 科 技 图 3.18 KSQL 查询编辑器 使用变量——变量名前加冒号,在查询前给 variables 参数赋值。 使用内存函数——内存函数名前加冒号,后加一对小括号,表达式编辑器中的函数都是内存函 数。如果使用的不是系统函数,需要给 fnModal 参数赋值函数的路径。  Order 页签 可以编辑排序条件,如下图所示: 图 3.19 KSQL 查询编辑器  Group 页签 可以编辑分组条件,可以设置 having 子句,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 57 页 共 219 页 起 步 科 技 图 3.20 KSQL 查询编辑器 注意 标准动作设置中 queryAction 不允许使用 Group,因此打开 KSQL 查询编辑器,没有 Group 页。 报表设计器中允许使用 Group,因此打开 KSQL 查询编辑器,有 Group 页。另外,设置了 group by 之后, 要到源码中,给 select 中的非 group by 关系加聚合函数,例如 sum(),否则运行报表时报错。 X5 快速开发指南 2011 Justep Corp. 第 58 页 共 219 页 起 步 科 技 第4章 流程建模 本章要点:  简单流程  流程规则  流程事件  函数 Fn  动作 Action  Java 开发 整个建模过程分为三个步骤,分别是:数据建模、流程建模和界面建模。其中,流程建模实现 了业务流程和业务逻辑。流程建模是整个建模过程中非常关键的一个步骤,在这里可以通过流程图 实现业务流程,通过 Action 实现前后台交互,通过 Java 扩展来实现特殊的业务逻辑。 X5 中的流程建模从具体功能上可以分为带有流程功能的流程建模和非流程功能的流程建模。这 两种流程建模实际上是统一的,区别在于带有流程功能的流程建模需要画流程图,而非流程功能的 流程建模不需要画流程图。在实际的开发中,非流程的流程模型,只要追加上流程图,就可以变为 流程的流程模型,这也正是 X5 的强大之处的一个体现。 在流程建模中,首先需要创建 process 文件,在 process 文件中,可以设置 Action,添加 process 的事件,画流程图、设置流程环节的属性、规则、事件等。添加 porcess 的事件或者环节的事件时, 会生成相应的 procedure 文件和 Java 文件。流程模型示意图如下: 图 4.1 流程模型示意图 第二章中 2.4 流程建模 一节 中介绍了非流程功能的流程建模。本章介绍带有流程功能的流程 建模。主要从以下几个方面讲解带有流程的流程建模:简单流程、流程规则、流程事件、函数 Fn、 动作 Action、Java 开发。 4.1 简单流程 本节将通过开发一个简单的流程实例来详细讲解如何进行带有流程功能的流程建模,重点突出 流程图的画法。 流程实例的开发过程与普通功能的开发过程类似,必要的步骤也包括:数据建模、流程建模和 process 流程图 Fn Activity action 界面模型 流程模型 数据模型 JS 数 据 库 X5 快速开发指南 2011 Justep Corp. 第 59 页 共 219 页 起 步 科 技 界面建模。按照以下具体步骤进行开发: 1. 数据建模 本例中,在“模型资源视图”的 BIZ 工程目录中的“x5demo/bizDemo/ontology/”目录中,新 建一个本体文件,在该本体文件中,新建一个名为“费用申请”的概念及其关系,新建的概念和关 系如下图所示:然后生成数据库,执行标准动作设置。 图 4.2 流程用到的概念和关系 2. 流程建模---创建 Process 文件及动作设置 流程建模的非流程图部分,同 2.4 流程建模 一节。本例中在“模型资源视图”的 BIZ 工程目 录中的“x5demo/bizDemo/process/”目录中新建一个 Process 文件,功能目录名称为“costRequest”, 显示名称为“费用申请”,如下图所示。然后进行动作设置。 图 4.3 新建 process 文件 3. 流程建模---画流程图 在 Process 文件中画流程图,先添加一个开始环节,点中流程设计器上方的第一个圆形图标, 再在小方格界面上点一下,开始环节就加到流程图中了,或者在小方格界面上直接右键单击,在“新 建”菜单中选择“开始”。如下图所示: X5 快速开发指南 2011 Justep Corp. 第 60 页 共 219 页 起 步 科 技 图 4.4 添加开始环节 流程设计器中,流程的各个功能按钮说明如上图中“新建”菜单所示。其余的流程图按钮说明 如下:  表示流程环节之间的连接线  添加后继活动环节的位置(在当前环节的右边、还是下边,还是„„ ) 在流程图中,选中开始环节,右键单击,从“新建”菜单中选择“活动环节”,来为流程图添加 其它环节,如下图所示: 图 4.5 添加环节 按照上面的方法来画流程图,然后选中一个环节,在左侧的“属性”页签中,修改环节的显示 名称。最终的流程图如下图所示: X5 快速开发指南 2011 Justep Corp. 第 61 页 共 219 页 起 步 科 技 图 4.6 完整流程图 至此,流程建模也就完成了。 4. 界面建模 流程的界面建模与普通功能的界面建模大同小异,可参见 2.5 界面建模 一节。本例中使用了 流程模板,在此重点讲解流程模板的不同之处。 在“模型资源视图”的 UI 模型目录中的“x5demo/bizDemo/process/costRequest”目录下新建 一个 w 文件,使用“单表流程”模板,如下图所示: 图 4.7 流程模板 在上图中,点击“下一步”按钮,进入“配置项设置”界面,“配置项”中的“主数据”、“详细 X5 快速开发指南 2011 Justep Corp. 第 62 页 共 219 页 起 步 科 技 视图”的配置与前面讲的界面建模中操作类似;“流程环节”中的配置自动生成。如下图所示: 图 4.8 模板设置 最后,点击“完成”按钮,生成界面文件,完成界面建模。界面文件目录及效果如下图所示: 图 4.9 界面文件目录 5. 授权、运行 接下来进行功能树配置(参见 2.6 功能树配置 一节)、分配权限(参见 2.7 分配权限 一节) 的操作,就可以运行系统了,运行效果如下图所示: X5 快速开发指南 2011 Justep Corp. 第 63 页 共 219 页 起 步 科 技 图 4.10 运行效果 4.2 流程规则 X5 流程的规则有多种,有设置在流程上的规则,也有设置在环节上的规则。本节中重点介绍流 程上的规则之启动规则、环节上的规则之执行规则、转发规则、流转规则和回退规则。 4.2.1 启动规则 启动规则主要用于设置流程的任务标题和设置使用的流程模板。 本例中在“模型资源视图”的 BIZ 模型目录中的“x5demo/bizDemo/process/costRequest/ costRequestProcess.process.m”流程文件中,不选环节,点击流程图空白处,左侧列出流程的属 性和事件。为流程添加一个启动规则,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 64 页 共 219 页 起 步 科 技 图 4.11 添加启动规则 1. 设置流程的任务标题 任务标题的表达式设置为 concat(currentPersonName(),currentProcessLabel()),流程启动 后及流转后的任务标题如下图所示。 图 4.12 自定义流程标题 2. 设置使用的流程模板 设置流程模板能实现什么? X5 的流程中一直没有提供流程版本,现在可以使用流程模板实现比流程版本更强的能力。当没 有设置流程模板的时候,系统使用 process 文件中定义的流程图运行流程;设置了流程模板之后, 系统将使用设置的流程模板来运行流程,这样就实现了流程版本的能力。如果设置不同部门或者不 同的人,拥有不同的流程模板,就可以实现每个人启动不同的流程版本了。 如何设置流程模板? X5 快速开发指南 2011 Justep Corp. 第 65 页 共 219 页 起 步 科 技 1) 打开协同平台——任务管理——流程模板管理功能,配置流程模板,并将流程模板分配给 相应的组织。 2) 点流程模板右边的选择按钮,弹出表达式编辑器,在流程模板函数中选择一个合适的函数。 图 4.13 设置使用的流程模板 4.2.2 执行规则 执行规则主要用于限定本环节的执行者和设置任务协作方式。本节介绍执行规则中各个参数及 其意义。 本例中在“模型资源视图”的 BIZ 模型目录中的“x5demo/bizDemo/process/costRequest/ costRequestProcess.process.m”流程文件中,选中一个环节,,左侧列出该环节的属性和事件。为 其添加一个执行规则,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 66 页 共 219 页 起 步 科 技 图 4.14 添加执行规则 一个环节可以设置多个执行规则,在若干个执行规则中,至少有一个执行规则的“生效条件” 为“true”。执行规则基本信息中的参数介绍如下:  生效条件 可以直接设置为 boolean 值 true 或者 false,也可以点击后面的“选择”按钮,在弹出的“表 达式编辑器”中,编辑一个表达式作为生效条件。如何编辑表达式,请参见 4.4 函数 Fn 一节。首 环节的执行规则,平台默认生成了表达式 isStartingProcess() 作为生效条件,如果不是首环节的 执行规则,默认生成的生效条件是 boolean 值 true 。  任务标题 平台默认生成的任务标题是“环节名称+流程名称”,如“职员申请:费用申请”。任务标题可以 自定义,点击后面的“选择”按钮,在弹出的“表达式编辑器”中,编辑一个表达式作为任务标题, 在 X5 的表达式中,常量也被认为是常量表达式。如何编辑表达式,请参见 4.4 函数 Fn 一节。  打开后自动流转 选中该项,则该环节不需要手动流转,打开后,就自动流转。  执行者 执行者属性是为流程环节设置执行者,执行者的类型可以是人员、岗位和部门。执行者表达式, 用来生成流程环节的执行者,执行者表达式可以组合选用平台提供的组织函数,也可以自定义开发 函数,来取得执行者。如何编辑表达式,请参见 4.4 函数 Fn 一节。如何自定义开发函数,请参见 4.4.2 自定义函数 一节。 执行者范围表达式,用来生成可供用户选择的执行者的范围。执行者范围表达式可以组合选用 平台提供的组织函数,也可以自定义开发函数,来取得执行者范围。  任务协作 任务协作说的是当流程的某个环节流转给多个执行者的时候,多个执行者如何协作对流程进行 处理。任务协作的子属性包括任务分配模式、执行模式、抢占模式,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 67 页 共 219 页 起 步 科 技 图 4.15 任务协作 任务分配模式指的是,流程以何种方式流转给多个执行者后。任务分配模式有两种:共同和独 立。共同指的是多个执行者共同完成流程中某个环节的处理,反映在流程图上,就是只有一条执行 轨迹;独立指的是每个执行者分别独立完成流程某个环节的处理,反映在流程图上,就是自该环节 起,有多条流程轨迹。 执行模式,只有当任务分配模式是“共同”时,才需要执行模式。执行模式指的是多个执行者 之间如何进行任务的协作处理。执行模式包括抢占、顺序和同时三种模式。 抢占,指的是多个执行者之间以竞争的方式进行任务协作,谁抢到了谁处理,没有抢占到的执 行者,不处理。或者说先到先得。 顺序,指的是多个执行者之间按照一定的顺序来完成任务的协作,每个执行者都要进行处理, 最后一个执行者处理完后,流程流转向下一个环节。执行的顺序是当流程处于前一个环节向本环节 流转时,流转对话框中右侧执行者表格中显示的顺序。 同时,指的是多个执行者之间不分先后顺序,每个执行者都可以进行处理,当一个执行者处理 完后,还有其他执行者尚未处理,则此时流程处于等待其他执行者处理的状态;只有当所有执行者 都处理完成后,流程才流转向下一个环节。 抢占模式,只有当执行模式是“抢占”时,才需要抢占模式。抢占模式指的是多个执行者之间 进行抢占的时机。抢占模式包括打开时和处理时两种模式。 打开时,第一个打开该待办任务的人,抢占成功,可以处理该任务。 处理时,第一个保存或流转该待办任务的人,抢占成功,可以处理该任务。  任务属性 任务属性,是对 X5 平台的任务管理进行定制设置,在此可以将自己的信息写入任务表。任务属 性中的“关系名称”指的是平台的任务概念中的某一个关系。值表达式是用平台提供的表达式。在 任务属性中为某一个关系赋值后,当该流程运行时,生成的任务记录中,该字段的值就优先使用此 处设置的值。为任务属性设值,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 68 页 共 219 页 起 步 科 技 图 4.16 任务属性 4.2.3 转发规则 转发规则就是为流程如何转发设置的规则。转发规则与执行规则大同小异,区别在于生效的时 机不同和环节的转换不同,少数属性不同。执行规则是当流程执行时生效,且流转后当前环节发生 变化;转发规则是当流程转发时生效,且当前环节不变。 在“模型资源视图”的 BIZ 模 型 目 录 中 的 “ x5demo/bizDemo/process/costRequest/ costRequestProcess.process.m”流程文件中,选中一个环节,为其添加一个转发规则,如下图所 示: 图 4.17 转发规则 转发规则的特有属性也比较简单,转发规则基本信息中的属性说明如下:  转发确认 设置转发时是否弹出转发对话框。  是否需要保存 选中后,保存此环节上的执行者,作为默认值缓存起来。 X5 快速开发指南 2011 Justep Corp. 第 69 页 共 219 页 起 步 科 技 4.2.4 流转规则 流 转 规则 就 是设置流程如何流转的规则。在“模型资源视图”的 BIZ 模 型目 录 中的 “x5demo/bizDemo/process/costRequest/ costRequestProcess.process.m”流程文件中,选中一 个环节,为其添加一个流转规则,如下图所示: 图 4.18 流转规则 流转规则的设置相对于执行规则来说比较简单。流转规则基本信息中的属性说明如下:  生效条件 流转规则中的生效条件的设置同执行规则中的生效条件的设置,请参见 4.2.2 执行规则 一节 中 生效条件 部分。  流转确认 设置流转时是否弹出流转对话框。  允许定制流程 选中后,此环节上的执行者可以自己定制流程,可定制后面的若干环节。定制环节的选择范围 可以在指定环节列表中控制,如果列表为空,表示所有环节都可以选择。  是否需要保存 选中后,保存此环节上的执行者,作为默认值缓存起来。 4.2.5 回退规则 回退规则就是为流程回退时设置的规则。回退规则类似于流转规则。在“模型资源视图”的 BIZ 模型目录中的“x5demo/bizDemo/process/costRequest/ costRequestProcess.process.m”流程文 件中,选中一个环节,为其添加一个回退规则,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 70 页 共 219 页 起 步 科 技 图 4.19 回退规则 回退规则基本信息中的属性说明如下:  生效条件 回退规则中的生效条件的设置同执行规则中的生效条件的设置,请参见 4.2.2 执行规则 一节 中 生效条件 部分。  回退确认 设置回退时是否弹出回退对话框。  是否需要保存 选中后,保存此环节上的执行者,作为默认值缓存起来。  返回方式 原路返回——当流程回退时,会要求回退后的环节,直接流转回到本环节 重新流转——当流程回退时,回退后的环节再流转时,会按照流程图的轨迹来流转。 原路返回或重新流转——回退后,再流转时,用户决定直接流转回到本环节,还是重新按照流 程图流转。  回退范围 选择回退的范围,回退的范围包括:所有前序环节、前序环节、指定环节、首环节和前序人五 种范围。  指定环节列表 当回退范围选择“指定环节”时,在需要在这里添加被指定的环节。可以添加多个指定环节, 回退时可以从这些指定的环节中选择一个环节来回退。 4.3 流程事件 流程事件,指的是在流程的执行过程中有若干个时机点,如流程流转前、流转后,在这些时机 点上可以执行的操作。常用的流程事件,按照作用范围可以分为 Process 中的事件、Activity 中的 事件和 Action 中的事件,也可以把它们看做是流程的全局事件和局部事件。 4.3.1 Process 事件 Process 中的事件也可以看做是流程的全局事件。在“模型资源视图”的 BIZ 模型目录中,打 开“x5demo/bizDemo/process/costRequest/ costRequestProcess.process.m”流程文件,不选环 节,点击流程图空白处,,左侧列出流程的属性和事件。选中事件选项卡,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 71 页 共 219 页 起 步 科 技 图 4.20 Process 事件 Process 中的事件,按照流程的动作类型划分可以分为十类:开始、流转、回收、定制流程、转 发、回退、中止、暂停、唤醒、结束;按照事件执行时机类型划分可以分为两大类:执行前和执行 后。在事件后面的“事件值”处双击,就会在 Process 文件所在目录下生成一个 Java 文件,Java 文件中生成该事件对应的 Java 方法。本例中以 onAfterFinish 事件为例说明,如下图所示: 图 4.21 添加 Process 事件 X5 快速开发指南 2011 Justep Corp. 第 72 页 共 219 页 起 步 科 技 图 4.22 Process 事件的 Java 代码 如上图中,在 Process 文件的“事件源码”中的 Java 方法里,可以直接编写需要的业务逻辑代 码。 Process 中的事件的大都有 xxxxQuery 事件,xxxxQuery 事件表示的是打开流程的流转对话框时 执行的事件,xxxxQuery 事件是用来取得流程的执行者及执行者范围的;xxxxQuery 事件在流程中的 执行时机早于 xxxx 事件。以流转的事件为例说明同一流程动作中不同事件的执行顺序,如 onBeforeAdvanceQuery 早于 onAfterAdvanceQuery 早于 onBeforeAdvance 早于 onAfterAdvance。 Process 中的事件分类及说明如下所示: 表 4.1 Process 事件 分类 事件 说明 Start 启动 onBeforeStartQuery 流程启动时获取执行者之前的事件 onAfterStartQuery 流程启动时获取执行者之后的事件 onBeforeStart 流程启动之前的事件 onAfterStart 流程启动之后的事件 Advance 流转 onBeforeAdvanceQuery 流程流转时获取执行者之前的事件 onAfterAdvanceQuery 流程流转时获取执行者之后的事件 onBeforeAdvance 流程流转之前的事件 onAfterAdvance 流程流转之后的事件 Withdraw 回收 onBeforeWithdraw 流程回收之前的事件 onAfterWithdraw 流程回收之后的事件 StartCustomized 定制流程 onBeforeStartCustomizedQuery 定制流程对话框弹出之前的事件 onAfterStartCustomizedQuery 定制流程对话框弹出之后的事件 onBeforeStartCustomized 确定定制流程之前的事件 onAfterStartCustomized 确定定制流程之后的事件 Transfer 转发 onBeforeTransferQuery 流程转发时获取执行者之前的事件 onAfterTransferQuery 流程转发时获取执行者之后的事件 onBeforeTransfer 流程转发之前的事件 onAfterTransfer 流程转发之后的事件 X5 快速开发指南 2011 Justep Corp. 第 73 页 共 219 页 起 步 科 技 Back 回退 onBeforeBackQuery 流程回退时获取执行者之前的事件 onAfterBackQuery 流程回退时获取执行者之后的事件 onBeforeBack 流程回退之前的事件 onAfterBack 流程回退之后的事件 Abort 终止 onBeforeAbortQuery 流程终止时获取执行者之前的事件 onAfterAbortQuery 流程终止时获取执行者之后的事件 onBeforeAbort 流程终止之前的事件 onAfterAbort 流程终止之后的事件 Resume 继续 onBeforeResume 流程继续之前的事件 onAfterResume 流程继续之后的事件 Suspend 暂停 onBeforeSuspendQuery 流程暂停时获取执行者之前的事件 onAfterSuspendQuery 流程暂停时获取执行者之后的事件 onBeforeSuspend 流程暂停之前的事件 onAfterSuspend 流程暂停之后的事件 Finish 结束 onBeforeFinish 流程结束之前的事件 onAfteFinish 流程结束之后的事件 4.3.2 Activity 事件 Activity 中的事件可以看做是流程的局部事件。在“模型资源视图”的 BIZ 模型目录中,打开 “x5demo/bizDemo/process/costRequest/ costRequestProcess.process.m”流程文件,选中其中 的一个环节,在 Process 文件的左侧选中“事件”页签,显示的是 Activity 上的事件。Activity 的事件比 Process 的事件数量少,但事件名称与 Process 对应的事件名称相同。 Activity 的事件中也有 xxxxQuery 这样的事件,同一类事件中执行的先后顺序也跟 Process 事 件中的顺序一样。在 Activity 事件后面的“事件值”处双击,也会生成对应的 Java 方法,Activity 事件的 Java 方法代码跟 Process 事件的 Java 方法代码在同一个文件中。如下图所示: 图 4.23 添加 Activity 事件 X5 快速开发指南 2011 Justep Corp. 第 74 页 共 219 页 起 步 科 技 Activity 事件的 Java 代码,如下图所示: 图 4.24 Activity 事件的 Java 代码 在流程中较为常用的功能,在流转时获取下一个环节的执行者,Java代码如下。其它方法参见 API文档。 public static void bizActivity1AfterAdvance() { ProcessControl flowControl = (ProcessControl)ContextHelper.getActionContext(). getParameter("control"); for (ProcessControlItem to : flowControl.getFlowTos()) { for (OrgUnit ect : to.getExecutors()) { System.out.println("=====fid=====>"+ect.getFID()); System.out.println("=====fname=====>"+ect.getFName()); } } } Activity 中的事件分类及说明如下所示: 表 4.2 Activity 事件 分类 事件 说明 Advance 流转 onBeforeAdvanceQuery 流程中该环节流转时获取执行者之前的事件 onAfterAdvanceQuery 流程中该环节流转时获取执行者之后的事件 onBeforeAdvance 流程中该环节流转之前的事件 onAfterAdvance 流程中该环节流转之后的事件 Withdraw 回收 onBeforeWithdraw 流程中该环节回收之前的事件 onAfterWithdraw 流程中该环节回收之后的事件 StartCustomized 定制流程 onBeforeStartCustomizedQuery 流程中该环节定制流程对话框弹出之前的事件 onAfterStartCustomizedQuery 流程中该环节定制流程对话框弹出之后的事件 onBeforeStartCustomized 流程中该环节确定定制流程之前的事件 onAfterStartCustomized 流程中该环节确定定制流程之后的事件 Transfer 转发 onBeforeTransferQuery 流程中该环节转发时获取执行者之前的事件 onAfterTransferQuery 流程中该环节转发时获取执行者之后的事件 onBeforeTransfer 流程中该环节转发之前的事件 X5 快速开发指南 2011 Justep Corp. 第 75 页 共 219 页 起 步 科 技 onAfterTransfer 流程中该环节转发之后的事件 Back 回退 onBeforeBackQuery 流程中该环节回退时获取执行者之前的事件 onAfterBackQuery 流程中该环节回退时获取执行者之后的事件 onBeforeBack 流程中该环节回退之前的事件 onAfterBack 流程中该环节回退之后的事件 4.3.3 Action 中的事件 此处的 Action 指的是在新建完 Process 文件后,为其进行“动作设置”操作时,添加的 Action。 也就是第二章中讲到的流程建模中所设置的 Action,详见 2.4.2 动作设置 一节。 “动作设置”中添加的 Action 也可以再为其添加事件,一个 Action 中添加的事件只有该 Action 执行前和执行后两种事件。Action 中的事件既可以是全局的,也可以是局部的,取决于 Action 自 身是全局的还是局部的。如果 Action 设置在 Process 文件的属性中,那它就是全局的;如果 Action 设置在环节的属性中,那它就是局部的。 在“模型资源视图”的 BIZ 模型目录中,打开“x5demo/bizDemo/process/costRequest/ costRequestProcess.process.m”流程文件,选中 Process 文件左侧的“属性”选项卡,在其中点 击“动作设置”后面的小按钮,弹出“动作设置”窗口,在其中选中一个 Action,在右侧的“基本 信息”中,点击“执行前事件”或者“执行后事件”后面的“编辑”按钮,就为该 Action 添加了一 个事件,并且生成对应的 Java 方法代码,Action 中的事件的 Java 方法代码跟 Process 事件的 Java 方法代码在同一个文件中。如下图所示: 图 4.25 添加 Action 的事件 Action 中的事件的 Java 代码,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 76 页 共 219 页 起 步 科 技 图 4.26 Action 中事件的 Java 代码 4.4 函数 Fn 本节详细介绍常用的函数、表达式编辑器的用法以及开发者如何自定义函数。 4.4.1 常用函数 在 X5 中,常用的函数按照作用可分为:默认值表达式函数、KSQL 内存函数、条件表达式函数、 执行者表达式函数四种;按照类型又可分为:通用函数、数据函数、模型函数、组织函数和流程函 数五类。在实际使用中,这两种分法会出现交叉,但并不影响对表达式的理解和使用。  默认值表达式函数用于设置关系的默认值,例如生成订单编号;  KSQL 内存函数用于 KSQL 查询编辑器中和 bizData 的 Filter 属性中;  条件表达式主要用于条件的比较判断,比如流程中条件分支环节就需要条件表达式来判断;  执行者表达式主要用于流程中获取执行者和执行者范围,主要使用组织函数。 X5 中提供的函数,既可以单独使用,又可以组合使用;有的函数是无参数的,有的函数是有参 数的。根据具体的需求,选择或者组合使用适当的表达式。 4.4.2 表达式编辑器 使用表达式编辑器完成选择函数,输入参数的工作。表达式编辑器功能十分强大,既可以直接 选择函数使用,也可以进行表达式的编辑。表达式编辑器如下图所示: X5 快速开发指南 2011 Justep Corp. 第 77 页 共 219 页 起 步 科 技 图 4.27 表达式编辑器  表达式编辑器的使用 表达式编辑器的使用也很简单,如果不需要选择函数,可以直接在下方的编辑区域写入常量, 如果是数字常量,则直接写入,如:3、5.8 等;如果是字符串常量,则需要使用英文输入状态下单 引号引起来,如:’起步科技’。 如果需要使用函数,则先在左侧的“函数列表”中选择一个需要的函数,在右侧的参数界面中 填入相应的参数。函数的参数填写完毕后,点击下方的“添加”按钮,编辑后的函数,就添加到了 下方的编辑区域;如果同一个表达式中还需要其它的函数,则继续选择函数,填写参数,最后,在 下方编辑区域点击新函数添加的位置,再点击“添加”按钮,新函数就添加到编辑区域中,光标所 在的位置;也可以在编辑区域中,完全手动输入代码,编写表达式,但需要严格区分大小写。如上 图所示。  功能按钮 在编辑区域上面有一排功能按钮,功能按钮的意义也一目了然。当编辑表达式时,点击其中的 任何一个按钮,就在编辑区域中添加一个相应的操作符:  值比较 表达式中字符串值、数字值的比较都可以使用>、=、<操作符及它们的组合操作符,如 3>2、’aaa’=’aaa’。不等于使用 NOT 或者<> 表示,如 NOT(‘aaa’=’bbb’)、’aaa’<>’bbb’  常用表达式实例 以下是列举的一些常用函数及组合用法:  需求:公司简称+“-”+“SMT”+“-”+年月日+3 位流水号 表达式: nextSeqString(concat('北京起步-JUSTEP-',toString(currentDate())),'000')  需求:取得当前流程中业务数据的某个字段的值 表达式:relationValue('X5_CostRequest',getProcessData1(),null,null,'fMoney', '/x5demo/bizDemo/data') 其中:X5_CostRequest 是业务数据的概念,getProcessData1()是一个系统函数,用于获 得流程中关联的业务数据的主键,fMoney 返回值的关系,/x5demo/bizDemo/data 当 前流程用到的业务数据模型  需求:取得当前人所在部门下的有当前环节权限的人 表达式:findOrgUnitsHasCActivity(currentDeptID(), false)  需求:取得当前人所在部门的管理者 表达式: findManagers(currentDeptID(), 'SYSTEM', true, '') 更多的表达式函数用法,请参见 X5 提供的 API 文档。 如果 X5 平台提供的现有函数不能满足需求,还可以自定义函数。请参见下一节 4.4.2 自定义 X5 快速开发指南 2011 Justep Corp. 第 78 页 共 219 页 起 步 科 技 函数。 4.4.3 自定义函数 X5 中的函数由 Java 文件、Fn 文件组成,Java 文件作为函数功能的底层实现,提供 Java 方法 接口,Java 文件又分为动态和静态两种,分别存放在 logic/code 目录下的 dsrc 和 src 目录下;Fn 文件是 Xml 格式的文件,对 Java 方法进行了包装,提供非 Java 的外部使用的接口。平台提供的函 数就是通过这种方式实现的,如下图所示: 图 4.28 系统函数 X5 中函数的开发归纳起来,分为两个部分:Java 文件的开发、Fn 文件的开发。用户如果要自 定义函数,也需要完成这两件事情。 自定义函数的具体步骤如下: 1. 创建 fn 目录 在 BIZ 层的业务模块目录下的 logic 目录下新建一个目录,本例中,在“模型资源视图”的 BIZ 模型目录中的“x5demo/baseDemo/logic/”目录上,右键单击,选择“新建”->“文件夹”,新建一 个目录,命名为 fn,且只能命名为 fn。如下图所示: 注意 使用表达式时,需注意以下几点: 1、 所有的字符常量都必须用英文的单引号引起来 2、 值比较直接使用比较操作符,>、=、<、>=、<= 3、 用 NOT 或者<> 表示不等于 X5 快速开发指南 2011 Justep Corp. 第 79 页 共 219 页 起 步 科 技 图 4.29 新建文件夹 在弹出的对话框中,命名 fn。 2. 创建 Fn 文件 Fn 文件对 Java 代码进行了包装,使面向 Java 的开发接口,转变为面向函数的接口。Fn 文件中 定义函数调用的 Java 方法及参数。Fn 文件创建在 BIZ 层业务模块目录下的 logic/fn 目录下。本例 中,在“模型资源视图”的 BIZ 工程目录中的“x5demo/baseDemo/logic/fn”目录上,右键单击, 选择“新建”->“Fn 文件”,在弹出的“新建 Fn 文件”窗口中,输入文件名,点击“完成”按钮即 可。新建 Fn 文件如下图所示: 图 4.30 新建 Fn 文件 在新创建的 Fn 文件中添加函数定义,如下图所示。 X5 快速开发指南 2011 Justep Corp. 第 80 页 共 219 页 起 步 科 技 图 4.31 在 Fn 文件中新建函数 函数基本信息中各个属性的意义解释如下: 表 4.3 函数基本属性介绍 属性名称 说明 名称 定义函数显示名称 类别 定义函数的分类,在表达式编辑器中使用,如下图所示 标识 定义函数名 代码模块 定义函数对应的 Java 文件的路径 代码 定义函数对应的 Java 方法是哪个类中的哪个方法 类型 表示函数的返回值数据类型,此属性如果不写,则返回值类型为默 认的 Object 类型。 参数列表 定义函数的参数,此处定义的函数的参数必须与此函数对应的 Java 方法的参数从名称上、数据类型上、数量上、顺序上保持一致;参 数的名称属性表示参数的名称,参数的类型属性表示参数的数据类 型 X5 快速开发指南 2011 Justep Corp. 第 81 页 共 219 页 起 步 科 技 图 4.32 表达式编辑器中的自定义函数 3. 创建 dsrc 目录 在“模型资源视图”的 BIZ 工程目录中的“x5demo/baseDemo/logic/code”目录上,右键单击, 选择“新建”->“文件夹”,创建 dsrc 目录: 4. 创建 Java 文件 在“模型资源视图”的 BIZ 工程目录中的“x5demo/baseDemo/logic/code/dsrc”目录上,右键 单击,选择“新建”->“Java 文件”,如下图所示: 图 4.33 创建动态 Java 文件 在弹出的“新建 Java 文件”窗口中,输入 Java 类名,在 dsrc 下建的是动态 Java 文件,不需 要包名,最后点击“完成”按钮,就创建了一个动态 Java 文件,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 82 页 共 219 页 起 步 科 技 图 4.34 新建动态 Java 文件向导 接下来,在新建的 Java 文件中编辑 Java 代码,这与通常的 Java 开发一样,但是,开发中使用 的工具类是 X5 平台提供的,在 X5 中如何进行 Java 开发,请参见 4.6 Java 开发 一节。 本例中,在新建的 Java 文件中,添加代码,如下图所示: 图 4.35 动态 Java 代码 至此,完成了自定义函数的开发。  使用静态 Java(或者 jar) 上面介绍了函数中调用动态 Java 的方法,下面介绍调用静态 Java(适用于 jar)的方法。 1、使用静态 Java 文件 在 logic/code 上新建 src 目录,在 src 目录上新建 Java 文件 2、使用 jar 将 jar 放到 logic/code/lib 目录下 X5 快速开发指南 2011 Justep Corp. 第 83 页 共 219 页 起 步 科 技 3、Fn 文件中函数的定义 代码模块选择/x5demo/bizDemo/logic/code 代码填入 com.justep.utils.StaticFun.getData 此类 Java 文件,需要包名,称之为静态的 Java 文件,静态的 Java 文件在程序运行时进行修改 后,需要重新编译才能生效。  如何使用自定义函数? 用户自定义函数的使用方法跟 X5 提供的函数的使用方法一样,通过以下配置,自定义函数会按 照其定义的分类出现在表达式编辑器的函数列表中: 1. 引用自定义函数模块 自定义函数作为默认值表达式函数或者 KSQL 内存函数使用,需要在 Ontology 文件中引用 logic/code/fn 目录。 自定义函数作为条件表达式函数或者执行者表达式函数使用,需要在 Process 文件中引用 logic/code/fn 目录。 下面以默认值为例介绍。 在 “ 模 型 资 源 视 图 ” 的 BIZ 工 程 目 录 中 , 打 开 “x5demo/baseDemo/ontology/base.ontology.m”本体文件,进入“包含/引用”界面,在“引用(USE)” 编辑框中,点击“添加”按钮,在弹出的“选择模型”对话框中,选中自定义的 fn 目录 “/x5demo/baseDemo/logic/fn”,点击“确定”按钮。如下图所示: 图 4.36 引用自定义函数目录 2. 使用自定义函数 在本体文件中引入自定义函数模块之后,在表达式编辑器的函数列表中,就可以看到自定义开 发的表达式函数了。 本例中,把自定义函数作为关系默认值来使用。在“模型资源视图”的 BIZ 工程目录中,打开 “x5demo/baseDemo/ontology/base.ontology.m”本体文件,进入“概念模型”界面,选中“客户 编码”这个关系,选择自定义函数作为其默认值。如下图所示: X5 快速开发指南 2011 Justep Corp. 第 84 页 共 219 页 起 步 科 技 图 4.37 自定义函数设为默认值 3. 查看效果 打开客户信息功能,点新增按钮,在客户编码中填入了目前最大的客户编码,界面效果如下: 图 4.38 自定义函数运行效果 4.5 动作 Action Action 是什么? Action 是用户请求和业务逻辑之间的桥梁,每个 Action 充当客户的一项业务代理。在 传统的 MVC 项目中,在创建了 Action 的实例后,会调用 Action 的 execute(),Action 的 X5 快速开发指南 2011 Justep Corp. 第 85 页 共 219 页 起 步 科 技 excute()方法调用模型的业务方法,完成用户请求,然后根据执行结果把请求转发给其他 合适的 WEB 组件。 X5 中 Action 也具有同样的内涵。X5 中的 Action 描述了一个动作或者一个业务逻辑。X5 中的 Action 由 Java 代码、Procedure 定义文件、Action 定义文件组成。其中,Java 代码是 Action 的底层代码实现;Procedure 定义文件起到了对 Java 接口方法的重载,并且与 X5 中 的工作流引擎统一起来,也就是说工作流引擎通过 Procedure 可以调用自定义的 Action 的 Java 方法;Action 定义文件是对 Java 代码的最外层封装,实现了 Action 的功能,使面向 Java 开发的接口转变为面向非 Java 开发的接口。 X5 中 Action 作用是什么? Action 是 X5 中 UI 层和 BIZ 层相互通信的唯一途径。Action 封装了一定的业务逻辑。 X5 中 Action 运行原理是什么? X5 中 Action 运行原理也比较简单,有两个地方可以调用 Action,分别是 UI 界面、流程, UI 界面也可以调用流程。UI 界面或者流程调用定义好的 Action,向 Action 发出请求,Action 将请求转发给 Procedure,Procedure 根据描述文件,找到具体的 Java 方法,把请求转发给 Java 方法,Java 方法经过处理后,把处理结果返回给 Procedure,Procedure 再返回给 Action, Action 把处理结果返回给 UI 界面或者流程,最终由 UI 界面或者流程进行展示或者处理 X5 中 Action 的存放是有规范的,Action 的定义文件存放在 BIZ 模型目录下的业务模块 中的 logic/action 目录下;Action 所引用的 Procedure 的定义文件跟 Action 的定义文件存 放 在 相 同 目 录 下 ;Action 所 关 联 的 Java 文 件 存 放 在 BIZ 模型目录下的业务模块中的 logic/code 目录下。Action 目录结构如下所示: 图 4.39 X5 中 Action 目录结构 流程中如何调用 Action,具体请参见 2.4 流程建模 中 2.4.2 动作设置 一节。 UI 层如何调用 Action,具体请参见 5.4Action 调用一节。 X5 快速开发指南 2011 Justep Corp. 第 86 页 共 219 页 起 步 科 技 4.5.1 常用 Action 使用 X5 开发系统,Action 的使用是很频繁的。X5 平台中提供了许多有用的 Action,实 际开发中,这些 Action 经常被用到。本节中简要介绍几个常用的 Action,更多的 Action 请 参见 X5“模型资源视图”中 BIZ/system/logic/action、BIZ/ SA/opm/logic/action 两个目 录。 表 4.4 常用 Action Action 名称 用途 ksqlQueryAction 执行 ksql 查询的 Action,返回查询出的结果 sqlQueryAction 执行 sql 查询的 Action,返回查询出的结果 queryOrgAction 执行组织机构的查询,返回查询出的结果 开发者如果要引用平台提供的 Action 或者是其它应用中的定义的 Action,需要在当前业 务模块中的 ontology 文件中引入该 Action 所对应的概念模型文件所在的目录,在 process 文件中引入该 Action 的定义文件所在目录及 Java 代码所在目录,也就是 logic/action、 logic/code 这两个目录需要被引入到当前业务模块中。如何进行资源的引用,请参见 3.1.1 概念 一节中 包含引用 这一部分。 4.5.2 自定义 Action 如何自定义开发 Action? 讲完了 Action 的运行原理,下面介绍如何自定义开发 Action。由 X5 中 Action 的定义 可知,开发 Action 需要涉及三个文件:Action 文件、Procedure 文件、Java 文件。这 3 个 文件都在 logic 目录下,其中 Action 文件、Procedure 文件在 logic/action 目录下;Java 文件在 logic/code 目录下。 1、新建 action 文件 Action 文件创建在 BIZ 层的业务模块目录下的 logic/action 目录中。本例中,在“模型资源 视图”的 BIZ 模型目录中的“x5demo/baseDemo/logic/action”目录上,右键单击,选择“新建” ->“Action 文件”,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 87 页 共 219 页 起 步 科 技 图 4.40 新建 Action 文件 在弹出的“新建 Action 文件”窗口中,输入文件名称,本例中输入“test”,最后,点击“完 成”按钮,就创建了新的 Action 文件。 2、添加新 Action 在 Action 文件的“设计”界面中,点击左上角的“添加”按钮,添加一个新的 Action,在右 侧的“基本信息”中,输入名称和标识,标识在调用 Action 时是必填的,不能使用中文,本例中输 入的标识是“testParaAction”。“是否是全局”选项表示该 Action 是否是全局的 Action,如果选 中是全局,则表示,该 Action 不需要在 Process 文件中引入,就可以被使用,如果不是全局的,则 必须先在 Process 文件中引用该 Action,才能被使用。此处不选中。如下图所示: 图 4.41 配置 Action 文件 X5 快速开发指南 2011 Justep Corp. 第 88 页 共 219 页 起 步 科 技 3、添加 Action 的参数 “基本信息”配置完成后,在下面的“参数列表”中,点击“添加”按钮,添加参数。本例中, 添加的参数名称为“ksql”,范围选择“public”,类型选择“String”。如下图所示: 图 4.42 添加 Action 的参数 4、生成 Procedure Action 定义完成后,点生成按钮,弹出生成 Procedure 窗口,如下图所示:点确定按钮 生成 Procedure。 图 4.43 生成 procedure 5、写 Java 代码 生成 procedure 后,点代码按钮,会自动跳转到代码页面,我们添加几行简单的代码, X5 快速开发指南 2011 Justep Corp. 第 89 页 共 219 页 起 步 科 技 如下图所示: 图 4.44 Action 的 Java 文件 至此,自定义开发 Action 结束。 如何使用自定义开发的 Action? 自定义开发完 Action 后,接下来可以在 UI 界面或者流程中使用自定义的 Action。自定义开发 的 Action 的使用方法跟 X5 提供的 Action 的使用方法一样。 UI 层如何调用自定义开发的 Action,具体请参见 5.4 Action 调用一节。 流程中如何引用自定义开发的 Action,具体请参见 2.4 流程建模 中 2.4.2 动作设置 一节。 4.5.3 Action 参数赋值 Action 的参数范围有 4 种类型,分别是 public、protected、private 和 permission。其中 public 类型的参数可以在界面调用 Action 时赋值,具体请参见 5.4 Action 调用一节;private 类型的参 数在 action 声明时赋值,不再在其它地方赋值;permission 类型的参数在角色管理功能中设置, 具体请参见 X5 管理员使用手册 5.2.doc.。 下面介绍 protected 类型的参数的赋值方法。打开 process 文件,进入动作设置窗口,如下图 所示。 X5 快速开发指南 2011 Justep Corp. 第 90 页 共 219 页 起 步 科 技 图 4.45 动作设置 选中一个动作,点参数设置中的添加按钮,出现如下图所示对话框。 图 4.46 添加 Action 的参数 选中要赋值的参数后,点确定按钮返回。如下图所示,在值中输入相应的内容即可。 X5 快速开发指南 2011 Justep Corp. 第 91 页 共 219 页 起 步 科 技 图 4.47 设置参数的值 点确定按钮完成参数的赋值。 4.6 Java 开发 在 X5 中 Java 开发是很常见、很重要的开发,首先就要求开发者有一定的 Java 开发基础,才能 在 X5 中有效地进行 Java 开发。 Java 在 X5 中起什么作用? Java 在 X5 中起三个方面的作用:Java 代码是 X5 底层实现的主要代码载体;Java 在 X5 中可以 实现业务逻辑的开发;Java 可以在 X5 平台上进行扩展开发。 在 X5 中如何进行 Java 开发? 在 X5 中进行 Java 开发,需要在 logic/code 目录下新建名为 dsrc 或者 src 目录,在这两个目 录上都可以右键单击,选择“新建”->“Java 文件”,创建 Java 文件。需要注意的是,在 dsrc 目 录中创建的 Java 文件不需要包名,称之为动态的 Java 文件,动态的 Java 文件在程序运行时可以修 改,并且不需要重新编译就能生效;在 src 目录中创建的 Java 文件,需要包名,称之为静态的 Java 文件,静态的 Java 文件在程序运行时进行修改后,需要重新编译才能生效。 在开发 Java 代码时,需要把 Java 文件所在目录设置为“源文件路径”。Java 文件所在目录设 为“源文件路径”后,Java 的开发环境就与普通的在 Eclipse 中开发 Java 一样了。在 X5 的“模型 资源视图”中,右键单击 dsrc 目录或者 src 目录,选择“设置 src 为源路径”,该目录就被设为源 路径目录了。“源文件路径”设置如下图所示: X5 快速开发指南 2011 Justep Corp. 第 92 页 共 219 页 起 步 科 技 图 4.48 设置源码路径 设置后,如下图所示: 图 4.49 源码路径 如果要从源码路径中取消,则右键单击该源码路径,选择“移除源码路径”就可以了,如下图 所示: X5 快速开发指南 2011 Justep Corp. 第 93 页 共 219 页 起 步 科 技 图 4.50 移除源码路径 接下来在 Java 文件中进行开发,就与通常的 Java 开发一样了。 本节将从 X5 提供的常用 Java 方法(类)介绍、Java 操作数据库、X5 中 Java 调试等几个方面 讲解 X5 中的 Java 开发。 4.6.1 常用 Java 类及方法介绍 X5 是基于 Java 开发出来的平台产品,X5 的底层是使用 Java 实现的,因而,X5 本身就提供了 很多面向 Java 的开发接口及相关的工具类。本节中只简单介绍几个开发中常用的方法类,更多更具 体的介绍请参见 X5 提供的 API 文档中 Java 这个部分。 介绍几个常用的 Java 类及方法  com.justep.system.data.KSQL() 说明:KSQL 语句的执行接口类。 常用方法:KSQL.select(KSQL,参数,数据模块路径,函数模块路径) 说明:通过 KSQL 访问数据库,执行 select 操作,返回结果集 Table 对象 案例:Table table = KSQL.select(“select * from 概念名”, null, "/x5/biz/data", null); KSQL. executeUpdate (KSQL,参数,数据模块路径,函数模块路径) 说明:通过 KSQL 访问数据库,执行 select 操作,返回结果集 Table 对象 案例:KSQL. executeUpdate (“update 概念名 set ”, null, "/x5/biz/data", null);  com.justep.system.data.Table() 说明:Table 是用行(row)、列(column)描述的二维结构的数据集,目前主要存放 ksql 查询结果 常用方法:Table table.iterator(); 说明:得到状态为 NONE, EDIT, NEW 的所有行的迭代器 提示:开发 Java 时,请先将系统目录/BIZ/system/logic/code/dsrc 设置为源码路径。 X5 快速开发指南 2011 Justep Corp. 第 94 页 共 219 页 起 步 科 技 案例:Iterator rows = table.iterator(); Table table.iterator(com.justep.system.data.ModifyState) 说明:得到指定状态的行的迭代器 案例:Iterator rows = table.iterator( com.justep.system.data.ModifyState.EDIT );  com.justep.system.process.ProcessUtils() 流程相关的工具类 常用方法:ProcessUtils.getProcessData1() 说明:获取当前流程实例关联的业务数据 案例:String sData1 = ProcessUtils.getProcessData1(); 4.6.2 访问数据库 Java 操作数据分为两种方式,一种是通过操作“概念”,对数据进行操作;另一种是通过直接 操作数据库,对数据进行操作。X5 中已经封装了对数据库的连接,开发者只需在 Java 中引用相关 类及方法,就可以取得对数据库的连接。 4.6.2.1 使用 KSQL 在 X5 的 Java 开发中,可以使用 KSQL 进行数据操作。KSQL 与 SQL 在语法上相近,区别在于 KSQL 操 作的是“概念”,SQL 操作的是“数据库表”,KSQL 的具体介绍,请参见 3.4.2 KSQL 介绍 一节。KSQL 使用平台事务,因此不需要关心事务。 在 Java 中,使用 KSQL 进行查询数据操作,使用 select 方法,例如: import Java.util.Iterator; import com.justep.system.data.KSQL; import com.justep.system.data.Row; public class DynamicFun { static public String getCustomerMaxCode(){ try { //定义查询ksql,在KSQL中必须使用别名,概念标识和关系标识是大小写敏感的 String kSql="select max(X5_Customer.fCustomerCode) as fCustomerCode " +" from X5_Customer X5_Customer"; //执行select取得数据。Table是返回的数据集 com.justep.system.data.Table table = KSQL.select(kSql, null, "/x5demo/baseDemo/data", null); Iterator rows = table.iterator(); Row row; row = rows.next(); int result = Integer.parseInt(row.getString("fCustomerCode")) + 1; return "" + result; } catch (Exception e) { throw new RuntimeException (e.getMessage()); } } } 在 Java 中,使用 KSQL 进行更新数据操作,使用 executeUpdate 方法,例如: public static void costRequestProcessAfterFinish() { try { X5 快速开发指南 2011 Justep Corp. 第 95 页 共 219 页 起 步 科 技 String key = com.justep.system.process.ProcessUtils.getProcessData1(); // 定义更新ksql,由于概念没有主键关系,所以使用概念别名作为概念的主键 String kSql = "update X5_CostRequest a set a.fState='已审批' where a='" + key + "'"; KSQL.executeUpdate(kSql,null,"/x5demo/bizDemo/data",null); } catch (Exception e) { throw new RuntimeException (e.getMessage()); } } 4.6.2.2 使用 SQL 使用 SQL 方式访问数据表时,和标准 Java 的方法相同。关于事务,即可以使用平台的自动事务, 也可以自己控制事务。 1、使用平台事务。 使用 com.justep.model.ModelUtils.getConnectionInTransaction("data 模块路径")方法,获 得指定数据模块的数据库连接。这个连接已经在平台的事务中,回滚和提交平台自动处理。连接不 必手动关闭,平台会关闭。 例如:com.justep.model.ModelUtils. getConnectionInTransaction("/x5demo/bDemo/data") 获得/x5demo/bDemo/data 数据模块的数据库连接。 完整代码如下: System.out.println("##平台负责事务"); java.sql.Connection conn = null; java.sql.PreparedStatement pstmt = null; try { // 取得数据库连接 conn = com.justep.model.ModelUtils.getConnectionInTransaction("/x5demo/bDemo/data"); // 更新一个字段 pstmt = conn.prepareStatement("update DE_JKSQD set fJE = fJE+1 where fID = ?"); pstmt.setString(1, com.justep.system.process.ProcessUtils.getProcessData1()); pstmt.execute(); // 更新另一个字段 pstmt = conn.prepareStatement("update DE_JKSQD set fBZ = '审批中' where fID = ?"); pstmt.setString(1, com.justep.system.process.ProcessUtils.getProcessData1()); pstmt.execute(); } catch (NamingException e) { throw new RuntimeException(e); } catch (SQLException e) { //手工回滚事务或者抛出异常都可以 //ContextHelper.getTransaction().rollback(); throw new RuntimeException(e); } finally { try { if (pstmt != null) { pstmt.close(); } } catch (SQLException e) { System.out.println("##close.SQLException"); } } 2、自己控制事务 使用 com.justep.system.data.Transaction() 方法,获得一个新的事务,使用 getConnection("data 模块路径")方法,获得指定数据模块的数据库连接。这个事务不在平台的 事务中,因此回滚和提交都需要处理。这个连接需要手动关闭。 开始事务——begin() 提交事务——commit() X5 快速开发指南 2011 Justep Corp. 第 96 页 共 219 页 起 步 科 技 回滚事务——rollback() 完整代码如下: System.out.println("##自己控制事务"); java.sql.Connection conn = null; java.sql.PreparedStatement pstmt = null; com.justep.system.data.Transaction tx = null; try { // 取得数据库连接 tx = new com.justep.system.data.Transaction(); conn = tx.getConnection(DataModel); tx.begin(); // 更新一个字段 pstmt = conn.prepareStatement("update DE_JKSQD set fJE = fJE+1 where fID = ?"); pstmt.setString(1, com.justep.system.process.ProcessUtils.getProcessData1()); pstmt.execute(); // 更新另一个字段 pstmt = conn.prepareStatement("update DE_JKSQD set fBZ = '审批中' where fID = ?"); pstmt.setString(1, com.justep.system.process.ProcessUtils.getProcessData1()); pstmt.execute(); tx.commit(); } catch (NamingException e) { throw new RuntimeException(e); } catch (SQLException e) { tx.rollback(); throw new RuntimeException(e); } finally { try { if (pstmt != null) { pstmt.close(); } if (conn != null) { conn.close(); } } catch (SQLException e) { System.out.println("##close.SQLException"); } } 4.6.2.3 X5 平台事务管理介绍 X5 平台以 Action 为单位进行事务管理。事务管理范围从 Action 的 before 事件、Action 本身 到 Action 的 after 事件。如果包含 Action 嵌套调用,也同样在一个事务中处理。事务的启动时机: 当执行到第一个增删改操作时自动启动事务,到 Action 结束时自动结束事务。。 4.6.3 调试 4.6.3.1 Java 调试 Java 的开发过程中,不可避免地要涉及到代码调试,熟练地掌握 Java 开发的调试,是提高个 人开发能力和项目开发效率的有效途径。由于 X5 的 Studio 控制台是基于 Eclipse 开发的,所以, X5 中对 Java 代码的调试跟在 Eclipse 中对 Java 代码进行调试的方法是一样的。下面简要介绍如何 在 X5 的 Studio 中对 Java 代码进行调试。 对 Java 代码进行调试,首先把 Tomcat 设置为“以调试模式启动”,再设置被调试的源文件路径, 最后,在要调试的 Java 文件中设置断点。具体步骤如下: X5 快速开发指南 2011 Justep Corp. 第 97 页 共 219 页 起 步 科 技 1. Tomcat 设置为以调试模式启动 打开 Studio 的“窗口”->“首选项”,弹出“首选项”窗口,在左侧功能树中点击“Studio 配 置”->“Tomcat”,在右侧“JVM 设置”界面中,取消“不以调试模式启动 Tomcat”选项,如下图所 示: 图 4.51 Tomcat 设置 2. 设置源文件路径 在源文件路径中,取消“自动设置源文件目录”的选项,点全选按钮选中“BIZ”、“UI”和“ mobileUI” 模型目录,如下图所示:然后点击“应用”按钮。 3. 在 Java 代码中设置断点 以上设置完成之后,就可以在 Java 代码中设置断点了,在 Java 文件最左侧双击,就会出现一 个断点,再双击该断点,就取消了断点设置。如下图所示: X5 快速开发指南 2011 Justep Corp. 第 98 页 共 219 页 起 步 科 技 图 4.52 设置断点 执行功能后,自动就进入调试状态的断点中。先弹出确认界面,如下图所示: 图 4.53 切换确认 点击“是”按钮,就进入调试视图中设置的第一个断点处,方法中的变量随着调试会自动出现 在变量页中。如下图所示: X5 快速开发指南 2011 Justep Corp. 第 99 页 共 219 页 起 步 科 技 图 4.54 执行断点调试 4.6.3.2 配置控制台显示调试信息 默认情况下控制台只输出很少量的信息,如果我们需要看到:界面刷新数据时平台执行了什么 样的 KSQL、SQL 等信息,就需要改变控制台信息输出的模式,改为输出调试信息。 在 X5 的 Studio 版本文件中,找到 X5.2.3_dev\X5.2.3\runtime\BusinessServer\ WEB-INF\justep.log.properties 这个文件,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 100 页 共 219 页 起 步 科 技 图 4.55 justep.log.properties 文件 打开这个文件,找到下面这行代码: log4j.rootLogger=INFO,CONSOLE,X5 把上面代码中的 INFO 修改为 DEBUG,修改后的代码如下所示: log4j.rootLogger=DEBUG,CONSOLE,X5 重启 Tomcat,会看到控制台中多输出了很多信息。打开一个功能,可以看到控制台输出了 KSQL 和 SQL 语句。 图 4.56 控制台输出调试信息 X5 快速开发指南 2011 Justep Corp. 第 101 页 共 219 页 起 步 科 技 第5章 界面建模 本章要点:  组件综述  常用组件介绍  JavaScript 开发  Action 调用 整个建模过程分为三个步骤,分别是:数据建模、流程建模和界面建模。其中,界面建模实现 了人机交互、数据展现、界面逻辑等功能。 X5 平台将界面分成界面展现部分和逻辑代码部分。界面展现部分包括.w 文件和 Excel 文件;逻 辑代码部分是 js 文件,js 文件中可以进行调试。在建模过程中,如果要修改界面展现,就在.w 或 者 Excel 文件中进行修改,如果要修改逻辑代码,就在 js 文件中进行修改。 界面模型示意图如下: 图 5.1 界面模型示意图 5.1 组件综述 X5 平台的界面展现是由组件构成的,组件是一个可以以图形化方式显示在屏幕上,并能与用户 进行交互的对象;组件是对数据和方法的封装,组件可以有自己的属性、事件和方法。属性是 组件数据的简单访问者,事件是可以被组件识别的操作,方法则是组件的一些简单而可见的 功能。 X5 平台最大特色之一就是拥有数据感知组件。所谓数据感知组件,就是指:能够自动显示数据 库中记录内容的组件。它们可以从数据库中取得记录内容并显示,同时又可以将用户对记录的修改 结果保存回数据库中。例如,X5 平台中的输入框、输出框、下拉框、文本框、表格等组件。 X5 平台提供不同用途的两类组件,分别是 Rich 组件和 Mobile 组件。其中 Rich 组件用于 PC 和 Pad 的界面开发,具有完全的数据感知能力,可开发复杂的交互界面;Mobile 组件用于手机终端的 界面开发,支持 iPhone 和安卓操作系统。本章中介绍 Rich 组件的用法。 5.1.1 使用设计器 X5 平台的另一特色是具有可视化的 UI 设计器,X5 的 UI 设计器实现了 Web 界面的可视化、拖拽 化开发,具有所见即所得的特性。 浏览器 界面模型 流程建模 W Excel JS Action X5 快速开发指南 2011 Justep Corp. 第 102 页 共 219 页 起 步 科 技 流程建模完成后,接下来进行界面建模。本例中主要讲解如何使用 UI 设计器进行界面建模,相 关的数据模型和流程模型使用在第二章中已经创建过的数据模型和流程模型,这里不再详细介绍, 具体请参见 2.3 数据建模一节和 2.4 流程建模 一节。 首先,新建 W 文件。右键单击 UI 模型目录下的 process 文件夹下级目录,点“新建”,如下图 所示,点“W 文件”,选择空白页(UI),点击完成,默认进入 UI 设计器界面。 图 5.2 新建 W 文件 然后,用 UI 设计器设计界面。其步骤主要有:添加 data 组件、添加布局、设计列表页和设计 详细页。 1、 添加 data 组件 在 UI 设计器右侧组件面板中,鼠标单击选中“数据”分组下的“bizData”组件,放到设计器 中的“model”组件上(在 model 组件上单击即可),如下图所示: X5 快速开发指南 2011 Justep Corp. 第 103 页 共 219 页 起 步 科 技 图 5.3 添加 data 2、 设置 bizData 组件的属性 bizData 组件关联一个概念,存放这个概念中的数据。选中 bizData 组件,在属性面板中点 concept 右边的按钮,选择一个概念,设计器会自动设置这个概念的 reader、writer、creator 属 性,如下图所示。并将 bizData1 组件的 auto-load 属性设为 true。 图 5.4 bizData 组件 concept 属性 3、 添加布局组件 在 UI 设计器右侧组件面板中,选择“布局”分组下的 tabPanel 组件,放到设计器中,并将 height 和 width 属性设置为 100%。如下图所示: 提示:data 组件和 bizData 组件放在 model 组件里面。dataQ 组件和 bizDataQ 组件放在 modelQ 组件里面。 界面中如果放置了 Rich 组件,就需要放置 model 组件。 X5 快速开发指南 2011 Justep Corp. 第 104 页 共 219 页 起 步 科 技 图 5.5 添加布局组件 4、 设计列表页 首先选中“列表”页签,在设计器右侧的布局面板中,选择 “工具栏”分组下的 toolbars 组 件,放到设计器中。再在 toolbars 上面放置“工具栏”分组下的 navigatorBar 组件,navigatorBar 组件的 data 属性需要关联到先前放置的 bizData 组件,如下图所示: 图 5.6 添加工具栏组件 然后在设计器的组件面板中,先选中“布局”分组下的 view 组件,把 view 组件添加到 tabPanel 组件上,设置 auto-load 属性为 true。height 和 width 属性为 100%。然后右键点击设计器中 bizData1 组件,选择“生成 Grid 视图”,在弹出框中选择刚才新添加的 view 组件的 id,如下图所示: 图 5.7 生成 Grid 视图 X5 快速开发指南 2011 Justep Corp. 第 105 页 共 219 页 起 步 科 技 图 5.8 Grid 列表设计 点下一步按钮,选择需要显示的列,最后点击完成按钮,生成 grid 列表视图,如下图所示: 图 5.9 grid 列表视图 5、 设计详细页 选中“详细”页签,同设计列表页一样,加一个工具栏组件和一个 view 组件,设置 view 的 auto-load 属性为 true。然后右键点击设计器中 bizData1 组件,选择“生成绝对布局”,在弹出的 对话框中,选择新增的 view 组件的 id,点击“下一步”按钮,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 106 页 共 219 页 起 步 科 技 图 5.10 详细页面设计 点下一步按钮,选择需要在详细页面上显示的项目:点下一步按钮,在对话框的参数设置中, 输入每行显示的列数,点击完成按钮,如下图所示: 图 5.11 控制 “绝对布局”效果如下图所示。 X5 快速开发指南 2011 Justep Corp. 第 107 页 共 219 页 起 步 科 技 图 5.12 绝对布局效果 运行效果如下图所示。 图 5.13 运行效果 提示:data 组件和 view 组件都有 auto-load 属性,此属性设置该组件是否自动加载。用于优化界面。需要在界面 打开时就加载,将 auto-load 属性设为 true,否则设为 false,在需要的时候再进行手动加载。 X5 快速开发指南 2011 Justep Corp. 第 108 页 共 219 页 起 步 科 技 5.1.2 使用组件 X5 平台提供了丰富的组件,便于界面开发。本节中基于上一节开发的界面实例,通过使用更合 适的组件,来对界面效果进行细化;通过设置组件的属性和事件,提高交互能力,使界面更加友好, 功能更加完善。 本例中介绍:添加一个文本输入框组件来提高界面交互能力。添加事件并在事件中调用组件的 方法实现更加友好的界面。 5.1.2.1 添加组件 1、基于上面的例子,首先删除要替换的组件。选择“详细”页签->右键单击要删除的组件-> 选择“删除”,如下图所示。组件前面的 controlLabel 组件也删除。 图 5.14 删除组件 2、添加文本输入框组件。拖拽 UI 设计器组件面板“标准”分组下的 textarea 组件到 view 中。 如下图所示: X5 快速开发指南 2011 Justep Corp. 第 109 页 共 219 页 起 步 科 技 图 5.15 替换组件 3、为新加的组件添加 controlLabel。右键单击新添加的组件,选择“生成 label”。会在组件 的左侧生成一个“label”如下图所示: 图 5.16 生成 label 4、设置文本输入框组件的 ref 属性,指向一个 data 组件的一个关系,表示文本输入框的数据 来源。 X5 快速开发指南 2011 Justep Corp. 第 110 页 共 219 页 起 步 科 技 图 5.17 设置组件的 ref 属性 运行效果如下图所示: 图 5.18 界面效果 5.1.2.2 添加组件的事件 实际应用中常用到双击列表查看详细信息的功能,这时可以通过添加 grid 组件的双击事件来实 现。 在设计器中选择“grid 组件”,在其属性页右侧有一个事件页签,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 111 页 共 219 页 起 步 科 技 图 5.19 grid 事件 双击事件右侧的“事件值”空白处进入 JS 编写界面,本例中使用 onRowDblClick(鼠标双击行 事件),如下图所示: 图 5.20 JS 源码 在 JS 源码页中添加如下代码: justep.xbl("tabPanel1").setTabActive("tabPage2"); 其中 tabPanel1 是 tabPanel 组件的 id,tabPage2 是详细页的 id justep.xbl("tabPanel1")是获得 tabPanel1 的 xbl 组件对象 justep.xbl("tabPanel1").setTabActive("tabPage2")是调用组件的方法,显示指定的tab页。 实际应用中,在列表页点击添加按钮需要跳转到详细页进行数据的添加,在这里可以通过 data X5 快速开发指南 2011 Justep Corp. 第 112 页 共 219 页 起 步 科 技 组件的事件来实现。 选择添加数据时引用的 data 组件。在 data 组件的事件中找到 onAfterNew 事件,如下图所示, 在其右侧的事件值中双击进入 JS 源码界面。 图 5.21 组件事件 JS 源码界面中可以填写如下代码:代码的含义同上。 justep.xbl("tabPanel1").setTabActive("tabPage2"); 以上通过一个简单的实例,介绍了设计器的使用和组件的使用。更多详细信息参见下面的章节。 5.2 常用组件介绍 本节主要介绍 UI 设计器中常用组件。界面组件共分为:数据、布局、标准、工具栏、对话框、 报表、扩展、以及 HTML 八类。在本章主要介绍前 5 类组件。 5.2.1 数据类组件 数据类组件用于存储界面中的数据,并作为数据感知组件的数据来源。数据类组件主要包括 model、bizData 和 data 组件。 5.2.1.1 model 组件 model 是 data 组件的容器。 表 5.1 model 的常用属性 属性名称 用途 Id 唯一标识 表 5.2 model 的常用事件 X5 快速开发指南 2011 Justep Corp. 第 113 页 共 219 页 起 步 科 技 事件名称 用途 Onload 界面加载完毕后,触发该事件。该事件常用于初始化、接收参数等方面 5.2.1.2 bizData 组件 1. bizData 组件的属性和事件 biaData 组件是最常用的数据组件,用于从数据库中取得数据,进行界面展现:下面是它的常 用属性和事件 表 5.3 bizData 的常用属性 事件名称 用途 Id 唯一标识 concept 概念标识,组件关联的概念 reader 获取数据的 action,选择概念后自动带出 writer 修改数据的 action,选择概念后自动带出 creator 新增数据的 action,选择概念后自动带出 oeder-by 数据查询时的排序方式。 update-mode 数据提交模式,如果后台中有 version 这个字段则这个属性选择 whereVersion,否则选择 whereAll。 store-type 数据存储的类型。当界面上需要用 grid 进行数据展现的时候,需要设置 这个属性为 grid,否则为 simple auto-load 是否自动加载数据,与 auto-new 互斥 auto-new 是否新增数据,与 auto-load 互斥 is-tree 设置为 true,表示是树型数据 tree-option parent-relation 树型数据时设置,指向概念中的父关系 node-kind-relation 树型数据时设置,指向概念中的节点类型关系 node-level-relation 树型数据时设置,指向概念中的节点层次关系 virtual-root 树型数据时设置,虚根,给树增加一个虚拟的根节点 root-filter 树型数据时设置,设置根节点的过滤条件,例如 SA_OPOrg.sParent is null master data 从数据时设置,指向主数据的 data 组件的 id relation 从数据时设置,指向从数据中的外键关系 表 5.4 bizData 的常用事件 事件名称 用途 onCustomNew 自定义新增数据,完全接管 new 动作。常用于新增数据时,使用自己的逻辑 方法新增数据。 onNewError 新增数据失败。常用于抛出异常。 onBeforeSave 数据保存前。常用于在保存数据前对数据进行校验和处理。 onAfterNew 数据新增后。常用于在新增数据后实现某些功能等。 onValueChanged 数据修改后,用于在数据改变后进行一些自动化处理。 onIndexChanged 索引改变后,用于当前行改变后进行一些自动化处理。 onDataChanged 数据新增、修改、删除、刷新后,用于进行一些自动化处理。 onRefreshCreateParam 查询数据之前调用,用于准备查询时需要的参数 其它属性和事件请参见 API 文档。 2. 增加计算关系 一些只用于界面显示,而不存于数据库的列,可以使用 bizData 组件的计算关系来实现。给 X5 快速开发指南 2011 Justep Corp. 第 114 页 共 219 页 起 步 科 技 bizData 组件增加计算关系,右键点击设计器中的 bizData 组件,如下图所示: 图 5.22 bizData 增加计算关系 图 5.23 bizData 新增加的计算关系 新增加了 calculate0 关系,这个关系的使用方法同 bizData 中其它的关系。 3. 编辑规则 界面中的组件是否可见、是否只读,以及组件中的数据的有效性检查等功能都可以通过设置规 则来实现。为 bizData 中的概念和关系添加规则。右键点击 bizData 组件,选择编辑规则,如下图 所示: X5 快速开发指南 2011 Justep Corp. 第 115 页 共 219 页 起 步 科 技 图 5.24 编辑规则 在弹出的窗口中选中其中一个关系或概念点击完成,在左侧功能树上 bizData 组件的下方会生 成这个关系或概念的规则组件,这个组件包含一些属性,如下图所示: 图 5.25 规则属性 表 5.5 规则组件的常用属性 属性名称 用途 用法 readonly 是否只读。 设置组件是否只读。 relevant 是否显示 设置组件是否显示 required 是否必须。 设置输入的组件是否必须填写或者选择时是否必须选择 constraint 约束规则。 设置数据有效条件,用于有效性验证 calculate 计算公式 设置计算公式,用于显示计算结果 X5 快速开发指南 2011 Justep Corp. 第 116 页 共 219 页 起 步 科 技 default-value 关系的默认值 在 UI 中设置的关系的默认值 alert 错误提示 必填项未填值或不满足约束时,提示的信息,支持 XPath 表达式 图 5.26 默认值、只读、必填案例 图 5.27 计算关系、计算规则案例 X5 快速开发指南 2011 Justep Corp. 第 117 页 共 219 页 起 步 科 技 图 5.28 数据有效性验证案例 凡是有 ref 属性的组件,都可以通过给 bizData 增加规则的方法,实现控制组件的目的。 4. 增加过滤条件 概念的查询动作中有 3 个查询条件参数,分别是 condition、filter、range。condition 在定 义查询动作中定义,filter 在 bizData 组件中定义,range 在数据权限中定义。它们用 and 关系组 合在一起。 首先点击“增加过滤条件”,然后在左侧功能树上点击新增的 filter0,点击下面属性中 filter 后面的按钮弹出“属性编辑对话框”,在过滤条件中输入过滤条件,最后点击“确定”完成添加。如 下图所示: 图 5.29 过滤条件 X5 快速开发指南 2011 Justep Corp. 第 118 页 共 219 页 起 步 科 技 5. bizData 组件常用方法  获得组件对象 var data = justep.xbl('bizData1');  遍历data for ( var i = 0; i < d.getCount(); i++) { var rowid = data.getRowId(i)  取值 var v = data.getValue('calcCheckBox',rowid);  赋值 data.setValue(fQuantity,0);  设置过滤条件 data.filters.setFilter("idFilter", data.getConceptAliasName() + "='" + id + "'");  刷新data data.refreshData();  新增一条记录 data.newData();  保存记录 data.saveData(); 5.2.1.3 data 组件 data 组件是通用数据组件,即可以在里面存放静态数据,也可以往里面装入查询后返回的数据, 下面是它的常用属性和事件: 表 5.6 data 的常用属性 属性名称 用途 id 主键标识 columns 在页面中要显示的列 store-type 数据存储的类型。当界面上需要用 grid 进行数据展现的时候,需要设置这个属性 为 grid,否则为 simple src 指的是可以给一个 url,这个 url 返回 data 的数据,数据格式是 row,cell 形式 auto-load 是否自动加载,与 auto-new 互斥 auto-new 是否自动新增,与 auto-load 互斥 data 的事件与 bizData 的事件基本相同,不同的是,bizData 有一些事件 data 没有如下表所示: 表 5.7 对比事件 事件名称 bizData data 用途 onNewCreateParam 有 无 新增数据时,给对应的 action 的参数赋值 onRefreshCreateParam 有 无 查询数据时,给对应的 action 的参数赋值数事件,可以 增加和修改用户自定义的参数 onSaveCreateParam 有 无 保存数据时,给对应的 action 的参数赋值 onNewError 有 有 新增数据失败。常用于抛出异常。 onBeforeSave 有 有 数据保存前。常用于在保存数据前对数据进行校验。 onAfterNew 有 有 数据新增后。常用于在新增数据后实现某些功能等。 onCustomNew 有 有 自定义新增数据,完全接管 new 动作。常用于新增数据时, 使用自己的逻辑方法新增数据 其它属性和事件请参见 API 文档。 在通用数据组件中存放静态数据,步骤如下: 1. 定义通用数据组件的列 点通用数据组件的 columns 属性右边的按钮,在弹出的对话框中点增加列并输入列名。 X5 快速开发指南 2011 Justep Corp. 第 119 页 共 219 页 起 步 科 技 图 5.30 通用数据-设置列 2. 编辑数据 右键点击设计界面中的通用数据组件,在弹出的菜单中选择编辑数据。 图 5.31 通用数据-编辑数据 在弹出的对话框中点增加行并添加数据。 X5 快速开发指南 2011 Justep Corp. 第 120 页 共 219 页 起 步 科 技 图 5.32 通用数据-添加数据 5.2.2 布局类组件 布局类组件用于设计页面的大体风格。X5 提供了多种页面风格:包括自动充满、左右分隔条、 上下分隔条、多 tab 页等。 还提供了视图组件,视图组件用来承载任意个显示组件,并根据设定可以按流式布局或绝对布 局的方式来显示它所承载的显示组件。  流式布局指从左到右对该容器里面的组件进行布局,当一行不能容纳时候自动换行。该布 局是从左到右,然后从上到下进行布局显示。  绝对布局是指每个组件的位置信息采用绝对值记录,此种布局方式可以实现界面拖拽,实 现在设计器中所见即所得的效果。 还特别提供了用于显示表格化的界面的两个组件 Cell 布局组件和 Excel 布局组件。  Cell 布局是指通过表格的形式对组件进行布局,该布局可以设置大小一致的行列格子,使 界面整齐美观。适合于开发端没有安装 MS Excel 的开发环境。  Excel 布局的作用和 Cell 布局一样。区别在于它只适合于开发端已经安装 MS Excel 的开 发环境。 布局类组件主要是为生成页面的样式做准备,也可以理解为页面的布局。主要包括下面几种组 件。 5.2.2.1 视图 组件 view 是视图组件,是一个“容器”,用来承载其它组件。我们这里以“rootView”为例,其属 性如下图所示: 表 5.8 view 的常用属性 属性名称 用途 id 组件标识 layout-type 布局方式,容器内组件的布局方式,有流式布局、绝对布局。 auto-load 是否自动加载 style 定义样式,其中 display 表示是否隐藏 出于优化的目的,让 view 在功能打开时不加载,即 auto-load 设置为 false,在需要加载的时 X5 快速开发指南 2011 Justep Corp. 第 121 页 共 219 页 起 步 科 技 候,写如下代码加载 view load_parts("view1"); 其中view1是view组件的ID 5.2.2.2 标签页 组件 tabPanel 是标签页组件,它把一个页面分为若干个标签页。如下图所示。它的属性比较简单, 我们只需要关注 ref 属性即可,ref 是用来设置标签页是否显示。它通过关联一个关系,设置这个 关系规则是否显示(详细用法参见 5.2.1.2bizData 组件一节),来实现标签页的隐藏和显示。 图 5.33 tabPanel 标签 其中的每个页签,都有自己的属性,与 tabPanel 的属性基本相同,如下图所示: 图 5.34 页签属性 X5 快速开发指南 2011 Justep Corp. 第 122 页 共 219 页 起 步 科 技 它们的 ref 属性的用法和 tabPanel 的 ref 属性的用法相同,selectsd 属性是指初始化时是否 默认选中。 表 5.9 tabpanel 页签的常用事件 事件名称 用途 onSelect 某个标签页被选中时触发,通常用于分布加载 onDeSelect 某个标签页脱离选中状态时触发 标签页组件常用方法  将某个页签设置为当前页签 justep.xbl("tabPanel1").setTabActive("tabPage1");  设置某个页签是否显示 justep.xbl("tabPanel1").setVisable("tabPage1",false);  设置某个页签是否可用 justep.xbl("tabPanel1").setDisabled("tabPage1",true); 5.2.2.3 信息提示框 组件 collapsePane 是信息提示框组件,是带信息提示标头的页面,并且可以折叠,如下图所示: 图 5.35 信息提示框组件 表 5.10 collapsePane 的常用事件 事件名称 用途 onCollapse collapsePane 组件折叠时触发 onExpand collapsePane 组件展开时触发 信息提示框组件常用方法  折叠组件 justep.xbl('collapsePanel1').collapse();  展开组件 justep.xbl('collapsePanel1').expand(); X5 快速开发指南 2011 Justep Corp. 第 123 页 共 219 页 起 步 科 技 5.2.2.4 分隔条 组件 Hsplitter 和 Vsplitter 都是分隔条组件,它把页面分成两个部分,通过拖拽它,可以调整它 分隔出的两个区域的界面大小。其中 Hsplitter 是水平分隔条,把界面分成左右两个区域,Vsplitter 是垂直分隔条,把界面分成上下两个区域。如下图所示。 图 5.36 分隔条组件 表 5.11 Hsplitter 和 Vsplitter 的常用属性 属性名称 用途 has-drag-bar 是否显示中间的分隔条 has-arrow-button 是否显示分隔条中的箭头,两个方向的箭头,能使某一侧的界面全部展开 status 初始化时的状态 表 5.12 Hsplitter 和 Vsplitter 的常用事件 事件名称 用途 onRegionResize 改变左右两个部分的大小时触发,通常用于分布加载 5.2.2.5 布局 组件 borderLayout 是一个布局组件。适用于自动充满界面上的某个区域的需求。 从组件面板中拖拽一个 borderLayout 组件,放到设计界面中,该组件自动生成了两个区域 top 和 center,top 实现固定高度,center 实现自动充满。这种结构可以实现上面为固定高度,下面随 着窗口大小自动充满的界面。 X5 快速开发指南 2011 Justep Corp. 第 124 页 共 219 页 起 步 科 技 图 5.37 borderLayout 组件 在 center 区域周围还可以增加 left、right、bottom 等区域,实现不同的自动充满方式。界面 上还可以放置多个 borderLayout 组件,通过修改组件的 height 和 width 属性,例如一个 borderLayout 组件的 height 修改为 60%,另一个修改为 40%,实现更加丰富的界面效果。 图 5.38 borderLayout 的操作 5.2.2.6 Cell 布局 组件 cellLayout 是一个界面布局组件。适用于显示表格化的界面,尤其适合于开发端没有安装 MS X5 快速开发指南 2011 Justep Corp. 第 125 页 共 219 页 起 步 科 技 Excel 的开发环境。。 1、使用向导生成 Cell 布局的页面 在各种向导中,其详细视图的配置中都有布局方式的选择,选择其中的 Cell 布局,即可生成 Cell 布局的页面。如下图所示。 图 5.39 在向导中选择生成 Cell 布局 2、从组件面板中拖拽一个 cellLayout 组件,放到设计界面中,如下图所示。 图 5.40 cellLayout 组件 X5 快速开发指南 2011 Justep Corp. 第 126 页 共 219 页 起 步 科 技 从组件面板中拖拽一个个显示组件,例如 input 组件,放到 cellLayout 组件的单元格中,并相 应设置组件的属性,如下图所示。 图 5.41 在 celllayout 组件中放置其它组件 界面中的文字可以手工输入,也可以使用显示组件生成 label 的功能,如下图所示,在 input 组件上点右键,出现弹出菜单,点生成 label 菜单,就在 input 组件所在的单元格中生成了一个 controlLabel 组件,把这个组件拖拽到 input 组件左边的单元格即可。 图 5.42 生成 label 选中区域——用鼠标左键点中一个单元格,不松开左键,拖动鼠标,即可选择一个区域。 设置网格线——在 celllayout 组件中先选中一个区域,然后点工具条中的 按钮,可以将 X5 快速开发指南 2011 Justep Corp. 第 127 页 共 219 页 起 步 科 技 选中区域的边框线设置为新选中的网格线样式,如下图所示。 图 5.43 在 celllayout 组件中设置网格线 设置字体颜色——在 celllayout 组件中先选中一个区域,然后点工具条中的 按钮,可以 将选择区域的字体颜色统一更换为新选中的颜色。 设置背景色——在 celllayout 组件中先选中一个区域,然后点工具条中的 按钮,可以将 选择区域的背景色统一更换为新选中的颜色,如下图所示。 图 5.44 在 celllayout 组件中设置背景色 X5 快速开发指南 2011 Justep Corp. 第 128 页 共 219 页 起 步 科 技 合并单元格——在 celllayout 组件中先选中一个区域,然后点鼠标右键,在弹出的菜单中选择 合并单元格,即可将选中的区域合并成一个单元格,如下图所示。 图 5.45 在 celllayout 组件中合并单元格 设置单元格的对齐方式——在 celllayout 组件中先选中一个区域,然后点工具条中的 按钮,可以将选择区域内的单元格的对齐方式更换为新选中的方式。 设 置 字 体 ——在 celllayout 组件中先选中一个区域,然后点 工 具 条 中 的 按钮,可以将选择区域内的单元格的字体更换为新选中的字体,如 下图所示。 X5 快速开发指南 2011 Justep Corp. 第 129 页 共 219 页 起 步 科 技 图 5.46 在 celllayout 组件中设置字体 设置行高列宽——在 celllayout 组件中先选中一个区域,然后点鼠标右键,在弹出的菜单中选 择行高列宽,设置后即可将选中的区域的行高及列宽统一更换为新设置的数值。 拖拽行高列宽——在 celllayout 组件中先选中一个单元格,它的右边和底边的中间会出现一个 绿色的圆点,用鼠标拖动这两个圆点即可改变当前行的行高和列宽,如下图所示。 图 5.47 在 celllayout 组件中改变行高列宽 设置后,运行效果如下图所示 图 5.48 celllayout 组件运行效果 X5 快速开发指南 2011 Justep Corp. 第 130 页 共 219 页 起 步 科 技 5.2.2.7 Excel 布局 组件 excelLayout 和 cellLayout 组件具有相同的功能,也是一个界面布局组件。同样适用于显示表 格化的界面,不同的是 excelLayout 使用 xls 文件设计界面的样式,因此只适合于开发端已经安装 了 MS Excel 的开发环境。Excel 布局可以通过向导生成,或者通过 bizData 组件生成,或者直接拖 放一个 excelLayout 组件,然后点击切换到 Excel 设计界面,直接编辑 Excel 文件。 1、使用向导生成 Excel 布局的页面 在各种向导中,其详细视图的配置中都有布局方式的选择,选择其中的 Excel 布局,即可生成 Excel 布局的页面。如下图所示。 图 5.49 在向导中选择生成 Excel 布局 2、在设计器中可以使用 bizData 组件的生成 Excel 布局功能来生成一个 Excel 布局的页面。 在设计器中先放一个 view 组件,然后右键点击设计器中 bizData 组件,选择“生成 Excel 布 局”,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 131 页 共 219 页 起 步 科 技 图 5.50 选择生成 Excel 布局 在弹出的对话框中,选择新增的 view 组件的 id,点击“下一步”按钮。如下图所示。 图 5.51 选择放置 Excel 布局的 view 组件 选择在 Excel 布局中要显示的关系,点击“下一步”按钮。如下图所示。 X5 快速开发指南 2011 Justep Corp. 第 132 页 共 219 页 起 步 科 技 图 5.52 选择 Excel 布局中显示的关系 输入 Excel 布局中显示的列数,点击“完成”按钮。如下图所示。 图 5.53 选择 Excel 布局中的列数 经过上面的步骤,设计器生成了 Excel 布局。如下图所示。 X5 快速开发指南 2011 Justep Corp. 第 133 页 共 219 页 起 步 科 技 图 5.54 生成的 Excel 布局 3、从组件面板中拖拽一个 excelLayout 组件,放到设计界面中。 首先需要给 excelLayout 组件关联一个 xls 文件,点击属性 src 右侧的下拉箭头,可以选择一 个已有的 xls 文件;点击„ 小按钮弹出新建 xls 文件对话框,在名称中输入文件名,点确定按钮就 新建了一个 xls 文件。如下图所示: 图 5.55 选择或新建 xls 文件 在 excelLayout 组件上点鼠标右键弹出菜单,点切换到 Excel 设计界面,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 134 页 共 219 页 起 步 科 技 图 5.56 切换到 Excel 设计界面 此时在设计器中嵌入了 Excel,并打开了 excellayout 组件关联的 xls 文件。在这里可以添加 文字,边框、设置字体、颜色;还可以拖放组件,只是组件以文字的形式显示。如下图所示: 图 5.57 在 xls 文件中编辑 点左侧组件树中的 rootView,设计器就会关闭 Excel,切换回设计界面。 注意:布局类的所有组件都是一个容器,都可以承载其它组件,包括布局类组件。但是只有“view 组件”有 auto-load 属性,auto-load 属性主要是用来实现分步加载功能。 X5 快速开发指南 2011 Justep Corp. 第 135 页 共 219 页 起 步 科 技 5.2.3 标准类组件 标准类组件是界面上的主要展示组件,用于操作的友好性、方便性。标准类组件主要包括下面 几种组件。 5.2.3.1 数据表格 组件 grid 是数据表格组件,用于展现多行数据。即可以用树型展现数据,也可以用列表展现数据。 如下图所示: 图 5.58 grid 界面展现 表 5.13 grid 的常用属性 属性名称 用途 data 显示列表所使用的数据来源(data 组件的 id) direct-edit 直接编辑模式,在直接编辑模式下,鼠标单击单元格即可编辑,否则需要双 击才可编辑 fixed-column-count 设置左边固定列的数量,如组件中显示的列很多,超过一页,需要将最左侧 的 n 列固定时使用此属性 appearance 页面显示的样式。有两个选项,grid 和 tree,选择 grid,则显示为列表;选 择 tree,则显示为树 multi-selection 当为树型显示时,可以选择是否可多选 cascade 当为多选时可以选择是否可以级联勾选 smart-render 智能渲染,例如设置为 20,组件只将 20 条数据画在界面上,随着往后翻,再 每次画 20 条,专门用于在界面中显示大量数据。 表 5.14 grid 的常用事件 事件名称 用途 onRowDblclick 鼠标双击行时触发,通常用于列表页跳转到详细页时 onInit 组件初始化是触发 X5 快速开发指南 2011 Justep Corp. 第 136 页 共 219 页 起 步 科 技 onBeforeIndexChanged 当前行改变之前触发 onAfterIndexChanged 当前行改变之后触发 onLastEditorPressEnter 编辑模式时,在最后一个单元格回车触发。这里通常用来写添加行逻辑。用 于全键盘操作 onRowCheckedAll 点击表头全选触发,通常用于排序 onRowValueChanged 行中的值改变后触发。加载数据时,每渲染完一行后触发。非加载数据时, 单元格值改变后触发。 点击 grid 组件中的列,列拥有属性如下表所示: 表 5.15 grid 组件列的常用属性 属性名称 用途 用法 ref 列关联的数据字段 列关联的数据组件中的字段 type 列显示的类型 有多种类型,只读、编辑、文本、按钮等 label 列显示名称 可以修改要显示的列名称 align 列对齐方式 可以设置为左对齐、居中、右对齐 visible 列是否可见 通常用于隐藏某一列 readonly 是否只读 目前只用于当 type 为 date、dateTinme 和 inputbtn 时使用, 设置为 true 后,只能点击按钮选择,不能直接修改 input-regex 正则表达式 使用适当的正则表达式,控制输入 format 数据格式化后显示 设置为 0.00,表示将数字显示为小数点后两位,还可以格式化 日期时间 filter-editor 列的过滤类型 选择列的表头显示的过滤输入框的类型 sort-datatype 列排序方式 排序规则。按字符串或数字方式排序 show-index 显示行号 需要 data 组件中的一个列用来显示行号 enter-selected 控制光标进入后,是否 默认选中状态 设置为 true,当光标进入单元格后,数据为选中状态 editor 关联组件 id 在 type 等于下拉框(select)或者附件(attachment)时,关联 下拉框组件 id 或附件组件 id check-value 选中时的值 当 type 为 ck 时,选中时存入的值 uncheck-value 不选中时的值 当 type 为 ck 时,不选中时存入的值 表 5.16 grid 组件列的常用事件 属性名称 用途 onRender grid 列的 type 属性设置为 html 时,此事件用来返回要显示的 html 代码 onButtonClick grid 列的 type 属性设置为 inputBin 时,点击右侧小按钮触发的事件 grid 组件的列显示类型多种多样,通过列的 type 属性选择不同的值,来显示不同的效果下面 介绍几种常用的显示类型。 表 5.17 列的 type 常用类型 类型名称 用途 ro 列只读 ed 列可编辑 tree 列显示树型数据 html 列显示标准 html 组件 textarea 列显示为多行文本框 txt 列显示为普通文本框 date 列显示为日期类型 dateTime 列显示为日期时间类型 X5 快速开发指南 2011 Justep Corp. 第 137 页 共 219 页 起 步 科 技 ch 列显示为复选框 inputbtn 列显示为有按钮的输入框 attachment 在列上关联附件 下面介绍 grid 组件的几种用法 1. 显示图片 将列的 type 属性值设为 html,在 onRender 事件中,添加 js 方法返回标准的 html 代码,如下 图所示: 图 5.59 onRender 事件代码 运行效果如下图所示: X5 快速开发指南 2011 Justep Corp. 第 138 页 共 219 页 起 步 科 技 图 5.60 显示图片的运行效果 2. 显示下拉框 在界面上放一个下拉组件,并配置好。将 grid 组件某列的 type 属性设为 select,editor 属性 设为前面提到的下拉组件的 id。运行效果如下图所示: 图 5.61 显示下拉框的运行效果 3. 显示复选框 将 grid 组件某列的 type 属性设为 ck,align 属性设为 center。运行效果如下图所示: X5 快速开发指南 2011 Justep Corp. 第 139 页 共 219 页 起 步 科 技 图 5.62 显示复选框的运行效果 4. 显示索引 将 grid 组件某列的 type 属性设为 ed,show-index 属性值设为 true。运行效果如下图所示: 图 5.63 显示索引的运行效果 5. 显示文本框 将 grid 组件的 row-height 设置为 80 或其它数值,设置某列的 type 属性为 textarea,运行效 果如下图所示: X5 快速开发指南 2011 Justep Corp. 第 140 页 共 219 页 起 步 科 技 图 5.64 显示文本框的运行效果 6. 设置列的前端过滤 grid 中的数据可以进行过滤,设置需要过滤的列的 filter-edidor 属性,属性值说明如下: 表 5.18 grid 组件列的过滤方式 属性值 用途 #text_filter 过滤,输入字符过滤 grid 中显示的数据 #select_filter 选择过滤,下拉选择列中的值,过滤 grid 中显示的数据 #numeric_filter 数值过滤,可以输入大于等于小于,例如:>10,过滤大于 10 的数据 #text_search 定位,输入字符定位到 grid 中第一次出现的记录 运行效果如下图所示: X5 快速开发指南 2011 Justep Corp. 第 141 页 共 219 页 起 步 科 技 图 5.65 grid 前端过滤的运行效果 7. 设置列的排序 grid 中的数据可以进行排序,分为按字符类型排序和按数字类型排序。选择按字符类型排序, 设置需要排序的列的 sort-datatype 属性为 str,效果如下图所示(请注意第一列)。 图 5.66 按字符排序 选择按数字类型排序,设置需要排序的列的 sort-datatype 属性为 int,效果如下图所示(请 注意第二列)。 X5 快速开发指南 2011 Justep Corp. 第 142 页 共 219 页 起 步 科 技 图 5.67 按数字排序 5.2.3.2 输入框 组件 input 组件是文本输入框组件。 表 5.19 input 的常用属性 属性名称 用途 id 组件标识 ref 指定组件要显示哪个关系的数据 input-mode 是通过正则表格式控制用户键盘输入。用户每输入一个字符时,就会用此表达 式进行验证。 format 数字、日期格式化 表 5.20 input 的常用事件 事件名称 用途 onChange 值改变时触发 onFocus 获得焦点时触发 onBlur 失去焦点时触发 5.2.3.3 密码输入框 组件 secret 组件是密码输入框组件,与 input 组件的区别是内容不明文显示。属性没有 input-mode 和 format,其它属性与 input 组件的属性类似。 5.2.3.4 输出框 组件 output 组件是输出框组件,与 input 组件的区别是不能输入。属性没有 input-mode,其它属性 X5 快速开发指南 2011 Justep Corp. 第 143 页 共 219 页 起 步 科 技 与 input 组件的属性类似,并且 output 组件没有事件。 另外,比较重要的一点是 output 组件除了可以用 ref 和 data 关联以外,还可以通过 value 属 性设置其需要显示的内容,value 属性支持 XPath 表达式。比如,bizData1 有 fPrice(价格)和 fQty (数量)两个关系,可以设置 output 组件的 value 属性为 concat(data('bizData1')/fPrice * data('bizData1')/fQty, '元'),显示效果为:123 元 5.2.3.5 文本框 组件 textarea 组件是文本输入框组件,其属性和事件与 input 组件基本相同。多了一个 mediatype 属性,当该属性值为 text/html 时,界面出现工具条,数据以 html 代码存储。Mediatype 等于 text/html 或为空的运行效果如下图所示 图 5.68 textarea 运行效果 5.2.3.6 按钮 组件 trigger 组件是按钮组件。 表 5.21 trigger 的常用属性 属性名称 用途 id 组件标识 ref 指向一个关系,通过设置这个关系的规则是否显示,可用(详细用法参见 5.2.1.2bizData 组件一节)实现对按钮的控制 operation-owner 操作所属的组件,按钮可以关联 data、process 组件的某个操作 operation 操作,按钮可以关联 data、bizData、process 组件的某个操作,例如关联 bizData 组件的 save appearance 按钮显示样式:image 显示为图片,image-text 显示为图片和文字,minimal 显示为超链接、image- minimal 显示为图片和超链接、空显示为普通按钮 image-text-mode 图片和文字的显示方式:左右表示图片在左,文字在右;上下表示图片在上, 文字在下 label 按钮显示文字;按钮显示为图片时的提示文字 X5 快速开发指南 2011 Justep Corp. 第 144 页 共 219 页 起 步 科 技 src 按钮可用时显示的图片 dis-src 按钮不可用时显示的图片 class 按钮颜色选择,只在 appearance 设置为 image 和 image-text 时生效 icon-class 图标选择 表 5.22 trigger 的常用事件 事件名称 用途 onClick 点击按钮时触发 图 5.69 按钮运行效果 5.2.3.7 单选按钮 组件 radio 组件是单选框。radio 本身没有事件,它的 item 有两个事件 onSelect 和 onDeSelect, 表 5.23 radio 的常用属性 属性名称 用途 id 组件标识 ref 指定组件要显示哪个关系的数据 class 排列的方式,横向还是纵向显示 表 5.24 radio 的 item 的常用属性 属性名称 用途 label item 显示的值 value 选中 item 后存储的值 表 5.25 radio 的 item 的常用事件 事件名称 用途 onSelect item 被选中时触发 onDeSelect 其它 item 被选中时触发 X5 快速开发指南 2011 Justep Corp. 第 145 页 共 219 页 起 步 科 技 图 5.70 单选按钮、复选按钮运行效果 5.2.3.8 复选按钮 组件 checkbok 是复选按钮组件。与 radio 组件的属性和事件完全相同。 5.2.3.9 列表下拉 组件 gridSelect 是列表下拉组件。它通过用户选择代替了输入,增强了易用性。它实现了从下拉数 据中选择一条记录,保存到主表数据中;为了便于冗余存储,它可以从下拉数据中带回 3 个值保存 到主表的 3 个关系中。 X5 快速开发指南 2011 Justep Corp. 第 146 页 共 219 页 起 步 科 技 图 5.71 下拉列表运行效果 表 5.26 gridSelect 的常用属性 属性名称 用途 id 组件标识。必填 ref 主表关系。必填 label-ref 主表关系,是下拉列表组件显示的数据来源,可以和 ref 相同。必填 default-label-ref 没有选择时显示的信息,例如’请选择’ all-selected-label-ref 多选且全选后显示的信息,例如’全选’ muti-select 是否多选,true 为多选,false 为单选 value-separator 多选时的值分隔符 input-changeable 设置为 true,该组件不仅可以选择,而且可以输入。 itemset data-ref 下拉数据的数据来源,如果使用动态数据,则选择一个数据组件;如果使用静 态数据,则选择“无”。 auto-load-data 是否自动加载下拉的数据,建议选择 true independence 是否独立,为 true 时多个下拉组件可以绑定同一个下拉数据源 static-data 静态数据,使用静态数据时,手动填写要显示的数据。静态必填 columns 设置下拉表格中显示的列,不显示的列(用于返回数据),必填 column-ref value 下拉数据中的列,其值返回给 ref。必填 label 下拉数据中的列,其值返回给 label-ref。必填 表 5.27 gridSelect 的常用事件 事件名称 用途 onRowDisabled 行是否可选 onAfterRowFill 下拉表格渲染完成之后 onDropdown 点按钮下拉时触发 onCloseup 选择后,关闭下拉时触发 其它属性和事件参见 API 文档。 X5 快速开发指南 2011 Justep Corp. 第 147 页 共 219 页 起 步 科 技 根据下拉数据的来源,可以分为下拉外部数据组件的数据和下拉内置静态数据。 1. 下拉外部数据组件的数据 下拉外部数据组件的数据就是下拉数据源关联到一个数据组件,显示数据组件中的数据。配置 过程如下: 1) 分别选择 ref 和 label-ref 属性绑定的关系,这两个属性可以绑定到同一个关系上。 2) 设置 itemset 属性中的子属性:添加下拉数据来源,用 data-ref 属性引用数据来源;选 择 auto-load-data 属性为 true: 3) 添加好数据源后设置显示列,点击 columns 后面的小按钮,弹出添加窗口,如下图所示,点 添加 column,添加一列,在 ref 中填入列名,选择 visible 为 true,表示在页面上显示该列, 可添加多列。 图 5.72 添加 columns 4) 配置好 columns 后配置 value 和 label 属性。它们都是从刚配好的 columns 中选择一列, value 对应的一列用于将该列值返回给 ref 对应的关系,label 对应的一列用于将该列值 返回给 label-ref 对应的关系。value 和 label 可以关联同一个列: 2. 下拉内置静态数据 下拉内置静态数据就是下拉组件中定义的静态数据。配置步骤如下: 1) 选择 ref 和 label-ref 属性绑定的关系,这两个属性可以绑定到同一个关系上。 2) data-ref 属性选择“无”,也就是不关联数据组件。选择 auto-load-data 属性为 true。 3) 输入静态数据。点击 static-data 属性后面的小按钮弹出数据编辑对话框,先点击“增加 列”,然后点击“增加行”,输入下拉的数据,可添加多列、多行。如下图所示: 提示 value 和 label 必须填写。auto-load-data 属性必须为 true 否则页面上无法显示下拉列表里面的值。 rowid 表示外部数据的主键关系。 使用外部数据组件的下拉列表涉及到两个数据源,一个是显示的数据源,一个是下拉选择的数据源。注意 区别。 X5 快速开发指南 2011 Justep Corp. 第 148 页 共 219 页 起 步 科 技 图 5.73 静态数据 4) 设置显示列,点击 columns 后面的小按钮,弹出添加窗口,如下图所示,点添加 column, 添加一列,在 ref 中填入列名,也可以使用默认生成的列名,使用静态数据时列名不重要, 列的顺序取自在静态数据中定义的顺序。选择 visible 为 true,表示在页面上显示该列, 可添加多列。如下图所示: 图 5.74 设置显示列 5) 配置好 columns 后配置 value 和 label 属性。它们都是从刚配好的 columns 中选择一列, value 对应的一列用于将该列值返回给 ref 对应的关系,label 对应的一列用于将该列值返 回给 label-ref 对应的关系。value 和 label 可以关联同一个列。 5.2.3.10 树型下拉 组件 treeSelect 组件是树型下拉组件,其属性与 gridSelect 组件的属性基本相同,增加了两个属 性:delay 属性 是否延迟加载。cascade 属性 是否级联勾选。去掉了一个 static-data 属性。 树型下拉组件配置方法如下: 1) 配置树型数据组件,作为树型下拉组件的数据来源。 2) 参照下拉列表组件的属性配置,配置树型下拉组件。 3) 设置树型下拉组件的 delay 属性为 true。 4) 如果设置 multi-select 属性为 true,可以设置 cascade 属性为 true,实现级联勾选效果。 树型下拉组件的运行效果如下图所示: X5 快速开发指南 2011 Justep Corp. 第 149 页 共 219 页 起 步 科 技 图 5.75 treeSelect 运行效果 5.2.3.11 导航条 组件 pagination 组件是导航条组件。是可以显示在页面上任意位置的导航条组件。 图 5.76 pagination 运行效果 X5 快速开发指南 2011 Justep Corp. 第 150 页 共 219 页 起 步 科 技 5.2.3.12 流程 组件 process 是流程组件。可以自动完成启动流程、流转、回退等操作。 表 5.28 process 的常用属性 属性名称 用途 id 组件标识。 data 关联 data 组件,其 rowid 将用于启动流程,以及过滤业务数据。 auto-close 为 true 时,流转等操作后,关闭当前页面 auto-start 为 true 时,data 属性关联的 data 组件,新增保存时,自动启动流程。启动流程时 sData1 使用 data 属性关联的 data 组件的当前 rowid。 auto-save 为 true 时,流转等操作前,自动保存 data 属性关联的 data 组件中的数据 auto-filter 为 true 时,data 属性关联的 data 组件刷新时,自动增加一个过滤条件,概念等于 sData1,sData1 从参数中取,只有从待办任务和提交任务中打开的功能 sData1 参 数才有值。 表 5.29 process 的常用事件 事件名称 用途 流程启动 onBeforeStart 流程启动之前触发的事件 onAfterStart 流程启动之后触发的事件 onStartCommit 流程启动成功后触发的事件 onStartError 流程启动失败后触发的事件 流程流转 onBeforeAdvance 流程流转之前触发的事件 onAfterAdvance 流程流转之后触发的事件 onAdvanceCommit 流程流转成功后触发的事件 onAdvanceError 流程流转失败后触发的事件 onBeforeAdvanceQuery 流转对话框显示之前触发的事件 onAfterAdvanceQuery 流转对话框显示之后触发的事件 onAdvanceQueryError 流转对话框显示失败后触发的事件 流程回退 onBeforeBack 流程回退之前触发的事件 onAfterBack 流程回退之后触发的事件 onBackCommit 流程回退成功后触发的事件 onBackError 流程回退失败后触发的事件 onBeforeBackQuery 回退对话框显示之前触发的事件 onAfterBackQuery 回退对话框显示之后触发的事件 onBackQueryError 回退对话框显示失败后触发的事件 流程终止 onBeforeAbort 流程终止之前触发的事件 onAfterAbort 流程终止之后触发的事件 onAbortCommit 流程终止成功后触发的事件 onAbortError 流程终止失败后触发的事件 onBeforeAbortQuery 终止对话框显示之前触发的事件 onAfterAbortQuery 终止对话框显示之后触发的事件 onAbortQueryError 终止对话框显示失败后触发的事件 流程暂停 onBeforeSuspend 流程暂停之前触发的事件 onAfterSuspend 流程暂停之后触发的事件 onSuspendCommit 流程暂停成功后触发的事件 onSuspendError 流程暂停失败后触发的事件 onBeforeSuspendQuery 暂停对话框显示之前触发的事件 X5 快速开发指南 2011 Justep Corp. 第 151 页 共 219 页 起 步 科 技 onAfterSuspendQuery 暂停对话框显示之后触发的事件 onSuspendQueryError 暂停对话框显示失败后触发的事件 流程转发 onBeforeTransfer 流程转发之前触发的事件 onAfterTransfer 流程转发之后触发的事件 onTransferCommit 流程转发成功后触发的事件 onTransferError 流程转发失败后触发的事件 onBeforeTransferQuery 转发对话框显示之前触发的事件 onAfterTransferQuery 转发对话框显示之后触发的事件 onTransferQueryError 转发对话框显示失败后触发的事件 定义流程模板 onBeforeCustomizedQuery 定制流程对话框显示之前触发的事件 onAfterCustomizedQuery 定制流程对话框显示之后触发的事件 onStartCustomizedQueryError 定制流程对话框显示失败后触发的事件 5.2.3.13 树形 组件 tree 是展现树形数据的组件,用法同 grid 组件。 5.2.3.14 菜单按钮 组件 menuButton 组件是可以下拉出菜单的按钮组件。 1. 添加菜单项 下拉的菜单项可以使用两种方式添加。一是选择操作,在 menuButton 组件上点右键,在弹出的 菜单中选择选择操作,在弹出的窗口中选择数据组件、流程组件中的操作即可。二是添加菜单项, 在 menuButton 组件上点右键,在弹出的菜单中选择添加菜单项,就在 UI 设计器左上角的组件树上 添加了一个 menuitem(菜单项)组件,设置 label 及 onclick 事件即可。 2. 调整下拉菜单中菜单项的顺序 在 UI 设计器左上角的组件树上选择一个 menuitem(菜单项)组件,点右键,在弹出的菜单中 选择上移、下移即可改变菜单项的顺序。 3. 增加菜单中的分割条 在 UI 设计器左上角的组件树上选择一个 menuitem(菜单项)组件,在属性编辑器中设置 separator 为 true,即可在这个菜单项下显示出一个分隔条。 5.2.4 工具栏类组件 工具栏类组件主要是用来统一放置界面上的操作按钮。界面上所有的按钮都放在 toolbars 组件 中。X5 平台提供的常用工具条有导航工具栏 navigatorBar、流程工具栏 processBar、自定义工具 栏 customBar 和工具栏分隔条 separatorItem。 每个工具栏组件都有一个设置显示方式的 mode 属性,属性值及显示效果见下表。 表 5.30 mode 属性及显示效果 属性值 显示效果 图标 X5 快速开发指南 2011 Justep Corp. 第 152 页 共 219 页 起 步 科 技 文字 图标文字(左右) 图标文字(上下) 5.2.4.1 工具栏容器 组件 toolbars 是工具栏容器组件,其它工具栏必须放置在 toolbars 组件中。 5.2.4.2 导航工具栏 组件 navigatorBar 是导航工具栏组件,包含新增,保存,删除,查询等按钮,选中一个按钮,按 Esc 可以选中 navigatorBar 组件,右键点击 navigatorBar 组件,选择设置项,可以设置要显示的工具 栏按钮,如下图。 图 5.77 导航工具栏 X5 快速开发指南 2011 Justep Corp. 第 153 页 共 219 页 起 步 科 技 图 5.78 导航工具栏按钮 下面是适合操作树型数据的导航工具栏按钮。 图 5.79 方便操作树的导航工具栏按钮 5.2.4.3 流程工具栏 组件 processBar 是流程工具栏组件,包括流程中用到的流转、终止、转发、定制流程等按钮。 提示 navigatorBar 组件有一个 data 属性。这个属性是用来关联该工具栏操作的数据对象 data 组件。 X5 快速开发指南 2011 Justep Corp. 第 154 页 共 219 页 起 步 科 技 图 5.80 流程工具栏 5.2.4.4 自定义工具栏 组件 customBar 组件是自定义工具栏组件,它是一个容器组件,里面可以放 trigger 组件。 图 5.81 自定义工具栏 提示 processBar 组件有一个 process 属性。这个属性用来关联流程组件。 X5 快速开发指南 2011 Justep Corp. 第 155 页 共 219 页 起 步 科 技 5.2.4.5 工具栏分隔条 组件 separatorItem 是工具栏的分隔条组件,用于分割工具栏中的按钮。 5.2.4.6 工具栏按钮 组件 工具栏上的每一个按钮都有属性,如下图所示: 图 5.82 工具栏按钮属性 表 5.31 工具栏按钮项的常用属性 属性名称 用途 readonly 设置按钮是否可以使用,支持 XPath 表达式 disabled 设置按钮是否可以使用,不支持 XPath 表达式 relevant 设置工具栏上的按钮是否可见 5.2.4.7 按钮组 组件 buttonBar 组件是按钮组组件。是 X5 提供的简约风格中,代替原来工具条组件的组件。 在 buttonBar 组件中主要放置 trigger 组件、menuButton 组件。trigger 组件可以为显示颜色 的按钮和不显示颜色的按钮,可将最重要的按钮用颜色显示出来,非常醒目。还可以将不常用的功 能按钮显示在 menuButton 组件的下拉菜单中,以达到界面简洁的效果。 X5 快速开发指南 2011 Justep Corp. 第 156 页 共 219 页 起 步 科 技 图 5.83 buttonBar 组件使用效果 5.2.5 对话框类组件 这 3 个 windowDialog、windowRunner、windowFrame 组件都是用 iframe 的方式打开另一个页面, 只是打开的位置不同。windowDialog 用弹出窗口的方式打开页面;windowRunner 用 portal 页的方 式打开页面;windowFrame 用在当前页面嵌入新页面的方式。在打开的页面中放入 windowReceiver 组件可以实现主窗口和新窗口之间的参数传递。 5.2.5.1 弹出窗口 组件 windowDialog 是弹出窗口组件。用在主窗口中。最典型的应用是制作主窗口和弹出窗口,进行 数据交互。 表 5.32 windowDialog 的常用属性 属性名称 用途 id 组件标识 url 选择要显示的 w 文件的路径 title 弹出窗口的标题 show-title 是否显示弹出窗口的标题行 status 设置为 maximize,再设置 show-title 为 false,弹出窗口以最大 化显示并覆盖整页,可模拟页面调整效果。 reload-on-open 是否重新加载显示页面的内容 modal 是否模态 minmaxable 对话框是否有最大最小化按钮 resizable 是否可以改变对话框的大小 status 初始化的状态是否充满整个窗体 X5 快速开发指南 2011 Justep Corp. 第 157 页 共 219 页 起 步 科 技 表 5.33 windowdialog 的常用事件 事件名称 用途 onClose 关闭时触发 onInit 初始化时触发 onOpen 打开时触发 onSend 向对话框传递数据,该事件函数的返回值将传递给对话框 onReceive 对话框返回数据,该事件函数有一个参数 event,是对话框返回的 数据 其它属性及事件请参见 API 文档。 下面介绍一下 windowDialog 的用法: 1. 打开弹出窗口 先设置 windowDialog 组件的 title 属性和 url 属性,然后调用 open 方法打开弹出窗口。 例如:title 设置为新单选模板 url 设置为/x5demo/components/process/windowDialog/Single1.w 在打开弹出窗口的 js 事件中,加入如下代码。 function trigger1DOMActivate(event){ //dialog2为dialog组件的id justep.xbl('windowDialog1').open() } 运行效果如下图所示: 图 5.84 windowDialog 弹出对话框 2. 给弹出窗口传参 有两个方法可以传参:使用 open()方法的第一个参数,或者在 onSend 事件中准备参数。 例如: //传入普通参数——open 方法 justep.xbl('windowDialog1').open(justep.xbl('data1').getValue('fName')); //传入普通参数——onSend 事件 function windowDialog1Send(event){ X5 快速开发指南 2011 Justep Corp. 第 158 页 共 219 页 起 步 科 技 return justep.xbl('data1').getValue('fName'); } //传入 JSON 格式参数——open 方法 justep.xbl("'windowDialog1'").open({ selectKind : a, viewKind : 'ogn' }); //传入 JSON 格式参数——onSend 事件 function windowDialog1Send(event){ return { selectKind : a, viewKind : 'ogn' } } 3. 接收弹出窗口返回的参数 使用 windowDialog 组件的 onReceive 事件接收弹出窗口返回的参数。事件的参数 envet.data 里面就是弹出窗口中返回的数据。 function windowDialog1Receive(event){ alert(event.data); } 4. 设置弹出窗口返回数据和主窗口数据的对应关系及添加方式 可以在 windowDialog 组件的 onReceive 事件接收弹出窗口返回的参数,自己写代码处理。也可 以使用 windowDialog 组件的 mapping 属性,设置弹出窗口返回数据和主窗口数据的列的对应关系, 以及添加数据的方式。mapping 属性如下图所示。 图 5.85 windowDialog 的 mapping 属性设置  设置列的映射 设置弹出窗口中返回数据的哪些列添加到主窗口的数据的哪些列中。如果主窗口数据操作方式 选择根据鉴别列修改或新增,需要将进行重复性验证的列设置为鉴别列,方法是在是否鉴别上打勾。  添加数据方式 弹出窗口返回的数据可以以下面 4 种方式其中的一种添加到主窗口的数据中。 新增全部——将弹出窗口返回的数据全部都添加到主窗口的数据中。 根据鉴别列修改或新增——使用这种方式可以不添加重复数据。 X5 快速开发指南 2011 Justep Corp. 第 159 页 共 219 页 起 步 科 技 删除全部后新增——将主窗口的原数据删除,将弹出窗口返回的数据添加到主窗口的数据中。 修改当前行数据——使用于返回一条数据,且修改主窗口中的一条数据。 5.2.5.2 窗口接收 组件 windowReceiver 是窗口接收组件,用在弹出窗口中,用来接收主窗口传来的参数和返回参数给 主窗口。 1. 接收主窗口传来的参数 使用 windowReceiver 组件的 onReceive 事件接收主窗口传来的参数。事件的参数 envet.data 里面就是主窗口中传来的数据。 mainActivity.windowReceiverReceive = function(event){ alert(event.data); }; 2. 将参数返回给主窗口并关闭窗口 在关闭弹出窗口的 js 事件中,调用 windowReceiver 组件的 windowEnsure 方法,并将要返回的 参数作为 windowEnsure 方法的参数调用。例如:将 data 对象返回。: justep.xbl('windowReceiver1').windowEnsure(justep.xbl(data1)); 3. 仅关闭窗口 在关闭弹出窗口的 js 事件中,调用 windowReceiver 组件的 windowCancel 方法。 justep.xbl('windowReceiver1').windowCancel(); 4. 刷新页面 在刷新页面的 js 事件中,调用 windowReceiver 组件的 windowRefresh 方法。 justep.xbl('windowReceiver1').windowRefresh(); 5. windowDialog 设置了 mapping 的数据准备 在关 闭 弹 出 窗 口的 js 事 件 中 , 调 用 windowReceiver 组 件 的 getMappingData 方 法 和 windowEnsure 方法。getMappingData 的两个参数是 dataId 和返回数据的 rowid 数组,例如:返回 当前行数据。 var rows = [] rows.push(justep.xbl("bizData2").getCurrentRowId()); data = justep.xbl('windowReceiver1').getMappingData("bizData2",rows); justep.xbl('windowReceiver1').windowEnsure(data); 5.2.5.3 新 portal 页 组件 windowRunner 和 windowDialog 类似,是用打开一个新的 portal 页的方式显示新的页面。 X5 快速开发指南 2011 Justep Corp. 第 160 页 共 219 页 起 步 科 技 图 5.86 windowRunner 打开新 portal 页的效果 在经典门户中,打开新的 portal 页,可以设置打开时功能树是否显示。组件的 maximise 属性 设置为 false 则打开 portal 页时显示功能树,设置为 true 则不显示功能树。 图 5.87 windowRunner 打开新 portal 页的效果,隐藏功能树 5.2.5.4 页面嵌入 组件 windowFrame 和 windowDialog 类似,是在当前页面中打开一个新的页面。这个嵌入的页面可以 和当前页面一起打开,也可以在需要时打开。设置组件的 auto-load 属性为 tre,则嵌入的页面和 X5 快速开发指南 2011 Justep Corp. 第 161 页 共 219 页 起 步 科 技 当前页面一起打开。 图 5.88 windowFrame 打开页面效果 5.2.5.5 信息提示框 组件 messageDialog 是信息提示框。有如下 4 种方式。 图 5.89 messageDialog 的 4 种方式 表 5.34 messageDialog 的常用属性 属性名称 用途 id 组件标识 title 信息提示框的标题 message 提示信息内容 details 点详细后显示的内容。 img 图片的位置,可以使用自定义图片,也可以使用系统图片 type 4 种选择,对应 4 种方式 弹出信息框的方法是使用 messageDialog 组件的 open 方法,在弹出信息框的 js 代码中加入下 X5 快速开发指南 2011 Justep Corp. 第 162 页 共 219 页 起 步 科 技 面的代码: 使用组件属性设置的值,打开信息提示框 justep.xbl('message Dialog1').open(); 使用参数中的值,打开信息提示框 justep.xbl('messageDialog1').open({ title:"标题", msg:"信息信息信息", details:"详细信息", img:"info", type:0, callback:function(e){alert(e.status);} }); 5.2.5.6 通用查询对话框 组件 bizDataFilterDialog 是通用查询对话框组件。就是导航工具栏望远镜按钮弹出的对话框。 打开对话框的方式是使用 bizDataFilterDialog 组件的 show 方法,参数是 data 的 id。在要弹 出查询对话框的 js 事件里加入下面的代码。 //bizDataFilterDialog1为bizDataFilterDialog组件的id //mainData为引用的数据来源的data组件的id justep.xbl('bizDataFilterDialog1').show('mainData'); 运行效果如下图所示: 图 5.90 通用查询对话框 5.2.6 扩展组件 扩展组件有 4 个附件组件,分别是 attachment、attachmentEditor、attachmentDialog、 attachmentImage。附件组件实现将文件上传到文档服务器、在线编辑文件,以及从文档服务器上下载 文件。由于附件组件的属性基本相同,仅以 attachmentEditor 为例介绍。 5.2.6.1 附件编辑器 组件 attachmentEditor 是附件编辑器组件。附件组件可以实现文件上传、下载、在线编辑等功能。 表 5.35 attachmentEditor 的常用属性 X5 快速开发指南 2011 Justep Corp. 第 163 页 共 219 页 起 步 科 技 属性名称 用途 id 组件标识。必填 ref 组件关联的业务数据关系。存储附件的信息,关系的类型建议使用 text 类型。必填 display-style 显示风格,设置为 single 表示只能上传一个文件;设置为 list 表 示不限制文件个数。必填 auto-load 自动加载,可以设置为 false,在需要的时候加载。 keyId 当界面上放两个及以上的附件,且附件的可配置属性不同,需要在 知识中心的文档关联功能中配置多个 keyId,对应不同的配置。并 在这里关联相应的 keyId root-path 上传文件的根目录。可以在知识中心的文档关联功能中配置; sub-path 上传文件的子目录,可以在知识中心的文档关联功能中配置 limit-size 上传文件的大小限制,可以在知识中心的文档关联功能中配置 access 访问权限设置,可以在知识中心的文档关联功能中配置 extension-filter 上传文件类型限制 display-buttons upload 上传按钮 template 从模板新建按钮 download 下载按钮 edit 编辑按钮 delete 删除按钮 history 历史按钮 style width 组件的宽度 height 组件的高度 表 5.36 attachmentEditor 的常用事件 事件名称 用途 onCreate 创建附件时的事件 onNewFormTemplate 创建新模板时的事件 onBrowseDocClick 组件点击数据记录链接时 onLoadData 组件加载数据时 onUploadClick 点击上传按钮时的事件 onEditClick 点击编辑按钮时的事件 onDeleteClick 点击删除按钮时的事件 onDownloadClick 点击下载按钮时的事件 onHistoryClick 点击历史按钮时的事件 附件编辑器的配置步骤如下: 1. 配置 attachmentEditor 的 ref 属性,关联到业务数据的某个字段: 2. 在“知识中心”的“文档关联”中,进行文档关联配置。详见用户手册: 运行效果如下图所示: X5 快速开发指南 2011 Justep Corp. 第 164 页 共 219 页 起 步 科 技 图 5.91 attachmentEditor 运行效果 附件组件的常用方法 设置附件操作权限,7:下载, 263:下载 上传,775:下载 上传 修改,1799:下载 上传 修改 删除 justep.xbl('attachmentEditor1').setAttachmentPermission(1799); 5.3 JavaScript 开发 JavaScript 在 X5 中起什么作用? JavaScript 在 X5 中起到以下几个方面的作用:JavaScript 是界面框架的底层实现语言之一; JavaScript 用于界面逻辑的实现;界面组件的事件、方法通过 JavaScript 来实现;界面特效的实 现。 在 X5 中使用 JavaScript 进行开发 在 X5 中 JavaScript 开发是很常见、很重要的开发,首先就要求开发者有一定的 JavaScript 开 发基础,才能在 X5 中有效地进行 JavaScript 开发。本节将从 X5 提供的常用 JavaScript 方法介绍、 JavaScript 调试等几个方面讲解 X5 中的 JavaScript 开发。 5.3.1 常用 Js 方法介绍 表 5.37 JavaScript 常用方法 JavaScript 类名称 方法名称 用途 justep.Context getCurrentPersonName 获得当前登录者姓名 提示::运行带附件的功能前,需要先启动文档服务器; 第一次运行带附件的功能前,需要先运行软件更新功能,安装里面的全部软件; 第一次运行带附件的功能前,浏览器会出现运行加载项的提示,右键单击提示信息,选择运行加载项, 出现安全警告对话框,点击运行按钮。 X5 快速开发指南 2011 Justep Corp. 第 165 页 共 219 页 起 步 科 技 getCurrentPersonID 获得当前登录者 ID getProcessData1 获得从待办任务打开功能时传递过来的流程相关 的业务数据 id justep.Request sendBizRequest 发送调用 Action 请求 justep.Request.ActionParam setString 设置 String 类型 biz action 请求参数 justep.Date fromString 把字符串类型转换成 date 类型 toString 把 date 类型转换成字符串类型 justep.System() datetime 获得服务端系统日期时间 datetimeString 获得服务端系统日期时间字符串 justep.Portal openWindow 打开功能 closeWindow 关闭功能 logout 用户注销 5.3.2 JavaScript 调试 如果使用 IE8 浏览器,可以使用 IE8 自带的“开发人员工具”;如果不使用 IE8 浏览器,可以使 用 office 工具站点调试。 1、 IE8 开发人员工具 在代码中需要调试处添加“debugger”关键字;,打开 IE8 浏览器,按 F12 打开开发人员工具。 点“脚本”页,点“启动调试”按钮。 图 5.92 开发人员工具 注销重新登录 X5 系统,执行该段程序,在页面中会弹出开发人员工具窗口,如下图所示。 X5 快速开发指南 2011 Justep Corp. 第 166 页 共 219 页 起 步 科 技 图 5.93 调试窗口 在这个调试窗口中,可以逐语句、逐过程的执行代码,也可以选中一个变量,点鼠标右键选择 添加监视,观察变量的值。 调试完成后,可以点继续按钮,继续执行代码,并且当再次执行到 debugger 代码时,会再次进 入调试窗口。如果不需要调试,点停止调试按钮,当再次执行到有 debugger 代码时,不会进入调试 窗口。如还需要调试,可以再点启动调试按钮。 图 5.94 添加监视 2、 Office 工具站点调试  安装 打开“我的电脑”的“控制面板”,选择“添加删除程序”,选择你机器中的 office,点击“修 改”按钮:选择“添加或删除功能”->“下一步”,选择“应用程序的高级自定义”->“下一步”, 选择“office 工具” -> “HTML 源文件编辑”->“web 脚本创作” -> “站点调试”如下图所示: X5 快速开发指南 2011 Justep Corp. 第 167 页 共 219 页 起 步 科 技 图 5.95 添加站点调试 点击“站点调试”->“从本机运行”,如下图所示,然后点击“更新”按钮完成更新。 图 5.96 添加本机运行 然后打开浏览器,选择“工具”->“Internet 选项”,选择“高级”,去掉“禁用脚本调试(Internet Explorer)” 和“禁用脚本调试(其他)”的勾选,点击“确定”按钮。重启 IE 浏览器。 X5 快速开发指南 2011 Justep Corp. 第 168 页 共 219 页 起 步 科 技 图 5.97 删除勾选  调试 在代码中需要调试处填入 debugger;,执行到该段程序,在页面中会弹出实时调试窗口,如下 图所示: 图 5.98 实时调试 点击按钮“是,”,然后勾选“Script”选项,点击确定按钮,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 169 页 共 219 页 起 步 科 技 图 5.99 单步执行 进入调试页面后把要调试的代码全部选中,右键单击选中代码,在弹出的选项中选择“添加监 视”选项完成调试配置,如下图所示,调试时可按快捷键 F5 或在上方的按钮中点击“调试”选择项 进行调试,如下图所示: 图 5.100 添加监视 5.4 Action 调用 为什么要在 UI 中调用 Action? 某些简单的业务逻辑可以通过 UI 层的 JavaScript 实现,某些复杂的业务逻辑需要通过 BIZ 层 定义的 Action 来实现。BIZ 层 action 的执行,需要通过 UI 层的 javaScript 调用。 1. 准备调用 Action 的参数 创建一个参数对象,添加参数。不同类型的参数使用不同的set方法。 var param = new justep.Request.ActionParam(); param.setString('para_string', "abc"); param.setInteger('para_integer', 11); param.setFloat('para_float', 1.345); X5 快速开发指南 2011 Justep Corp. 第 170 页 共 219 页 起 步 科 技 param.setDateTime('para_datetime', "2003-10-12T12:55:55"); param.setDate('para_date', "2003-10-12"); param.setTime('para_time', "12:55:55"); var listParam = new justep.Request.ListParam(); listParam.add(new justep.Request.SimpleParam("列表项1",justep.XML.Namespaces.XMLSCHEMA_STRING)); listParam.add(new justep.Request.SimpleParam("45678",justep.XML.Namespaces.XMLSCHEMA_INTEGER)); param.setList("listParam", listParam); var mapParam = new justep.Request.MapParam(); mapParam.put("key1", new justep.Request.SimpleParam("Map项1", justep.XML.Namespaces.XMLSCHEMA_STRING)); mapParam.put("key2", new justep.Request.SimpleParam("Map项2", justep.XML.Namespaces.XMLSCHEMA_STRING)); mapParam.put("key3", new justep.Request.SimpleParam("Map项3", justep.XML.Namespaces.XMLSCHEMA_STRING)); param.setMap("mapParam", mapParam); var dRole = justep.xbl("dRole"); param.setTable("tableParam", new justep.Request.TableParam(dRole.Serialize(false, false))); 2. 调用 Action 使用 sendBizRequest2 方法调用 Action。 justep.Request.sendBizRequest2({ dataType: "json", action: " testKsqlAction ", parameters: params, //传入在前面定义的Action的参数 callback: function(result) { if (result.state) { alert("调用成功!"); } else { throw new Error("调用失败!|" + result.response.message); } } }); 3. 接收返回的参数 判断是否调用成功——result.state 获取调用失败的错误消息——result.response.message 获取调用 Action 返回值——result.response X5 快速开发指南 2011 Justep Corp. 第 171 页 共 219 页 起 步 科 技 第6章 报表图表 本章要点:  报表开发简介  报表流程建模  报表界面建模  图表开发 6.1 报表开发简介 报表开发的工作主要有两方面的内容。一是在流程建模中 Action 的开发;二是界面建模中的报 表设计。Action 实现报表数据的准备,报表设计实现报表的展现。开发报表可以使用向导生成报表, 也可以在设计器中开发报表。 报表服务器工作原理示意图如下: 图 6.1 报表服务器工作原理 6.2 报表流程建模 报表流程建模,分为 3 部分。一是新建 Action、二是新建 Process 文件、三是在 Process 文件 动作设置中添加新建的 Action。报表设计中使用 reportData 组件展现数据,reportData 组件通过 action 获取数据,这种 action 返回的数据类型必须是 Table 类型。关于新建 Action,请参见 4.5.2 自定义 Action 一节。 报表 Action 有两种类型,一种是 KSQLAction,平台针对报表特别提供的,简单易用的 Action; 另一种是 Action,这是通用的 Action,当 KSQLAction 不能满足需求时使用。 6.2.1 KSQLAction 6.2.1.1 定义 新建 Action,点选择按钮,选择系统提供的 ksqlQueryProcedure,如下图所示。使用它只要传 浏览器 UIServer ReportServer BizServer 浏览器 Action model view 取数据 Html X5 快速开发指南 2011 Justep Corp. 第 172 页 共 219 页 起 步 科 技 入 ksql 语句,就能返回 Table 类型的数据。 ksqlQueryProcedure 有 4 个参数,其中  参数 ksql 是查询报表数据的 ksql 语句,语句中可以使用占位符变量,即用在变量名前加 冒号的方式标记;  参数 variables 指定 ksql 语句中的参数的值,可以从界面传入;  参数 dataModal 需要指定 ksql 语句中概念所在的数据模块;  参数 fnModal 指向 ksql 语句中使用的函数模块,如果没有使用函数,不用赋值。 图 6.2 ksqlQueryProcedure 6.2.1.2 使用 在向导中使用 使用报表向导新建 w 文件,在配置数据集信息时,数据源类型选择 KSQLAction,点击 action 编辑框右面的第一个按钮,弹出选择 Action 窗口,列出 process 文件动作设置中包含的 action, 选择一个 Action,注意这个 Action 对应的 procedure 必须是 ksqlQueryProcedure,点确定按钮即 可。 提示:使用 ksqlAction 时,process 文件需要引用 ksqlAction 的 dataModel 参数指向的目录。 X5 快速开发指南 2011 Justep Corp. 第 173 页 共 219 页 起 步 科 技 图 6.3 选择已有的 Action 如果没有在 BIZ 中定义 Action,可以在向导中新建。点击 action 编辑框右面的第二个按钮, 弹出新建 Action 窗口,如下图所示。在标识中输入新 Action 的标识,在参数 ksql 的值里面输入查 询报表用的 ksql 语句,可以点参数 ksql 值右边的按钮进入 ksql 编辑器。点确定按钮即可。 图 6.4 新建 Action 在设计器中使用 在 w 文件中,点 reportData 的 source 属性,在弹出的对话框中,列出 process 文件动作设置 中包含的 action,选择一个 Action,选择数据源类型为 KSQLAction,如下图所示。 X5 快速开发指南 2011 Justep Corp. 第 174 页 共 219 页 起 步 科 技 图 6.5 选择已有的 Action 给参数 ksql 中的占位符变量赋值 通常情况下,报表的界面上需要增加一些条件用于查询数据。这就需要给 KSQLAction 传参,然 后刷新报表。 根据用户的输入和选择,写 js 代码实现。例如:KSQLAction 中的 ksql 参数定义如下,其中定 义了变量 p select SA_WorkRecord.sLock as sLock, SA_WorkRecord.sProjectID as sProjectID from SA_WorkRecord SA_WorkRecord where SA_WorkRecord.sExecutorPersonName = :p 用 js 代码给变量 p 赋值,代码如下 //使用repoatData组件的setXXXVar方法,给KSQL中的占位符变量赋值 justep.xbl('reportData1').setStringVar('p', '变量p的值'); //使用repoat组件的refresh方法刷新报表。 justep.xbl('report1').refresh(); 其中方法 setStringVar 是给字符串类型的变量赋值,给其它类型的变量赋值的方法参见 X5-API.chm 文件。 6.2.2 Action 6.2.2.1 定义 Action 的参数可自由定义,注意返回值类型必须是 Table。案例请参见/BIZ/demo/report /logic/action/propertyReportAction.action.m 其中的 parameterFilterReportAction。平台提供 了将 ResultSet 转换成 Table 的 java 方法 BizUtils.resultSet2Table。 X5 快速开发指南 2011 Justep Corp. 第 175 页 共 219 页 起 步 科 技 图 6.6 Action 案例 6.2.2.2 使用 在向导中使用 使用报表向导新建 w 文件,在配置数据集信息时,数据源类型选择 Action,点击 action 编辑 框右面的第一个按钮,弹出选择 Action 窗口,列出 process 文件动作设置中包含的 action,选择 一个 Action,。如下图所示。 图 6.7 选择已有的 Action X5 快速开发指南 2011 Justep Corp. 第 176 页 共 219 页 起 步 科 技 由于向导不能获得 Action 返回的列信息,因此必须定义业务字段,才能继续向导后面的操作, 各列名之间用逗号分隔,如下图所示。业务字段输入完毕后,点确定按钮即可。 图 6.8 数据集配置 在设计器中使用 在 w 文件中,点 reportData 的 source 属性,在弹出的对话框中,列出 process 文件动作设置 中包含的 action,选择一个 Action,选择数据源类型为 Action,如下图所示。 图 6.9 选择已有的 Action 给 Action 的参数赋值 通常情况下,报表的界面上需要增加一些条件用于查询数据。这就需要给 Action 传参,然后刷 新报表。 X5 快速开发指南 2011 Justep Corp. 第 177 页 共 219 页 起 步 科 技 根据用户的输入和选择,写 js 代码实现。例如:Action 中的定义了两个参数,分别是 name 和 id。用 js 代码给这两个参数赋值,代码如下 //使用repoatData组件的setXXXVar方法,给Action中的参数赋值 justep.xbl('reportData1').setStringVar('name', '参数name的值'); justep.xbl('reportData1').setStringVar('id', '参数id的值'); //使用repoat组件的refresh方法刷新报表。 justep.xbl('report1').refresh(); 其中方法 setStringVar 是给字符串类型的变量赋值,给其它类型的变量赋值的方法参见 X5-API.chm 文件。 6.2.3 Process 中添加 Action 在/BIZ/x5demo/rptDemo/process 目 录 上 右 键 “ 新 建 | Process 文 件 ”,新 建 一 个 名 叫 “Test_ReportTB”的 process。点动作设置,添加新建的 Action。 6.3 报表界面建模 下面介绍几种常用报表。通过使用向导生成、使用设计器开发两种方式分别介绍网格报表、分 组报表、卡片报表、交叉报表、主从报表。 6.3.1 网格报表  网格报表——使用向导 在“/UI/x5demo/rptDemo/process/Test_ReportTB”目录上右键“新建 | W 文件”,选择“向 导”,点下一步,选择“报表 | 网格报表”,点下一步。 图 6.10 新建.w 文件-使用报表向导 X5 快速开发指南 2011 Justep Corp. 第 178 页 共 219 页 起 步 科 技 进入配置项设置页面,首先配置数据集信息。如下图所示。  数据集名称:用户自定义  数据集类型:选择 reportData  数据源类型:选择 KSQLAction  Action:选择一个已定义的Action,或者新建一个Action。具体操作请参见6.2报表Action。  KSQL 语句:显示 Action 的 ksql 参数的值 图 6.11 配置项设置-数据集 其次配置显示项信息,选择报表中要显示的列,如下图。点完成,生成报表文件。 X5 快速开发指南 2011 Justep Corp. 第 179 页 共 219 页 起 步 科 技 图 6.12 配置项设置-显示项 完成后在“/UI/x5demo/rptDemoi/process/Test_ReportTB/reports”下会生成一个 w 文件(界 面设计文件)和一个.xls 文件(报表设计文件),开发完成。  网格报表——使用设计器 不使用向导,也可以通过设计器进行报表的开发。 在“/UI/x5demo/rptDemo/process/simpleReport”目录上右键“新建 | W 文件”新建一个空 白页,如下图: X5 快速开发指南 2011 Justep Corp. 第 180 页 共 219 页 起 步 科 技 图 6.13 新建 W 文件 在页面的 model1 中放置一个 reportData 组件,设置 source 属性:这里设置的信息含义和向导 中配置数据集信息相同。 在页面上放置一个“工具栏 | toolbars”组件,然后 toolbars 组件上面放置一个 printBar 组 件和一个 exportBar 组件,在页面上再放置一个 report 组件,printBar 和 exportBar 组件的 report 属性分别指向该 report 组件。 图 6.14 报表工具栏设置 选择 report 组件,点击 src 属性的按钮,在弹出的界面上的名称一栏中输入 simple,为报表 X5 快速开发指南 2011 Justep Corp. 第 181 页 共 219 页 起 步 科 技 创建一个名为 simple.xls 的 excel 文件。该 excel 文件会做为报表设计的主要文件,所有报表展现 的样式都在这个 excel 中进行定义。 图 6.15 新建报表布局文件 设置 data-list 属性为 reportData1,该属性为 excel 文件设计提供数据关系。鼠标右键点击 report 组件,选择“切换到报表设计”,设计器会切换到 excel 设置模式。 图 6.16 切换到报表设计 在报表 excel 设计模式中,左下属性编辑窗口显示报表中可以使用的属性即批注,右边显示关 联的数据集中可以使用到的数据字段,以及控制数据如何展现的语句。首先定义报表标题与表头。 然后点击 reportData1 下的 select()语句,再点击 excel 中的 B3 单元格。这时会弹出函数选择编 辑 器 , 将 关 键 字 段 选 为 .fCustomerName 确定。在单元格中会生成 X5 快速开发指南 2011 Justep Corp. 第 182 页 共 219 页 起 步 科 技 reportData1.select(reportData1.fCustomerName)。 图 6.17 添加 select 函数 分别使用点击 reportData1 下面的数据字段,并再次点击 excel 单元格的方法,将数据字段填 写到对应的单元格上,并保存。 图 6.18 添加数据字段 点击左上组件结构树上的 rootView,切换到报表页面设计,设置 auto-load 属性为 true,表示 在页面打开时及加载数据显示。 注意:用 Excel 画出报表的显示格式,关键是报表数据的设置,通常会在第一列上使用一个 select 函数,用来遍 历报表的数据集,其它单元格里面设置要显示的数据项。 X5 快速开发指南 2011 Justep Corp. 第 183 页 共 219 页 起 步 科 技 图 6.19 报表界面文件 配置功能树、分配权限、运行,下图是运行效果图: 图 6.20 运行效果 6.3.2 分组报表  分组报表——使用向导 选择模板 X5 快速开发指南 2011 Justep Corp. 第 184 页 共 219 页 起 步 科 技 图 6.21 新建 W 文件-使用向导 数据集和显示项的配置方法同网格报表的配置。 分组信息配置:设置可合并的列 图 6.22 分组字段设置 统计项设置:设置总计或每一个分组的需要统计的列 X5 快速开发指南 2011 Justep Corp. 第 185 页 共 219 页 起 步 科 技 图 6.23 统计项设置 统计列的统计方式:求和、平均值、最大值、最小值。点完成,即可生成分组报表文件。  分组报表——使用设计器 关键字:group 扩展函数 分组报表和上面例子中的简单网格报表开发过程是一样的,惟一区别是 Excel 报表设计文件, 我们只要掌握一个扩展函数“group”就可以了,在需要分组的列上使用该函数进行分组。Excel 文 件如下图: 图 6.24 分组报表布局设置 X5 快速开发指南 2011 Justep Corp. 第 186 页 共 219 页 起 步 科 技 运行效果如下图: 图 6.25 分组报表运行效果 6.3.3 卡片报表  卡片报表——使用设计器 关键字:合并单元格 卡片报表和上面例子中的简单网格报表开发过程是一样的,惟一区别是 Excel 报表设计文件, 我们只要掌握一项关键技术“合并单元格”就可以了。Excel 文件如下图: X5 快速开发指南 2011 Justep Corp. 第 187 页 共 219 页 起 步 科 技 图 6.26 卡片报表布局设置 运行效果如下图: 图 6.27 卡片报表运行效果 6.3.4 交叉报表  交叉报表——使用向导 选择模板 X5 快速开发指南 2011 Justep Corp. 第 188 页 共 219 页 起 步 科 技 图 6.28 新建 W 文件-使用向导 数据集的配置方法同网格报表的配置。 交叉信息配置:设置交叉报表中的行、列和值分别对应的字段。 例如:横向延展的如果是部门信息,就将部门字段选进列字段; 纵向延展的如果是用品信息,就将用品字段选进行字段; 表格中的数据如果是数量信息,就将数量字段选进统计字段。 X5 快速开发指南 2011 Justep Corp. 第 189 页 共 219 页 起 步 科 技 图 6.29 交叉表字段设置 点完成,即可生成交叉报表文件。  交叉报表——使用设计器 关键字:grouph 扩展函数 分组报表和上面例子中的简单网格报表开发过程是一样的,惟一区别是 Excel 报表设计文件, 我们只要掌握一个扩展函数“grouph”就可以了。Excel 文件如下图: 图 6.30 交叉报表布局设置 运行效果如下图: 注意 :B2 单元格加批注:colspan:$ALL.PR4C3+1 目的是报表标题居中显示 B4 单元格内容为产品|供应商,再加批注:display-type:slant-line 目的是实现这样的效果 ,表头中显示斜线 X5 快速开发指南 2011 Justep Corp. 第 190 页 共 219 页 起 步 科 技 图 6.31 交叉报表运行效果 6.3.5 主从报表  主从报表——使用设计器 主从报表需要放置两个 reportData 组件,一个对应主表,一个对应从表。Excel 报表设计文 件如下图: 图 6.32 主从报表布局设置 X5 快速开发指南 2011 Justep Corp. 第 191 页 共 219 页 起 步 科 技 运行效果如下图: 图 6.33 主从报表运行效果 6.4 图表开发 图表开发和报表开发大致相同,可以使用向导生成图表,也可以在设计器中开发图表。唯一的 区别是使用的组件不同,报表使用的组件是 report,图表使用的组件是 chart。 6.4.1 使用向导 选择模板 注意 主从报表类似于卡片报表,需要进行合并单元格的设置 从表的 select 函数需要第二个参数进行设置主从的关联,格式为:主表.主键=从表.外键 主表的 select 函数所在单元格加批注:is-master-dataset:true 从表的 select 函数所在单元格加批注:master-dataset:主表 id X5 快速开发指南 2011 Justep Corp. 第 192 页 共 219 页 起 步 科 技 图 6.34 新建 W 文件-使用向导 选择要生成的图表的类型,例如选择饼图 图 6.35 图表类型选择 数据集的配置方法同网格报表的配置。 图表数据配置图表中各个轴的数据来源字段。例如在饼图中显示每种用品的申请数量。分类轴 就是用品名称字段,数量轴就是申请数量字段。 X5 快速开发指南 2011 Justep Corp. 第 193 页 共 219 页 起 步 科 技 图 6.36 图表数据配置 在样式配置中可以设置图表标题等信息。 图 6.37 图表样式配置 点完成,即可生成图表文件。 X5 快速开发指南 2011 Justep Corp. 第 194 页 共 219 页 起 步 科 技 6.4.2 使用设计器 1、 流程建模 请参照 6.1 的流程建模, 2、 图表设计  新建空白 w 文件。  添加 reportData 组件,并设置属性。  在页面上放置一个“工具栏 | toolbars”组件,然后 toolbars 组件上面放置一个 printBar 组件和一个 exportBar 组件,在页面上再放置一个 chart 组件,suto-load 属性设置为 true, printBar 和 exportBar 组件的 report 属性分别指向该 chart 组件。  在 chart 组件上点右键,选择“添加子图表”菜单,在弹出的窗口中选择自己需要的图表 样式,在这里我们选择的是“饼图 | 3D 饼图” 图 6.38 选择图表类型  在设计界面左侧的组件树中选择子图表节点,设置子图表的 data 属性 X5 快速开发指南 2011 Justep Corp. 第 195 页 共 219 页 起 步 科 技 图 6.39 子图表 data 属性设置  设置子图表的 config 属性,设置图表的标题及相关展现参数。 图 6.40 图表标题设置 注意 子图表最重要的就是 data 属性,所有的子图表根据类型的不同需要设置的项目也不相同,具体请参考其它 相关文档《报表模型》。 X5 快速开发指南 2011 Justep Corp. 第 196 页 共 219 页 起 步 科 技 图 6.41 拼图相关参数设置  最后配置功能树、分配权限,运行效果图如下: 图 6.42 图表运行效果 X5 快速开发指南 2011 Justep Corp. 第 197 页 共 219 页 起 步 科 技 第7章 案例 本章要点:  树型实例  主从实例  级联下拉实例  弹出窗口实例 7.1 树型实例 现实世界中我们经常会遇到一些具有上下级关系的事物,比如行政区域(国家、省、市),通常 我们会用“树”的形式来展现这种数据。本节主要来讲解在 X5 平台中树型数据展现是如何实现的。 开发树型实例必要的步骤包括:数据建模、流程建模和界面建模。具体开发步骤如下: 7.1.1 数据建模 在本体文件中新建一个名为“用品类型”的概念,如下图所示: 图 7.1 树型概念 X5 快速开发指南 2011 Justep Corp. 第 198 页 共 219 页 起 步 科 技 图 7.2 在关系中设置互逆 业务数据关系——类型代码和类型名称。类型名称用于树的显示。 树型关系——父和子。这两个关系需要进行如下的设置  这两个关系的关系类型必须设置为当前的概念类型  父和子设为互逆关系(互逆不能在概念中设置,必须在关系中设置,如上图)  子关系设置为多值关系(去掉单值属性的对勾)  子关系的高级设置,配置级联删除  在映射设置中,添加父关系的映射 自动维护关系——节点类型和节点层次,这两个关系的值由树形组件(grid 组件)维护。节点 类型用于组件展示末级节点时,不使用文件夹图标,左侧不出现加号,方便用户识别末级节点。节 点层次是组件为了开发者使用自动维护的关系。开发者可以方便的获得某一级的全部节点。 设置级联删除,点击子关系高级列的小按钮,出现高级设置对话框,如下图所示。整体部分关 系选择 composition,勾选是否树型,点确定按钮。 图 7.3 树型级联删除 提示 整体部分关系设置为 composition 表示级联删除,设置为 aggregation 表示级联清空。 级联删除表示删除一条记录时,它的所有子记录都被删除。 级联清空表示删除一条记录时,它的子记录的父关系被清空。 X5 快速开发指南 2011 Justep Corp. 第 199 页 共 219 页 起 步 科 技 在映射设置的字段映射中,添加字段映射,选择父关系,点确定按钮。 图 7.4 树型的映射设置 在标准动作设置中,点添加按钮,再点确定按钮,添加 3 个标准动作。 7.1.2 流程建模 新建 process 文件,在动作设置中添加用品类型的 3 个标准动作。 7.1.3 界面建模 新建 w 文件,使用树形+详细模板,如下图所示: 提示 上面讲述了如何配置一个具有级联删除能力的树形概念,即当删除一个带有子节点的节点时,系统会将其 连同它的子节点一起删除。如果不需要这个能力,可以简化这个配置过程。不需要添加子关系,不用设置互逆。 X5 快速开发指南 2011 Justep Corp. 第 200 页 共 219 页 起 步 科 技 图 7.5 树型模板向导 模板向导中,配置项设置中的主数据选择刚才新建的用品类型概念;树配置界面如下图所示, 其中各项配置说明如下: parent-relation——选择概念中定义的父关系 node-kind-relation——选择概念中定义的节点类型关系 node-level-relation——选择概念中定义的节点层次关系 root-filter 设置根节点的过滤条件,空表示取根节点 virtual-root——定义一个虚根,用于界面显示。 树节点名称——选择概念中定义的类型名称关系 X5 快速开发指南 2011 Justep Corp. 第 201 页 共 219 页 起 步 科 技 图 7.6 树型模板向导-树配置 详细视图只配置业务数据关系即可。 图 7.7 树型模板向导-详细视图配置 点击“完成”按钮,生成的 w 文件效果如下图所示: X5 快速开发指南 2011 Justep Corp. 第 202 页 共 219 页 起 步 科 技 图 7.8 树型模板向导生成的界面 7.1.4 授权运行 接下来进行功能树配置、分配权限的操作,运行效果如下图所示: 图 7.9 运行效果 X5 快速开发指南 2011 Justep Corp. 第 203 页 共 219 页 起 步 科 技 7.2 主从实例 在界面上需要维护具有主从关系的两个表,请参照本节讲解。本例中主从实例界面的开发使用 平台提供的主从模板,必要的步骤包括:数据建模、流程建模和界面建模。具体的开发步骤如下: 7.2.1 数据建模 新建一个名为“用品申请”的概念,作为主概念,新建的概念如下图所示: 图 7.10 新建主概念 新建一个名为“用品申请明细”的概念,作为从概念,新建的概念如下图所示: X5 快速开发指南 2011 Justep Corp. 第 204 页 共 219 页 起 步 科 技 图 7.11 新建从概念 图 7.12 在关系中设置互逆 主从关系——主表 ID 和从表 IDs。这两个关系需要进行如下的设置  主表 ID 的关系类型必须设置为主概念类型  从表 IDs 的关系类型必须设置为从概念类型  主表 ID 和从表 IDs 设为互逆关系(互逆不能在概念中设置,必须在关系中设置,如上 图)  从表 IDs 设置为多值关系(去掉单值属性的对勾)  从表 IDs 的高级设置,配置级联删除 X5 快速开发指南 2011 Justep Corp. 第 205 页 共 219 页 起 步 科 技  在映射设置中,添加主表 ID 的映射 设置级联删除,点击主概念中的从表 IDs 高级列的小按钮,出现高级设置对话框,如下图所示。 整体部分关系选择 composition,点确定按钮。 图 7.13 主从的级联删除 在从概念的映射设置的字段映射中,添加字段映射,选择主表 ID,点确定按钮。 图 7.14 主从的映射设置 在主从概念的标准动作设置中,点添加按钮,再点确定按钮,共添加 6 个标准动作。 7.2.2 流程建模 新建 process 文件,在动作设置中添加用品申请和用品申请明细的 6 个标准动作。 X5 快速开发指南 2011 Justep Corp. 第 206 页 共 219 页 起 步 科 技 7.2.3 界面建模 新建一个 w 文件,使用“主从-列表+详细(门户页)”模板。如下图所示: 图 7.15 主从模板向导 点击“下一步”按钮,进入配置项设置界面。 列表数据——选择主概念 列表视图——选择主概念中的关系 列表过滤——可不添加过滤 详细数据——点从列表数据复制即可 详细视图——设置弹出页的标题并选择主概念中的关系 从表数据——选择从概念,并设置 master-relation 为主表 ID 关系 从列表视图——选择从概念中的关系 X5 快速开发指南 2011 Justep Corp. 第 207 页 共 219 页 起 步 科 技 图 7.16 主从模板向导-设置从表数据 点击“完成”按钮,生成两个 w 文件效果如下图所示: 图 7.17 主从模板向导生成的主窗口 X5 快速开发指南 2011 Justep Corp. 第 208 页 共 219 页 起 步 科 技 图 7.18 主从模板向导生成的弹出窗口 7.2.4 授权运行 接下来进行功能树配置、分配权限的操作,运行效果如下图所示: 图 7.19 运行效果 X5 快速开发指南 2011 Justep Corp. 第 209 页 共 219 页 起 步 科 技 7.3 级联下拉实例 级联下拉列表就是有两个下拉列表,实现关联下拉。以部门下拉列表和人员下拉列表为例,介 绍 orgSelect 组件的用法,以及如何实现级联下拉。 在主从实例开发出的功能上,实现部门人员级联下拉。具体开发步骤如下: 7.3.1 部门下拉列表 在 w 文件中,加入 orgSelect 组件,用作部门下拉列表,设置其 show-org-types 属性,如下图 所示: 图 7.20 orgSelect 组件 orgSelect 组件是一个组合组件,里面包含 treeSelect 组件和 bizData 组件。bizData 组件已 经配置好,不用设置。treeSelect 组件需要设置 ref 和 label-ref 两个属性,如下图所示: X5 快速开发指南 2011 Justep Corp. 第 210 页 共 219 页 起 步 科 技 图 7.21 orgSelect 组件中的 treeSelect 组件 原来申请部门的 controlLabel 组件的 control 属性对应的组件被删除了,因此需要选成新加的 orgSelect 组件,但是 controlLabel 组件只能指向那些有 ref 属性的组件,因此 control 属性应指 向 orgSelect 组件中的 treeSelect 组件。另外,如果不希望显示 ref 对应的关系名称,则将希望显 示的名称填入 label 属性即可。如下图所示: 图 7.22 controlLabel 组件 X5 快速开发指南 2011 Justep Corp. 第 211 页 共 219 页 起 步 科 技 7.3.2 人员下拉列表 在 w 文件中,再加入 orgSelect 组件,用作人员下拉列表,设置其 show-org-types 属性,如下 图所示: 图 7.23 orgSelect 组件 orgSelect 组件的 treeSelect 组件需要设置 ref 和 label-ref 两个属性,如下图所示: 图 7.24 orgSelect 组件中的 treeSelect 组件 orgSelect 组件的 bizData 组件需要设置 root-filter 属性,因为该组件默认 root-filter 为 X5 快速开发指南 2011 Justep Corp. 第 212 页 共 219 页 起 步 科 技 空不表示没有根节点的过滤条件,而是表示根节点的过滤条件是父关系为空的条件,所以需要设置 一个条件,例如 1=1。如下图所示: 图 7.25 orgSelect 组件中的 bizData 组件 原来申请人的 controlLabel 组件的 control 属性对应的组件被删除了,因此需要选成新加的 orgSelect 组件,但是 controlLabel 组件只能指向那些有 ref 属性的组件,因此 control 属性应指 向 orgSelect 组件中的 treeSelect 组件。另外,如果不希望显示 ref 对应的关系名称,则将希望显 示的名称填入 label 属性即可。如下图所示: 图 7.26 controlLabel 组件 在人员下拉列表组件的 onDropdown 事件中,写 js 代码。实现级联下拉。 使用bizData组件的getValue方法,获得部门id X5 快速开发指南 2011 Justep Corp. 第 213 页 共 219 页 起 步 科 技 var deptId = justep.xbl('masterData').getValue("fApplyDeptID"); var personData = justep.xbl('orgSelect2').getData(); 使用bizData组件的filters对象的setFilter方法,设置过滤条件 personData.filters.setFilter('filter0',"SA_OPOrg.sParent='"+deptId+"'"); 使用bizData组件的refreshData方法,刷新数据 personData.refreshData(); 代码如下图所示: 图 7.27 级联下拉-添加事件源码 运行效果如下图所示 图 7.28 级联下拉-运行效果 X5 快速开发指南 2011 Justep Corp. 第 214 页 共 219 页 起 步 科 技 7.4 弹出窗口实例 用主从实例生成的界面,在上面增加使用弹出窗口选择用品的功能。步骤如下:先使用对话框 向导生成一个弹出窗口,用来选择用品,再在主窗口中放一个 windowDialog 组件,设置其 url 属性 和 mapping 属性,在主窗口中写 js 代码打开弹出窗口,实现选择用品。 7.4.1 制作弹出窗口 1. 新建 w 文件,使用对话框向导——树导航列表多选 图 7.29 对话框向导 2. 配置导航树 树导航列表多选生成的弹出窗口是先在左侧导航树中选择用品类型,右边列表中就会列出该用 品类型下的用品。所以在向导中需要配置两个数据,使用导航树配置用品类型,使用列表配置用品。 在导航树数据中,选择用品类型概念。 X5 快速开发指南 2011 Justep Corp. 第 215 页 共 219 页 起 步 科 技 图 7.30 对话框向导-导航树数据 在导航树配置中,选择用品类型的父关系、节点类型关系、节点层次关系;输入根节点的过滤 条件和虚拟根节点的名称;树节点名称选择类型名称关系;如果概念中有节点路径关系,可以通过 设置定位树节点的关系和定位树节点的路径关系实现根据输入进行树的定位。 图 7.31 对话框向导-导航树配置 X5 快速开发指南 2011 Justep Corp. 第 216 页 共 219 页 起 步 科 技 3. 配置列表 在列表数据中,选择用品概念,并设置 parent-realtion 为用品概念中指向用品类型概念的外 键关系。 图 7.32 对话框向导-列表数据 在列表配置中,配置列表中显示的列。选择项显示名称设置为用品名称关系。列表过滤的关系 可以选择多个关系,在列表过滤框中输入后,实现对这些关系的过滤。 X5 快速开发指南 2011 Justep Corp. 第 217 页 共 219 页 起 步 科 技 图 7.33 对话框向导-列表配置 弹出窗口制作完成。 7.4.2 制作主窗口 1. 在主窗口中放 windowDialog 组件 2. 设置 url 属性  设置 url 属性为弹出窗口文件的全路径名。 例如: /UI/x5demo/baseDemo/process/goods/selectActivity.w 用这样的方式打开的弹出窗口,在获 取当前 process 和当前 activity 时,获取到的是主窗口的 process 和 activity。意味着弹出窗口 中用到的 Action 要在主窗口的 process 中添加动作设置。  设置 url 属性为弹出窗口文件的全路径名再加上 process 和 activity 两个参数。 例如: /UI/x5demo/baseDemo/process/goods/selectActivity.w?process=/x5demo/bizDemo/process /goods/goodsProcess&activity=selectActivity 用这样的方式打开的弹出窗口,在获取当前 process 和当前 activity 时,获取到的就是参数中的 process 和 activity。意味着弹出窗口中用到 的 Action 要在参数指向的 process 中添加动作设置。 图 7.34 主窗口-windowDialog 组件 3. 设置 mapping 设置 将在弹出窗口中选择的数据,返回给主窗口。例如将弹出窗口中的用品代码和用品名称返回到 主窗口的从表中;从表中的外键关系主表 ID,在新增记录时系统会自动写入主表的 rowid。 X5 快速开发指南 2011 Justep Corp. 第 218 页 共 219 页 起 步 科 技 图 7.35 主窗口-windowDialog 组件的 mapping 属性 windowDialog 组件配置完成。 4. 打开弹出窗口 在打开弹出窗口事件中写 js 代码,调用 windowDialog 组件的 open 方法,打开弹出窗口。例如: justep.xbl('windowDialog1').open(); 运行效果如下图所示。 图 7.36 运行效果-弹出窗口 选择数据后,返回给主窗口。运行效果如下图所示 X5 快速开发指南 2011 Justep Corp. 第 219 页 共 219 页 起 步 科 技 图 7.37 运行效果-主窗口 综述:本章结合具体实例,从实用的角度比较全面地讲解了通常开发过程中数据建模的内容和操作,如果想从更 高的高度来深入理解数据建模的相关理论,可以参见平台模型理论方面的文档。
还剩218页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

ttbs1314

贡献于2016-05-16

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf