要求
必需产品
- Dreamweaver CS5.5 (下载试用版)
本教程由 7 部分组成,本文是第 2 部分。通过本教程的学习,您将学会如何使用 Adobe Dreamweaver CS5.5 及其内置的 PhoneGap 支持快速创建 Android 和 iOS 移动应用程序。第一部分 简要介绍了 PhoneGap,以及一些常见的移动开发注意事项。在这一部分中,您将使用 Adobe Dreamweaver CS5.5、一些常见的 PhoneGap API 和 jQuery 移动框架来构建一个简单的移动应用程序。
要完成本教程,您的系统必须满足以下需求。
Mac OS X 和 iOS 开发
- Mac OS X Snow Leopard 版本 10.6.x 或更高版本
- 包含 iOS SDK 的 Xcode 4(完成本教程需要下载它)
Mac OS X 和 Android 开发
- Mac OS X 10.5.8 或更高版本(仅限 x86)
- Android SDK(完成本教程需要下载它)
Windows 和 iOS 开发
- 目前不支持此选项。
Windows 和 Android 开发
- Windows XP (32 位)、Vista(32 位或 64 位)或 Windows 7(32 位或 64 位)
- Android SDK(完成本教程需要下载它)
- Java JDK
必须首先下载并安装 Android SDK 或 iOS SDK(或者两者都安装),才能够在 Dreamweaver 中创建移动应用程序。Android 开发需要使用 Android SDK。如果想要使用苹果电脑创建 iOS 应用程序,则需要 iOS SDK。iOS 开发需要一台运行 Mac OS X 10.6.x 或更高版本的苹果电脑。
下载并安装所需的 SDK 或 SDK 之后,还需要指定安装在哪里,以便 Dreamweaver 可以找到它们。
Android
按照以下步骤,为 Android 开发配置 Dreamweaver。
- 在 Dreamweaver 中,选择 Site(站点) > Mobile Applications(移动应用程序) > Configure Application Framework(配置应用程序框架)。
![图 1. Configure Application Framework(配置应用程序框架)对话框 图 1. Configure Application Framework(配置应用程序框架)对话框](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/dreamweaver/articles/phonegap-mobile-app-pt2/fig01.jpg)
注意:如果运行的是 Windows,就不会出现 iOS Developer Tools Path 选项。
- 如果系统满足前一节中列出的所有需求,那么只要单击 Easy Install(简易安装)(参见图 1)并指定一个安装位置即可。
- 安装 SDK 之后,单击 Save(保存)。
注意:如果 Easy Install(简易安装)失败,请参见tech note 90408.
iOS
相比 Android 开发,iOS 开发的设置需要更多的步骤。首先需要创建一个免费的 Apple 开发人员帐户,然后需要下载并安装 Xcode 4.x。可以在http://developer.apple.com/devcenter/ios/index.action上注册并下载它。
注意:下面的指南基于本文发表时的 Apple Developer 网站。Adobe 不管理 Apple Developer 网站,所以下面指南中的链接有可能随时更改。
- 创建免费的 Apple 开发人员帐户并登录。
- 单击 Downloads 重定位到 Downloads 部分的页面。
- 单击 Download Xcode 4 按钮。
- 在 Download Xcode 4 页面上,下载最新版本的 Xcode,其中包含了 iOS SDK。
- 下载完成后,切换到保存 Xcode 4 的目录,并安装它。
- 在 Dreamweaver 中,选择 Site(站点) > Mobile Applications(移动应用程序) > Configure Application Framework(配置应用程序框架)。
- 在 Configure Application Framework(配置应用程序框架)对话框中,单击 iOS Developer Tools Path 文件夹图标,并导航到安装 iOS SDK 的目录。默认位置为 /Developer(参见图 2)。
![图 2. Configure Application Framework 对话框(已配置 Android 和 iOS SDK) 图 2. Configure Application Framework 对话框(已配置 Android 和 iOS SDK)](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/dreamweaver/articles/phonegap-mobile-app-pt2/fig02.jpg)
- 单击 Save。
在 Dreamweaver 中,需要创建一个站点来管理项目和应用程序:
- 选择 Site(站点) > New Site(新建站点)。
- 在 Site Name(站点名称)框中,输入应用程序的名称。
- 在 Local Site Folder(本地站点文件夹)中,输入一个用来保存站点的目录。
- 单击 Save(保存)。
创建 index.html
接下来,将利用 jQuery Mobile 添加 PhoneGap 模板 index.html 文件。
- 选择 File(文件) > New(新建)。
- 在 New Document(新建文档)对话框中,选择 Page from Sample(示例中的页) > Mobile Starters(Mobile 起始页) > jQuery Mobile (PhoneGap)。单击 Create(创建)。
- Dreamweaver 将创建并打开一个 jQuery Mobile 模板 HTML 文件。
- 选择 File(文件) > Save(保存),将文件作为 index.html 保存在站点目录下。如果提示您 Copy Dependent Files(复制相关文件),则单击 Copy(复制)。
Dreamweaver 文件面板将显示 index.html 和一个保存 jQuery Mobile 资产的文件夹(参见图 3)。
![图 3. Dreamweaver 文件面板 图 3. Dreamweaver 文件面板](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/dreamweaver/articles/phonegap-mobile-app-pt2/fig03.jpg)
应用程序设置
接下来开始配置 Application Settings(应用程序设置)。
- 选择 Site(站点) > Mobile Applications(移动应用程序) > Application Settings(应用程序设置)。
![图 4. Native Application Settings(本机应用程序设置)对话框 图 4. Native Application Settings(本机应用程序设置)对话框](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/dreamweaver/articles/phonegap-mobile-app-pt2/fig04.jpg)
- 在 Native Application Settings(本机应用程序设置)对话框中(参见图 4),可以添加任何缺失的信息,包括您的姓名,以及应用程序图标和启动屏幕的 PNG 文件。Dreamweaver 会对图像进行合理的缩放、命名,并将文件复制到您的站点目录。
- 如果是开发 Android 应用程序,那么必须至少创建一个 Android 虚拟设备(Virtual DeviceAndroid Virtual Device,AVD)用于测试。如果还没有配置 AVD,那么单击 Manage AVDs(管理 AVD)创建一个。
- 单击 Save(保存)。
现在设置已经完成,就可以开始构建一个 jQuery Mobile 应用程序,演示一些 PhoneGap API 调用。如果不想遵照本教程中的步骤自己创建应用程序,您可以下载本文的样例文件,其中包含了完成的应用程序。
我建议在 Dreamweaver 的 Split(拆分)视图中完成本教程中的步骤。稍后,您可以使用Live(实时)视图查看您的应用程序在浏览器中的显示。用于切换视图的按钮可以在 Dreamweaver 的文档工具栏(查看 > 工具栏 > 文档)中找到。
标题
首先,我们来重命名 index.html 中的标题。
- 如果实时视图是打开的,则将之关闭。
![图 5. index.html 的拆分视图 图 5. index.html 的拆分视图](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/dreamweaver/articles/phonegap-mobile-app-pt2/fig05.jpg)
- 在设计视图中(文档窗口的右侧),选择 Page One(第 1 页)标题(参见图 5),将它重命名为 Home(主页)。
- 将 Page Two(第 2 页)重命名为 Accelerometer(加速计),Page Three(第 3 页)为 Camera(相机),Page Four(第 1 页)为Geolocation(地理位置信息)。
在这个样例应用中,不需要 Page Footer(页面脚注)。
- 在 Design(设计)视图中选择一个页脚。在 Code(代码)视图中删除该页脚相应的代码:
<div data-role="footer"><h4>Page Footer</h4></div>
- 为 index.html 中的所有 Page Footer(页面脚注)元素重复步骤 4。
- 重命名 Home(主页)标题下的内容,以反映您前面所做的其他标题的名称更改(参见图 6)。
![图 6. 更新后的标题 图 6. 更新后的标题](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/dreamweaver/articles/phonegap-mobile-app-pt2/fig06.jpg)
使用 PhoneGap API
现在可以使用 PhoneGap API 添加一些功能了。有关如何使用 jQuery Mobile 和 PhoneGap API 的更多信息,请访问 jquerymobile.com 和 docs.phonegap.com。
PhoneGap 应用程序应该总是在访问 PhoneGap API 之前检查 deviceready
事件。这是为了确保在试图使用之前PhoneGap 已经完全加载下面的步骤添加一个事件侦听器来处理此事件。
- 在 Code(代码)视图,用
<body onload = "onBodyLoad();">
替换 <:body> 标记。 - 删除脚本中 phonegap.js 前面的斜杠:
<script src="/phonegap.js" type="text/javascript"></script>
- 在
<script src="phonegap.js" type="text/javascript"></script>
标记之下、</head>
标记之上添加以下代码行:
<script>function onBodyLoad(){ document.addEventListener("deviceready",onDeviceReady,false); } function onDeviceReady(){ navigator.notification.alert("PhoneGap is working"); }</script>
加速计
您将使用的第一个 API 用于加速计。
- 在 index.html 中的加速计部分,在
<div data-role="content">
代码行下面,用以下代码替换单词“内容”:
<fieldset class="ui-grid-a"> <div class="ui-block-a"><button type="button" data-theme="c" ontouchstart="startWatch();">Start</button></div> <div class="ui-block-b"><button type="button" data-theme="c" ontouchstart="stopWatch();">Stop</button></div> </fieldset> <div data-role="fieldcontain"> <label for="acceleration-x">Acceleration X:</label> <input type="range" name="acceleration-x" id="acceleration-x" value="0" min="0" max="100" /> </div> <div data-role="fieldcontain"> <label for="acceleration-y">Acceleration Y:</label> <input type="range" name="acceleration-y" id="acceleration-y" value="0" min="0" max="100" /> </div> <div data-role="fieldcontain"> <label for="acceleration-z">Acceleration Z:</label> <input type="range" name="acceleration-z" id="acceleration-z" value="0" min="0" max="100" /> </div>
该代码使用了 jQuery Mobile UI 元素,比如滑块、按钮和标签。如果您不确定将代码粘贴到哪里,请检查本教程提供的样例应用程序。
添加了必需的 UI 元素之后,就可以为加速计添加相应的 JavaScript 和 PhoneGap API 调用。
- 复制并粘贴以下代码到最后的
</script></head>
标记之前:
var watchID = null; function startWatch() { var options = { frequency: 200 }; var onSuccess = function(acceleration) { // Scale the accelerometer values from [0, 1] to [0, 100] // in order to display in the HTML range element $('#acceleration-x').val(acceleration.x * 100).slider('refresh'); $('#acceleration-y').val(acceleration.y * 100).slider('refresh'); $('#acceleration-z').val(acceleration.z * 100).slider('refresh'); }; var onFail = function() { console.log('Failed to get acceleration'); }; watchID = navigator.accelerometer.watchAcceleration(onSuccess, onFail, options); } // Stop watching the acceleration function stopWatch() { if (watchID) { navigator.accelerometer.clearWatch(watchID); watchID = null; } }
该代码读取设备的加速计值,并在设备移动时更新滑块和值。
注意iOS 模拟器不支持硬件加速计。您需要在实际设备上测试该功能,保证它正常运行。
相机
接下来,将为相机页面添加 UI 元素和所需的 JavaScript。
- 在相机部分,在
<div data-role="content">
代码行下面,用以下代码替换单词“内容”:
<fieldset class="ui-grid-a"> <div class="ui-block-a"><button type="button" data-theme="c" data-icon="plus" ontouchstart="getPictureFromCamera();">Camera</button></div> <div class="ui-block-b"><button type="button" data-theme="c" data-icon="search" ontouchstart="getPictureFromGallery();">Gallery</button></div> </fieldset> <div id="camera-image" class="ui-body ui-body-b" style="background-size:100%;min-height:250px"></div>
这在相机页面添加了两个按钮,还添加了一个用于显示图像的框。两个按钮让用户能够使用相机拍摄照片和从图库选择照片。
- 为添加必要的 JavaScript 代码,可将以下代码粘贴到
stopWatch()
函数和最后的</script></head>
标记之间:
function getPictureFromCamera(){ navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType:Camera.DestinationType.FILE_URI }); function onSuccess(imageURI) { $('#camera-image').css({'background-image': 'url('+imageURI+')', 'background-size': '100%'}); } function onFail(message) {console.log('Failed to get an image');}} function getPictureFromGallery(){ navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY }); function onSuccess(imageURI) { $('#camera-image').css({'background-image': 'url('+imageURI+')', 'background-size': '100%'}); } function onFail(message) { console.log('Failed to get an image');}}
相机页面现在包含两个 PhoneGap API 调用。 getPictureFromCamera()
和 getPictureFromGallery()
函数(分别在对应的 UI 按钮上单击时被调用)调用 navigator.camera.getPicture
,会返回成功回调、失败回调和一些其他选项。
注意 iOS 模拟器不支持硬件相机。您需要在实际设备上测试该功能,保证它正常运行。
地理位置信息
地理位置信息页面需要进行较多更改。您将在此页面上使用 Google Maps API 来显示用户当前位置。这需要设备连接互联网。
- 在地理位置信息页面上,将
<div data-role="content">
更改为<div data-role="content" style="padding:0px;">
。这会让地图使用全屏模式。 - 在
<div data-role="content" style="padding:0px;">
下面,删除单词“内容”并插入以下代码,为地图定义容器:
<div id="map_canvas" height="300px" width="300px"></div>
因为不知道运行该应用程序的设备大小,所以应该利用 JavaScript 动态地设置地图画布大小。
- 在前面定义的
onDeviceReady()
函数中,在 alert 后面粘贴以下代码:
var height = $('#page4').height() - $('#page4 div[data-role="header"]').height(); var width = $('#page4').width(); $('#map_canvas').css({'height': height + 'px', 'width': width + 'px'});
接下来,添加将调用 PhoneGap API 和创建 Google 地图的 JavaScript 函数。
- 在代码行
<script src="phonegap.js" type="text/javascript"></script>
下面,插入以下代码(用于创建地图):
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
- 在最后的
</script></head>
标记之前添加以下函数。
function onLocSuccess(position) { var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var map = new google.maps.Map(document.getElementById("map_canvas"), { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP}); var marker = new google.maps.Marker({position: latlng, map: map, title: "You"}); } function onLocFail() { console.log('Failed to get geolocation'); }
- 在上一步插入的函数后面,紧接着插入下面这行代码:
navigator.geolocation.getCurrentPosition(onLocSuccess, onLocFail);
仔细地与本教程提供的样例应用程序进行对比检查。
注意: Android 虚拟设备不支持地理位置信息。您需要在实际设备上测试该功能,保证它正常运行。
现在可以在模拟器中运行您的应用程序,以确保它能够正常工作。
- 如果是针对 Android 开发的,那么选择 Site(站点) > Mobile Applications(移动应用程序) > Build and Emulate(生成和模拟) > Android。如果是针对 iOS 开发的,则选择 Site(站点) > Mobile Applications(移动应用程序) > Build and Emulate(生成和模拟) > (生成和模拟)> iPhone/iPad。
- 模拟器启动并加载您的应用程序。(这会花点时间,尤其是模拟器尚未运行时。)检验您刚刚构建的应用程序!