《构建混合移动应用程序》由会员分享，可在线阅读，更多相关《构建混合移动应用程序（21页珍藏版）》请在金锄头文库上搜索。
1、借助 Apache Cordova 构建混合移动应用程序【51CTO 译文】你已完成了为应用程序构建前端的工作，它还有了移动支持功能。现在你想提供用户们可以从应用程序商店下载的原生客户端应用程序。读完该教程后，你会明白如何重复使用现有的 HTML5 代码，借助 Apache Cordova，针对每个目标平台开发原生的移动客户端程序。你将学会如何：对现有的 Web 应用程序进行改动，好让应用程序可以作为一个混合移动应用程序来部署。借助 Apache Cordova，开发面向安卓和 iOS 的原生应用程序。什么是混合移动应用程序？混合移动应用程序是用 HTML5 开发的不像原生应用程序编译成针对特
2、定平台的二进制代码。客户端代码完全由 HTML、CSS 和 JavaScript 组成，包装起来后安装在客户端设备上，完全像任何原生应用程序那样，然后在周围的原生外壳生成的浏览器进程里面执行。除了封装浏览器进程外，原生外壳还允许访问原生设备功能，比如方向感应器、GPS、联系人名单等，应用程序则可以通过 JavaScript 库来使用这些功能。在该例子中，我们使用 Apache Cordova 部署混合应用程序，该应用程序使用了 TicketMonster 的现有 HTML5 移动前端，并与在 JBoss A7 或 JBoss 企业应用平台（EAP）上运行的 TicketMonster 部署环境
3、的充分利用代表性状态传输协议（REST）的服务进行交互。图 1：混合 TicketMonster 的架构改动应用程序以便远程访问在我们让应用程序成为混合应用程序之前，需要对应用程序访问远程服务的方式做一些改变。请注意：这些变化已经实现在用户前端，我们在此为你显示了需要改动的代码。在 Web 版本的应用程序中，客户端代码与服务器端代码一起部署，那样模型和集合（还有将执行 REST 服务调用的任何部分代码）可以使用相对应用程序根目录的 URL：所有资源都由同一台服务器来提供，所以浏览器将进行正确的调用。这还尊重浏览器在默认情况下执行的同源策略，以防止跨站脚本攻击。如果客户端代码与服务分开来部署，R
4、EST 调用必须使用绝对 URL（我们会在后面探讨给同源策略带来的影响）。此外，由于我们希望不必重新构建源代码，就能够将该应用程序部署到不同的主机上，所以它必须是可以配置的。你已经在用户前端章节大体了解了这方面，我们在那个章节为移动版应用程序定义了 configuration（配置）模块。1. src/main/webapp/resources/js/configurations/mobile.js 2. . 3. define(configuration, function() 4. if (window.TicketMonster != undefined & TicketMonster.
5、config != undefined) 5. return 6. baseUrl: TicketMonster.config.baseRESTUrl 7. ; 8. else 9. return 10. baseUrl: 11. ; 12. 13. ); 14. . 该模块有一个 baseURL 属性，既可以设置代表相对 URL 的空字符串，也可以设置成前缀，比如域名，这取决于名为 TicketMonster 的全局变量是否早已被定义，它拥有 baseRESTUrl 属性。我们所有执行 REST 服务调用的代码都依赖该模块，因而基本 REST URL 可以在单单一个地方加以配置，并注入到整段
6、代码中，正如下列代码实例所示：1. src/main/webapp/resources/js/app/models/event.js 2. /* 3. * 事件模型的模块 4. */ 5. define( 6. configuration, 7. backbone 8. , function (config) 9. /* 10. * 事件模块类定义 11. * 用于对单个事件执行 CRUD（创建读取更新删除）操作 12. */ 13. var Event = Backbone.Model.extend( 14. urlRoot: config.baseUrl + rest/events / t
7、he URL for performing CRUD operations 15. ); 16. / 输出事件类 17. return Event; 18. ); 执行 REST 服务调用的其他所有模块以相似的方式使用前缀。眼下你没必要做任何事情，因为我们在用户前端教程中编写的代码最初就是这样编写而成的。不过小心，如果你有一个移动 Web 应用程序使用任何相对 URL，就需要对它们进行重构，以便加入某种 URL 配置。安装混合移动工具和 CordovaSim混合移动工具（Hybrid Mobile Tools）和 CordovaSim 还没有作为 JBoss Developer Studio
8、的一部分而安装。它们可以从 JBoss Central 来安装，如下所示：1. 想安装这些插件，只需把下面这个链接拖到 JBoss Central： https:/ JBoss Central 中，选择 Software/Update（软件/更新）选项卡。在 Find（查找）栏，键入 JBoss Hybrid Mobile Tools，或者滚动浏览列表，找到 JBoss Hybrid Mobile Tools + CordovaSim。选择相应的复选框，并点击 Install（安装）。图 2：通过链接，开始混合移动工具和 CordovaSim 的安装过程。图 3：在 JBoss Central
9、 的软件/更新选项卡中找到混合移动工具和 CordovaSim。在安装向导中，确保已为你想要安装的软件选择了复选框，并点击 Next（下一步）。建议你安装所有已选择的组件。仔细查看列出来安装的项目的细节，并点击 Next（下一步）。在阅读并同意许可证后，点击 I accept the terms of the license agreement(s)，即我接受许可证协议的条款，点击 Finish（完成）。Installing Software（安装软件）窗口就会打开，报告安装进度。在安装过程中，你可能会收到警告，提醒要安装未签名内容。如果真是这样，仔细阅读内容细节，如果对内容满意，就点击 OK
10、（确定），继续安装。图 4：提示安装的软件含有未签名内容的警告。一旦安装完成，会提示你重启 IDE。点击 Yes（确定），即可立即重启；如果你需要保存对所打开项目改动的任何未保存内容，就点击 No（不）。注意：IDE重启后，改动才生效。一旦安装完毕，你必须将安卓 SDK 的位置告知混合移动工具，之后才能使用涉及安卓的混合移动工具动作。想设定安卓 SDK 的位置，点击 Window（窗口） Preferences（偏好设置），选择 Hybrid Mobile（混合移动）。在 Android SDK Directory（安卓 SDK 目录）栏，键入已安装 SDK 的路径，或者点击 Browse（浏
11、览），浏览到相应位置。点击 Apply（应用），并点击 OK（确定），即可关闭 Preferences（偏好设置）窗口。图 5：偏好设置窗口的混合移动面板开发混合移动项目1. 想开发一个新的混合移动项目，点击 File（文件） New（新建） Other（其他），选择“Hybrid Mobile (Cordova) Application Project”，即“混合移动（Cordova）应用程序项目”。图 6：开始开发一个新的混合移动应用程序项目2. 输入项目信息：应用程序名称、项目名称和程序包。项目名称TicketMonster-Cordova名称TicketMonster-CordovaI
12、Dorg.jboss.jdf.example.ticketmonster.cordova图 7：开发一个新的混合移动应用程序项目点击 Next（下一步），为该项目选择混合移动引擎。如果你之前在 JBoss Developer Studio 中从未安装过混合移动引擎，就会提示你下载或搜索可以使用的引擎。我们将点击 Download（下载）按钮来执行前一项操作。图 8：头一次安装混合移动引擎系统会提示一个对话框，你可以下载所有可用的混合移动引擎。图 9：选择要下载的混合移动引擎我们将选择版本 3.4.0 的安卓和 iOS 变种。图 10：为 3.4.0 选择安卓和 iOS我们已经下载并安装了混合移
13、动引擎，现在不妨将它用在我们的项目中。选择刚配置好的引擎，并点击 Finish（完成）。图 11：开发一个新的混合移动应用程序项目一旦你完成了开发项目的任务，浏览到 www 目录，该目录里面含有应用程序的 HTML5 代码。由于我们重复使用 TicketMonster 代码，你只要把 www 目录换成TicketMonster 的 webapp 目录的符号链接；config.xml 文件和 rest 目录需要拷贝过去，拷贝到 TicketMonster 的 webapp 目录。另外，你可以拷贝TicketMonster 的代码，并在那里作所有必要的改动（不过在那种情况下，你在两个地方都需要维护
14、应用程序的代码。）1. $ cp config.xml $TICKET_MONSTER_HOME/demo/src/main/webapp 2. 3. $ cp res $TICKET_MONSTER_HOME/demo/src/main/webapp 4. 5. $ cd . 6. 7. $ rm -rf www 8. 9. $ ln -s $TICKET_MONSTER_HOME/demo/src/main/webapp www 图 12：将 www 与 webapp 目录链接起来的结果混合移动工具要求 cordova.js 文件装入到应用程序的起始页面。由于我们不想把该文件装入到现有的
15、index.html 文件中，就要创建一个只由 Cordova 应用程序才可以使用的新的起始页面。1. src/main/webapp/mobileapp.html 2. 3. 4. 5. Ticket Monster 6. 7. 8. 9. 11. 12. 13. 14. 现在不妨修改混合移动项目的配置，使用该页面作为应用程序的起始页面。此外，我们将把我们的 REST 服务 URL 添加到 config.xml 文件中的域白名单（为了简单起见，你在开发过程中还可以使用“*”）：1. src/main/webapp/config.xml 2. 3. 5. . 6. 7. 8. 12. 13. . 14. 下一步，我们需要将库装入到应用程序。我们还将构建一个单独的模块。除了装入面向安卓的 Apache Cordova JavaScript 库外，该模块还将装入移动应用程序的其余部分。我们还需要配置应用程序的基本 URL。就
