Grails 与移动 Web（1）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-8-5 12:23 | 只看该作者

Grails 与移动 Web（1）

目前，几乎所有的网站都宣称 “使用 [Browser X] 提供最佳视图”。现代的 Ajax 库，比如 Prototype、Dojo 和 YUI，有效地缩小了 Firefox、Internet Explorer 和 Safari 之间的差距。但是使用 Nokia、Motorola 或者 Apple 手机的人可能不会喜欢浏览器的独立性。即使是最新的呼吁 “支持完整 HTML ” 的移动浏览器也可以从简单更改网络内容中获益。本文将向您展示如何优化 Grails 应用程序，使其适用于移动浏览器。
移动 Web 的使用率正在增长据 Internet World Stats 称，目前 Internet 用户为 14 亿 —约为全球总人口的 20%（请参阅）。在北美洲，有 3/4 的人都是使用移动互联网。
在全球 66 亿人口当中，就有一半的人拥有手机。在北美洲，手机与 Internet 的市场占有率几乎相等，但在其他的地方则有所不同。在香港，手机的市场占有率为 140%，而在欧盟的部分国家（立陶宛，意大利和卢森堡公国）其市场占有率已高达 150%。的确，在某些地方手机比人还要多。
IDG Communications 的 Colin Crawfordsays 说到了要点（参见）：“在接下来的几年里，手机会作为上网的主要设备而逐步取代个人电脑。现在，通过手机访问互联网的比例已达到 30%，而在某些国家（比如日本）这个比例已高达 70%”。

如果您还在疑虑为什么非要使网站便于移动浏览的话，看一看边栏里面的数字就会明白了。这份全球的统计数字确实让人过目难忘，但热衷移动 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 之间相互转换的网关。
关于本系列Grails 是一种新型 Web 开发框架，它将常见的 Spring 和 Hibernate 等 Java 技术与当前流行的实践（比如约定优于配置）相结合。在加入脚本语言的灵活性和动态性的同时，用 Groovy 编写的 Grails 可以无缝地集成遗留的 Java 代码。学习完 Grails 之后，您将改变看待 Web 开发的方式。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<% 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" >

<wml>
<card id="f1" title="Flight 1">
From: DEN
To: ORD
UAL 1234
Jun 30, 10:30am

 <anchor>Next<go href="#f2"/></anchor>

</card>

<card id="f2" title="Flight 2">
From: ORD
To: DEN
UAL 9876
Jul 02, 1:15pm

 <anchor>Previous<go href="#f1"/></anchor>

</card>
</wml>

您用手机访问 http://www.davisworld.org/testwml.gsp 同样可以看到这个页面。您可能习惯于在 GSP 中查看 HTML。但在这里使用的是 WML。
当从 GSP 中发送出 WML 时，切记要将默认的 MIME 类型 text/html替换为 text/vnd.wap.wml，如清单 1 中的第一行所示。如果直接提供静态 WML，那么只需赋予文件一个 WML 扩展名，而不是 GSP 扩展名。大多数 Web 服务器会在这之后自动返回一个正确的 MIME 类型，无需调用 response.setContentType。在 $TOMCAT_HOME/conf/web.xml 中，您会发现 MIME 针对 WML 文件的映射已经就位。如果您使用的是 Apache HTTPD 的话，那么您可以在 $APACHE_HOME/conf/mime.types 文件中找到类似的 WML 文件的映射。清单 2 向展示了 Tomcat 的 MIME 类型映射：
清单 2. 在 Tomcat 中设置 MIME 类型

1
2
3
4
5

<mime-mapping>

<extension>wml</extension>
<mime-type>text/vnd.wap.wml</mime-type>
</mime-mapping>

回过头来在看一下，接下来需要注意的是 DOCTYPE。包含文档类型定义（Document Type Definition，DTD）语句可以帮助将 WML 文档识别为 testwml.gsp。
注意该文件并未打包在常见的 <html>标记中。它的开头和结尾为 <wml>。您可能还注意到中缺少 <head>和 <body>部分。每一个 WML 页面为一个 card，拥有一个独立的 id属性和便于用户使用的 title属性。
通常情况下，在一个单一文件中可以下载多个页面 / 卡片。早期的手机的数据通道非常狭窄，而这种方法刚好就缓和了这些设备及其网络的局限性。一次下载得越多，手机与服务器之间的数据转就越少。因为一次只能查看一个页面，这样就可以有效地提前获取其余的页面。对于这种情况，导航只发生在客户端。
HTML 开发人员一定要熟悉 标记。WML <anchor>标记在本质上与 HTML <a>标记是类似的，即使它们在语法上有所不同（参阅了解更多关于 WML 的信息）。
下面是 WML 的一个小技巧。由于处理的是专用于手机的内容，因此可以创建一个超链接，用户一旦选定链接，就可以拨出电话。清单 3 的中例子可以拨出电话号码 303-555-1212 ：
清单 3. WML 拨号链接

1
2
3

注意该链接使用的协议并非常见的 http://—而是 wtai://，这是无线电话应用程序界面（Wireless Telephony Applications Interface）的缩写。

收藏分享评分

回复引用

订阅 TOP

返回列表