网页布局及修饰复习与学习~
被装饰页面（子页面）：
<html>
<head>
<meta name="layout" content="myLayout" />
<title>
子标题
<title>
<script src="myscript.js" />
</head>
<body onload="alert('你好');">
子页面
</body>
</html>
装饰布局（模板）：//grails-app/views/layouts/myLayout.gsp
<html>
<head>
<script src="global.js" />
<title>
<g:layoutTitle default="模板标题"/>
</title>
<g:layoutHead />
</head>
<body onload="${pageProperty(name:'body.onload')}">
<div class="wrapper">
<g:layoutBody />
</div>
</body>
</html>
最终结果：
<html>
<head>
<script src="global.js" />
<title>
子标题
</title>
<script src="myscript.js" />
</head>
<body onload="alert('你好');">
<div class="wrapper">
子页面
</div>
</body>
</html>
##################
被装饰页面（子页面）：
<html>
<head>
<meta name="layout" content="myLayout" />
<script src="myscript.js" />
</head>
<body onload="alert('你好');" class="lvchanglong" shensijun="深思君">
子页面
</body>
</html>
装饰布局（模板）：//grails-app/views/layouts/myLayout.gsp
<html>
<head>
<script src="global.js" />
<title>
<g:layoutTitle default="模板标题"/>
</title>
<g:layoutHead />
</head>
<body onload="${pageProperty(name:'body.onload')}" class="${pageProperty(name:'body.class')}" shensijun="${pageProperty(name:"body.shensijun")}">
<div class="wrapper">
<g:layoutBody />
</div>
</body>
</html>
最终结果：
<html>
<head>
<script src="global.js" />
<title>
模板标题
</title>
<script src="myscript.js" />
</head>
<body onload="alert('你好');" class="lvchanglong" shensijun="深思君">
<div class="wrapper">
子页面
</div>
</body>
</html>
注：当页面没有指定标题时，将使用指定模板的默认标题。pageProperty中的name值是有着特殊写法的，请多加留意，还有英文字母要小写。
pageProperty中的name值一般以"body"或"page"开头，"."代表要引用什么什么，关于"page"关键字稍后进行说明。
######################
之前说到的是，页面的整体布局，总结一下：
针对模板页，由上到下，标题title可替换layoutTitle，head可追加layoutHead，body标签可更改pageProperty，页面内容可嵌入layoutBody
说完整体布局，现在再说说，局部的布局（常用layoutBody及pageProperty）~
局部模板：grails-app/views/layouts/container.gsp
<section>
<header>
<g:pageProperty name="page.title"/>
</header>
<section>
<g:layoutBody />
</section>
</section>
被装饰页面（子页面）：
<html>
<head>
<title>Head标题</title>
</head>
<body>
<section class="major-part left-part">
<g:applyLayout name="container">
<content tag="title">
Page标题
</content>
随便什么东西
</g:applyLayout>
</section>
</body>
</html>
最终结果:
<html>
<head>
<title>Head标题</title>
</head>
<body>
<section class="major-part left-part">
<section>
<header>
Page标题
</header>
<section>
随便什么东西
</section>
</section>
</body>
</html>
###################
局部模板：grails-app/views/layouts/myLayout.gsp
<ul>
<li>
<g:pageProperty name="page.fullname" default="姓名"/>
</li>
<li>
<g:pageProperty name="page.nickname" default="昵称"/>
</li>
<li>
<g:layoutBody/>
</li>
</ul>
被装饰页面（子页面）：
<html>
<head>
<title>Head标题</title>
</head>
<body>
<section class="major-part left-part">
<g:applyLayout name="myLayout">
随便什么东西
</g:applyLayout>
</section>
</body>
</html>
最终结果：
<html>
<head>
<title>Head标题</title>
</head>
<body>
<section class="major-part left-part">
<ul>
<li>
姓名
</li>
<li>
昵称
</li>
<li>
随便什么东西
</li>
</ul>
</section>
</body>
</html>
###################
局部模板：grails-app/views/layouts/myLayout.gsp
<ul>
<li>
<g:pageProperty name="page.fullname" default="姓名"/>
</li>
<li>
<g:pageProperty name="page.nickname" default="昵称"/>
</li>
<li>
<g:layoutBody/>
</li>
</ul>
被装饰页面（子页面）：
<html>
<head>
<title>Head标题</title>
</head>
<body>
<section class="major-part left-part">
<g:applyLayout name="myLayout">
<content tag="fullname">
吕常龙
</content>
随便什么东西
<content tag="nickname">
深思君
</content>
</g:applyLayout>
</section>
</body>
</html>
最终结果：
<html>
<head>
<title>Head标题</title>
</head>
<body>
<section class="major-part left-part">
<ul>
<li>
吕常龙
</li>
<li>
深思君
</li>
<li>
随便什么东西
</li>
</ul>
</section>
</body>
</html>
###################
applyLayout有3中写法，各种写法间彼此独立，不可混用。三种写法的区别在于获取html内容的方式不同，一种是自己去定制html内容，一种是从url中获取html内容，最后一种是通过模板（如举例中的_userTemplate.gsp）获取html内容。
<g:applyLayout name="myLayout">
<h1>随便什么东西</h1>
</g:applyLayout>
<g:applyLayout name="myLayout" url="http://www.baidu.com" />
<g:applyLayout name="myLayout" template="userTemplate" model="[users:User.list()]" />
####################
页面包含举例：
<g:include controller="book" action="list" />
def content = include(controller:"book", action:"list")
####################
总结：applyLayout标签，即应用布局模板，目的是在已有布局中放置相应内容。include标签，即页面嵌入，嵌入指定页面到include标签所在位置（智能页面处理）。
局部模板：grails-app/views/layouts/myLayout.gsp
<ul>
<li>
<g:pageProperty name="page.fullname" default="姓名"/>
</li>
<li>
<g:pageProperty name="page.nickname" default="昵称"/>
</li>
<li>
<g:layoutBody/>
</li>
</ul>
被装饰页面（子页面）：
<html>
<head>
<title>Head标题</title>
</head>
<body>
<section class="major-part left-part">
<g:applyLayout name="myLayout">
<content tag="fullname">
<g:include controller="user" action="fullname" />
</content>
<g:include controller="user" action="hello" />
</g:applyLayout>
</section>
</body>
</html>
控制器方法：
class UserController {
def fullname() {
[fullname:"吕常龙"]
}
def hello() {
[hello: "你好"]
}
}
fullname视图（grails-app/views/user/fullname.gsp）：
<!DOCTYPE html>
<html>
<head>
<style>
.fullname {
color:blue;
}
</style>
</head>
<body>
<h1 class="fullname">${fullname}</h1>
</body>
</html>
hello视图（grails-app/views/user/hello.gsp）：
<!DOCTYPE html>
<html>
<head>
<style>
.hello {
color:red;
}
</style>
</head>
<body>
<h1 class="hello">${hello}</h1>
</body>
</html>
最终结果：
<html>
<head>
<title>Head标题</title>
</head>
<body>
<section class="major-part left-part">
<ul>
<li>
<style>
.fullname {
color:blue;
}
</style>
<h1 class="fullname">吕常龙</h1>
</li>
<li>
昵称
</li>
<li>
<style>
.hello {
color:red;
}
</style>
<h1 class="hello">你好</h1>
</li>
</ul>
</section>
</body>
</html>
####################
网页布局本质：将页面布局与展示内容进行分离，使布局能够实现重用。
注意：
<g:applyLayout name="myLayout">
<content tag="fullname">
<g:include controller="user" action="fullname" />
</content>
<g:include controller="user" action="hello" />
</g:applyLayout>
属于applyLayout三种形态中的下面这种：
<g:applyLayout name="myLayout">
<h1>随便什么东西</h1>
</g:applyLayout>
其余两种形态，即便写成这种形式也没用，需要注意一下。但，如果实在想这么做，可以用以下方式试试：
<g:applyLayout name="myLayout">
<content tag="fullname">
<g:applyLayout name="" url="http://www.baidu.com" />
</content>
<g:include controller="user" action="hello" />
</g:applyLayout>
###############
最后的最后，布局的嵌套，例如：
<html>
<body>
<div id="header">
<g:applyLayout name="headerLayout">
<g:pageProperty name="page.header" />
</g:applyLayout>
</div>
<div id="nav">
<g:applyLayout name="navLayout">
<g:pageProperty name="page.navbar" />
</g:applyLayout>
</div>
<div id="body">
<g:applyLayout name="bodyLayout">
<g:pageProperty name="page.body" />
</g:applyLayout>
</div>
<div id="footer">
<g:applyLayout name="footerLayout">
<g:pageProperty name="page.footer" />
</g:applyLayout>
</div>
</body>
</html>
页面本身就是一个布局模板，在模板中应用别的布局，即布局的嵌套~
本文暂时没有评论，来添加一个吧(●'◡'●)