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

杨柳千丝,绊惹春风

普通人日记

 
 
 

日志

 
 
关于我

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

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

2010-08-06 23:23:18|  分类: 技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

第四章介绍了Grails的结构层次和组成元素,同时学习了使用Grails脚手架创建一个简单的应用程序。在本章,你将利用第4章的域类对像开始创建一个功能全面、吸引人的应用程序。

我们将学习如何使用GSPGrails TagsGrails TemplatesCSS创建一个从外观看起来非常不错的应用程序。你将创建一个登陆界面以及使用控制器来控制这个界面。当你增加了代码后,你可以开始构建测试工具去测试,包括集合测试功能测试。接下来,你可以把注意力集中到用户体验上来,你可以看到可操作、错误和提示等信息,并且你学会如何定制这些信息。你可以删除一些非必要的信息来增强视图和控制器的功能,使用actions设置域类的属性。为了使应用程序更人性化,你可以创建简单的审核日志功能(audit logging facility来改变Grails日志控制器属性。

< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" /> 

本章的目标是为Collab-Todo应用程序创建好的外观布局。图5-1所示的框架希望能给你一个如何去布局应用程序的提示。

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

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

                     

5-1 Collab-Todo程序布局

上面的布局是一个通用的模式:页面中间是两列,两边空白是边框槽(gutter,再加上一个头部和尾部。表5­-1描述了该框架的每个组成部分。

5-1 框架组成部分

 

       部件                     描述

边框槽(gutter 提供浏览器的页边空白,以便主要内容显示在浏览器的中间区域

顶栏(topbar     供登陆与退出,如果用户已登陆则显示用户名。

头部(Header    显示应用程序标题,本例中为:“Collab-Todo.”

内容(content    程序主要内容显示区域,程序的大部分内容都在这里显示。

右边栏(righ sidetbar)第8章将利用右边栏显示友元列表。

底部(footer      显示版权信息

 

像大部分模型-视图技术,Grails使用了一种版面布局(layout和基于模板(template-based)技术去组装视图或者说UI。一个模板就是一个视图的部分,位于grails-app/views目录下面,以下划线开头命名的。下划线开头在Grails规约中表示是一个模板。最好的练习是将模板与指定的域类关联起来,像User域类,它是位于域类视图目录,就像grails-app/views/user/_someTemplate.gsp。你应该使模板更通用或把模板放到一个通用的地方让view共享,比如grails-app/views/common目录。

版面布局将模板组装起来并在页面上排版,你将用main.gsp (grails-app/views/layouts/main.gsp)CSSweb-app/css/main.css)创建版面布局,并且创建两个模板((_topbar.gsp _footer.gsp)被所有的视图所共用,在main.gsp中应用某个CSS式样并改变这个式样。

让我们从最简单的footer开始学习本章。

创建Footer

本小节的目标是创建一个简单的版权信息在站点所有页面下方显示。正如你所想的,你要在grails-app/views/common目录中创建一个名为_footer.gspGSP文件(GSP fragment。之后再通过<g:render template="/common/footer" /> 标签将_footer.gsp模板添加到版面布局中。这时需要增加一个<div>段到主版面布局的式样类来设计这个footer的式样,这个式样类是在main.css中定义的(You then need to style the footer by adding a <div> section to the  main layout using a style class that you define in the main.css.。列表5-1显示的是你所需要做的。

列表 5-1. Footer模板 (_footer.gsp)

<span class="copyright">&copy; 2008 Beginning Groovy and Grails: From Novice

to Professional<br />

Christopher Judd, Joseph Faisal Nusairat, and James Shingler

</span>

你需要将这版权信息添加到主版面布局(main layoutmain.gsp中才会在所有页面中显示出来。这里也是你所要添加<g:render>标签的地方(This is where the <g:render> tag1 comes to your aid你使用带模板信息的<g:render>标签把模板插入到GSP中。你所做的工作是在main.gsp的最后增加<g:render template="/common/footer" />这一行。列表5-2所示的是main.gsp中的内容。

注意:根据规约规定,在标签中的模板属性字符串,模板名的下划线和.gsp是省略的。

 

 

Listing 5-2. 主版面布局 (main.gsp)

<html>

<head>

<title><g:layoutTitle default="Grails" /></title>

<link rel="stylesheet"

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

<link rel="shortcut icon" href="${createLinkTo(dir:'images',

file:'favicon.ico')}" type="image/x-icon" />

<g:layoutHead />

<g:javascript library="application" />

</head>

<body>

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

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

alt="Spinner" />

</div>

<div class="logo"><img src="${createLinkTo(dir:'images',

file:'grails_logo.jpg')}" alt="Grails" /></div>

<g:layoutBody />

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

</body>

</html>

 

5-2 显示的是重新载入后的主页面。

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

                            

5-2 增加版权提示

底部的版权信息是有了,但与你想要的效果还是有一定差距。如果字符显示在中间位置,并且有分隔线就比较完美了。你可以直接在footer模板中加上式样信息,不过有个更好的解决方法,就是使用CSS。你只需在主版面布局增加一个带上“footer”属性ID<div>标签,以及在main.css中定义一个“footer”式样。列表5-3所示的是你要在main.gsp中所做的改变。

列表 5-3. 改变后的主版面布局文件 (main.gsp)

<html>

<head>

<title><g:layoutTitle default="Grails" /></title>

<link rel="stylesheet"

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

<link rel="shortcut icon" href="${createLinkTo(dir:'images',

file:'favicon.ico')}" type="image/x-icon" />

<g:layoutHead />

<g:javascript library="application" />

</head>

<body>

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

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

alt="Spinner" />

</div>

<div class="logo"><img src="${createLinkTo(dir:'images',

file:'grails_logo.jpg')}" alt="Grails" /></div>

<g:layoutBody />

<div id="footer">

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

</div>

</body>

</html>

 

列表5-4 Footer 式样文件

#footer {

clear:both;

text-align: center;

padding: 3px;

border-top: 1px solid #333;

}

 

5-3 显示改变后的效果。

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

                     

5-3 改变后的footer式样

       让我们重新回顾一下如何增加footer

首先,创建了一个_footer.gsp模板文件并把它放在grails-app/views/common目录下。

第二,通过<g:render template="/common/footer" />标签把_footer.gsp模板放到版面布局中。

第三,在主版面布局文件中增加一个<div>标签,并在<div>标签中使用了在main.css定义的一个式样类,从而改变了footer式样。

现在,你可以随心所欲的创建你想要的footer了,让我们再开始学习构建login/logout功能。

创建Topbar

通过在主版面布局增加topbar_topbar.gsp)模板来增加一个topbartopbar模板是放在grails-app/view/common目录中供所有视图共用的。列表5-5显示的是topbar模板内容。

Listing 5-5. The Topbar Template (_topbar.gsp)

01 <div id="menu">

02 <nobr>

03 <g:if test="${session.user}">

04 <b>${session.user?.firstName}&nbsp;${session.user?.lastName}</b> |

05 <g:link controller="user" action="logout">Logout</g:link>

06 </g:if>

07 <g:else>

08 <g:link controller="user" action="login">Login</g:link>

09 </g:else>

10 </nobr>

11 </div>

 

列表5-5使用了三个你尚未见过的标签:<g:if><g:else>、和<g:link><g:if><g:else>两个标签共同完成“if-then-else”逻辑。<g:link>是创建一个超链接(如:http://localhost:8080/collab-todo/user/logout)。在3-6行检查一个会话(session)是否是user对象。如果是user对象,则在用户名后面跟一个“|”和Lonout链接。7-9行显示的是if语句中的else条件,它是显示一个logon链接。列表5-6显示如何在主版面布局中增加topbar

Listing 5-6. 增加topbar后的主版面布局 (main.gsp)

<html>

. . .

<body>

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

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

alt="Spinner" />

</div>

<div id="topbar">

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

</div>

<div class="logo">

<img src="${createLinkTo(dir:'images',file:'grails_logo.jpg')}"

alt="Grails" />

</div>

. . .

 

列表5-7是在main.css中增加的CSS段落。

列表 5-7. Topbar 式样

#topbar {

text-align:left;

width: 778px;

margin: 0px auto;

padding: 5px 0;

}

#topbar #menu {

float: right;

width: 240px;

text-align: right;

font-size: 10px;

}

 

5-4显示了改变后的结果

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

                            

5-4 增加了topbar注意Login/Logout链接在浏览器的右上角。
  评论这张
 
阅读(2826)| 评论(0)

历史上的今天

评论

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

页脚

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