移动应用开发框架WADEMobile

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

2、技术闪足齐登场。AppleiOS、GoogleAndroid>WindowsPhoneOMS（中国Linux（中移动OPhone国联通沃Phone等平台之争，Objective-C>JavaC/C+各种语言伴随着陆。ApplexCode>GoogleAndroidDevelopmentTools（ADT>中国移动OpenMobileSystemDevelopmentTools（ODTMicrosoftVisualStudio2008等各种开发环境跟着乱象纷呈。我们会不会再次回到混沌之初，期待盘古重开天地呢？答案是否定的，请看下面关于移动应用开发框架（WADE-Mobil

3、e的详细介绍。WADE移动应用开发框架(简称WADE-Mobile基于最新的WEB技术(HTML5、CSS3,并结合面向各种操作系统、移动设备的专用APP壳，可广泛用于各种企业场景的移动应用开发，能够有效降低技术门槛、提图开发效率、保证产品质量和保障信息安全。适用场景WADE-Mobile适用于公司内部各部门移动应用产品研发和项目实施，包括满足运营商业务支撑系统向移动设备终端的延伸需求，以及面向更为广阔的移动互联网领域，开发公众使用的移动应用产品。在运营商业务支撑系统方面，已知能够适用的一些需求包括：中国移动集团规范(NGB0SS-CRM3多0P管理分册G3版工作台部分、广东移动G3版CRM手

4、机客户端解决方案、中国移动集团公司统一积分商城、上海移动WLAN登录、江苏电信掌上BOSS等。在移动互联网方面，可以支持的移动设备操作系统包括:AppleiOS,开发使用Objective-C程序语言和xCode集成开发环境;GoogleAndroid,开发使用Java程序语言和Eclipse集成开发环境，包含AndroidDevelopmentTools(ADT插件包；中国移动OpenMobileSystem(OMS,程序语言和开发环境同谷歌类似，不同的是插件包为OMSDevelopmentTools(0DT;中国联通沃PHONE,国产Linux操作系统,使用C/C+程序语言和Microso

5、ftVisualStudio2008集成开发环境；其它还有MicrosoftWindowsPhone>BlackBerryOS、NokiaSymbian等，在此不再一,1赘述能做什么WADE-Mobile能为移动应用开发提供全方位支持。不但能够辅助开发人员轻松完成前端的页面开发、脚本编码，以及后端的WEB服务;而且可以协助测试人员、配置管理人员等进行功能验证和产品发布。如同工厂里的自动化流水线一般直接产出可供立即上架的成品。是提供模板，支持静态页面拼装。让我们先来看看WEB页面开发的一般流程：美工提前设计界面效果图；接着做切分，形成样式、图片等备选资源；然后，程序员再用HTML和CSS正

6、式开发页面。整个过程步骤很多，非常繁琐，显得特别笨重。对参与其中的美工和程序员素质要求也相当高，美工在设计效果图的时候不但要考虑用户需求，还要照顾程序员的实现能力；程序员则要深入掌握HTML、CSS知识。大家都知道,招聘一个既懂需求又了解程序开发的美工很困难，而类似最新流行的HTML5和CSS3技术,要想让普通程序员都快速学会并且熟练使用，也不是件容易的事情。WADE-Mobile可以在一般的开发过程中，省去美工这一角色，类似从前C/S架构应用一样，程序员仅需选用合适的控件”快速拼装，即可完成页面的开发。这里提到的控件”主要是指模板（元素、组件和布局和现成的CSS样式文件。程序员通过简单的拷贝

7、和引入，就能做出实用、美观并富含先进技术的高品质页面。一个对WADE-Mobile基本熟练的程序员，几乎可以做到在同客户一对一互动需求的同时，完成页面的开发。从需求到实现的过程中，让客户获得所说即所见、所见即所得”的完美体验。二是提供API,支持动态脚本编码。动态脚本编码是在静态页面效果完成之后进行的开发步骤，开发内容包括离线交互、本地存储、在线访问和设备功能。WADE-Mobile提供完整的JavascriptAPI支持,程序员无需/解其中的技术实现细节，包括各种操作系统、设备机型差异等。这些API是面向开发人员的统一编程接口，后端封装有各种差异化实现，如针对iOS的Objective-C程

8、序功能、针对Android的Java程序功能、调用后端云服务进行数据交互等。四是提供APP壳，支持产品在各种设备终端的兼容运行。APP壳是支撑前面提及API的实体，也是最终安装到用户个人设备上的移动应用，例如针对使用Android2.1操作系统的MotorolaMilestone手机，则是一*个扩展名为APK的程序安装包。对于APP壳，程序员不用关心，但是测试人员和最终用户需要使用。使用WADE-Mobile开发的移动应用产品，实质上就是借助APP壳打开位于服务器端的WEB应用。开发APP壳，并广泛支持各种移动设备终端，使得基于框架API开发的移动应用产品都具备良好的兼容性，是WADE-Mob

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

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

11、有自己个性的喜好，已经有了类似MyEclipse之类的开发环境，不用担心被强制替换。因为WADEStudi。插件集可以同已有的其它Eclipse开发环境融为一体，同样也能提供很好的开发支持。肿斤纭冷J卜幽划门4DcskhopIM Studio基于著名的跨平台自由集成开发环境（IDEEclipse,提供一组标准的Eclipse插件集。 Workspacer发工作区，也是Eclipse工作区，用于存放源代码，包括小例项目Quickstart,其中包含单应用工作台，用于开发调试时运行单一应用的功能，便于开发人员进行单元测试。 服务器，开发环境文件包中自带有Tomcat应用服务器，正式环境可以采用商用

12、产品，如OracleWeblogico多应用工作台(Desktop信息推送服务(IM都属于基础设施，集中存放在开发环境文件包的Base文件夹中，默认配置为随同Tomcat应用服务器启动时一并运行。另外，开发环境文件包还提供有开发所必须的JavaDevelopmentKit(JDK1.6版本。开发静态页面具备简单HTML语言基础的开发人员，在熟悉了移动应用静态页面开发框架(ECL4M提供的元素、组件和布局之后，就可以像拼图一般简单快速地开发页面。以下是包含框架模板沉淀积累在内的完整演进图（局索,ffl件和巾am（初步的）需求湛通，闻化翥求普通开发人员根据业务需求，使用模板拼装初步的静态页面。这可

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

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

15、E-Mobile提供的产品发布工具制作最终的移动应用安装包。接下来通告用户下载或者登录移动应用商店，获取产品开始体验使用。就“儿功能列表WADE-Mobile的功能分为移动应用静态页面开发框架（ECL4M、移动应用动态脚本核心类库（JCL4M和APP壳三个部分，以及可能复用到的原有WADE基础平台产品部分模块，如接口封装（M町I、云计算资源平台（LC和集成开发环境（STUDIO等。F面重点介绍ECL4M、JCL4M和APP壳,限于篇幅，MWJI、LC和STUDIO部分将略过，有兴趣的读者可以关注WADE相关的其它知识分享。ECL4M移动应用静态页面开发框架（ECL4M功能细分为元素、组件和布局

16、三个部分。其中，元素包括按钮、单行文本域、文本控制、文字对齐；组件包括组件外框、标题、表单、表格、载入、横向排列、图文排列、弹出提示；布局包括间距设定和内薛fl耳«事龟B部间距设定。-9B盂gBecoo:nMSE3上图为参考UI元素、模板（注:ECL4M本身没有固芈的UI风格,只是提供任意类型UI的能力,包括但不限于AppleiOS>GoogleAndroid的标准UI风格。JCL4M移动应用动态脚本核心类库（JCL4M功能细分为离线交互、在线访问、本地存储和页面控制四个部分。其中，离线交互包括数据总线、SessionURL数据解析；在线访问包括AJAX调用、HTTP服务调用;

17、本地存储包括Local存储、WEB数据库、SQL和异常处理;页面控制包括页面跳转和参数绑定。数据总线数据总线是指WADE服务消息架构(WSMA在Javascript中对应的数据结构，提供灵活的数据转换功能。包含两个堂要的类：Wade.DatasetList和Wade.DataMap移动应用开发专题二创新周报总第172期Wade.DatasetList(IDataset接口的Javascript实现)序号123456789lengthget(indexint,kestringeach(fnfunction,scopeobjectadd(oobjectremove(oobjectremoveAt(

18、indexintindexOf(oobjectgetCount(toString(falsetrue方法API类型属性说明得到所包含的数据行数长度获取一行数据，如果设置了key,并且获取的数据是Wade.DataMap格式，贝U返回其中名称为key的项。遍历数据增加一行数据删除一行数据删除数据列表中的一列获取某列数据的行标获取所包含的数据行记录数生成字符串。当参数为true时，生成旧的格式字符串；当参数为false或不填时生成JSON语义的字符串°将IDataset的数据绑定到10idataset.bind(domnamedomname兀素里,可包含多行数据Wade.DataMap(

19、IData接口的Javascript实现序号1234567891011121314lengthget(namestring,defaultValueLstringeach(fnfunction,scopeobjecteachKey(fnfunction,scopeLobjectput(namestring,valueobjectremove(oobjectremoveKey(namestringgetCount(contains(oobjectcontainsKey(namestringclear(first(last(fi1IFormE1ements(formdome1ementAPI类型属

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

21、里，单行数据Session和Local存储在JavaScript中操作Session或Local中的数据，这些数据在浏览器(含内核关闭时将失效。Wade,mobile,storage序号12345678910APInotSSsupport(add(key,valueget(keyremove(keyclear(notLSsupport(add_local(key,valueget_local(keyremove_local(keyclear_local(说明判断浏览器是否支持SessionStorage在SessionStorage里添加key二value的数据在SessionStorage里

22、获取key的数据在SessionStorage里删除key的数据清空SessionStorage里的数据判断浏览器是否支持LocalStorage在LocalStorage里添加key二value的数据在LocalStorage里获取key的数据在LocalStorage里删除key的数据清空LocalStorage里的数据URL数据解析在JavaScript中解析获取URL里的参数数据。Wade,mobile,params序号1234APIget(keyset(key,valueremove(keyload(获取URL里key对应的数据在URL里设置key二value的数据在URL里删除ke

23、y的数据重新加载URL说明AJAX调用AJAX,异步调用，局部刷新页面，提供更好的交互体验。Wade,ajaxAJAX封装包，其中公开方法已经映射到window对象，可以直接调用方法。序号1API/说明ajaxDirect(page,listener,params,partids,israwfn移动应用开发专题二使用get方式传递数据并异步调用服务器端方法。2ajaxSubmit(page,listener,params,partids,formlds,israw,fr使用post方式传递数据并异步调用服务器端方法。setAjaxLoading(true|false创新周报总第172期3设置a

24、jax时是否带有载入效果，若不要载入效果，需要设置该参数，默认为trueajaxGet(page,listener,params,partids,israw,d,f使用ajaxGet来进行异步调用，大部分参数类似ajaxDirect,其中，"d参数为是否4调用默认的ajax回调处理函数，值应为truefalseb-P|设置partids或者需要在回调函数中取ajaxDataset时必须设置为true才能生效。而如果只是使用简单的ajax调用，则可以设置为false,可有效提高效率。ajaxPost(page,listener,params,partids,israw,postbody

25、,d,使用ajaxPost异步调用Post自定乂数据到服务器端。其中，postBody为自定义的post数据，必须是经过格式化的数据，可以使用Wade.ajax,buildPostData(oobject和5Wade.ajax.buildFormData(formstring|dom来构造postBody数据。"d参数为是否调用默认的AJAX回调处理函数，值应为truelfalsR当设置了partids或者需要在回调函数中取ajaxDataset时必须设置为true才能生效。而如果只是使用简单的AJAX调用，则设置为false,可有效提高效率。HTTP服务调用在JavaScript里

26、实现跨域调用Http服务。Wade,mobile,httptrancallHttpSvufunction(svcLogicName,param,callback,error,跨域调用HTTP月艮务。WEB数据库在JavaScript里实现离线数据库功能。Wade,mobile,db序号1234openDatabase(execute(sql,params,success,errorquery(sql,params,success,errortrans_error(tx,eAPI获取WADE数据库SQL语句执行(增删改SQL语句执行(查询)获取WADE数据库操作的异常信息说明页面跳转在JavaScript里实现页面跳转功能。Wade,mobile,redirect序号1APIbuildUrl(subsys,page,listener,params说明根据页面信息拼装地址移动应用开发专题二2345to(ur