使用 PhoneGap 和 Dreamweaver 构建移动应用程序

 要求

必备知识

读者最好有使用 Dreamweaver 的经验，但最重要的还是对开发移动应用程序的浓厚兴趣。

 

必要的其他产品

Java JDK (仅限 windows)

用户级别

初级

必需产品

• Dreamweaver CS5.5 (下载试用版)

范例文件

• PhoneGap_sample_app.zip

本教程由 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

为移动开发配置 Dreamweaver

必须首先下载并安装 Android SDK 或 iOS SDK（或者两者都安装），才能够在 Dreamweaver 中创建移动应用程序。Android 开发需要使用 Android SDK。如果想要使用苹果电脑创建 iOS 应用程序，则需要 iOS SDK。iOS 开发需要一台运行 Mac OS X 10.6.x 或更高版本的苹果电脑。

下载并安装所需的 SDK 或 SDK 之后，还需要指定安装在哪里，以便 Dreamweaver 可以找到它们。

Android

按照以下步骤，为 Android 开发配置 Dreamweaver。

1. 在 Dreamweaver 中，选择 Site（站点） > Mobile Applications（移动应用程序） > Configure Application Framework（配置应用程序框架）。

图 1. Configure Application Framework（配置应用程序框架）对话框 。

2. 注意：如果运行的是 Windows，就不会出现 iOS Developer Tools Path 选项。

3. 如果系统满足前一节中列出的所有需求，那么只要单击 Easy Install（简易安装）（参见图 1）并指定一个安装位置即可。
4. 安装 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 网站，所以下面指南中的链接有可能随时更改。

1. 创建免费的 Apple 开发人员帐户并登录。
2. 单击 Downloads 重定位到 Downloads 部分的页面。
3. 单击 Download Xcode 4 按钮。
4. 在 Download Xcode 4 页面上，下载最新版本的 Xcode，其中包含了 iOS SDK。
5. 下载完成后，切换到保存 Xcode 4 的目录，并安装它。
6. 在 Dreamweaver 中，选择 Site（站点） > Mobile Applications（移动应用程序） > Configure Application Framework（配置应用程序框架）。
7. 在 Configure Application Framework（配置应用程序框架）对话框中，单击 iOS Developer Tools Path 文件夹图标，并导航到安装 iOS SDK 的目录。默认位置为 /Developer（参见图 2）。

图 2. Configure Application Framework 对话框（已配置 Android 和 iOS SDK） 。

8. 单击 Save。

在 Dreamweaver 中设置应用程序

在 Dreamweaver 中，需要创建一个站点来管理项目和应用程序：

1. 选择 Site（站点） > New Site（新建站点）。
2. 在 Site Name（站点名称）框中，输入应用程序的名称。
3. 在 Local Site Folder（本地站点文件夹）中，输入一个用来保存站点的目录。
4. 单击 Save（保存）。

创建 index.html

接下来，将利用 jQuery Mobile 添加 PhoneGap 模板 index.html 文件。

1. 选择 File（文件） > New（新建）。
2. 在 New Document（新建文档）对话框中，选择 Page from Sample（示例中的页） > Mobile Starters（Mobile 起始页） > jQuery Mobile (PhoneGap)。单击 Create（创建）。
3. Dreamweaver 将创建并打开一个 jQuery Mobile 模板 HTML 文件。
4. 选择 File（文件） > Save（保存），将文件作为 index.html 保存在站点目录下。如果提示您 Copy Dependent Files（复制相关文件），则单击 Copy（复制）。

Dreamweaver 文件面板将显示 index.html 和一个保存 jQuery Mobile 资产的文件夹（参见图 3）。

图 3. Dreamweaver 文件面板。

应用程序设置

接下来开始配置 Application Settings（应用程序设置）。

1. 选择 Site（站点） > Mobile Applications（移动应用程序） > Application Settings（应用程序设置）。

图 4. Native Application Settings（本机应用程序设置）对话框。

2. 在 Native Application Settings（本机应用程序设置）对话框中（参见图 4），可以添加任何缺失的信息，包括您的姓名，以及应用程序图标和启动屏幕的 PNG 文件。Dreamweaver 会对图像进行合理的缩放、命名，并将文件复制到您的站点目录。
3. 如果是开发 Android 应用程序，那么必须至少创建一个 Android 虚拟设备（Virtual DeviceAndroid Virtual Device，AVD）用于测试。如果还没有配置 AVD，那么单击 Manage AVDs（管理 AVD）创建一个。
4. 单击 Save（保存）。

创建应用程序

现在设置已经完成，就可以开始构建一个 jQuery Mobile 应用程序，演示一些 PhoneGap API 调用。如果不想遵照本教程中的步骤自己创建应用程序，您可以下载本文的样例文件，其中包含了完成的应用程序。

我建议在 Dreamweaver 的 Split（拆分）视图中完成本教程中的步骤。稍后，您可以使用Live（实时）视图查看您的应用程序在浏览器中的显示。用于切换视图的按钮可以在 Dreamweaver 的文档工具栏（查看 > 工具栏 > 文档）中找到。

标题

首先，我们来重命名 index.html 中的标题。

1. 如果实时视图是打开的，则将之关闭。

图 5. index.html 的拆分视图。

2. 在设计视图中（文档窗口的右侧），选择 Page One（第 1 页）标题（参见图 5），将它重命名为 Home（主页）。
3. 将 Page Two（第 2 页）重命名为 Accelerometer（加速计），Page Three（第 3 页）为 Camera（相机），Page Four（第 1 页）为Geolocation（地理位置信息）。

   在这个样例应用中，不需要 Page Footer（页面脚注）。

4. 在 Design（设计）视图中选择一个页脚。在 Code（代码）视图中删除该页脚相应的代码：

<div data-role="footer"><h4>Page Footer</h4></div>

5. 为 index.html 中的所有 Page Footer（页面脚注）元素重复步骤 4。
6. 重命名 Home（主页）标题下的内容，以反映您前面所做的其他标题的名称更改（参见图 6）。

图 6. 更新后的标题。

使用 PhoneGap API

现在可以使用 PhoneGap API 添加一些功能了。有关如何使用 jQuery Mobile 和 PhoneGap API 的更多信息，请访问 jquerymobile.com 和 docs.phonegap.com。

PhoneGap 应用程序应该总是在访问 PhoneGap API 之前检查 deviceready 事件。这是为了确保在试图使用之前PhoneGap 已经完全加载下面的步骤添加一个事件侦听器来处理此事件。

1. 在 Code（代码）视图，用 <body onload = "onBodyLoad();"> 替换 <:body> 标记。
2. 删除脚本中 phonegap.js 前面的斜杠：

<script src="/phonegap.js" type="text/javascript"></script>

3. 在<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 用于加速计。

1. 在 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>

2. 该代码使用了 jQuery Mobile UI 元素，比如滑块、按钮和标签。如果您不确定将代码粘贴到哪里，请检查本教程提供的样例应用程序。

   添加了必需的 UI 元素之后，就可以为加速计添加相应的 JavaScript 和 PhoneGap API 调用。

3. 复制并粘贴以下代码到最后的 </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。

1. 在相机部分，在 <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>

2. 这在相机页面添加了两个按钮，还添加了一个用于显示图像的框。两个按钮让用户能够使用相机拍摄照片和从图库选择照片。

3. 为添加必要的 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 来显示用户当前位置。这需要设备连接互联网。

1. 在地理位置信息页面上，将 <div data-role="content">更改为<div data-role="content" style="padding:0px;">。这会让地图使用全屏模式。
2. 在<div data-role="content" style="padding:0px;">下面，删除单词“内容”并插入以下代码，为地图定义容器：

<div id="map_canvas" height="300px" width="300px"></div>

3. 因为不知道运行该应用程序的设备大小，所以应该利用 JavaScript 动态地设置地图画布大小。

4. 在前面定义的 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'});

4. 接下来，添加将调用 PhoneGap API 和创建 Google 地图的 JavaScript 函数。

5. 在代码行 <script src="phonegap.js" type="text/javascript"></script>下面，插入以下代码（用于创建地图）：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

5. 在最后的 </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'); }

6. 在上一步插入的函数后面，紧接着插入下面这行代码：

navigator.geolocation.getCurrentPosition(onLocSuccess, onLocFail);

仔细地与本教程提供的样例应用程序进行对比检查。

注意： Android 虚拟设备不支持地理位置信息。您需要在实际设备上测试该功能，保证它正常运行。

构建并运行您的应用程序

现在可以在模拟器中运行您的应用程序，以确保它能够正常工作。

1. 如果是针对 Android 开发的，那么选择 Site（站点） > Mobile Applications（移动应用程序） > Build and Emulate（生成和模拟） > Android。如果是针对 iOS 开发的，则选择 Site（站点） > Mobile Applications（移动应用程序） > Build and Emulate（生成和模拟） > （生成和模拟）> iPhone/iPad。
2. 模拟器启动并加载您的应用程序。（这会花点时间，尤其是模拟器尚未运行时。）检验您刚刚构建的应用程序！