`
lijingzhi
  • 浏览: 43212 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

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

 
阅读更多

上一节了解了基本脚手架的功能以及地方化的一些内容,这一节调整脚手架的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支持
  • 动态脚手架只有有限的交互支持,对于业务之间的操作还是需要人为处理

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

分享到:
评论

相关推荐

    groovy-grails-tool-suite-3.6.4.RELEASE-e4.4.2-win32-x86_64.part1

    groovy-grails-tool-suite-3.6.4.RELEASE-e4.4.2-win32-x86_64.part1 共两个压缩包,解压后将扩展名.zip.bak改为.zip再次解压。

    groovy-grails-tool-suite-3.6.4.RELEASE-e4.4.2-win32-x86_64.part2

    groovy-grails-tool-suite-3.6.4.RELEASE-e4.4.2-win32-x86_64.part2 共两个包,解压后需要将扩展名.zip.bak改名为.zip重新解压。 http://dist.springsource.com/release/STS/3.8.1.RELEASE/dist/ e4.6/spring-tool-...

    Getting-Started-with-Grails-Chinese

    4. **MVC 架构**:解释 MVC 模式的组件(模型、视图、控制器)及其在 Grails 中的实现,包括 GORM(Grails Object-Relational Mapping)和领域类。 5. **GSP(Grails Server Pages)和模板引擎**:描述 Grails 如何...

    Grails in Action - Presentation

    ### Grails in Action – 演讲稿概览 #### Guillaume Laforge — Groovy项目经理 Guillaume Laforge 是一位在Groovy与Grails领域享有盛誉的技术专家,他在多个重要角色中扮演着关键角色: - **Groovy项目经理**:...

    elasticsearch-grails-plugin, 恢复的ElasticSearch grails插件.zip

    elasticsearch-grails-plugin, 恢复的ElasticSearch grails插件 Elasticsearch插件插件这个项目是一个基于Elasticsearch的插件,这个项目是基于的人完成的伟大工作的。你为什么想要为原来的Elasticsearch插件提供...

    grails in action 2009

    《Grails in Action 2009》是针对Groovy和Grails框架的一本详尽教程,适合希望深入了解这两种技术的开发者。Groovy是一种简洁、动态的Java平台上的编程语言,而Grails则是一个基于Groovy的开源Web应用框架,它以简化...

    Getting-Started-with-Grails-Chinese.rar_Getting Started_grails

    4. **GSP(Grails Server Pages)**:这是Grails的视图技术,类似JSP,但更简洁,支持Groovy语法和标签库。 5. **GORM**:Grails的ORM工具,它允许开发者以声明式的方式与数据库交互,支持ActiveRecord和Domain ...

    Grails入门指南 -- 针对grails1.0.4更新

    ### Grails入门指南知识点 #### 一、Grails框架简介 - **背景**: Grails是一个基于Groovy语言的开源Web应用框架,适用于Java平台。它旨在简化开发过程,提高开发效率,尤其受到那些希望保留Java环境同时寻求更高效...

    idea-grails-toolls整包jar资源

    ant-1.9.4jarant-antlr-1.9.4.jarant-junit-1.9.4jar ant-launcher-1.9.4.jar bsf-2.4.0.jar commons-cli-1.2jar commons-logging-1.2.jar gpars-1.2.1.jar groovy-2.4.5jar groovy-ant-2.4.5.jar ...

    grails in action

    《Grails in Action》是一本专注于Grails框架的实战型图书,由Manning出版社于2009年出版,ISBN号为1933988932。Grails是一种基于Groovy语言的开源Web应用框架,它以其高效、灵活和强大的特性深受Java开发者喜爱。这...

    grails 中文手册

    Grails 的设计目标是简化开发,通过元编程和约定优于配置(Convention over Configuration)的理念,让开发者能够快速地构建高质量的Web应用。 1. **Groovy 语言基础** - Groovy 是一种动态类型的JVM语言,语法...

    Grails in Action

    《Grails in Action》这本书是针对Grails框架的一本实战指南,主要面向已经熟悉Java语言的开发者,旨在帮助他们快速掌握Grails框架并应用于实际项目中。Grails是一款基于Groovy语言的开源Web应用框架,它借鉴了Ruby ...

    wsdl2java源码-grails-cxf-grails-3:grails-cxf-grails-3

    wsdl2java源码 请注意,当前的 3.x 版本使用 cxf 3.0.4 并且需要 WSS4J ...grails-app\endpoints** 和 grails-app\services** 目录中自动装配配置的类 端点创建脚本 create-endpoint 和 create-endpoin

Global site tag (gtag.js) - Google Analytics