Dojo Mobile 1.6 入门（6）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-10-17 18:33 | 只看该作者

Dojo Mobile 1.6 入门（6）

找到 JavaScript 函数 onDeviceReady，在注释 "do your thing!" 下面添加清单 15 中的代码。
清单 15. 装载 Dojo Mobile 解析器

1
2
3

dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.ScrollableView");

清单 15 中的代码装载 Dojo Mobile 解析器和基本类以及 ScrollableView 容器小部件。在这个示例中，不需要兼容性层，因为目标设备是 iOS，它肯定会使用 WebKit。最后需要添加的代码是小部件本身。在 index.html 中开始和结束 <body> 标记之间添加清单 16 中的代码。
清单 16. 添加小部件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div dojoType="dojox.mobile.ScrollableView" selected="true">
<h1 dojoType="dojox.mobile.Heading" fixed="top">Hello, World!</h1>
<h2 dojoType="dojox.mobile.RoundRectCategory">First Section</h2>
<div dojoType="dojox.mobile.RoundRect">
      This is a nice standard rounded rectangular label.
</div>
<h2 dojoType="dojox.mobile.RoundRectCategory">Second Section</h2>
<ul dojoType="dojox.mobile.RoundRectList">
      <li dojoType="dojox.mobile.ListItem">List Item 1</li>
      <li dojoType="dojox.mobile.ListItem">List Item 2</li>
      <li dojoType="dojox.mobile.ListItem">List Item 3</li>
      <li dojoType="dojox.mobile.ListItem">List Item 4</li>
      <li dojoType="dojox.mobile.ListItem">List Item 5</li>
</ul>
</div>

保存 index.html 文件 (File -> Save)，确保把 Xcode 左上角的 Overview 工具栏选项设置为 Simulator 目标。现在可以使用 Build and Run (Build -> Build and Run) 来启动应用程序。Xcode 会花点儿时间启动 iOS Simulator 应用程序。在此之后，您的原生 Dojo 应用程序应该会启动。您可能会注意到，在屏幕的底部没有 Safari 工具栏，而且应用程序占据整个设备屏幕，见图 15。
图 15. 原生 Dojo Hello World 应用程序

如果通过在模拟的 iPhone 上选择 Home 退出应用程序，应用程序在设备的主屏幕上显示为默认的 PhoneGap 应用程序图标和名称 HelloNative，见图 16。
图 16. iPhone 主屏幕上的原生应用程序图标

如果在模拟器中打开另一个应用程序（比如 Safari 或 Contacts），两次触碰 Home 按钮，就会打开 iOS Multi-tasking 菜单。您会再次看到自己的应用程序的图标，可以在其他应用程序和自己的应用程序之间快速轻松地切换。
部署到其他平台的过程通常与这里描述的一样简单，但是把应用程序部署到 Android 可能需要做一些调整。可以在 PhoneGap 网站上找到您需要的所有信息。
Dojo Mobile 1.7 中的新特性Dojo Mobile 1.7 计划实现一系列改进，这个版本应该不久后就会发布。这些改进包括：

一个新模块 dojox.mobile.deviceTheme，它自动地检测使用的移动设备并装载适当的 Dojo Mobile 主题。
一个专门针对 Blackberry 设备设计的新主题。
一个新的小部件 Carousel，可以用它显示一系列可滚动的图像。标题中的导航控件提供在图像组之间移动的方法。图 17 给出 Carousel 的示例。
图 17. Carousel 小部件
一个新的小部件 SpinWheel，它模拟原生 iPhone 应用程序中常见的 pop spinner UI 组件。图 18 给出一个示例。
图 18. SpinWheel/DatePicker 小部件
不同样式的 SpinWheel 组件，包括 SpinWheelDatePicker、SpinWheelTimePicker 和可以使用 SpinWheelSlot 对象配置的组件。
RoundRectList 和 EdgeToEdgeList 小部件的数据驱动版本，分别名为 RoundRectDataList 和 EdgeToEdgeDataList。
改进对 CSS3 渐变和动画的支持。
从基本移动框架中删除了 Button 类，需要使用 dojo.require("dojox.mobile.Button"); 显式地装载它。
FlippableView 小部件改名为 SwapView。

WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0 包含 IBM Dojo 1.7 Toolkit，它提供本文讨论的所有 Dojo 1.6 特性以及只有 IBM Dojo 1.7 Toolkit 提供的许多其他特性。这个 Feature Pack 还提供新的移动和富 Internet 应用程序 (RIA) 构建块以及一个基于 Dojo 的图表组件。除了提供配套的 Rational 工具之外，这个 Feature Pack 还会大大简化富 Web 和移动应用程序的创建。可以简便地调整原来针对桌面浏览器开发的 WebSphere 应用程序并把它们部署到移动设备上。

在最新版本中还有一些单独的相关的 Dojo 项目，可以在 dojox.mobile 应用程序中使用它们：

数据绑定的表单，使用 JSON 模型实现自动表单生成。
OpenLayers Map 小部件，它补充以前版本中的 Google Maps 小部件。
一系列适合移动设备的图表，它们不需要任何浏览器插件。
经过改进的触摸事件层，可以更精确地响应用户的触摸。

随着 Dojo Mobile 1.7 的发布越来越临近，可能会有详细解释所有新特性和改进的官方公告。
结束语移动 Web 应用程序正在快速发展，它会成为原生移动应用程序开发的合理、强大的替代方法。在本文中，您了解了 Dojo Mobile 这样的移动 HTML5 框架如何增加开发过程的价值，简化为移动设备设计 UI 组件和小部件的繁琐工作。Dojo Mobile 甚至为不同类型的设备提供不同的主题。
构建移动 Web 应用程序之后，可以使用出色的 PhoneGap SDK 把应用程序以原生方式部署到多个目标平台上。甚至可以利用相机和麦克风等原生设备特性。移动 Web 的未来不仅非常光明，而且就在眼前了。

收藏分享评分

回复引用

订阅 TOP

返回列表