3. 实施特定于 WebKit 的功能。如果我们针对的是桌面上的一个非 WebKit 兼容的浏览器（比如 Firefox）时，这一点将非常重要。
不妨举个例子，iphone.css 文件如清单 3 所示。
清单 3. iphone.css 文件
body {
background-color: #00ff00; }
.serverentry {
-webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; }
.name {
font-size: 2em; }
.summary{
font-size: 1.5em; }
.serverentry a { font-size: 1.5em; }
在这个文件内，我们看到主体标记的背景颜色被设为 green (#00ff00)，而且还有字体大小上的变化以便使这些条目更适合在移动设备上阅读。
最后，让我们来看看 netmon.js，该文件包含一列条目以及一个被设计用来呈现条目的函数，如清单 4 所示。为了简便起见，有些数据被省略了。完整的副本，请参见 下载。
清单 4. netmon.js
var netmon = {
initialize : function () { },
resources : [ {
name : 'msiservices.com',
homeurl : 'http://msiservices.com',
pingurl : 'http://msiservices.com/netmon.php', status : 'OK', summary : 'OK', items : [
{name : 'DiskSpace', value : '22.13 GB'}, {name : 'Database Up?', value : 'Yes'} ] }, {
name : 'server 2',
homeurl : 'http://someurl',
pingurl : 'http://someurl/netmon.jsp', status : 'OK', summary : 'OK', items : [
{name : 'DiskSpace', value : '100.8 GB'}, {name : 'Database Up?', value : 'Yes'} ] },
// additional entries clipped for brevity ],
render : function(index,itm) { try {
var ret = \
ret += \'even' : 'odd') + \
ret += \
\\
if (itm.status != \
ret += \\}
ret += \
jQuery.each(itm.items,function (j,itemdetail) {
ret += \\});
ret += \ret += \return ret; } catch (e) {
return \\} } };
借助 CSS 文件内的类定义，当服务器条目没有处于 OK 状态时，它就会被显示为红色。此外，当状态不是 OK 时，我们会显示 summary 字段以便给出问题的一个大致概览。在图 9-11 中，服务器 4 的问题是磁盘空间不足。如果我们轻击一个条目，就能看到其细节，如图 12 所示。
图 12. 服务器 4 的细节
当单击一个条目时，显示服务器 4 的细节
通过轻击每个条目右侧的 show 链接，就可以启动每个服务器的主页。这个特性
十分得心应手，原因有两个。一是记住所感兴趣的每个服务器的 URL 是件很繁琐 的事情，其二，不管移动设备的键盘有多棒，要求在移动设备上键入这么长的 URL 就更繁琐了。
在我们的移动设备上，netmon 正在快乐地运行着，那么支持我们的服务器应该是更为容易的一项任务。
在第 2 部分，我们将充实这个应用程序以便我们能请求更多实时数据，并会讨论构建一个移动应用程序时有关服务器端的考虑事项。
在结束本文之前，让我们快速浏览一下要让这个应用程序可从应用程序库下载需要做些什么。
将一个 Web 应用程序付诸使用
假设，这个网络应用程序已经就绪。您向一个朋友展示了它，您的朋友鼓励您把这个应用程序销售给他人以便他人也可以用您的应用程序来监视其网络上的资源。那 么，您能不能销售一个 Web 应用程序呢？一个 Web 应用程序当然可以通过传统的订阅或 SaaS 模型销售，但如果想要将您的 “Web 应用程序” 打包后再通过一个应用程序市场销售它，比如 iTunes App Store 或 Google
Marketplace，又该如何呢？为了这个目的，应用程序必须被编译为一个本机应用程序。所幸的是，针对此已经有一个解决方案。
每个主要的移动平台都有一种将浏览器嵌入到视图或表单、动作的手段。每个平台为这种技术所使用的术语稍有不同，但这些技术工作的方式是相似的：在这个本机 应用程序放入一个 browser 控件，而这个本机应用程序可以与之交互。在最简单的模型内，这个 browser 控件可能只是访问 Web 以获得内容。当然，这个本机应用程序也可以截获链接请求并提供其自己的内容，进而只利用浏览器视图来进行呈现。请记住，对于本机小部件，HTML 和 CSS 均是可行的，而不管应用程序内容的来源。并且，有些应用程序将是这两种方式的混合。比如，一个应用程序可以从 Web 上获得大多数内容，而应用程序的 “本机” 的一面则提供了通过蓝牙访问本机资源的能力。
对于这类应用程序架构，市场上已经有几个工具可用。PhoneGap 和 Appcelerator 是这一领域的两个佼佼者（参见 参 考资料）。
结束语
本文主要介绍了受 WebKit 支撑的 iPhone 和 Android Web 应用程序。在第 2 部分，将对这个示例应用程序进行扩展，会融入通过 Ajax 的 Web 更改技术进行即时页面更新的功能。
下载
描述 名字 大小 下载方法 网络应用程序源代
码 os-androidiphone1-browserwars1sourcecode.zip 23KB HTTP 关于下载方法的信息
参考资料
学习
? ? ? ? ? ? ? ? ? ? ? ? ?
? ?
访问 WebKit Web 站点。
查阅针对 iPhone 的 特 定于 Viewport 的讨论。 更多地了解 HTML5 规范。 通过使用 media queries，在无需更改内容本身的情况下，呈现可以被针对一定范围的输出设备量身定做。
阅读来自 O'Reilly Media 的 Mobile Design and Development。 阅读 “Develop Android applications with Eclipse”，了解开发 Android 应用程序最简单的方式。 获得 Android SDK 文档。
Open Handset Alliance 是 Android 的赞助者。
Unlocking Android 是学习 Android 的一个很好的资源。 要收听面向软件开发人员的有趣访谈和讨论，请查看 developerWorks 播客。
随 时关注 developerWorks 技术活动和网络广播。
查阅最近将在全球举办的面向 IBM 开放源码开发人员的研讨会、交易展览、网络广播和其他 活动。
访问 developerWorks Open source 专区 获得丰富的 how-to 信息、工具和项目更新以及 最 受欢迎的文章和教程，帮助您用开放源码技术进行开发，并与 IBM 产品结合使用。
My developerWorks 社区涵盖了大量主题，是一个成功的社区典范。 查看免费的 developerWorks 演示中心 观看并了解 IBM 及开源技术和产品功能。
获得产品和技术
? ? ? ? ? ?
下载 Android SDK、访问 API 参考并获得有关 Android 的最新新闻。 由于 Android 是开源的，因而您可以从 Android Open Source Project 获得源代码。
PhoneGap 是一个开源开发工具，可通过 JavaScript 构建快捷、简单的移动应用程序。
查阅 Appcelerator， 使用 Web 技术创建、测试和发布本机移动和桌面应用程序。
使用 IBM 产品评估试用版软件 改进您的下一个开发项目，这些软件可以通过下载获得。
下载 IBM 产品评估试用版软件 或 IBM SOA Sandbox for Reuse，开始使用来自 DB2?、Lotus?、Rational?、Tivoli? 和 WebSphere? 的应用程序开发工具和中间件产品。