使用 Rational Application Developer V8.5.1 开发混合移动应用程序

使用面向移动应用开发的 IBM Worklight 平台的动手实操方法

获得关于创建混合移动应用程序的基础性知识,使用诸如 HTML5、CSS3、JavaScript 及 Dojo 等最常见的技术。探索使用 IBM Worklight 平台开发的混合移动应用程序的不同组件,快速开发一个移动应用程序,并在 IBM Worklight Server 上进行测试,来查看该移动应用的外观和使用体验。

Hamid Kalantari, 软件工程师, IBM

Hamid 是 IBM 多伦多实验室的一名软件工程师。他是一名 web 技术及 web 服务的主题专家。他拥有滑铁卢大学软件设计及优化专业的硕士学位。



2014 年 3 月 13 日

简介

尝试 Rational Application Developer 及 IBM Worklight

IBM Rational Application Developer for WebSphere Software 可以加速开发和部署 Java、Java EE、Web 2.0、移动、OSGi、portal 和面向服务架构(SOA)应用程序。

下载 IBM Rational Application Developer 或在云中试用它。

IBM Worklight 帮助您构建、测试及部署面向 Android、iOS、BlackBerry 及 Windows Phone 设备的原生、HTML5 和混合移动应用。

下载 Worklight 来在您的设备中试用它。

了解如何使用安装在 IBM Rational Application Developer for WebSphere Software V8.5.1 之上的 IBM Worklight 平台来开发一个混合移动应用程序。IBM Worklight 简化了跨移动平台的移动 web、混合及原生应用程序的开发:iOS、Android、BlackBerry、Windows phones,及其他平台的设备。它提供了基于平台及源代码的功能增强来帮助开发人员加速开发、测试及交付移动应用程序的可视化开发能力,可使用诸如 HTML5、Apache Cordova、JavaScript 等开源技术,以及诸如 Dojo、jQuery 及 Sencha Touch 等 JavaScript 框架。通过跨平台最大化共享代码基(codebase),IBM Worklight 帮助减少开发成本、投放市场时间及持续管理的工作量。

在完成这篇文章的学习后,您可以很好地理解以下任务:

  • 设置 IBM Worklight 开发环境
  • 创建一个 IBM Worklight 项目及 Worklight 应用程序
  • 理解 IBM Worklight 项目(project) 及“应用(app)”的结构及内容
  • 探索 IBM Worklight 环境(Android、iPhone 及 Blackberry)
  • 为移动应用程序创建视图(views)
  • 在移动浏览器模拟器(mobile browser simulator)中测试应用的 Android 及 iPhone 版本

设置 IBM Worklight 开发环境

为了设置开发环境,需要事先安装必要的软件来启动 IBM Worklight Studio。

安装先决必要软件

安装以下软件及插件(plug-in)来为您的移动应用开发设置环境。(查看 参考资料来获得相关链接。)

  • Rational Application Developer for WebSphere Software V8.5.1
  • IBM Worklight Consumer Edition V5.0.5
  • Android SDK V4.2.1
  • Android SDK 平台及 SDK 平台工具(使用 Android SDK manager 安装)
  • ADT plug-in(在列表中选择 Developer tools

启动 IBM Worklight Studio

  1. 右键点击 <RADInstallDir>\eclipse.exe > Run as administrator,以管理员(administrator)权限启动 Rational Application Developer。
  2. 在 Workspace 启动对话框指定您的工作空间(workspace)路径。
  3. 如果您看到欢迎页面(welcome page),可以通过关闭 Welcome 页签忽略它。
  4. 切换到 Design perspective Window > Open perspective > Other > Design

创建一个 IBM Worklight 项目及一个 Worklight 应用程序

  1. 切换到 Design perspective > Window > Open Perspective > Other > Design
  2. 选择 File > New > Worklight Project
  3. 确定 Hybrid Application 被选择作为项目模板(project template)。
  4. 输入 MyMobileApp 作为项目名并点击 Next
  5. 在 Hybrid Application 面板(panel)指定 MyMobileApp 作为应用程序的名字。
  6. 确定 Add Dojo Toolkit 选项被选中,然后点击 Finish
图 1. 创建一个新的混合应用程序
创建混合应用程序的向导

理解 IBM Worklight 项目结构及内容

图 2 展示了项目结构。它包括这些组件:

Worklight Server library
Worklight API jar 文件
 
Server/java
在此位置放置基于 Java 的适配器中的服务器端 Java 代码(高级)
 
JRE System library
包含项目所使用的 JRE
 
JavaScript Resources
包含项目的 JavaScript 类内容
 
adapters
包含项目的适配器(用于后端连接性)
 
apps
包含项目的所有应用程序
 
bin
在此位置放置要部署到 Worklight 服务器的构建工件(wlapp 文件)
 
components
包含 shell 应用程序组件(高级)
 
dojo
包含 Dojo Toolkit JavaScript 资源
 
Server
包含内嵌的 Worklight 测试服务器的配置文件及扩展的位置,包括:
conf
IBM Worklight Server 配置文件,例如 worklight.properties
 
java
必须要编译及打包到 jar 文件的 Java 代码,以便部署到服务器
 
lib
必须要部署到 IBM Worklight 服务器的预编译库(Pre-compiled libraries)
图 2. IBM Worklight 项目结构及内容
项目结构及内容

理解 IBM Worklight 应用程序结构及内容

IBM Worklight 应用程序结构及内容如图 3 所示。包括以下内容:

common
对所有环境都通用的默认资源,例如 CSS、图像、JavaScript 及 HTML 文件
 
css: /MyMobileApp.css
主应用程序 CSS 文件
 
css: /reset.css
将所有渲染引擎(rendering engine)设定为同一基准
 
images
通用环境所用到的默认图片文件
 
js: /MyMobileApp.js
应用的主 JavaScript 文件 message.js
 
js: /messages.js
处理应用所有消息的 JSON 对象
 
js: /auth.js
身份验证机制
 
MyMobileApp.html
主应用程序的 html 文件。应用可以拥有多个 html 文件。
 
legal
所有法律(legal)相关文档,例如应用程序的许可证(license)文档或第三方软件的许可证文档
 
application-descriptor.xml
用于定义应用不同方面的应用程序元数据(meta data),例如安全配置、服务器 URL,等等。
 
build-dojo
与定制 dojo 概要文件构建版本相关的工件(高级)
图 3. IBM Worklight 应用程序结构及内容
应用程序结构及内容

与 IBM Worklight 应用程序关联的 HTML 及 XML 文件包括:

MyMobileApp.html
当作为混合应用程序部署在 iPhone 及 Android 移动设备上时,由设备渲染引擎加载的主应用程序 HTML 文件。
 
application-description.xml
在编辑器(editor)视图,单击 Source 页签来查看 application-description.xml 文件所包含的元素。图 4 展示了这些元素。
图 4. application-description.xml 源代码视图
application-description 的源代码视图

在 application-description XML 文件中,所包含的标记(tag)包括了更多关于应用程序的信息:

<application>
application-descriptor.xml 的根元素,包含两个属性:
id
包含了必须是同一的应用程序 ID
 
platformVersion
包含了开发应用程序的 IBM Worklight 平台的版本信息

 
<displayName>
包含应用程序的名字
 
<description>
包含应用程序的描述
 
<author>
包含应用程序作者的名字
 
<height> and <width>
用于桌面环境
 
<mainFile>
包含应用程序主 HTML 文件的名字
 
<thumbnailImage>
包含应用程序所用缩略图的路径

探索 IBM Worklight 所涉及的各种环境

“环境”(environment)是指可以渲染和现实一个基于 web 的应用程序的移动、桌面或 web 平台。“环境”的例子包括 Apple iPhone、Android 手机、Facebook 及 iGoogle。这一段落涵盖了如何创建环境来为 iPhone 和 Android 提供支持。

为 MyMobileApp 应用程序创建 IBM Worklight 环境。

  1. Project Explorer 选择 MyMobileApp 应用程序:MyMobileApp > apps,右键点击,并选择 New > Worklight Environment。查看图 5。
图 5. 为应用添加 Worklight 环境
添加 Worklight 环境的向导
  1. 在 Worklight Environment 对话框选择 iPhone, Android phones and tablets >,点击 Finish
  2. 验证 Console 窗口和关于您在应用程序中所配置的环境的通知消息。
  3. Package Explorer 视图,验证现在有额外的文件夹被创建在 MyMobileApp 应用程序目录中。查看图 6。
图 6. 为相应的移动环境创建的额外文件夹
为添加的环境创建的相应文件夹

新环境的资源将会与 common(公用)资源有以下关系:

image
如果同名的话将会覆盖公用图像
 
css
扩展和/或覆盖公用的 CSS 文件
 
js
扩展公用的应用程序实例 JS 对象,例如 environment class 扩展了公用的 app class。
 
HTML
如果同名的话将会覆盖公用的 HTML 代码
 
native
包含为特定环境特定生成的应用程序代码

快速查看为各个特定环境的原生文件夹

Android native 文件夹包含了自动生成的 Android 应用程序代码,这些代码作为 Android 项目代码,在随后的构建和部署任务时被导入到工作空间中。并建议不要在资产文件夹里编辑文件,因为每次构建的时候这些文件会再次生成并被覆盖。

iPhone 的 native 文件夹包括了包含有自动生成的 iPhone 应用代码。此外,package 目录里包括了被打包应用程序。不推荐修改 native/www 文件夹里的文件,因为每次应用构建的时候这些文件都会重新生成覆盖。

构建和部署所有环境

  1. 右键点击 MyMobileApp 应用程序并选择 Run As > Build All and Deploy
  2. 查看 Console 的日志记录来确定构建和部署是否成功查看图 7。
图 7. 构建和部署所有环境
面向构建和部署的终端输出
  1. 验证 Native Android 项目已经创建并导入到工作空间中。查看图 8。这是 IBM Worklight 与设备 SDK 集成的一个范例。由于 Android SDK 启用了 Eclipse,所以 IBM Worklight 可以立即在工作空间(workspace)里生成一个 Android 项目。这对于 BlackBerry 也一样。其他平台,例如 iPhone, Worklight 会启动另外一个非 Eclipse 的工具,并在该工具中提供以该工具格式完成的项目,例如,Xcode。
图 8. 创建 Native Android 项目并导入到工作空间
导入 Android 项目到工作空间

为 MyMobileApp 应用程序创建视图

在本节中我们将会继续开发 MyMobileApp,并使用 IBM Worklight 的富页面编辑器(rich page editor)。

  1. 构建两个 MyMobileApp 应用程序视图:
    1. 主视图由 dojo.mobile.ScrollableView,包括页头标题(header)、切换到 profile 视图的导航按钮(navigation button),以及一些示例文本。
    2. profile 视图构建在 dojo.mobile.ScrollableView 之上,包括一个用于启动弹出菜单(pop-up)的按钮。
  2. 配置 Rational Application Developer 来使用 Rich Page Editor(RPE)进行开发。确保 Palette 以及 Mobile Navigation 页签都可见。Mobile Navigation 将会用于拖拽可视化元素到页面上。如果这些页签从 Rational Application Developer 工作台(workbench)不可见的话,找到 Window > Show View ,并选择相应的视图。
  3. 在编辑器中打开 MyMobileApp.html 文件。
  4. 添加一个可滚动的视图到页面上。查看图 9。
    1. 确保 MyMobileApp.html 文件是激活的,而且 design(设计)或 split(分列)页签可见。需要注意这些移动应用的页面是构建在视图之上的。如在此之前所提到的,对于这一应用程序,我们使用了 dojo.mobile.ScrollableView 这一 dojo 视图小部件(dojo view widget)来管理视图框架(view pane)。
    2. Palette 展开 Dojo Mobile Widget 区段。拖拽 ScrollableView 小部件到编辑器的 design 窗格,这会显示在 MyMobileApp.html 文件的 <body> 段落。
图 9. 源代码视图(source view)显示了 ScrollableView 插入到页面上的代码
ScrollableView 组件被插入到页面上
  1. 按如下步骤完成 Create a new Dojo Mobile Scrollable View 面板:
    1. 编辑 Id 域并为 mainView 改变 view0 的默认值
    2. 勾选 Set as default view 单选框。
    3. 选择 Include heading 单选框。
    4. 输入 MyMobileApp 作为页头标签(heading label)。
    5. 单击 Finish 来完成任务。
  2. 通过拖拽另一个 ScrollableView 小部件到页面上,来添加第二个 dojo.mobile.ScrollableView 到应用程序中。
    1. Dojo Mobile Widget 面板容器拖拽 ScrollableView 到 design 窗格。
    2. 插入 ScrollableView 到 body 并放置在 mainView 之后
  3. 在完成拖拽 ScrollableView 之后,相同的对话框将会出现:
    1. 输入 profileView 作为 Id
    2. 选中 Include heading 单选框来包含以下页头标题(heading)。
    3. 输入 My Profile 作为 页头标题的标签文本
    4. 输入 Home 作为 Back button 的标签文本。
    5. Back button 下拉清单选择 mainView。单击Finish
  4. 打开 Mobile Navigation 页签,并在富页面编辑器(rich page editor)的 design 页签验证可选的页面内容,并选择默认的激活移动视图(active mobile view)。

    当我们在之前创建第二个 ScrollableView(profile view)的时候,我们曾在向导中给定了选项要创建一个后退按钮(Back button)用来导航回到 MyMobileApp 首页屏幕,例如 mainView。现在我们将要在 mainView 上添加一个工具条按钮(toolbar button),用来引导屏幕到 profileView 并完成导航。

    1. Mobile Navigation 视图中将 mainView 标记成眼形图标(eyelid),来使其成为编辑器中的默认激活视图(active view)。查看图 10。
      图 10. 将 mainView 标记成眼形图标使其成为默认激活视图
      Mobile Navigation 视图所显示的默认激活视图
    2. 从 Dojo Mobile Widget 工具箱(Palette),拖一个 ToolBarButtonmainView 的页头部分,并拽到页头文本上紧挨着“MyMobileApp”页头的文本。查看图 11。
图 11. 拖拽一个 ToolBarButton 到 mainView 的页头部分
拖拽一个 ToolBarButton 到 mainView
  1. 链接新按钮到 profileView 移动视图
    1. 选中新按钮,当前的标签名为“Label”。这会在其上显示一个悬停的“Link to Mobile View”图标。
    2. 单击 Link to Mobile View 图标来打开 Link to mobile view 对话框。
    3. inline mobile view 下拉选框中选中 profileView
    4. 单击 Finish 来完成将 mainView 视图上的这一按钮链接到 profileView 视图。
  2. 改变按钮标签的默认值,并添加一些内联 CSS 语句来将按钮重定位到页头的右侧。
    1. 右键点击 ToolBarButton 并从右键菜单选择 Properties(属性)。双击 Properties 页签来最大化视图。
    2. Properties 视图的 Dojo 页签,用新的名字 Profile 来更新标签名。
    3. 并在 Properties 视图中切换到 All 页签,并滚动到 style 属性。
    4. 输入 float:right; 作为 style 域的。单击 Enter 来确定该值已被接受。这将会使按钮移动到页头的右侧。

按钮应该已经改成了 Profile 的标签名,并且应该在页头的右侧,如图 12 所示。

图 12. 摆放在页头右侧,以“Profile”作为标签名的按钮
Profile 按钮放置在页头的右侧
  1. 添加一个 RoundRect 组件到 mainView 页面上
    1. Dojo Mobile Widgets 拖一个 RoundRect(圆角方框)小部件到 mainView,并将它插入到 ScrollableView 放在页头下方,如图 13 所示。
      图 13. 添加 RoundRect 到 mainView 页面
      添加 RoundRect 到 mainView 页面
    2. 右键单击新创建的 RoundRect,以访问它的 Source(源代码)窗格。插入以下文本在 <div> 标记的开始标记和结束标记之间。
      这就是一个基于 IBM Worklight 构建的示例应用程序。
  2. 添加一个按钮到 profileView。这按钮将会被用来启动一个弹出(pop-up)窗口。
    1. Mobile Navigation 视图上单击眼形图标来将 profileView 设为默认激活视图。
    2. 工具箱拖拽一个按钮放置到 profileView 的页头下方。
    3. ButtonProperties 页切换到 All 页签并输入 Click me! 作为 标签名
    4. 在同一 Properties 页面输入“onclick”到 filter(过滤器)域字段,来缩短属性列表(property list)。
    5. onclick 属性上加入以下功能作为指:

      loadSimpleDialog('Button clicked on My Profile!')
  3. 添加一个 Container<div>)到 mainView
    1. 使用 Mobile Navigation 页签来将 mainView 设定为 design 页签的前景页。
    2. 添加一个 ContainermainView,从 Dojo Mobile Widgets 工具箱拖拽 Container 小部件插入到 ScrollableView ,放置在 RoundRect 之前,如图 14 所示。
图 14. 添加 ScrollableView 到 mainView page
插入 ScrollableView 到 mainView page 页面
  1. Container 添加一个类名,以便我们可以应用边距的 CSS 代码。
    1. Source窗格里选择 dojo.mobile.Container 行,如图 15 所示。
      图 15. 源代码视图显示了“dojo.mobile.Container”组件的代码
      为 container 组件插入的代码行
    2. 切换到 Properties 视图并确保 Container 元素已显示。
    3. Properties 视图中切换到 Styles(风格)页签
    4. 输入 spacer 作为 Class 属性的值。CSS 文件将为该类产生一个名为“spacer”的引用,这一容器将会从那里继承。
  2. 添加一个 ContainerprofileView:
    1. 使用 Mobile Navigation 页签来将 profileView 切换回为设计页签的前景页。
    2. 添加一个ContainerprofileView,从 Dojo Mobile Widgets 工具箱拖拽 Container 小部件插入到 ScrollableView,并放置在按钮之前。
  3. Container 添加一个类名,以便能为边距应用 CSS。
    1. 源代码窗格中选择 dojo.mobile.Container 代码行, 如图 16 所示。
      图 16. 源代码视图显示了“dojo.mobile.Container”组件的代码
      为 container 组件插入的代码行
    2. 切换到属性视图并确保 Container 元素已被显示。
    3. Properties 视图切换到 Styles 页签。
    4. 输入 spacer 作为 Class 的属性。CSS 文件将为该类产生一个名为“spacer”的引用,这一容器将会从那里继承。
  4. 添加 CSS MyMobileApp.css 来为应用提供一个固定的外观,覆盖默认的外观。这一设定将可以在不同设备上给出一个更加一致的用户体验。
    1. Project Explorer 视图打开 /MyMobileApp/apps/MyMobileApp/common/css/MyMobileApp.css
      输入 清单 1 中的代码到 CSS 文件的最后:
清单 1. 用于覆盖默认样式表的 CSS 代码
.spacer {
    margin-top: 100px;
}
.mblView {
    background: -webkit-gradient(linear, left top, left bottom, from(#096093), to(#ffffff)) !important!
}
.mblHeading {
    background: -webkit-gradient(linear, left top, left bottom, from(#379AC4), to(#096193)) !important!
}
.mblToolBarButtonBody {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0B0B0D), 
color-stop(1, #434949)) !important!
}
.mblArrowButtonBody {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0B0B0D), 
color-stop(1, #434949)) !important!
}
.mblArrowButtonHead {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0B0B0D), 
color-stop(1, #434949)) !important!
}
  1. 添加 JavaScript 函数(function)来实现对话框弹出。
    1. 通过导航到 MyMobileApp/apps/MyMobileApp/common/js/MyMobileApp.js,在 project Explorer 视图,打开 MyMobileApp.js
    2. 输入 清单 2 中的函数代码到 MyMobileApp.js 代码的最后。
清单 2.实现弹出对话框的 JavaScript 方法
function loadSimpleDialog(dialogText) {
	WL.SimpleDialog.show('Hello!', dialogText, [ {
		text : 'Dismiss',
		handler : function() {
			WL.Logger.debug("button pressed");
		}
	} ]);

}

这一函数接受来自调用者 dialogText 的字符串,并激发 Worklight 通用控件 WL.SimpleDialog.show(),该控件将传递对话框的标题、显示在对话框中的文字,以及关闭按钮的细节。在关闭按钮的细节中将提供在关闭对话框时调用函数的能力。

当您保存所有这些变更时,您的移动页面将会看起来跟以下的图片很相像。图 17 显示了 mainView,而图 18 显示了 profileView

图 17. 显示在 design 窗格中,用于 Apple iPhone 4s 的 mainView 页
mainView 页面的外观
图 18. 显示在 design 窗格中,用于 Apple iPhone 4s 的 profileView 页
profileView 页面的外观

移动浏览器模拟测试

为了测试 MyMobileApp 应用测试,使用专门用于开发阶段的移动浏览器模拟器(mobile browser simulator),在一个集成、特定于设备的容器中进行渲染。移动浏览器模拟器中预览 iPhone 环境:

  1. Project Explorer 视图展开 MyMobileApp/apps/MyMobileApp,并右键单击 iPhone environment > Run As > Preview
  2. 查看预览来检验应用程序和导航在 iPhone 环境中的工作情况。

总结

在本文中,您使用了安装在 Rational Application Developer V8.5.1 平台之上的 IBM Worklight Studio 开发环境开发了一个混合移动应用程序。您还使用了诸如 HTML5、CSS3、JavaScript,以及 Dojo 移动框架等跨平台技术。您了解了一些关于移动页面如何构建和连接的基础性知识,以及如何从工具箱视图中使用拖拽(drag-and-drop)组件来快速开发您的移动页面。同样,您还部署您的移动应用程序到嵌入在 Rational Application Developer V8.5.1 平台中的 IBM Worklight 服务器,来从不同的原生环境,例如 iPhone 及 Android 环境来查看和感受您移动应用程序。

鸣谢

本文作者感谢 Ali Manji 对本文的审阅。

参考资料

学习

获得产品和技术

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Rational, 移动开发
ArticleID=965578
ArticleTitle=使用 Rational Application Developer V8.5.1 开发混合移动应用程序
publish-date=03132014