内容


使用 IBM Rational Application Developer 和 jQuery Mobile 小部件开发混合移动应用程序

了解如何使用 IBM Rational Application Developer v9.1 通过 Apache Cordova 和 jQuery 移动小部件构建混合移动应用程序

Comments

随着移动设备的出现以及应用程序向移动平台的迁移,企业将有机会接触到不同背景的客户,定位离商店很近的客户,或者允许员工使用智能手机、平板电脑或类似的移动设备访问公司的信息资源,从而提高他们的工作效率。

然而,用户希望移动应用程序不仅能够使用方便,而且可以发挥最好的性能。出于这些期望,开发人员必须能够在更短的发布周期和更紧凑的时间表内针对各种类型的平台交付卓越的应用程序。开发工具可以帮助开发人员在几个小时内创建高品质的完整的应用程序,这对开发人员至关重要。

IBM® Rational® Application Developer v9.1 在著名的 Apache Cordova 框架的基础上引入了一套全新的工具,这些工具是专为混合前端移动而开发的。通过结合使用现有的 Web 工具,开发人员能够将混合移动应用程序的开发从几天缩短到几个小时。

样例应用程序:保险事故

在本文中,我们将了解如何使用一些 Cordova 插件访问本地功能,比如相机和录音,从而在 Android 平台上创建 Cordova 应用程序。该应用程序已针对 Android Virtual Device 进行了测试。它是保险公司使用的一种简单的事故记录器(incident reporter),可以拍照和录制语音。它还可以在设备存储中保存生成的文件,从而方便稍后进行查询。

该应用程序具有以下组件:

  • 主菜单,可由此导航到操作视图。
  • 一个用于记录事故的视图。可以拍照和进行录音。
  • 一个搜索视图,可以查找和查看早期的事故报告。

先决条件

您需要访问以下软件:

Apache Cordova:这是一组 API,允许 Web 开发人员通过 JavaScript 在不同平台上访问本地移动设备功能。只需一种单一的编程语言,移动应用程序就可以服务于多个移动平台。Cordova 3.3.1-0.1.2 包含在 Rational Application Developer v9.1 中。

Android SDK 中:在将 Android 支持添加到移动应用程序之前,可以使用 Android SDK Manager下载 最新版本的 Android SDK,并将它安装到您的系统上。

Android AVD:在模拟器上运行应用程序之前,首先创建一个 Android Virtual Device (AVD)。对于本文,确保您指定了一个 SD 卡。

Oracle JDK:需要 Oracle Java Development Kit 对安装的应用程序进行签名。Android 官方支持 Java 6 和更早版本。对于本文使用的例子,可以使用 Java 7。但是 Android 脚本无法运行 Java 8。下载并提取或安装 Oracle JDK 7

Apache Ant:用于运行与 Android 有关的 Cordova 脚本。不需要进行下载,它已在安装期间包含在 Rational Application Developer 中。

jQuery Mobile:需要 jQuery Core 1.9.1jQuery Mobile 1.3.2。

配置工作区

在创建项目之前,需要按以下方式在工作区中配置 Android:

  1. 单击 Window > Preferences
  2. 在左侧菜单中,展开 Cordova 并选择 Platforms,如图 1 所示。
  3. 浏览到 Android SDK 和 Oracle JDK 所在的位置。
  4. 单击 OK,保存位置。
图 1. 对工作区配置 Android 支持
满足 Android 先决条件
满足 Android 先决条件

创建项目

现在已经在工作区中配置了 Android 先决条件,然后创建了 Cordova 项目,如图 2 所示。

  1. 单击 File > New > Other...
  2. 单击 Web > Cordova project 或使用关键字 cordova 过滤列表。
  3. 单击 Next
  4. 为项目指定一个名字,比如本文使用了 IncidentReporter
    注意
    其他字段将会自动填充。
图 2. Cordova 项目名称
待创建项目的一般信息
待创建项目的一般信息
  1. 单击 Next
  2. 如图 3 所示,在左侧菜单中,选择 jQuery
  3. 选择 Add jQuery Mobile 复选框,启用 jQuery 功能。
  4. 浏览到 jQuery 脚本和 CSS 所在的位置。
  5. 指定位置后,选择要在项目中包含的 jQuery 文件。如果您知道所包含的 JavaScript 文件,那么您可以忽略警告。
图 3. 包括 jQuery Mobile
选择 jQuery Mobile 文件
选择 jQuery Mobile 文件
  1. 如图 4 所示,在左侧菜单,选择 Platforms
  2. 选择 Android
图 4. 选择 Android 以添加支持
添加 Android 平台支持
添加 Android 平台支持
  1. 如图 5 所示,在左侧菜单选择 Plugins
  2. 选择 CameraCaptureDialogs
图 5. 添加插件支持
添加插件支持
添加插件支持
  1. 单击 Finish

注意:
如果这是您第一次创建应用程序,或第一次使用该平台或任一个所选插件,那么可能需要多花费一些时间从 Internet 下载 Cordova 文件。如果该过程失败,请检查网络连接。

完成项目创建后,Rational Application Developer 会提示您将透视图切换到 Web(如果没有这样设置的话)。单击 Yes 即可轻松访问 Web 工具。

应用程序类似图 6。

图 6. 创建 Cordova 项目后的应用程序
创建后的项目结构
创建后的项目结构

在项目创建过程中将逐步生成平台、插件和 jquery 文件夹。

创建 Web 页面

创建 Cordova 项目后,它包含一个 Hello World 样例。本教程不需要这些文件,因此将会删除 css 和 img 文件夹以及 index.html 文件。

如图 7 所示,创建一个新的 Web 页面作为移动应用程序的 UI,步骤如下:

  1. 右键单击 www 文件夹。
  2. 选择 New > Web Page
  3. 将它命名为 index
  4. 选择 jQuery Mobile HTML
图 7. jQuery Mobile 的新 Web 页面
创建一个新的 Web 移动页面
创建一个新的 Web 移动页面
  1. 单击 Finish

创建移动导航

新的 Web 页面已创建,Rich Page Editor 已准备好处理该页面。jQuery 文件已经添加到新的 HTML 文件,但是缺少一个重要的 JavaScript 文件:cordova.js。该脚本文件不在 www 内容中;相反,它由 Cordova 在编译期间创建。不管怎样,都必须在 HTML 中显式地进行声明。还要记得添加您的 JS 文件。本文示例使用了 js 文件夹中的 index.js 文件。

现在已经创建了 HTML,接下来要为应用程序创建导航视图,步骤如下。

  1. 在 Rich Page Editor 中,单击 Show/Hide Mobile Navigation 打开 Mobile Navigation 视图。
  2. 删除当前名为 page 的视图。
  3. 单击加号以添加一个新的导航视图。
  4. 将视图命名为 main,如图 8 所示。
  5. Categories 列表中,选择 Navigation
  6. 选择 Single Window Drill Down 模式。
图 8. 选择移动模式
从某个模式中创建一个新的移动页面
从某个模式中创建一个新的移动页面
  1. 单击 Finish
  2. 删除导航菜单中的其中一个内容项并删除 Mobile Navigation 视图中对应的视图。
  3. 将标题名设置为 Incident Reporter。双击该标题。
  4. 将第一个导航菜单的名字修改为 Report Incident。双击该标签。
  5. 将第二个导航菜单的名字修改为 Search。双击该标签。

移动导航现在已完成,现在应该类似图 9 所示。

图 9. 导航视图
主页面视图
主页面视图

构建 reporter 视图

该视图记录了记录器的内容。

  1. 从 Mobile Navigation 视图打开 page1 视图。
  2. 将标题名改为 Report Incident。 双击该标题。
  3. jQuery Mobile Widgets 面板向现有的 Content div 添加一个 Text Input 小部件。
  4. 将标签修改为 Incident ID
  5. 在文本输入下方添加一个 Label 小部件并将其修改为 Notes
  6. Notes 标签下添加一个 Text Area 小部件。
  7. 添加三个 Button 小部件并按如下所示设置标签:
    1. Save report
    2. Take picture
    3. Record audio

由此产生的页面应该类似于图 10 所示。

图 10. Report incident 视图
三个使用新标签显示的按钮
三个使用新标签显示的按钮

构建搜索视图

在该视图中,可以查询保存的记录,以便显示拍摄的照片或播放录制的音频。

  1. 从 Mobile Navigation 视图打开 page2 视图。
  2. 将标题名修改为 Search。双击该标题。
  3. jQuery Mobile Widgets 面板向现有的 Content div 添加一个 Text Input 小部件。
  4. 将标签改为 Incident ID
  5. jQuery Mobile Widgets 面板添加一个 Button 小部件,并将标签修改为 Search
  6. 在该按钮下从 jQuery Mobile Widgets 面板添加一个 Content 小部件。找到的图像将在这里显示。
  7. jQuery Mobile Widgets 面板添加一个 Button 小部件并将标签修改为 Play
  8. 对该小部件打开 Properties 视图并选中 Inline 复选框。
  9. jQuery Mobile Widgets 面板添加一个 Button 小部件,并将标签修改为 Stop
  10. 对该小部件打开 Properties 视图并选中 Inline 复选框。

视图应当类似图 11 所示。

图 11. 搜索视图
搜索事故视图
搜索事故视图

编写应用程序

Cordova 创建的默认 JS 文件所含的许多方法在本应用程序中不会使用到,因此完全可以放心地删除它们。

要让这个移动应用程序工作起来,还需要执行一些额外步骤。

  1. 加载 jQuery 和 Cordova JavaScript。
  2. 为每个 UI 小部件绑定事件。
  3. 调用本地功能。
  4. 为记录和搜索功能连接应用程序代码。

加载 jQuery 和 Cordova

注意:
<script src="cordova.js" type="text/javascript"/> 标记必须 添加到所有 HTML 文件中。HTML 文件将使用 Cordova API。即使实际的 cordova.js 文件并不存在于项目中,在项目编译时仍然会自动添加,并在模拟器或设备上运行,或者将它导出到一个可安装的归档文件。

如同在任何 JS 框架中一样,Cordova 加载过程可能会很复杂。因为 Cordova 是连接设备本地功能与 Web 世界的一座桥梁,因此最好加载要使用的 jQuery 或 UI 框架。在完成全部加载后,在 JS 中绑定 Cordova 功能。

幸运的是,使用 jQuery 就可以很轻松完成这个过程。首先,在 document 中将 ready 事件绑定到一个复选框,后者将绑定 Cordova。

  1. 在源代码编辑模式中打开 index.html。
  2. 将以下代码放到 HTML 中。在本例中,它被放置在 body 的末尾处。
清单 1. 在 HTML 中绑定 jQuery
<script type="text/javascript">
$(document).ready(loadCordova);
</script>

这段代码确保在完全加载 jQuery 后将加载 Cordova。请注意 loadCordova 回调。它位于 js 文件夹下的 index.js 文件中。这种安排可以保证代码的有序性。

现在已完成了 jQuery 加载,Cordova 可以继续加载 JS 代码,后者将与本地资源建立连接。在 index.js 中添加以下代码:

清单 2. 绑定 Cordova JS
Function loadCordova() {
 $(document).bind('deviceready', function() {
  // Bind your native-bridging methods
 });
}

绑定控件和事件

将添加一些控件来控制应用程序。也可以添加其他控件。将事件绑定到设备的 BackMenu 按钮。

设备的 Back 按钮将使应用程序导航到主视图。要完成这个行为,请将清单 3 的代码添加到 deviceready 事件的绑定代码中。

清单 3. 为 back 按钮绑定代码
$(document).bind('backbutton', function() {
 $.mobile.changePage("#main", { 
  transition: "slide",
  reverse: "true"
 });
});

在这段代码中,main 是 div 的名称,并在 Creating the mobile navigation 部分创建了导航内容。

设备的 Menu 按钮将打开一个对话框,提示用户选择是否关闭应用程序。要创建该行为,将清单 4 的代码添加到 deviceready 事件的绑定代码中。

清单 4. 为 menu 按钮绑定代码
$(document).bind('menubutton', function() { 
 navigator.notification.confirm ( 
 'Do you really want to exit?',
 function(button) { 
  if (button == 2){ 
  navigator.app.exitApp(); 
  } 
 }, 'Exit', 'Cancel,OK');
});

现在设备的按钮已经被绑定,将绑定 HTML 工件。

由 Cordova 提供的 API navigator.camera.getPicture(success, error, options) 通过 cordova.js 文件使用 Take picture 按钮。该按钮将会打开默认摄像机,并通过指定的两个回调之一返回结果。如清单 5 所示。

清单 5. 绑定相机
$('#takePicture').bind('click', function() {
 navigator.camera.getPicture (cameraSuccess, cameraFail, 
 {
  quality: 50,
  destinationType: Camera.DestinationType.FILE_URI
  });
});

var imageURI = null; 
function cameraSuccess(image) {
 imageURI = image; 
 console.log('Image URI: ' + imageURI); 
}

function cameraSuccess(error) {
 navigator.notification.alert(error); 
}

在该段代码中, takePicture 是 UI 中的 Take picture 按钮的标识符。它使用了 Cordova 提供的 API navigator.device.capture.captureAudio(audioSuccess, audioError)。它在成功或失败时将分别接受两个调用,如清单 6 所示。

清单 6. 绑定音频录音器
$('#recordAudio').bind('click', function() {
 navigator.device.capture.captureAudio (
audioSuccess, audioError); 
});

var audioPath = null;
function audioSuccess(mediaFiles) {
 audioPath = mediaFiles[0].fullPath;
 console.log('MediaFiles[0]: ' + JSON.stringify(mediaFiles[0]));
}
 
function audioError(error) { navigator.notification.alert(error); 
}

现在,记录器已经具备了使用设备捕捉不同媒介的功能,创建 Save Report 按钮,如清单 7 所示。

清单 7. 绑定记录存储功能
$('#saveReport').bind('click', function() {
 var incidentID = $('#incidentID').val();
 var notes = $('#notes').val();
 
 var data = {
  'notes': notes, 
  'imageURI': app.imageURI, 
  'audioPath': app.audioPath
 };
 var localData = JSON.stringify(data); 
 window.localStorage.setItem(incidentID, localData); 
 
 navigator.notification.alert('Report saved'); 
 console.log('Data stored: ' + localData); 
 app.goToMain();
});

绑定了这些事件后将完成 Report Incident 视图,但是现在还缺少 Search 视图。下一步是绑定 Search 按钮、PlayStop 按钮。

首先,在 click 事件上绑定 Search 按钮,如清单 8 所示。

清单 8. 绑定记录搜索功能
$('#searchBtn').bind('click', function() {
 var localData = retrieveReport();
 var notes = 'Notes: ' + localData.notes + '<br/>'; 
    var image = '<img src="' + localData.imageURI + '" height="50%" width="50%"/><br/>'; 
 var html = notes + image; 
 $('#incidentData').html(html); 
});

// Used by other functions. 
function retrieveReport() {
 var toSearch = $('#incidentToSearch').val();
 var incident = window.localStorage.getItem(toSearch); 
 var localData = JSON.parse(incident); 

 console.log('Data retrieved from store: ' + JSON.stringify(localData)); 
 return localData; 
},

在这段代码中,incidentToSearch 用于在 Search 视图中输入文本,而 incidentData 是 div 的名称,被用作占位符。在 localStorage 中找到图像后,将在 div 的 HTML 中加载它。

接下来,将事件绑定到 PlayStop 按钮,用于播放和停止录音,如清单 9 所示。

清单 9. 绑定播放和停止事件
$('#playAudio').bind('click', function() {
 var audio = newAudio();
 audio.play();
});
 
$('#stopAudio').bind('click', function() {
 var audio = newAudio();
 audio.pause();
 app.audio = null;
});


var globalAudio
function newAudio() {
 if (globalAudio != null) {
 console.log('globalAudio is not null: ' + globalAudio); 

 return app.audio; 
 }

 var localData = retrieveReport();
 globalAudio = new Audio(localData.audioPath); 

 return globalAudio; 
}

JavaScript 文件已完成。保存所有更改。

在模拟器中测试应用程序

只有使用 AVD 管理器创建了虚拟设备后才能执行这一步,并且配置了一个 SD 卡。这样有助于启动并运行模拟器,从而在其上运行应用程序。

选择 IncidentReporter 项目并单击 Run > Run As > Run on Mobile Device Emulator,如图 12 所示。您还可以右键单击项目并单击 Run As > Run on Mobile Device Emulator

图 12. 在 Mobile Device 模拟器上运行。
在模拟器上运行项目
在模拟器上运行项目

这个过程需要花费一些时间。完成此过程后,应用程序将在主视图中自动打开(如图 13 所示)并可以开始使用。

图 13. 模拟器上的主视图
在模拟器上显示应用程序的主页面
在模拟器上显示应用程序的主页面

在主视图的菜单页面单击 Report Incident,查看 Report Incident 视图,如图 14 所示。

图 14. 模拟器上的 Report Incident 视图
使用模拟器报告事故
使用模拟器报告事故

在主页面上,从主视图中单击 Search 来查看 Search 视图,如图 15 所示。

图 15. 模拟器上的 Search Report 视图
搜索早期记录的事故
搜索早期记录的事故

模拟器可以使用相连的摄像机拍摄照片,也可以通过设备的麦克风和扬声器播放和录制音频。

如果想在真实设备上测试应用程序,则需要将 Android 设备连接到 USB 数据线,并单击 Run > Run As > Run on Mobile Device。请注意,对于 Android 设备,您需要在 USB 调试中设置设备并允许安装未知的资源,如 Android SDK 工具文档 所述。

准备应用程序发布

使用 Rational Application Developer 将您的应用程序导出到一个可安装的工件上。对于 Android,它可以生成一个 Android 应用程序包(APK)文件,该文件随后被传输到一个物理设备或 Google Play Store 以便进行发布。要导出应用程序,请右键单击项目并单击 Export > Web > Cordova file。向导将提示您要导出的项目、目标文件和平台,以及导出选项(DebugRelease)。如果您选择 Debug,请确保您的应用程序还没有发布,因为还没有对应用程序正确签名。缺乏签名会导致严重的漏洞,暴露要安装应用程序的设备。

如果选择 Release,那么名为 <your project name>-release-unsigned.apk 的归档文件将被放到目标文件夹。然而,该归档文件还没有准备好进行发布,因为它缺少安全密匙,无法进行安装。要安装应用程序,需要进行发布并签名,并按照 Android Publishing Overview 中的操作说明进行操作。

导入完整样例

要导入 可下载的样例,请遵循以下步骤。

  1. 将 ZIP 文件下载到您的计算机中。
  2. 在 Rational Application Developer 中,单击 File> Import...
  3. 单击 General > Existing Projects into Workspace
  4. 单击 Next
  5. 单击 Select archive file
  6. 浏览到您下载的 ZIP 文件。
  7. 可以看到两个项目。只选择 IncidentReporter
  8. 单击 Finish

由于 Android 创建的文件和脚本依赖本地文件系统(本例中的文件系统为作者的文件系统),因此无法运行其中一些脚本。根据下面的操作解决这个问题。

注意:
这些操作假设您 已经进行了配置,并满足先决条件

  1. 右键单击 IncidentReporter 项目并单击 Properties
  2. 单击 Cordova > Platforms
  3. 取消选择 Android。
  4. 单击 Apply
  5. 弹出的对话框将提醒您,如果删除平台,则会删除所有与之相关的本机代码。单击 Yes,完成删除操作。
  6. 再次单击 Android 平台。
  7. 单击 OK

这个过程将从项目中卸载 Android 平台,并在 Android SDK 的合适位置重新安装,如 配置工作区 小节中所述。

结束语

混合移动编程使开发人员能够快速创建高品质的应用程序,并能够实现快速面市。Apache Cordova 是一种出色的框架,可以无缝地连接本地和移动编程模型。

Rational Application Developer 为您提供了一套完整的工具集,可以让您用最少的工作开发 Web 应用程序。在 v9.1 中,您现在可以使用这些工具在 Apache Cordova 中创建混合移动应用程序。


下载资源


相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Rational, 移动开发
ArticleID=986044
ArticleTitle=使用 IBM Rational Application Developer 和 jQuery Mobile 小部件开发混合移动应用程序
publish-date=10152014