构建混合移动用应程序.docx

借助Apache Cordova构建混合移动应用程序【51CTO译文】你已完成了为应用程序构建前端的工作，它还有了移动支持功能。现在你想提供用户们可以从应用程序商店下载的原生客户端应用程序。读完该教程后，你会明白如何重复使用现有的HTML5代码，借助Apache Cordova，针对每个目标平台开发原生的移动客户端程序。你将学会如何：?对现有的Web应用程序进行改动，好让应用程序可以作为一个混合移动应用程序来部署。?借助Apache Cordova，开发面向安卓和iOS的原生应用程序。什么是混合移动应用程序？混合移动应用程序是用HTML5开发的――不像原生应用程序编译成针对特定平台的二进制代码。客户端代码完全由HTML、CSS和JavaScript组成，包装起来后安装在客户端设备上，完全像任何原生应用程序那样，然后在周围的原生外壳生成的浏览器进程里面执行。除了封装浏览器进程外，原生外壳还允许访问原生设备功能，比如方向感应器、GPS、联系人名单等，应用程序则可以通过JavaScript库来使用这些功能。在该例子中，我们使用Apache Cordova部署混合应用程序，该应用程序使用了TicketMonster的现有HTML5移动前端，并与在JBoss A7或JBoss企业应用平台（EAP）上运行的TicketMonster部署环境的充分利用代表性状态传输协议（REST）的服务进行交互。图1：混合TicketMonster的架构改动应用程序以便远程访问在我们让应用程序成为混合应用程序之前，需要对应用程序访问远程服务的方式做一些改变。请注意：这些变化已经实现在用户前端，我们在此为你显示了需要改动的代码。在Web版本的应用程序中，客户端代码与服务器端代码一起部署，那样模型和集合（还有将执行REST服务调用的任何部分代码）可以使用相对应用程序根目录的URL：所有资源都由同一台服务器来提供，所以浏览器将进行正确的调用。这还尊重浏览器在默认情况下执行的同源策略，以防止跨站脚本攻击。如果客户端代码与服务分开来部署，REST调用必须使用绝对URL（我们会在后面探讨给同源策略带来的影响）。此外，由于我们希望不必重新构建源代码，就能够将该应用程序部署到不同的主机上，所以它必须是可以配置的。你已经在用户前端章节大体了解了这方面，我们在那个章节为移动版应用程序定义了configuration（配置）模块。src/main/webapp/resources/js/configurations/mobile.js??...??define(configuration,?function()?{???if?(window.TicketMonster?!=?undefined??TicketMonster.config?!=?undefined)?{???return?{???baseUrl:?TicketMonster.config.baseRESTUrl??};???}?else?{???return?{???baseUrl:???};???}??});??...??该模块有一个baseURL属性，既可以设置代表相对URL的空字符串，也可以设置成前缀，比如域名，这取决于名为TicketMonster的全局变量是否早已被定义，它拥有baseRESTUrl属性。我们所有执行REST服务调用的代码都依赖该模块，因而基本REST URL可以在单单一个地方加以配置，并注入到整段代码中，正如下列代码实例所示：src/main/webapp/resources/js/app/models/event.js?/**??*?事件模型的模块?*/?define([??configuration,??backbone?],?function?(config)?{??/**??*?事件模块类定义??*?用于对单个事件执行CRUD（创建读取更新删除）操作??*/??var?Event?=?Backbone.Model.extend({??urlRoot:?config.baseUrl?+?rest/events?//?the?URL?for?performing?CRUD?operations??});??//?输出事件类??return?Event;?});?执行REST服务调用的其他所有模块以相似的方式使用前缀。眼下你没必要做任何事情，因为我们在用户前端教程中编写的代码最初就是这样编写而成的。不过小心，如果你有一个移动Web应用程序使用任何相对URL，就需要对它们进行重构，以便加入某种URL配置。安装混合移动工具和CordovaSim混合移动工具（Hybrid Mobile Tools）和CordovaSim还没有作为JBoss Developer Studio的一部分而安装。