快速业务通道

精通Grails: 改变Grails应用程序的外观 - 编程入门网

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-06-15
uot;><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 局部模板

<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 局部模板

<div class="body">   <g:render template="entry" bean="${entryInstance}" var="entryInstance" />   <div class="buttons">    <!-- snip -->   </div> </div>

在浏览器中刷新列表视图。它将和前面完全一样。现在单击条目的标题,确保它也适用于这个视图。

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

时间:2011-08-02 IBM Scott Davis

自定义头部

各个部分将协调地显示。现在需要用自己的标志来代替 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 局部模板的代码

<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.gsp

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

最后,再为 web-app/css/main.css 添加一些代码,如清单 18 所示:

清单 18. _header.gsp 局部模板的 CSS 格式

#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; }

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

时间:2011-08-02 IBM Scott Davis

刷新浏览器查看发生了什么变化(见图 8)。单击条目的标题,然后在头部单击 Blogito 导航到主页 。

图 8. 展示新的头部

精通Grails: 改变Grails应用程序的外观 - 编程入门网

在登录之前隐藏导航栏

您还需要处理一个容易弄错的标志,它表示这是一个 Grails 应用程序:导航栏。尽管我们在下一篇

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

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号