Grails 与移动 Web（4）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

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

Grails 与移动 Web（4）

在页面的底部，ready.mobi 验证器展示了一组详细的测试结果，每一个结果都带有这样的标记：通过（绿色）、失败（红色）或警告（黄色）。例如，即使 http://m.yahoo.com 好像在各种设备上都显示得不错，其 XHTML 也不是 100% 遵从的，如图 6 所示：
图 6. 查看 XHTML-MP 遵从性错误

再往下看，如图 7 所示，您会看到 Yahoo! 在图像上遗漏了一些 alt属性，而且在某些情况下没有指定图像的大小：
图 7. 查看具体的错误

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中的新闭包

1
2
3
4

def mlist = {
if(!params.max) params.max = 5
[airportList:Airport.list(params)]
}

现在将 grails-app/views/airport/list.gsp 复制到 mlist.gsp。（一会儿，我将提供一些策略，从而将移动用户无缝地重定向到正确的内容。这个强有力的方法目前还能满足需求）。
验证器指出网站未返回 XHTML-MP。编辑 mlist.gsp 使它在 <html>标记中包含有必要的 DTD 和 xmlns属性。您还需要禁用 meta标记，因为它会自动将内容类型设置为 text/html。最后一步：将 grails-app/views/layout/main.gsp 中包含 CSS 的行复制到该文件中。（SiteMesh —Grails 使用的模板库 —配置为只在默认情况下修饰 text/html 文件）。清单 7 展示了 mlist.gsp：
清单 7. 将 GSP 页面转变成 XHTML-MP

1
2
3
4
5
6
7
8
9
10
11
12
13

<% response.setContentType("application/xhtml+xml")%>
<?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>

<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
<meta name="layout" content="main" />
<title>Airport List</title>
</head>
...
</html>

在编辑文件时，也可以简化表布局。验证器指出 <thead>和 <tbody>标记有误，所以需要将其删除。由于手机屏幕的纵向空间要比横向空间大，所以清单 8 所示的布局看起来会好一些：
清单 8. 简化表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<table>
<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 仿真器中的显示效果：
图 9. 为 iPhone 定制的列表页面

图 10 展示了此时 ready.mobi 验证器所提供的信息：
图 10. 通过验证的列表页面

这就好多了！而且针对验证器的必要更改是很少的。回顾 “”，可以通过输入 grails install-templates来相应地更改默认模板。

收藏分享评分

回复引用

订阅 TOP

返回列表