清单 9. 更改 list.gsp 视图

<div class="list"> <g:each in="${entryInstanceList}" status="i" var="entryInstance"> 　 <div class="entry"> 　 <span class="entry-date">${entryInstance.lastUpdated}</span> 　 <h2><g:link action="show" id="${entryInstance.id}">${entryInstance.title} </g:link></h2> 　 <p>${entryInstance.summary}</p> 　 </div> </g:each> </div>

注意，这些代码是经过大大简化的。可以删除 <fieldValue> 标记 — 它们帮助将域类绑定到 HTML 表单字段，但在这里没有实用价值。每个 Entry 都包含在一个指定的 <div> 中，而 lastUpdated 字段则包含在指定的 <span> 中。这些类属性连接到随后将构建的 CSS 格式中。 title 和 summary 字段包含在普通的 HTML 头部和段落标记中。

在浏览器中刷新列表视图（见图 5）。这还不算是进步。但是添加一些新的 CSS 指令之后，它的外观 将有很大的改善。

图 5. 没有使用 CSS 的新列表

将清单 10 中的 CSS 添加到 web-app/css/main.css 的底部：

清单 10. list.gsp 视图的 CSS 自定义

/* Blogito customizations */ .entry { 　 padding-bottom: 2em; } .entry-date { 　 color: #999; }

精通Grails: 改变Grails应用程序的外观(7)

再次刷新浏览器将看到更加好看的外观（见图 6）。现在还没有充分利用 CSS，但是已经拥有一个好 的起点。

图 6. 带有 CSS 的新列表

创建 Date TagLib

现在，需要使 lastUpdated 日期外观更加友好。最好将可重用代码片段放在自定义 TagLib 中。输入 grails create-tag-lib Date。将清单 11 中的代码添加到 grails-app/taglib/DateTagLib.groovy：

清单 11. 针对 DateTagLib 的代码

import java.text.SimpleDateFormat class DateTagLib { 　 def longDate = {attrs, body -> 　　 //parse the incoming date 　　 def b = attrs.body ?: body() 　　 def d = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss").parse(b) 　　 //if no format attribute is supplied, use this 　　 def pattern = attrs["format"] ?: "EEEE, MMM d, yyyy" 　　 out << new SimpleDateFormat(pattern).format(d) 　 } }

现在，将 lastUpdated 字段包含在 grails-app/views/entry/list.gsp 中刚才创建的 <g:longDate> 标记中，如清单 12 所示：

清单 12. 在 list.gsp 中使用 <g:longDate>

<div class="entry"> 　 <span class="entry-date"><g:longDate>${entryInstance.lastUpdated} </g:longDate></span> 　 <h2>${entryInstance.title}</h2> 　 <p>${entryInstance.summary}</p> </div>

重启 Grails 并刷新 Web 浏览器。您将看到日期的新格式，如图 7 所示：

图 7. 使用自定义 <g:longDate> 标记创建的新日期格式

精通Grails: 改变Grails应用程序的外观(8)

创建局部模板

这个布局非常漂亮。我打算在 show.gsp 中重用它。在 grails-app/views/entry 中创建 _entry.gsp ，并添加清单 13 中所示的代码（当然，可以从 list.gsp 剪切粘贴过来）。

清单 13. 针对 _entry.gsp 的代码

<div class="entry"> <span class="entry-date&q

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!