精通Grails: Grails与移动Web

目前，几乎所有的网站都宣称 “ 使用 [Browser X] 提供最佳视图”。现代的 Ajax 库， 比如 Prototype、Dojo 和 YUI，有效地缩小了 Firefox、Internet Explorer 和 Safari 之间的差距。 但是使用 Nokia、Motorola 或者 Apple 手机的人可能不会喜欢浏览器的独立性。即使是最新的呼吁 “支持完整 HTML ” 的移动浏览器也可以从简单更改网络内容中获益。本文将向您展示如何 优化 Grails 应用程序，使其适用于移动浏览器。

如果您还在疑虑为什么非要使网站便于移动浏览的话，看一看 移动 Web 的使用率正在增长 边栏里面 的数字就会明白了。这份全球的统计数字确实让人过目难忘，但热衷移动 Web 源于我个人的兴趣。我在 2007 年春天买了一个 iPhone，那时它刚刚上市。从那以后，我就一直在寻找可以用它来浏览的网站。当 然，我可以用它访问任何的网站（只要不是基于 Flash 或者 Java applet 的网站，因为它不支 持）。问题是，适合在分辨率为 800x600 （或更高）的显示器上显示的内容，在 3.5 英寸的屏幕上显示 效果就没有那么好了。

我经常访问的那些带有 UI 的网站，因为它们符合我的手机的特定限制。我的手机会用 m 代替普通站 点中传统的 URL www，这就是一个很好的起点。http://m.cnn.com、http://m.yahoo.com 和 http://m.google.com 这样的页面就能在我的手机上显示。有些网站，比如 http://www.twitter.com， 则会做出相应的调整，以输出合适的内容：在电脑上浏览，我可以获得全部功能；而在手机上浏览时，则 删剪了一些内容，使它刚好适合我的屏幕。我将向您展示如何实现不改变 URL，但提供最佳 UI。

针对移动 Web 开发人员的技术

作为一个 Java 开发人员，我已经被 “只写一次，到处 运行（Write Once，Run Anywhere）” 的承诺给宠坏了。我甚至从来没有考虑过优化 Java 应用程 序使其适合某一特定的操作系统或硬件型号。但是如果是要开发移动 Web 的话，就应该熟悉三种支持不 同型号移动设备的主要技术：

无线标记语言（Wireless Markup Language 1.x，WML 1.x）

WML 2.x 或 Mobile Profile （XHTML-MP）

针对 iPhone 的 HTML 标记

正如我展示的一样，您可以将 WML 和 XHTML-MP 标记与用 Grails 构建的 Groovy Server Pages（GSPs）结合起来，以生成便于移动的页面。此外，我还 会向您展示如何修改 Grails 生成的 HTML，使页面在 iPhone 上显示得更好。

结合使用 WML 1.x 和 Grails

WML 是一种类似于 HTML 的标记语言，但它并不是真正的 HTML（WML 1.0 于 1998 年 标准化。WML 1.3 为最新版本）。WML 并无法在 Web 浏览器中查看（至少不借助于仿真器是不行的）， 同样您也无法在 WML 浏览器中查看 HTML。手机供应商通常都会提供在后台实现 HTML 与 WML 之间相互 转换的网关。

WML 通过无线访问协议（Wireless Access Protocol，WAP）传输，这和 HTML 通过 HTTP 传输很相似。WAP 和 WML 在临时对话中通常可以相互转换：手机说明书总是会夸耀该手机带有 WAP 浏览器，或者支持 WML 1.x（参阅 参考资料 获得 WML 和 WAP 规范的官方链接）。

如果您针对 的是 Research in Motion 的 BlackBerry 用户的话，就得提高关于 WML 的知识了。（BlackBerry 大约 占了智能手机市场的 40%，iPhones 和 Windows Mobile 居于第二和第三位）。虽然很多技术过硬 的用户也可以下载真正的 Web 浏览器，比如 Opera Mini（参见 参考资料），但是 BlackBerry 智能手 机还是配备了 WAP 浏览器。

继续设计旅行计划

如果您一直都在关注 精通 Grails 系列文章的话，那么您可以修改已经熟悉的旅行计划应用程序，使 它便于在手机上浏览。在旅行计划应用程序的 web-app 目录中创建一个文件，命名为 testwml.gsp，并 输入清单 1 中的静态 WML：

清单 1. 静态 WML

<%　response.setContentType("text/vnd.wap.wml")　%>
<?xml　version="1.0"?>
<!DOCTYPE　wml　PUBLIC　"-//PHONE.COM//DTD　WML　1.1//EN"
　　 "http://www.phone.com/dtd/wml11.dtd"　>

　 <card　id="f2"　title="Flight　2">
　　 <p　mode="wrap">From:　ORD</p>
　　 <p　mode="wrap">To:　DEN</p>
　　 <p　mode="wrap">UAL　9876</p>
　　 <p　mode="wrap">Jul　02,　1:15pm</p>
　　 <p>
　　　 <anchor>Previous<go　href="#f1"/></anchor>
　　 </p>
　 </card>
</wml>