精通 Grails 改变 Grails 应用程序的外观（2）

look_w

调整默认模板您可以输入 grails generate-views Entry 手动地从 GSP 文件中删除 dateCreated 和 lastUpdated 字段，但这不能从根本上解决问题。您可能希望这些字段永远不出现在创建和编辑表单中。最好是在 def scaffold 中更改模板。
输入 grails install-templates。在 src/templates/scaffolding 中查找 create.gsp 和 edit.gsp。在每个文件中，将 dateCreated 和 lastUpdated 添加到 excludedProps，如清单 5 所示：  
清单 5. 从 list.gsp 和 show.gsp 模板中删除时间戳字段

1 2 3 4 5 6 7 8

excludedProps = ['version',                  'id',                  'dateCreated',                  'lastUpdated',                  Events.ONLOAD_EVENT,                  Events.BEFORE_DELETE_EVENT,                  Events.BEFORE_INSERT_EVENT,                  Events.BEFORE_UPDATE_EVENT]

重启 Grails，确保时间戳字段不再出现（参见图 2）：                 
图 2. 不包含时间戳字段的表单 更改排序的顺序添加新条目时，默认情况下是根据 ID 对表进行排序的。blog 通常以逆时针顺序对条目进行排序 — 最新的排在前面。在以前版本的 Grails 中，要更改默认的排序顺序，则必须在 EntryController.groovy 中手动编辑列表闭包。在现有的代码行下面添加两个排序代码行并不困难（见清单 6）。问题是不能再从幕后动态构建这个代码（可以查找 src/templates/scaffolding/Controller.groovy 或输入 grails generate-controller Entry 查看默认的底层实现）。
清单 6. Grails 1.0.x 中的排序

1 2 3 4 5 6

def list = {     if(!params.max) params.max = 10     if(!params.sort) params.sort = "lastUpdated"     if(!params.order) params.order = "desc"     [ entryList: Entry.list( params ) ] }

Grails 1.1 将一个很简单但极为有用的特性添加到静态映射块，即 sort。将清单 7 中的映射块添加到 Entry.groovy。通过在域类中处理排序，您可以继续对控制器执行 def scaffold 操作。
清单 7. 将 sort 添加到 static mapping 块

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

class Entry {   static constraints = {     title()     summary(maxSize:1000)     dateCreated()     lastUpdated()   }       static mapping = {     sort "lastUpdated":"desc"   }           String title   String summary   Date dateCreated   Date lastUpdated }

重启 Grails，确保编辑后的条目移动到列表的顶端，如图 3 所示：
图 3. 验证新的排序顺序在开发模式下创建伪记录每次重启 Grails 时将丢失现有的条目，您注意到了吗？记住，这是一个特性，而不是 bug。在每次启动 Grails 时将创建条目表，并且在关闭 Grails 时删除它们。打开 grails-app/conf/DataSource.groovy 验证这个特性。很明显，开发模式中的 db-create 值设置为 create-drop。
可以将该值更改为 update，但这也不是很理想。在开发过程的前期，模式是很不稳定的 — 您可以随时添加或删除字段，或修改限制条件等等。在所有东西稳定下来之前，我觉得最好将 db-create 设置为 create-drop。
在开发模式中经常要重新输入样例数据，为了使这个操作没那么繁琐，可以为 grails-app/conf/BootStrap.groovy 添加一些逻辑。清单 8 中的代码在 Grails 每次启动时插入新的记录：  
清单 8. 在开发模式中添加伪记录

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

import grails.util.GrailsUtil class BootStrap {   def init = { servletContext ->     switch(GrailsUtil.environment){       case "development":         new Entry(           title:"Grails 1.1 beta is out", summary:"Check out the new features").save()         new Entry(           title:"Just Released - Groovy 1.6 beta 2", summary:"It is looking good.").save()       break       case "production":       break     }   }   def destroy = {   } }

再次重启 Grails。这一次，条目表中将出现现有的记录，如图 4 所示：
图 4. 在引导时出现的伪记录改善列表的外观列表视图中的默认 HTML 表对入门人员已经足够好，但对 Blogito 而言，这明显不是长期解决办法。blog 页面通常垂直地显示 date、title 和 summary 字段，而不是横向地显示（每次显示一个字段）。
为进行这种更改，输入 grails generate-views Entry。前面动态构造的 GSP 文件现在应该出现在 grails-app/views/entry 中。在文本编辑器中打开 list.gsp。在头部将标题从 Entry List 更改为 Blogito。删除 <h1> 和 <g:if> 块，然后用清单 9 中的代码代替现有的 <div class="list">。
清单 9. 更改 list.gsp 视图

1 2 3 4 5 6 7 8 9

<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 头部和段落标记中。
CSS 101： 和 当谈论 CSS 和其他与图像设计（而不是软件工程）关系更紧密的技术时，一些程序员就显得厌烦。但是我承认，当 CSS 变得复杂时，它可以是非常 复杂的。但反之亦然：当 CSS 比较简单时，它可以是非常简单的。
HTML 标记可以分为两大类：块和内联。块标记（比如 <h1>、<p> 和 <div>）通常用于包含大的、杂乱的内容块。浏览器通常在每个块元素的末尾抛出一个隐式的新行。<h1> 和 <p> 有预定义的外观。我们通常将信息块包含在 <div> 标记中，以便为其命名和自定义样式。
内联元素（比如 <a>、<strong> 和 <span>）通常用来包含一个或两个单词，而不是整个段落。内联元素的末尾没有添加隐式的新行。像块元素一样，像 <strong> 和 <em> 这样的内联元素有与之关联的默认格式，而 <span> 则必须通过 CSS 来应用格式。
对不熟悉的人而言，命名 <span> 和 <div> 元素的方式可能会造成混乱。需要在页面的多个元素上重用 class 属性。需要创建 CSS 类，比如 entry 和 entry-date，以让具有相同类的所有元素同时出现。它们在样式表中显示时带有前导点：例如，.entry 和 .entry-date。
您还可能碰到带有 id 属性的元素。id 在 HTML 文档中必须是惟一的。在本文的后面，将创建一个 <div id="header">。这意味着每页只能有一个 header 元素。id 在样式表中显示时带有一个前导 hash，比如在 #header 中。
要快速回顾 CSS 基础知识，请查看 。

在浏览器中刷新列表视图（见图 5）。这还不算是进步。但是添加一些新的 CSS 指令之后，它的外观将有很大的改善。  
图 5. 没有使用 CSS 的新列表将清单 10 中的 CSS 添加到 web-app/css/main.css 的底部：
清单 10. list.gsp 视图的 CSS 自定义

1 2 3 4 5 6 7 8

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

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