Grails 与 XHTML-MP
那么,Grails 已经可以直接用于开发移动 Web 了吗?图 8 展示了 ready.mobi 验证器提供的关于旅行计划应用程序的原始清单页面的信息:
图 8. Grails 没有直接遵从 XHTML-MP
那就是说,还需要做一些工作。首先,在 grails-app/controllers/AirportController.groovy 中创建一个 mlist 闭包。除了会返回 5 个(而不是 10 个)元素外,它与默认的闭包没什么不同。创建一个单独的闭包保留,您就可以原样保持 list.gsp,以进行比较,如清单 6 所示:
清单 6. AirportController 中的新闭包
if(!params.max) params.max = 5
[airportList:Airport.list(params)]
}
现在将 grails-app/views/airport/list.gsp 复制到 mlist.gsp。(一会儿,我将提供一些策略,从而将移动用户无缝地重定向到正确的内容。这个强有力的方法目前还能满足需求)。
验证器指出网站未返回 XHTML-MP。编辑 mlist.gsp 使它在 标记中包含有必要的 DTD 和 xmlns 属性。您还需要禁用 meta 标记,因为它会自动将内容类型设置为 text/html。最后一步:将 grails-app/views/layout/main.gsp 中包含 CSS 的行复制到该文件中。(SiteMesh — Grails 使用的模板库 — 配置为只在默认情况下修饰 text/html 文件)。清单 7 展示了 mlist.gsp:
清单 7. 将 GSP 页面转变成 XHTML-MP
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<!--meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/-->
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
<meta name="layout" content="main" />
<title>Airport List</title>
</head>
...
</html>
在编辑文件时,也可以简化表布局。验证器指出 和
标记有误,所以需要将其删除。由于手机屏幕的纵向空间要比横向空间大,所以清单 8 所示的布局看起来会好一些:清单 8. 简化表
<tr>
<g:sortableColumn property="id" title="Id" />
<g:sortableColumn property="name" title="Name" />
</tr>
<g:each in="${airportList}" status="i" var="airport">
<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
<td>
<g:link action="show"
id="${airport.id}">${airport.id?.encodeAsHTML()}
</g:link>
</td>
<td>${airport.iata?.encodeAsHTML()}<br/>
${airport.name?.encodeAsHTML()}
</td>
</tr>
</g:each>
</table>
图 9. 为 iPhone 定制的列表页面
图 10 展示了此时 ready.mobi 验证器所提供的信息:
图 10. 通过验证的列表页面
这就好多了!而且针对验证器的必要更改是很少的。回顾 “精通 Grails: 用 Groovy 服务器页面(GSP)改变视图”,可以通过输入 grails install-templates 来相应地更改默认模板。