移动应用开发框架(WADE-Mobile).

移动应用开发专题二创新周报总第172期
框架为桥,天堑变通途
——移动应用开发框架(WADE-Mobile
参与过早期J2EE WEB开发的同事一定记忆犹新,大多数程序员都刚刚从传统的PB、Delphi等
C/S模式应用开发中转型过来,不再是单一的编程语言,也缺少统一的集成开发环境(IDE,满眼尽
是从前端(JSP、HTML、Javascript到后端(Java、HTTP、WSDL、DB数量众多、纷繁复杂的全新面孔。

混乱过一阵子后,开源和定制开发框架逐渐兴起,技术门槛高、开发效率低的糟糕境况才得以好转。

今天,移动应用开发又将我们拉回到这似曾相识的境地。

云计算、移动互联网大势所趋,HTML5、CSS3
新技术闪亮齐登场。

Apple iOS、Google Android、Windows Phone、OMS(中国移动OPhone、Linux(中
国联通沃Phone等平台之争,Objective-C、Java、C/C++各种语言伴随着陆。

Apple xCode、Google Android Development Tools (ADT、中国移动Open Mobile System Development Tools (ODT、Microsoft Visual Studio 2008等各种开发环境跟着乱象纷呈。

我们会不会再次回到混沌之初,期
待盘古重开天地呢?答案是否定的,请看下面关于《移动应用开发框架(WADE-Mobile》的详细介绍。

WADE移动应用开发框架(简称WADE-Mobile基于最新的WEB技术(HTML5、CSS3,并结合面向各
种操作系统、移动设备的专用APP壳,可广泛用于各种企业场景的移动应用开发,能够有效降低技术
门槛、提高开发效率、保证产品质量和保障信息安全。

适用场景
WADE-Mobile适用于公司内部各部门移动应用产品研发和项目实施,包括满足运营商业务支撑系
统向移动设备终端的延伸需求,以及面向更为广阔的移动互联网领域,开发公众使用的移动应用产品。

在运营商业务支撑系统方面,已知能够适用的一些需求包括:中国移动集团规范(NGBOSS-CRM3多OP
管理分册G3版工作台部分、广东移动G3版CRM手机客户端解决方案、中国移动集团公司统一积分
商城、上海移动WLAN登录、江苏电信掌上BOSS等。

在移动互联网方面,可以支持的移动设备操作系
统包括:Apple iOS,开发使用Objective-C程序语言和xCode集成开发环境;Google Android,开
发使用Java程序语言和Eclipse集成开发环境,包含Android Development Tools (ADT插件包;
中国移动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服务;而且可以协助测试人员、配置管理人员等进行功能验证和产品发布。

如同工厂里的自动化流水线一般,直接产出可供立即上架的成品。

一是提供模板,支持静态页面拼装。

让我们先来看看WEB页面开发的一般流程:美工提前设计界面效果图;接着做切分,形成样式、图片等备选资源;然后,程序员再用HTML和CSS正式开发页面。

整个过程步骤很多,非常繁琐,显得特别笨重。

对参与其中的美工和程序员素质要求也相当高,美工在设计效果图的时候不但要考虑用户需求,还要照顾程序员的实现能力;程序员则要深入掌握HTML、CSS知识。

大家都知道,招聘一个既懂需求又了解程序开发的美工很困难,而类似最新流行的HTML5和CSS3技术,要想让普通程序员都快速学会并且熟练使用,也不是件容易的事情。

WADE-Mobile可以在一般的开发过程中,省去美工这一角色,类似从前C/S架构应用一样,程序员仅需选用合适的“控件”快速拼装,即可完成页面的开发。

这里提到的“控件”主要是指模板(元素、组件和布局和现成的CSS样式文件。

程序员通过简单的拷贝和引入,就能做出实用、美观并富含先进技术的高品质页面。

一个对WADE-Mobile基本熟练的程序员,几乎可以做到在同客户一对一互动需求的同时,完成页面的开发。

从需求到实现的过程中,让客户获得“所说即所见、所见即所得”的完美体验。

二是提供API,支持动态脚本编码。

动态脚本编码是在静态页面效果完成之后进行的开发步骤,开发内容包括离线交互、本地存储、在线访问和设备功能。

WADE-Mobile提供完整的Javascript API 支持,程序员无需了解其中的技术实现细节,包括各种操作系统、设备机型差异等。

这些API是面向开发人员的统一编程
接口,后端封装有各种差异化实现,如针对iOS的Objective-C程序功能、针对Android的Java程序功能、调用后端云服务进行数据交互等。

四是提供APP壳,支持产品在各种设备终端的兼容运行。

APP壳是支撑前面提及API的实体,也是最终安装到用户个人设备上的移动应用,例如针对使用Android2.1操作系统的Motorola Milestone 手机,则是一个扩展名为APK的程序安装包。

对于APP壳,程序员不用关心,但是测试人员和最终用户需要使用。

使用WADE-Mobile开发的移动应用产品,实质上就是借助APP壳打开位于服务器端的WEB应用。

开发APP壳,并广泛支持各种移动设备终端,使得基于框架API开发的移动应用产品都具备良好的兼容性,是WADE-Mobile作为开发框架所必备的基础设施。

五是提供云服务框架,支持WEB服务的快速封装。

接口封装框架(MWJI隶属于WADE基础平台产品,专门用来封装业务支撑系统内部已有的业务逻辑代码。

通过配置即可封装成为供外部访问的WEB 服务,不光同时支持HTTP和WSDL方式,而且安全方面还能得到很好的保障。

基于WADE-Mobile的移动应用同MWJI框架完全兼容,程序员通过快速封装即可完成移动应用后端的WEB服务开发。

另外,即将推出的云计算资源平台(WADE-LC还可以提供原生的私有云计算支持,包括资源智能伸缩、应用自动部署、服务动态路由等特性。

六是提供集成开发环境,辅助开发、调试。

集成开发环境(WADE-Studio为移动应用开发提供工具支持,包括开发工具、调试工作台等。

程序员可以借助向导,快速开发初步的移动应用功能部件,包括项目、功能、文件等。

有经验的程序员还可以封装自己的可复用代码,打包成为WADE-Studio的
用户模板,供自己二次使用或者分发给其他程序员开发使用。

如何使用
下面将扼要介绍WADE-Mobile的开发环境、关键步骤和使用方法。

熟悉集成开发环境
使用获取到的WADE开发环境文件包,开发人员可以快速在本机搭建好开发环境。

Eclipse、WADE-Studio插件集、工作区(Workspace、调试工作台、Tomcat、JDK、开发调试工作台、集成运行工作台等一应俱全。

如果开发人员有自己个性的喜好,已经有了类似MyEclipse之类的开发环境,不用担心被强制替换。

因为WADE-Studio插件集可以同已有的其它Eclipse开发环境融为一体,同样也能提供很好的开发支持。

●Studio,基于著名的跨平台自由集成开发环境(IDE——Eclipse,提供一组标准的Eclipse
插件集。

●Workspace,开发工作区,也是Eclipse工作区,用于存放源代码,包括示例项目Quickstart,
其中包含单应用工作台,用于开发调试时运行单一应用的功能,便于开发人员进行单元测试。

●服务器,开发环境文件包中自带有Tomcat应用服务器,正式环境可以采用商用产品,如
Oracle Weblogic。

●多应用工作台(Desktop、信息推送服务(IM都属于基础设施,集中存放在开发环境文件包
的Base文件夹中,默认配置为随同Tomcat应用服务器启动时一并运行。

●另外,开发环境文件包还提供有开发所必须的Java Development Kit (JDK
1.6版本。

开发静态页面
具备简单HTML语言基础的开发人员,在熟悉了移动应用静态页面开发框架(ECL4M提供的元素、组件和布局之后,就可以像拼图一般简单快速地开发页面。

以下是包含框架模板沉淀积累在内的完整演进图:
●普通开发人员根据业务需求,使用模板拼装初步的静态页面。

这可能是一个反复的过程,根
据需求开发页面,用页面反过来印证需求,需求和页面相互作用,最终达到需求和实现的完
美统一,
●如果存在现有模板无法满足的需求,那么就由框架研发人员修改/补充HTML 模板和CSS样式
文件。

在项目中,以业务功能开发、保证工程实施进度为第一要务,框架内容的修改第一时
间应用于当前的页面实现之中。

待到主体工作完成之后,再抽象成为正式的可复用模板。

倘
若实际情况许可,建议完成从卓越到完美的最后工序——即在最终的静态页面中,将修补的
内容替换成为标准的模板复用。

大大改善系统稳定性的同时,还能提高代码的标准化程度,为接下来的维护及将来的升级改造提供极大的便利。

编写页面动态脚本
具备一定的Javascript脚本语言基础的开发人员,在了解移动应用动态脚本核心类库(JCL4M提供的API之后,就可以驾轻就熟地开发那些原本技术门槛很高的功能特性。

封装现有业务逻辑代码为WEB服务
凡是了解已有业务逻辑代码调用入口的开发人员,在熟悉WADE-MWJI的配置方法之后,就可以封装完成移动应用需要的WEB服务开发。

另外,WEB服务要想成为稳定性和性能都有保证的云服务,也只需要将系统部署到云计算资源平台(WADE-LC上即可,开发人员无需关心。

安装APP壳,测试产品
开发人员无需了解APP壳,但测试人员需要在安装好APP壳的移动设备上,逐一验证开发的业务功能。

测试通过后方可发布移动应用产品的支持设备列表,并借助WADE-Mobile提供的产品发布工具制作最终的移动应用安装包。

接下来,就可以通告用户下载或者登录移动应用商店,获取产品开始体验使用。

功能列表
WADE-Mobile的功能分为移动应用静态页面开发框架(ECL4M、移动应用动态脚本核心类库(JCL4M
和APP壳三个部分,以及可能复用到的原有WADE基础平台产品部分模块,如接口封装(MWJI、云计算资源平台(LC和集成开发环境(STUDIO等。

下面重点介绍ECL4M、JCL4M和APP壳,限于篇幅,MWJI、LC和STUDIO 部分将略过,有兴趣的读者可以关注WADE相关的其它知识分享。

ECL4M
移动应用静态页面开发框架(ECL4M功能细分为元素、组件和布局三个部分。

其中,元素包括按钮、单行文本域、文本控制、文字对齐;组件包括组件外框、标题、表单、表格、载入、横向排列、图文排列、弹出提示;布局包括间距设定和内部间距设定。

上图为参考UI元素、模板(注:ECL4M本身没有固定的UI风格,只是提供任意类型UI的能力,包括但不限于Apple iOS、Google Android的标准UI风格。

JCL4M
移动应用动态脚本核心类库(JCL4M功能细分为离线交互、在线访问、本地存储和页面控制四个部分。

其中,离线交互包括数据总线、Session、URL数据解析;
在线访问包括AJAX调用、HTTP服务调用;本地存储包括Local存储、WEB数据库、SQL和异常处理;页面控制包括页面跳转和参数绑定。

数据总线
数据总线是指WADE服务消息架构(WSMA在Javascript中对应的数据结构,提供灵活的数据转换功能。

包含两个重要的类:Wade.DatasetList和
Wade.DataMap。

移动应用开发专题二创新周报总第 172 期 Wade.DatasetList(IDataset 接口的 Javascript 实现）序号 1 2 3 4 5 6 7 8 9 length get(index[int]，key[string] each(fn[function],scope[object] add(o[object] remove(o[object] removeAt(index[int] indexOf(o[object] getCount( toString(false|true 方法API 类型属性说明得到所包含的数据行数长度获取一行数据，如果设置了key，并且获取的数据是 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 get(name[string],defaultValue[string]
each(fn[function],scope[object] eachKey(fn[function],scope[object]
put(name[string],value[object] remove(o[object] removeKey(name[string] getCount( contains(o[object] containsKey(name[string]
clear( first( last( fillFormElements(form[domelement] API 类型属性方法说明得到所包含的数据项长度获取项数据,如果值为空并且设置了默认值则返回默认值遍历所有数据项遍历所有数据项名称增加一项数据删除数据中的一项根据项名称来删除数据中的一项获取所包含的数据项总数判断是否包含指定的数据项判断是否包含指定名称的数据项清空所有数据项获取第一项数据获取最后一项数据将对象包含的值填充到和项名称匹配的表单元素中
移动应用开发专题二创新周报总第 172 期生成字符串。

当参数为 true 时，15 toString(false|true 生成旧的格式字符串；当参数为 false 或不填时，生成JSON 语义的字符串。

16 idata.bind(domname 将 IData 的数据绑定到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 Storage 在 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 里的参数数据。

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, israw,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，其中，“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.buildPostData(o[object]和 5 Wade.ajax.buildFormData(form[string|dom]来构造 postBody 数据。

“d” 参数为是否调用默认的 AJAX 回调处理函数，值应为 true|false。

当设置了partids 或者需要在回调函数中取 ajaxDataset 时必须设置为 true 才能生效。

而如果只是使用简单的 AJAX 调用，则设置为 false，可有效提高效率。

HTTP 服务调用在 JavaScript 里实现跨域调用 Http 服务。

Wade.mobile.httptran callHttpSvc:function(svcLogicName,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,params 说明根据页面信息拼装地址
移动应用开发专题二 2 3 4 5 to(url toUrl(subsys,page,listener,params toSysUrl(subsys,url toPage(subsys,page,listener,params 地址跳转创新周报总第 172 期子系统页面地址跳转子系统地址跳转页面跳转 APP 壳移动应用 APP 壳支持主流操作系统的各种智能手机和平板电脑基本功能，包括扩展浏览器内核、拨号、短信、拍照和位置等。

环境要求 WADE-Mobile 对环境的要求可以分为开发环境和运行环境。

开发环境主要归程序员使用，而运行环境则是面向测试人员和最终用户。

开发环境采用 WADE-Mobile 的移动应用开发场景中，供普通程序员开发使用的硬件设备，依然可以沿用公司目前的主流配置。

即运行 Microsoft Windows 的便携式笔记本电脑，无需额外配置运行 Apple Mac 操作系统的笔记本电脑。

另外，调试用的软件仅需用到普通的 PC 端浏览器，包括但不限于Google Chrome、Apple Safari、Microsoft Internet Explorer，省去安装大量各种移动设备模拟器的麻烦。

运行环境采用 WADE-Mobile 开发的移动应用，服
务端对企业 IT 设施的要求，既可以沿用原来的小型机，也可以顺应云计算发展趋势，补充组建由普通 PC Server 构成的企业私有云。

除了本身已经完成云化，可以很好地运行在云计算环境之中以外，云计算资源平台(WADE-LC还可以提供原生支持。

另外，移动应用的运行自然离开不了各种移动设备，兼容当今主流操作系统的各种智能手机和平板电脑，基本上可以做到不挑设备，包括但不限于Apple iPhone、iPad(iOS，Motorola Milestone(Google Android、Lenovo O1(中国移动 OMS。

发展计划更多的兼容。

更丰富的页面元素、组件和布局。

更强大的动态脚本 API。

读完以上这些基本的介绍之后，大家是不是对即将开展的移动应用开发有些底气了呢？如果依然还存有疑问或者担心，请不用着急，接下来我们还会奉上一场实战记录给各位品评，敬请继续保持关注！（未完，待续）。