精通 Grails 改变 Grails 应用程序的外观（3）
|
- UID
- 1066743
|
精通 Grails 改变 Grails 应用程序的外观（3）
创建 Date TagLibCSS 102： 和 在浏览 main.css 时，就会看到许多字体的大小是用像素来表示的。从技术上讲，使用固定的大小（这很常见）是没有错误的，但这会影响使用。对于有视觉缺陷的用户和具有超大监视器（或超低分辨率）的机器而言，固定大小的字体都是不理想的。在 web 管理员的显示器上看起来很好的东西在其他地方显示时往往收不到这么好的效果 — 包括从电影屏幕到 iPhone 手机等众多显示屏上。
CSS 中的像素度量并不都是不好的 — 它们非常适合具有固定大小的元素，比如图像。但是总体而言，相对度量单元（比如 em）更适用于字体大小。1em 等效于由浏览器或周围父元素设置的默认字体大小的 100%。2em 是字体大小的 2 倍，依此类推。
参见 获得更多信息。
现在，需要使 lastUpdated 日期外观更加友好。最好将可重用代码片段放在自定义 TagLib 中。输入 grails create-tag-lib Date。将清单 11 中的代码添加到 grails-app/taglib/DateTagLib.groovy：
清单 11. 针对 DateTagLib 的代码1
2
3
4
5
6
7
8
9
10
11
12
13
| 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>1
2
3
4
5
| <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> 标记创建的新日期格式 标记创建的新日期格式" width="572" height="359">创建局部模板这个布局非常漂亮。我打算在 show.gsp 中重用它。在 grails-app/views/entry 中创建 _entry.gsp，并添加清单 13 中所示的代码（当然，可以从 list.gsp 剪切粘贴过来）。
清单 13. 针对 _entry.gsp 的代码1
2
3
4
5
| <div class="entry">
<span class="entry-date"><g:longDate>${entryInstance.lastUpdated}</g:longDate></span>
<h2><g:link action="show" id="${entryInstance.id}">${entryInstance.title}</g:link></h2>
<p>${entryInstance.summary}</p>
</div>
|
为了使用刚才创建的局部模板，需要像清单 14 那样调整 list.gsp：
清单 14. 在 list.gsp 中使用 _entry.gsp 局部模板 1
2
3
4
5
| <div class="list">
<g:each in="${entryInstanceList}" status="i" var="entryInstance">
<g:render template="entry" bean="${entryInstance}" var="entryInstance" />
</g:each>
</div>
|
现在还可以在 list.gsp 中重用局部模板，如清单 15 所示：
清单 15. 在 show.gsp 中使用 _entry.gsp 局部模板1
2
3
4
5
6
| <div class="body">
<g:render template="entry" bean="${entryInstance}" var="entryInstance" />
<div class="buttons">
<!-- snip -->
</div>
</div>
|
在浏览器中刷新列表视图。它将和前面完全一样。现在单击条目的标题，确保它也适用于这个视图。
自定义头部各个部分将协调地显示。现在需要用自己的标志来代替 Grails 标志。
我没有看到在 list.gsp 或 show.gsp 的其他地方引用了 Grails 徽标。记住，Grails 使用 SiteMesh 将最终页面的不同部分结合起来。查看 grails-app/views/layouts/main.gsp 就会看到包含 grails_logo.jpg 文件的位置。
在 grails-app/views/layouts 中创建另一个名为 _header.gsp 的局部模板。添加清单 16 中的代码。注意，Blogito 是一个链接到主页的超链接。
清单 16. 针对 _header.gsp 局部模板的代码1
2
3
4
| <div id="header">
<p><g:link class="header-main" controller="entry">Blogito</g:link></p>
<p class="header-sub">A tiny little blog</p>
</div>
|
现在像清单 17 那样编辑 main.gsp，以包含 _header.gsp 文件：
清单 17. 使用新 _header.gsp 局部模板的 Main.gsp1
2
3
4
5
6
7
| <body>
<div id="spinner" class="spinner" style="display:none;">
<img src="${createLinkTo(dir:'images',file:'spinner.gif')}" alt="Spinner" />
</div>
<g:render template="/layouts/header"/>
<g:layoutBody />
</body>
|
CSS 103： 和 用于给块元素留出一些空间的 CSS 方框模型（box model）乍看起来有些迷惑。简单而言，padding 增加了块内的空间，而 margin 增加了块外的空间。
清单 18 的头部使用 padding 来增加文本和蓝色方框边缘之间的空间。它使用 margin 来增加蓝色方框外部的 header <div> 和 nav <div> 之间的空间。
可以将一个方框的四面设置为一致的 padding: 2em; 或 margin: 2em;。要设置方框的某个边的空间，可以使用 margin-top、margin-right、margin-bottom 或 margin-left 直接引用它。如果想要通过一行代码为某条边（如清单 18 所示）设置不同的 padding，TRBL（Top、Right、Bottom 和 Left 的缩写）将帮助您记住正确的顺序。这样，记忆四条边的顺序就很容易了。
参见 获得更多关于 CSS 方框模型的信息。
最后，再为 web-app/css/main.css 添加一些代码，如清单 18 所示：
清单 18. _header.gsp 局部模板的 CSS 格式1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| #header {
background: #67c;
padding: 2em 1em 2em 1em;
margin-bottom: 1em;
}
a.header-main:link, a.header-main:visited {
color: #fff;
font-size: 3em;
font-weight: bold;
}
.header-sub {
color: #fff;
font-size: 1.25em;
font-style: italic;
}
|
刷新浏览器查看发生了什么变化（见图 8）。单击条目的标题，然后在头部单击 Blogito 导航到主页。
图 8. 展示新的头部 |
|
|
|
|
|
