移动应用开发框架WADE-Mobile

1、精品移动应用开发专题二创新周报总第 172 期框架为桥 ,天堑变通途移动应用开发框架 (WADE-Mobile参与过早期J2EE WEB开发的同事一定记忆犹新，大多数程序员都刚刚从传统 的 PB、Delphi 等C/S 模式应用开发中转型过来 ,不再是单一的编程语言 ,也缺少统一的集成开发 环境(IDE,满眼尽是从前端(JSP、HTML、Javascript 到后端(Java、HTTP、WSDL、DB 数量 众多、纷繁复杂的全新面孔。混乱过一阵子后 ,开源和定制开发框架逐渐兴起 ,技术门槛高、开发效率低的糟 糕境况才得以好转。今天,移动应用开发又将我们拉回到这似曾相识的境地。云计算、移动互联网

2、 大势所趋 ,HTML5 、 CSS3新技术闪亮齐登场。 Apple iOS 、 Google Android 、 Windows Phone 、 OMS( 中国移动 OPhone 、 Linux( 中国联通沃 Phone 等平台之争 ,Objective-C 、 Java、 C/C+ 各种语言伴随着 陆。Apple xCode、Google An droid Developme nt Tools (ADT、中国移动Open Mobile System Development Tools (ODT 、 Microsoft Visual Studio 2008 等各种开发环境跟着乱象纷呈。我们会

3、不会再次回到混沌之初,期待盘古重开天地呢 ?答案是否定的 ,请看下面关于移动应用开发框架 (WADEMobile 的详细介绍。WADE 移动应用开发框架 (简称 WADE-Mobile 基于最新的 WEB 技术(HTML5、CSS3,并结合面向各种操作系统、移动设备的专用 APP 壳,可广泛用于各种企业场景的移动应用开 发,能够有效降低技术门槛、提高开发效率、保证产品质量和保障信息安全。适用场景WADE-Mobile 适用于公司内部各部门移动应用产品研发和项目实施 ,包括满 足运营商业务支撑系统向移动设备终端的延伸需求 ,以及面向更为广阔的移动互联网领域 ,开发公众 使用的移动应用产品。在运营

4、商业务支撑系统方面 ,已知能够适用的一些需求包括 :中国移动集团规范 (NGBOSS-CRM3 多 OP管理分册 G3 版工作台部分、广东移动 G3 版 CRM 手机客户端解决方案、中 国移动集团公司统一积分商城、上海移动 WLAN 登录、江苏电信掌上 BOSS 等。在移动互联网方面 ,可 以支持的移动设备操作系统包括 :Apple iOS, 开发使用 Objective-C 程序语言和 xCode 集成开发环 境 ;Google Android, 开发使用 Java 程序语言和 Eclipse 集成开发环境 ,包含 Android Development Tools (ADT 插件包 ;中国

5、移动 Open Mobile System (OMS, 程序语言和开发环境同谷歌类似 ,不同 的是插件包为 OMS Development Tools (ODT;中国联通沃 PHONE,国产Linux操作系统 ,使用 C/C+ 程序语言和 Microsoft Visual Studio 2008集成开发环境 ;其它还有 Microsoft Windows Phone 、 BlackBerry OS 、Nokia Symbian 等,在 此不再一一赘述。能做什么WADE-Mobile 能为移动应用开发提供全方位支持。不但能够辅助开发人员 轻松完成前端的页面开发、脚本编码 ,以及后端的 WEB 服

6、务 ;而且可以协助测试人 员、配置管理人员等进行功能验证和产品发布。如同工厂里的自动化流水线一般 , 直接产出可供立即上架的成品。一是提供模板 ,支持静态页面拼装。让我们先来看看 WEB 页面开发的一般流程 美工提前设计界面效果图 ;接着做切分 ,形成样式、图片等备选资源 ;然后 ,程序员再用 HTML和CSS正式开发页面。整个过程步骤很多，非常繁琐，显得特别笨重。对参与 其中的美工和程序员素质要求也相当高 ,美工在设计效果图的时候不但要考虑用户 需求,还要照顾程序员的实现能力程序员则要深入掌握HTML、CSS知识。大家都 知道,招聘一个既懂需求又了解程序开发的美工很困难 ,而类似最新流行的

7、HTML5 和CSS3技术，要想让普通程序员都快速学会并且熟练使用,也不是件容易的事情。 WADE-Mobile 可以在一般的开发过程中 ,省去美工这一角色 ,类似从前 C/S 架构应 用一样 ,程序员仅需选用合适的“控件”快速拼装 ,即可完成页面的开发。这里提到 的“控件”主要是指模板（元素、组件和布局和现成的CSS样式文件。程序员通过 简单的拷贝和引入 ,就能做出实用、美观并富含先进技术的高品质页面。一个对 WADE-Mobile 基本熟练的程序员 ,几乎可以做到在同客户一对一互动需求的同时 , 完成页面的开发。从需求到实现的过程中 ,让客户获得“所说即所见、所见即所 得”的完美体验。二是

8、提供 API, 支持动态脚本编码。动态脚本编码是在静态页面效果完成之后 进行的开发步骤 ,开发内容包括离线交互、本地存储、在线访问和设备功能。 WADE-Mobile 提供完整的 Javascript API 支持,程序员无需了解其中的技术实现 细节,包括各种操作系统、设备机型差异等。这些 API 是面向开发人员的统一编程 接口,后端封装有各种差异化实现 ,如针对 iOS 的 Objective-C 程序功能、针对 Android 的 Java 程序功能、调用后端云服务进行数据交互等。四是提供 APP 壳 ,支持产品在各种设备终端的兼容运行。 APP 壳是支撑前面提 及 API 的实体 , 也

9、是最终安装到用户个人设备上的移动应用 ,例如针对使用 Android2.1 操作系统的 Motorola Milestone手机 ,则是一个扩展名为 APK 的程序安装包。对于 APP 壳,程序员不用关心 ,但是测试人员和最终用户需要使用。使用 WADE-Mobile 开发的移动应用产品 ,实质上就是借助 APP 壳打开位于服务器端的 WEB 应用。开发 APP 壳 ,并广泛支持各种移动设备终端 ,使得基于框架 API 开发的 移动应用产品都具备良好的兼容性 ,是 WADE-Mobile 作为开发框架所必备的基础 设施。五是提供云服务框架 ,支持 WEB 服务的快速封装。接口封装框架 (MWJ

10、I 隶属 于 WADE 基础平台产品 ,专门用来封装业务支撑系统内部已有的业务逻辑代码。通 过配置即可封装成为供外部访问的 WEB 服务,不光同时支持 HTTP 和 WSDL 方式 , 而且安全方面还能得到很好的保障。基于 WADE-Mobile 的移动应用同 MWJI 框 架完全兼容 ,程序员通过快速封装即可完成移动应用后端的 WEB 服务开发。另外 , 即将推出的云计算资源平台 (WADE-LC 还可以提供原生的私有云计算支持 ,包括资 源智能伸缩、应用自动部署、服务动态路由等特性。六是提供集成开发环境 ,辅助开发、调试。集成开发环境 (WADE-Studio 为移 动应用开发提供工具支持

11、 ,包括开发工具、调试工作台等。程序员可以借助向导 ,快 速开发初步的移动应用功能部件 ,包括项目、功能、文件等。有经验的程序员还可 以封装自己的可复用代码 ,打包成为 WADE-Studio 的用户模板 ,供自己二次使用或者分发给其他程序员开发使用。如何使用下面将扼要介绍 WADE-Mobile 的开发环境、关键步骤和使用方法。熟悉集成开发环境使用获取到的WADE开发环境文件包，开发人员可以快速在本机搭建好开发环 境。Eclipse、WADE-Studio 插件集、工作区（Workspace、调试工作台、 Tomcat、JDK、开发调试工作台、集成运行工作台等一应俱全。如果开发人员有 自己个

12、性的喜好，已经有了类似MyEclipse之类的开发环境，不用担心被强制替换。 因为WADE-Studio插件集可以同已有的其它Eclipse开发环境融为一体，同样也 能提供很好的开发支持。 Studio,基于著名的跨平台自由集成开发环境DEEclipse,提供一组标准的 Eclipse插件集。 Workspace,开发工作也是Eclipse工作区，用于存放源代码，包括示例项目Quickstart,其中包含单应用工作台 ,用于开发调试时运行单一应用的功能 ,便于开发人员进 行单元测试。服务器,开发环境文件包中自带有 Tomcat 应用服务器 ,正式环境可以采用商 用产品 ,如Oracle Web

13、logic 。多应用工作台 (Desktop 、信息推送服务 (IM 都属于基础设施 ,集中存放在开 发环境文件包的 Base 文件夹中 , 默认配置为随同 Tomcat 应用服务器启动时一并运行。另外,开发环境文件包还提供有开发所必须的 Java Development Kit (JDK 1.6 版本。开发静态页面具备简单 HTML 语言基础的开发人员 ,在熟悉了移动应用静态页面开发框架 (ECL4M 提供的元素、组件和布局之后 ,就可以像拼图一般简单快速地开发页面。以下是包含框架模板沉淀积累在内的完整演进图 :沟鼻翔化丰柬普通开发人员根据业务需求,使用模板拼装初步的静态页面。这可能是一个反

14、 复的过程，根据需求开发页面，用页面反过来印证需求，需求和页面相互作用，最终达到需求和 实现的完美统一，如果存在现有模板无法满足的需求，那么就由框架研发人员修改/补充HTML 模板和CSS样式文件。在项目中，以业务功能开发、保证工程实施进度为第一要务，框架内容的 修改第一时间应用于当前的页面实现之中。待到主体工作完成之后，再抽象成为正式的可 复用模板。倘若实际情况许可 ,建议完成从卓越到完美的最后工序即在最终的静态页面 中,将修补的内容替换成为标准的模板复用。大大改善系统稳定性的同时 ,还能提高代码的 标准化程度 ,为接下来的维护及将来的升级改造提供极大的便利。编写页面动态脚本具备一定的 Ja

15、vascript 脚本语言基础的开发人员 ,在了解移动应用动态脚本核 心类库 (JCL4M 提供的 API 之后,就可以驾轻就熟地开发那些原本技术门槛很高的 功能特性。封装现有业务逻辑代码为 WEB 服务凡是了解已有业务逻辑代码调用入口的开发人员 ,在熟悉 WADE-MWJI 的配置 方法之后 ,就可以封装完成移动应用需要的 WEB 服务开发。另外 ,WEB 服务要想成 为稳定性和性能都有保证的云服务 ,也只需要将系统部署到云计算资源平台 (WADE-LC 上即可 ,开发人员无需关心。安装 APP 壳,测试产品开发人员无需了解 APP 壳,但测试人员需要在安装好 APP 壳的移动设备上 ,逐

16、一验证开发的业务功能。测试通过后方可发布移动应用产品的支持设备列表,并借助 WADE-Mobile 提供的产品发布工具制作最终的移动应用安装包。接下来 , 就可 以通告用户下载或者登录移动应用商店 ,获取产品开始体验使用。功能列表WADE-Mobile 的功能分为移动应用静态页面开发框架 (ECL4M 、移动应用动 态脚本核心类库 (JCL4M和 APP 壳三个部分 ,以及可能复用到的原有 WADE 基础平台产品部分模块 , 如 接口封装 (MWJI 、云计算资源平台 (LC 和集成开发环境 (STUDIO 等。下面重点介绍ECL4M、JCL4M和APP壳，限于篇幅，MWJI、LC和STUDI

17、O部分将略过，有兴趣的读者可以关注WADE相关的其它知识分享。ECL4M移动应用静态页面开发框架（ECL4M功能细分为元素、组件和布局三个部分。 其中,元素包括按钮、单行文本域、文本控制、文字对齐；组件包括组件外框、标题、表单、表格、载入、横向排列、图文排列、弹出提示布局包括间距设定和内部间距设定。一亠亠亠亠亠 (皿 0Q G G d- w O河41补PWM >R|屛善巾AQkW ,ItTxJ fVVnw >laiH life1fft.riumrlfl*IIM*01甘(I) nrQG 川？上图为参考UI元素、模板（注:ECL4M本身没有固定的UI风格,只是提供任意 类型UI的能力，

18、包括但不限于Apple iOS、Google An droid 的标准UI风格。JCL4M移动应用动态脚本核心类库（JCL4M功能细分为离线交互、在线访问、本地存 储和页面控制四个部分。其中，离线交互包括数据总线、Session、URL数据解析; 在线访问包括 AJAX 调用、 HTTP 服务调用;本地存储包括 Local 存储、 WEB 数据 库、SQL和异常处理;页面控制包括页面跳转和参数绑定。数据总线数据总线是指 WADE 服务消息架构 (WSMA 在 Javascript 中对应的数据结构 提供灵活的数据转换功能。包含两个重要的类 :Wade.DatasetList 和 Wade.Da

19、taMap 。移动应用开发专题二 创新周报总第 172 期 Wade.DatasetList(IDataset 接口 的 Javascript 实现) 序号 1 2 3 4 5 6 7 8 9 length get(indexint， keystringeach(fnfunction,scopeobject add(oobject remove(oobject removeAt(indexint indexOf(oobject getCount( toString(false|true方法API 类型 属性 说明 得到所包含的数据行数长度 获取一行数据，如果设置了 key ，并 且获取的数据是

20、 Wade.DataMap 格 式，则返回其中名称为 key 的项。 遍历数据 增加一行数据 删除一行数据 删除数据列表中的一列 获取某列数据的行 标 获取所包含的数据行记录数 生成字符串。 当参数为 true 时， 生成 旧的格式 字符串；当参数为 false 或 不填时生成 JSON 语义的字符串。 将 IDataset 的 数 据 绑 定 到 10 idataset.bind(domname domname 元素里，可包含多行数据 Wade.DataMap(IData 接口的 Javascript 实现 序号 1 2 3 4 5 6 7 8 9 10 11 12 13 14 length

21、 get(namestring,defaultValuestring each(fnfunction,scopeobject eachKey(fnfunction,scopeobject put(namestring,valueobject remove(oobject removeKey(namestring getCount( contains(oobject containsKey(namestring clear( first( last( fillFormElements(formdomelement API类型 属性 方法 说明 得到所包含的数据项长度 获取项数据 , 如果值为空并

22、且设 置了默认值则返回默 认值 遍历所有数据项 遍历所有数据项名称 增加一项数据 删除数据中的一项 根据 项名称来删除数据中的一项 获取所包含的数据项总数 判断是否包含指定的数据项 判断是否包含指定名称的数据项 清空所有数据项 获取第一项数据 获取最后一项数 据 将对象包含的值填充到和项名称 匹配的表单元素中移动应用开发专题二 创新周报总第 172 期 生成字符串。当参数为 true 时， 15 toString(false|true 生成旧的格式字符串；当参数为 false 或不填时，生成 JSON 语义 的字符串。 16 idata.bind(domname 将 IData 的数据绑定到

23、domname 元素里，单行数据 Session 和 Local 存储 在 JavaScript 中操作 Session 或 Local 中的数据，这些数据在浏览器 (含内核关闭时将失效。 Wade.mobile.storage 序号 1 2 3 4 5 6 7 8 9 10 API notSSsupport( add(key,value get(key remove(key clear( notLSsupport( add_local(key,value get_local(key remove_local(key clear_local( 说明 判断浏览器是否支持 Session Stor

24、age 在 Session Storage 里 添加 key=value 的数据 在 Session Storage 里获取 key 的数据 在 Session Storage 里删除 key 的数据 清空 Session Storage 里的数据 判断浏览器是否支 持 Local Storage 在 Local Storage 里添加 key=value 的数据 在 Local Storage 里获取 key 的数据 在 Local Storage 里删除 key 的数据 清空 Local Storage 里 的数据 URL 数据解析 在 JavaScript 中解析获取 URL 里的参数数

25、据。 Wade.mobile.params 序号 1 2 3 4 API get(key set(key,value remove(key load( 获取 URL 里 key 对应的数据 在 URL 里设置 key=value 的数据 在 URL 里 删除 key 的数据 重新加载 URL 说明 AJAX 调用 AJAX ，异步调用，局部刷新页 面，提供更好的交互体验。 Wade.ajax AJAX 封装包，其中公开方法已经映射到 window 对象，可以直接调用方法。 序号 1 API/ 说明 ajaxDirect(page, listener, params, partids, isra

26、w,fn移动应用开发专题二 使用 get 方式传递数据并异步调用服务器端方法。 2 ajaxSubmit(page,listener,params,partids,formIds,israw,fn 使用 post 方式传递 数据并异步调用服务器端方法。 setAjaxLoading(true|false 创新周报总第 172 期 3 设置 ajax 时是否带有载入效果，若不要载入效果，需要设置该参数，默认为 true ajaxGet(page,listener,params,partids,israw,d,fn使用 ajaxGet 来进行异步调用，大部分参数类似 ajaxDirect ，其中，

27、 “ d ”参数为是否 4 调用默认的 ajax 回调处理函数，值应为 true|false 。当设置了 partids 或者需要在回 调函数中取 ajaxDataset 时必须设置为 true 才能生效。 而如果只是使用简单的 ajax 调用，则可以设置为 false ，可有效提高效率。 ajaxPost(page,listener,params,partids,israw,postbody,d,fn使用 ajax Post 异步调用 Post 自定义数据到服务器端。 其中， postBody 为自定义的 post 数据， 必须是经过格式化的数据，可以使用 Wade.ajax.buildPo

28、stData(oobject 和 5 Wade.ajax.buildFormData(formstring|dom 来构造 postBody 数据。“ d” 参数为是否调用默认的 AJAX 回调处理函数，值应为 true|false 。当设置了 partids 或者需要在回调函数中取 ajaxDataset 时必须设置为 true 才能生效。而 如果只是使用简单的 AJAX 调用，则设置为 false ，可有效提高效率。 HTTP 服务 调用在 JavaScript 里实现跨域调用 Http 服务。 Wade.mobile.httptran callHttpSvc:function(svcLo

29、gicName,param,callback,error ，跨域调用 HTTP 服 务。 WEB 数据库在 JavaScript 里实现离线数据库功能。 Wade.mobile.db 序号 1 2 3 4 openDatabase( execute(sql,params,success,error query(sql,params,success,error trans_error(tx,e API获取 WADE 数据库 SQL语句执行 (增删改 SQL 语句执行(查询)获取 WADE 数据库操作的异常信息 说明 页面跳转在 JavaScript 里实现页面跳转功能。 Wade.mobile.redirect 序号 1 API buildUrl(subsys,page,listener,pa