登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

杨柳千丝,绊惹春风

普通人日记

 
 
 

日志

 
 
关于我

性格还算开朗,为人还算不错。 长相一般,身高一般,能力一般,人是一般。 不会浪漫,不会情调,不会唱歌,不会跳舞,不会吸烟,不爱喝酒,不会开车,爱听老歌

Groovy 和Grails从入门到精通 第五章 创建用户界面(二)  

2010-08-09 23:43:53|  分类: 技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

添加更多的外观< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" />

       现在你要完成改变以便使Collab-Todo具有自己独有的外观。还要改变右边栏、替换Grails头部、和默认的标题。前面提到,在第8章将利用右边栏来显示用户好友。我们以CSS式样开始,添加列表5-8CSS式样片断到主式样表(the main style sheet

列表 5-8. CSS 式样

#header {

width: 778px;

background: #FFFFFF url(../images/header_background.gif) repeat-x;

height: 70px;

margin: 0px auto;

}

#header h1 {

font-family:Arial,sans-serif;

color: white;

padding: 20px 0 0 6px;

font-size:1.6em;

}

body {

margin: 0px;

padding: 0px;

text-align:center;

font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;

font-style: normal;

font-variant: normal;

font-weight: normal;

font-size: 13px;

line-height: normal;

font-size-adjust: none;

font-stretch: normal;

color: #333333;

}

#page {

width: 778px;

margin: 0px auto;

padding: 4px 0;

text-align:left;

}

#content {

float: left;

width: 560px;

color: #000;

}

#sidebar {

float: right;

width: 200px;

color: #000;

padding: 3px;

}

提示:你能在工程源文件中找到header_background.gif文件

 

现在需要在主版面布局中添加更多的CSS式样,如列表5-9

列表5-9 完成版面布局 (main.gsp)

01 <html>

02 <head>

03 <title><g:layoutTitle default="Collab Todo" />

04 </title>

05 <link rel="stylesheet"

06 href="${createLinkTo(dir:'css',file:'main.css')}" />

07 <link rel="shortcut icon"

08 href="${createLinkTo(dir:'images',file:'favicon.ico')}"

09 type="image/x-icon" />

10 <g:layoutHead />

11 <g:javascript library="application" />

12 </head>

13 <body>

14 <div id="page">

15 <div id="spinner" class="spinner" style="display: none;">

16 <img src="${createLinkTo(dir:'images', file:'spinner.gif')}"

17 alt="Spinner" />

18 </div>

19

20 <g:render template="/common/topbar" />

21

22 <div id="header">

23 <h1>Collab-Todo</h1>

24 </div>

25

26 <div id="content">

27 <g:layoutBody />

28 </div>

29

30 <div id="sidebar">

31 <g:render template="/common/buddies" />

32 </div>

33

34 <div id="footer">

35 <g:render template="/common/footer" />

36 </div>

37 </div>

38 </body>

39 </html>

 

好友模板

       在第八章研究好友模板(_buddies.gsp)的细节,现在只是在/common/_buddies.gsp模板文件中加上如下片断:

<div id="buddies">

<div class="title">Buddies</div>

</div>

 

 

让我们聊聊现在版面布局所做的改变。第3行使用<g:layoutTitle>标签,如果视图没有标题,则默认显示“Collab Todo”成页面上。14行增加一个<div>使用页面式样(page style),主体式样(body style)一起,页面式样创建了一个778像素宽的容器在页面中心。2224行使用Collab-Todo 头部(Header)替换了Grails头部(Header),如果仔细看CSS头部式样,你会发现定义了一个头部图片((header_background.gif)26-28行用content式样包含视图主体(view’s body),这意味着这个页面被插入到这里的main.gsp装饰(This means that pages decorated by main.gsp are inserted herecontent式样创建了一个560像素宽的左对齐的页面容器。30-32行创建了包含好友模板的边框栏(sideBar式样,这个容器是200像素宽右对齐。

你可以看到你的工作成果如图5-5.

< xmlnamespace prefix ="v" ns ="urn:schemas-microsoft-com:vml" />

Groovy 和Grails从入门到精通 第五章 创建用户界面(二) - 虹 - 杨柳千丝,绊惹春风

                            

5-5 完成后的页面布局

现在外面逐渐美观起来,你还需要做的是,通过改变“Welcome to Grails”和主体,去掉你不再需要索引页面(index page)。你能找到这个HTML页面在web-app/index.gsp中。将index.gsp内容改为列表5­-10所示内容。

列表5­-10 新的index页面(index.gsp)

01 <html>

02 <head>

03 <title>Welcome to Collab-Todo</title>

04 <meta name="layout" content="main" />

05 </head>

06 <body>

07 <h1 style="margin-left:20px;">Welcome to Collab-Todo</h1>

08 <p style="margin-left:20px;width:80%">

09 Welcome to the Collab-Todo application. This application was built

10 as part of the Apress Book, "Beginning Groovy and Grails."

11 Functionally, the application is a collaborative "To-Do"

12 list that allows users and their buddies to jointly

13 manage "To-Do" tasks.</p><br />

14 <p style="margin-left:20px;width:80%">Building the Collab-Todo

15 application is used to walk the user through using Grails 1.0 to

16 build an application. Below is a list of controllers that are

17 currently deployed in this application. Click on each to execute

18 its default action:</p>

19 <br />

20 <div class="dialog" style="margin-left:20px;width:60%;">

21 <ul>

22 <g:each var="c" in="${grailsApplication.controllerClasses}">

23 <li class="controller"><a href="${c.logicalPropertyName}">

24 ${c.fullName}</a></li>

25 </g:each>

26 </ul>

27 </div>

28 </body>

29 </html>

 

这个文件中有两个地方需要讲解。22-25行说明了迭代器<g:each>的使用方法,它遍历控制器类的集合,并在一个列表中显示控制器类的名称,这是这个应用程序的一部分。

4行是一个通过规约使用版面布局的例子,版面布局元标签(layout metatag)引起“main”版面布局(main.gsp)被用于页面。所有的版面布局都位于grails-app/views/layouts中,可以被重调用。

5-6显示了你的工作成果。

Groovy 和Grails从入门到精通 第五章 创建用户界面(二) - 虹 - 杨柳千丝,绊惹春风

 图

5-6 最终的页面

 

在改变外观格局的同时,学习了版本布局、模板、CSS和一些Grails标签。Grails与其它流行的Web 框架一样,支持标签库(tag librariesGrails标签库类似JSP标准标签库(JSTL)JavaServer Pages Standard Tag LibraryStruts tags,标签库包含了所有的条件逻辑、传递和版面布局,接下来的一节提供了Grails的速览。
  评论这张
 
阅读(1034)| 评论(0)

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018