文章将从安装 Xcode 入手,完成 Worklight 开发环境在 Mac 上的搭建;然后开发简单的程序,并且通过 Xcode 在模拟器上运行基于 iPhone 的程序;最后将介绍物理机和 Mac 连接方式,完成在 Mac 上搭建 Worklight 环境的全部工作。
在 Mac 上搭建 Worklight 开发环境
在当今流行的移动终端中,苹果的产品占有大量的市场份额,其中 iPhone 和 iPad 作为两个重要的产品,对于手机客户端应用的开发者来说,是必须需要考虑的环境。但是传统的开发模式,不但需要学习 Objective-C 以及相应的 API,而且程序完成以后,苹果公司还有严格的界面审查工作,只有验证合格,才可以发布到 App Store 上。同时,iPhone 和 iPad 作为分辨率完全不同的两种终端,需要考虑各自的界面设计,这就极大限制了开发企业级程序的能力。
Worklight 作为一个移动程序的开发平台,通过不同的环境设置,提供了开发 iPhone 和 iPad 应用的便利模式。用户可以在 Windows 环境中,将混合模式的应用开发完毕,然后生成相应环境的代码,传输到 Mac 上,利用 Xcode 完成生成代码的编译和运行工作。
但是上述的形式很繁琐,开发如果有改动,就需要在 Windows 上进行修改,然后将内容部署到 Mac 机器上,再使用 Mac 连接 Windows 端的 Worklight 服务器进 行调试。更复杂的情况是,如果应用需要一定的本地功能,就需要在 Windows 和 Mac 上依次修改代码,这种耗时的迭代过程,是开发应用不可忍受的。所以为了更好的开发基于 Worklight 的 iPhone(iPad)应用,在 Mac 搭建一套完整的环境显得十分重要。
本文将利用 Worklight 提供的默认配置,进行环境搭建,搭建完成后,环境的整体架构如图 1 所示。
图 1. Mac 上 Worklight 的架构
从架构图可以看到,Mac 上搭建环境的优势有以下三点:
- 开发者可以直接在 Mac 上通过 Eclipse 开发混合模式的应用,然后部署到 Xcode 上,通过 Xcode 的模拟器或者真实的机器,完成应用的开发。
- 调试多样化:程序的调试可以在系统默认的浏览器上进行,也可以在 Xcode 的模拟器上运行,还可以在真机上运行,提供了多样的调试方式。
- 部署简洁:当系统的代码发生变化时,通过 Eclipse 的插件,可以自动部署到 Xcode 上,这样就简化了手动部署带来的问题,而且,当用户在不同版本(iPhone 和 iPad)上切换时,Eclipse 也会自动完成这个过程。
Xcode 的安装
为了运行相应的客户端程序,或者和真实的终端相连,安装 Xcode 是必须的。在安装客户端之前,需要先从苹果的网站上下载安装程序,其过程如下:
- 访问苹果的 开发者网站
- 注册为 免费的开发用户
- 利用注册的用户进行登录,并且从 网页 上下载 Xcode(本文以 4.2.1 for Lion 为基础)
在安装 Xcode 时,可能会碰到安装失败的问题,具体的问题描述,查看 链接。这个问题是因为安装包下载后没有及时安装,签名过期导致的,最简单的解决办法就是修改 Mac 的系统时间(系统偏好设置 -> 日期与时间),将系统时间往回拨一定的日期。
如果要更新系统已经安装的 Xcode,那么需要执行如下的命令进行反安装。
清单 1. 反安装 Xcode
- sudo /Developer/Library/uninstall-devtools --mode=all
- rm -rf Install\ Xcode.app
在清理完成后,就可以安装新的 Xcode 了#p#
Worklight 的安装
在 Mac 上搭建开发环境和 Window 上类似,但是有以下几点是不同的:
- JDBC 驱动的配置:因为一般情况下,下载的内容将被放在 Mac 的下载目录下。这个目录的位置,和用户本身相关,例如当用户名为 user1 时,相应的路径为:/Users/user1/Downloads/${JDBC_FOLDER}/${JDBC_JAR}
- Worklight 的启动和关闭:在路径 /Users/user1/Applications 下,安装了完整的 Worklight,它的目录结构和 Windows 相似,但是启动和关闭 Worklight 的命令,分别是 Start Server.command 和 Stop Server.command
应用程序的开发
为了更好的显示 iPhone 和 iPad 两种不同分辨率终端的效果,应用程序将使用不同的布局呈现页面的内容。整个程序用于模拟显示设定终端的偏好,在 iPhone 环境下,主菜单将首先被显示,当某项具体的菜单被点击后,显示在这个菜单下可以设置的内容;用户可以点击回退按钮,返回菜单页。在 iPad 环境下,菜单显示在页面的左边,当点击菜单后,可设定的内容显示在右边,不提供回退按钮。
基于 Eclipse 平台开发的 Hybrid 程序
在 Eclipse 上开发混合模式的程序,对于 Worklight 来说,是一件很简单的事情。但是为了提高开发 iPhone 程序的效率,在开发之前需要引入以下的内容:
- Dojo Mobile 框架:混合模式的手机应用,需要解决的一个主要问题就是让用户在体验上接近本地程序,Dojo Mobile 在这方面做了很好的努力,可以参加其 主页
- Ajax 方式:因为混合模式中,页面的切换主要通过 Ajax 方式实现,所以用户需要了解通过 Ajax 方式和后台进行访问的方法。虽然 Worklight 提供的默认访问方式就是 Ajax,但是在示例中,将使用 Dojo 的 Ajax 方式,基础内容可以查看 Ajax with Dojo
- Worklight 环境:因为需要区分 iPad 和 iPhone 的环境,所以在示例中必然需要设定环境参数,只有这样,才能生成不同的部署代码。
创建混合模式的应用过程可以参见 第一个程序 中混合模式的介绍,在本文中,因为需要创建两个不同的环境,所以对于各自环境的设定和其目录结构需要作一下说明:
- common/css:应用中所需公共 CSS 文件的存放目录,其中 WorklightMacApp.css 是用于填写公共的 CSS 属性,在 iPhone 和 iPad 的环境中均可使用
- iPhone/css:特定环境所需 CSS 文件的存放目录,在完整的 CSS 文件中,放在 common 的 CSS 文件之后,所以相同属性会覆盖 common 中的定义
- common/images:应用需要的图片
- common/js:应用中所需公共 JS 文件的存放目录,其中 WorklightMacApp.js 用于存放公共的 JS 方法,auth.js 用于存放权限管理的 JS 方法,messages.js 用于存放本地化的 JS 方法
- iPhone/js:用于编写特定环境需要的 JS 方法,并且覆盖在 common 下的同名 JS 方法
图 2 展示了在混合模式下,开发者需要关注的内容。
图 2. 不同环境的同名 JS 文件
从上述的文件结构中,可以看到,因为环境不同,存在三个名称完全一致的 JS 文件。在 common 文件夹下,文件中存在一个 wlCommonInit 函数,它的清单如下:
清单 2. wlCommonInit 函数
- function wlCommonInit(){
- (function() {
- require(
- ["dojox/mobile/parser", "dijit/dijit", "dojox/mobile/deviceTheme",
- "dojox/mobile/compat", "dojox/mobile", "dojox/mobile/FixedSplitter",
- "dojox/mobile/FixedSplitterPane", "dojox/mobile/ScrollableView"],
- function(parser, deviceTheme) {
- parser.parse();
- }
- );
- })();
- }
这个函数用于初始化公共的内容,在本文中它的作用就是引入需要的 Dojo 内容,然后当所有的基础内容被读入到页面后,Dojo Mobile 框架将会解析节点的内容,并且按照开发者的需求生成各种控件(比如视图、标题、按钮等等)。#p#
在 iPhone 和 iPad 文件夹下,存在着一个 wlEnvInit 函数,它的作用是按照不同的环境调用各自的初始化函数,以 iPhone 为例,它的初始化函数如下:
清单 3. iPhone 的 wlEnvInit 函数
- function wlEnvInit(){
- wlCommonInit();
- setTimeout(loadLoginPage, 1000);
- function loadLoginPage() {
- var url = "html/iPhone.html";
- dojo.xhrGet({
- url: url,
- handleAs: "text",
- load: function(response, ioArgs){
- dojo.body().innerHTML = response;
- dojo.parser.parse();
- }
- });
- }
- }
从清单中可以了解到,应用通过调用异步请求获取页面内容,将其插入浏览器后,调用 Dojo 的解析函数,转化为手机应用的样式后,再显示。
最后需要提及的是主页面的代码,它最关键的内容如下:
清单 4. HTML 中的内容
- <body onload="WL.Client.init({})" id="content" style="display: none">
所以整个混合模式的应用初始化过程分为四步:
- 应用根据配置访问默认页面(就是 HTML 文档),在 onload 函数中,Worklight 将调用环境默认的初始化函数,同时隐藏整个 body 内容
- 根据环境,相应的 wlEnvInit 函数被调用
- 在 wlEnvInit 中调用了通用的初始化函数 wlCommonInit
- 全部初始化完成后,Dojo 会解析页面内容,完成 Dojo Mobile 的初始化后,显示相应的页面
基于 Xcode 模拟器的运行
在 Mac 上运行 Worklight 程序,根据开发环境的不同有两种方式。
如果 Worklight 是在 Windows 版本的 Eclipse 上开发,需要访问 iPhone(或者 iPad)文件夹下的 package 目录,将下面的一个 zip 文件传送到 Mac 上,然后解压。解压后的文件系统,是一个完整的本地 Xcode 程序,双击项目文件(.xcodeproj)后,就会在 Xcode 的 IDE 中打开一个项目,运行调试。
如果 Worklight 是在 Mac 上开发的,那么过程要简单的多。首先,在 Worklight 上完成应用的部署,然后按住 control 键后点击 iPad(iPhone)文件夹,选择 Run As -> Xcode Project,项目就会自动被部署到 Xcode 的 IDE 中。
在 Xcode 的 IDE 中点击运行,就会根据应用的不同,启动不同的模拟器(iPhone 或者 iPad 版本),运行程序。图 4 显示了在 Mac 版本的 Eclipse 上部署到 Xcode 上的命令界面。
图 3. 在 Mac 上部署 Xcode 应用
虽然开发应用的过程简单,但是在实际过程中有几点需要注意:
- 因为使用了 Dojo Mobile 来提供良好的用户体验,所以当项目部署到 Worklight 的服务器上时,Dojo Mobile 的包也需要被部署。完整的 Dojo 包比较大,部署时间较长,所以建议界面开发部分单独完成,当界面完成后,才整合到 Worklight 的应用中
- 在 Eclipse 的插件库中,有一个 Dojo 的插件,安装后可以方便的通过拖拽方式实现界面的布局,并且会根据需要用到的模块,自动导入相应需要的 JS 文件。建议开发者去 链接 上下载使用
- 在 iPad 的环境下,模拟器启动后,默认显示方式是竖屏,为了达到横屏的显示效果,可以点击快捷键 command+ →将模拟器变成横屏,需要重置时,仍然点击相同的快捷键
在物理机上运行
在物理机上直接调试 Xcode 程序,是一个比较复杂的过程,它的步骤简略的说可以分为六步:
- 在 App Store 的网站上,注册一个付费用户,需要 99 美元一年
- 利用付费账号创建证书
- 将需要连接的真实设备添加到和账号绑定的测试设备中(99 美元的账户最多可以绑定一百个)
- 创建配置文件
- 通过配置文件,将应用安装到绑定的测试设备上
- 在真实设备上进行调试
调试方法介绍
在 Mac 上进行调试,除了 WL 平台提供的多种调试程序的方法外,还可以使用 Xcode 进行调试。在 Xcode 中,用户需要确认调试的默认模拟器;然后,点击运行,在模拟器上运行程序;通过点击断点按钮来激活或者废弃断点,完成调试过程;调试完成后,可以点击停止 按钮结束应用在模拟器上的运行。
结束语
在 Mac 上搭建 Worklight 的开发平台,为方便的开发混合模式的苹果应用做了很好的准备。通过基于 Eclipse,Xcode 和 Worklight 的整合环境,用户可以在 Mac 机上开发应用,进行调试,而不需要像在 Windows 上一样,把压缩后的文件拷贝到 Mac 上,再解压调试。这大大提高了开发的效率。
在 Mac 上搭建环境的另外一个重要意义在于,用户在开发本地功能时,可以方便的直接在 Mac 上开发并调用模拟器进行测试,而不是分别在 Windows 和 Mac 的环境下开发,然后整合。这样便于项目的代码管理和环境统一。