使用 Jo 和 PhoneGap 构建本地移动应用程序
?
现在，您已经下载并解压缩了 Jo，下一步是构建自己的 Jo 应用程序。首先在您的 web 根目录中创建两个文件：index.html 和 application.js。index.html 文件包含?清单 1?所示的代码。
清单 1 显示了一个索引页面，可用于组织和调用您的脚本和样式。如果以前开发过 JavaScript 应用程序的话，那么应该对该页面很熟悉。文档头部包含支持 Jo 的默认样式；文档主体中包含脚本。注意，jo.js 文件也包含在其中。该版本的框架尚未进行缩减，适合进行开发。当准备好部署到生产环境时，将 jo_min.js 文件包含进来即可。文件的末尾是?jo.load()?语句，该语句的作用是初始化 Jo 框架，然后初始化?App.init()?表示的代码。清单 2?显示了初始化代码。
Jo 直到这时候才真正发挥威力。首先，定义若干变量来表示应用程序中的一些关键资源，比如设备屏幕、卡布局管理和导航。主要布局通过创建?joContainer?管理，它有一个导航栏（表示为一个?joNavbar?对象）和一个卡管理机制（表示为一个?joStackScroller?对象）。该容器被添加到设备屏幕并填充所有可用的空间。mainNavBar.setStack(cardStack)?语句用于将卡槽绑定到导航部件，从而自动管理卡之间的导航。最后，创建一个?joCard?实例并添加到卡槽，该实例包含一个菜单 — 一个漂亮的列表。成功执行这段代码后，将生成一个类似?图 2?的屏幕。
?清单 4 中给出了两个重要的概念。第一个是创建一个名为?initCardCache?的新函数，该函数利用了 Jo 的缓存特性。缓存条目添加了一个字符串 ID（唯一标识符）和一个函数（条目值）。该函数返回一个新构建的?joCard，使用 Jo 框架的表单控件配置。通过这种方式应用?joCache，可以在您的应用程序中推迟细节视图的对象创建，从而实现更好的性能。第二个概念是使用一个事件处理程序将列出的卡与细节视图连接起来。当选中菜单中的某个项目后，将使用菜单项的 ID 从缓存中检索视图。虽然您在这里只能定义一个视图，但是这种模式可以很轻易进行扩展。
单击?Go to form?列表项，将看到类似?图 3?所示的屏幕。
?注意屏幕左上方的?Back?按钮。这是通过绑定前面提到的卡槽和导航部件实现的。现在，将空表单连接到数据源。
在?initCardCache?函数中，创建了一个?joRecord?实例，它的作用是初始化表单值和管理对表单作出的修改。图 4?展示了值的初始化过程。
?运行?清单 5?中的示例，修改表单数据，然后单击?Submit?按钮。检查浏览器的控制台，应当可以看到修改后的表单记录。
您已经使用了创建有效的移动 web 应用程序所需的主要特性。下一步是通过添加 PhoneGap 构建一个本地移动应用程序。
?
选择左侧菜单中的?Virtual Devices?项并单击?New…?按钮。输入信息，如?图 6?所示，然后单击?Create AVD。关闭 Android SDK 和 AVD Manager 后，您就可以加载、构建和运行 PhoneGap 项目了。
??
源位置为 PhoneGap 安装目录中的 example_android 文件夹。这就是用?droidgap?命令创建项目文件的位置。现在项目已被加载到 Eclipse 项目浏览器中，进入到 libs 文件夹，右键单击 phonegap.jar 文件并选择?Build Path?>?Add to Build Path，如?图 8?所示。
?在 Eclipse 中以 Android 应用程序的方式运行应用程序时，应当看到类似?图 9?所示的屏幕。
?清单 7 提供了一个类似的格式，因为文档头部包含了样式表。文档主体首先包含链接的框架脚本，其次是应用程序脚本文件。您尚未使用到?joEvent.touchy = true。这个属性确保所有相关的基于鼠标的事件都被转换为可以在移动设备上使用的接触式事件。
结束语
尽管结合使用 Jo 和 PhoneGap 可以完成许多工作，但要记住，Jo 和 PhoneGap 两者之间不是互相依赖的。它们可以独立使用或与其他框架结合。然而，Jo 的简单性和轻量级与 PhoneGap 的强大功能相结合，最终将生成一个有效的工具，可以针对广泛的平台开发丰富的移动本地应用程序。
