20130516-Grails In Action-4、让模型工作(02小节)

来源：互联网发布：python培训视频编辑：程序博客网时间：2024/05/17 06:31

上一节了解了基本脚手架的功能以及地方化的一些内容，这一节调整脚手架的CSS布局

如果只是想改变程序的外观，可以直接调整/web-app/css/main.css。这里我们调整/grails-app/views/layouts/main.gsp文件，生成一个新的布局

修改/grails-app/views/layouts/main.gsp

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <title>Hubbub &raquo; <g:layoutTitle default="Welcome" /></title> 5         <link rel="stylesheet" href="<g:createLinkTo dir='css' file='hubbub.css'/>" /> 6         <g:layoutHead /> 7     </head> 8      9     <body>10         <div>11             <div id="hd">12                 <a href="<g:createLinkTo dir="/"/>">13                     <img id="logo"    src="${createLinkTo(dir: 'images',file: 'headerlogo.png')}"    alt="hubbub logo" />14                 </a>15             </div>16             <div id="bd">17                 <g:layoutBody />18             </div>19             <div id="ft">20                 <div id="footerText">Hubbub - Social Networking on Grails</div>21             </div>22         </div>23     </body>24 </html>

这个模板使用了自定义的hubbub.css样式文件

在web-app/css/新增hubbub.css样式文件

  1 body {  2     background: #dddddd;  3     padding-top: 4px;  4     font-family: "Helvetica";  5 }  6   7 #hd {  8     padding: 1em;  9     background-image: url('../images/background.png'); 10     background-repeat: repeat-x; 11 } 12  13 #bd { 14     margin-top: 0.5em; 15     border: 1px solid lightgray; 16     background: white; 17     padding: 1em; 18 } 19  20 #ft { 21     background: #222222; 22     padding: 1em; 23     text-align: center; 24     color: white; 25     font-family: "Lucinda Grande",Arial; 26     font-size: 12pt; 27 } 28  29 #sidebar { 30  31     margin-top: 3em; 32     background-color: #d3e3f5; 33     padding: 1em; 34     border: 1px solid lightblue; 35 } 36  37 #sidebar h3 { 38     color: #343534; 39     font-weight: bold; 40     border-bottom: 1px solid lightslategray; 41     margin-top: 1em; 42     margin-bottom: 1em; 43 } 44  45 #newPost h3 { 46     font-size: x-large; 47     font-weight: bold; 48     border-bottom: 1px solid lightslategray; 49     margin-top: 1em; 50     margin-bottom: 1em; 51 } 52  53 #charLeft { 54     color: lightslategray; 55     float: right; 56     font-size: x-large; 57     border: none; 58 } 59  60 #postContent { 61     margin: 1em; 62     font-size: large; 63     width: 90%;     64 } 65  66 dt { 67     float: left;     68 } 69  70 dd { 71     text-align: right; 72 } 73  74 .postImage { 75     margin: 0.5em; 76     float: left; 77 } 78  79 .postEntry { 80     padding-top: 1em; 81     padding-bottom: 1em; 82     margin-left: 3em; 83     font-size: larger; 84     border-top: 1px solid lightslategray; 85 } 86  87 .postText a { 88     font-weight: bold; 89     text-decoration: none; 90 } 91  92 .postDate { 93     font-size: smaller; 94 } 95  96 .friendsThumbnails img { 97     margin: 4px; 98 } 99 100 .errors {101     background: lightpink;102     border: 1px dotted red;103     color: black;104     padding: 1em;105     margin: 1em;106     font-weight: bold;107 }

hubbub.css中引入了一张图片，将图片拷贝到web-app/images/

运行系统，外观已经面目全非了。其他脚手架产生的功能依然可以使用，但是界面已经发生变化了，所以，我们还是需要考虑考虑，动态生成的脚手架页面好用吗？这里给出了几个缺陷：

用动态脚手架比较难以实现复杂的跨域形式
动态脚手架没有ajax支持
动态脚手架只有有限的交互支持，对于业务之间的操作还是需要人为处理

通过以上几点问题，系统最终操作人员难以接受，所以还是需要人为定制操作界面，幸运的是，系统提供了静态脚手架支持，我们再在静态脚手架的基础上修改成自己的客户化界面即可解决上面这三点缺陷