上一节了解了基本脚手架的功能以及地方化的一些内容,这一节调整脚手架的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 » <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 共两个压缩包,解压后将扩展名.zip.bak改为.zip再次解压。
elasticsearch-grails-plugin, 恢复的ElasticSearch grails插件 Elasticsearch插件插件这个项目是一个基于Elasticsearch的插件,这个项目是基于的人完成的伟大工作的。你为什么想要为原来的Elasticsearch插件提供...
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-...
Grails In Action.pdf ebook
Grails in Action pdf
Getting-Started-with-Grails-Chinese,一本不错的grails入门书籍,希望对有志于grails的朋友们有用。
Grails in Action - Presentation pdf
Grails in Action Grails in Action Grails in Action Grails in Action Groovy in Action Grails in Action Grails in Action Groovy in Action Groovy in Action
Grails In Action 2009最新版,英文的。很详细,学习groovy和grails的不二之选。
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入门指南中文pdf -- 针对grails1.0.4更新,附加idea8 开发grails的流程
基于java的动态语言Groovy 构建的敏捷web开发框架grails经典入门教程
wsdl2java源码 请注意,当前的 3.x 版本使用 cxf 3.0.4 并且需要 WSS4J ...grails-app\endpoints** 和 grails-app\services** 目录中自动装配配置的类 端点创建脚本 create-endpoint 和 create-endpoin
实测可用
实测可用
实测可用
实测可用