《自己动手写开源框架10》：Tiny快速入门之Web界面快速开发实践
下面是一些常用的链接，供大家使用：
GIT地址(必须是OSC家的)：https://git.oschina.net/tinyframework/tiny
问题报告：https://git.oschina.net/tinyframework/tiny/issues
官方网站：http://www.tinygroup.org
更多内容，请看本人博客，不一样的内容，一样的精彩！
本来想改改OSChina的界面，但是研究了一下，OSChina界面实在是高大上呀，不是做不出来，只是工作量比较大，因此还是做个简单的网站来展示一下用Tiny开发界面的过程，同时在展示过程的同时，会把相关的知识做一个充分的介绍 。
一、寻找网站模板
要做网站，不能没有模板，自己不会做网页设计，咋办？问谷歌找百度呗，找了一阵，看到下面这个模板不错，就它了。
http://www.tooplate.com/zip_files/2042_the_block.zip
相仔细了解这篇文章的同学，建议把原板的下载下来，对比着看，会更有感觉。
二、开工制作
1.编写default.layout布局文件
位置：/default.layout
1
![]()
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2
![]()
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
3
![]()
<
head
>
4
![]()
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
5
![]()
<
title
>
演示网站-${pageTitle}
</
title
>
6
![]()
<
meta
name
="keywords"
content
=""
/>
7
![]()
<
meta
name
="description"
content
=""
/>
8
![]()
<
script
src
="${TINY_CONTEXT_PATH}/uiengine.uijs"
></
script
>
9
![]()
<
link
href
="${TINY_CONTEXT_PATH}/uiengine.uicss"
rel
="stylesheet"
/>
10
![]()
</
head
>
11
![]()
<
body
>
12
![]()
${pageContent}
13
![]()
</
body
>
14
![]()
</
html
>
这个是标准布局了，直接贴过来，唯一要改的就是标题处加了“演示网站-”开头。
里面引入的js和css是TinyUI引擎所独有的，主要处理JS,CSS顺序处理、合并、打包等相关，由于这个是框架内部实现的部分，这里只是使用就不展开来叙述了。
${pageContent} 这个标记了渲染替换的位置，一个layout文档中必须有且只能有一个(如果没有，你会发现不管怎么写页面，内容都是布局的内容；如果有多个，你会发现页面中的内容会加多次)。
2.编写UI组件定义文件
位置：/demosite.ui.xml
1
![]()
<
ui-components
>
2
![]()
3
![]()
<
ui-component
name
="demosite"
dependencies
=""
>
4
![]()
5
![]()
<
css-resource
>
/css/jquery.lightbox-0.5.css,/css/slider_style.css,/css/tooplate_style.css
</
css-resource
>
6
![]()
7
![]()
<
js-resource
>
/js/jquery.js,/js/jquery.lightbox-0.5.js,/js/swfobject.js
</
js-resource
>
8
![]()
9
![]()
</
ui-component
>
10
![]()
11
![]()
</
ui-components
>
这里主要是定义用到的js和css，由于只是一个网站，就简单处理，只写一个了，实际应用当中，要根据用途和职能不同定义为许多个UI组件包。
3.编写通用宏定义
位置：/common.component
1
![]()
#macro a(title url)
2
![]()
3
![]()
![]()
<
a href
=
"
#link(url)
"
>
$
{title}
</
a
>
4
![]()
5
![]()
#end
6
![]()
7
![]()
8
![]()
9
![]()
#macro img(url alt)
10
![]()
11
![]()
<
img src
=
#link(url) alt
=
"
${alt}
"
>
12
![]()
13
![]()
#end
14
![]()
15
![]()
16
![]()
17
![]()
![]()
#macro link(url)#
if
(url.startsWith(
"
/
"
))$
{TINY_CONTEXT_PATH}
#end$
{url}
#end
18
![]()
19
![]()
20
![]()
21
![]()
#macro pageTitle(title page)
22
![]()
23
![]()
#
!
set(pageTitle
=
title)
24
![]()
25
![]()
#
!
set(activePage
=
page)
26
![]()
27
![]()
#end
业务宏的定义，就是根据情况从美工制作的页面文件中抽取一些具有共性的内容，定义成一个宏，这样以后使用的时候，就只要使用有意义的宏而不是原来一堆一堆的Html标记。
5.定义演示网站布局文件
分析一下几个页面，都有页头，页脚，菜单，因此可以把这些共性的文件放在演示网站布局文件中：
位置：/page/default.layout
1
![]()
#@tooplateWrapper()
2
![]()
3
![]()
#@header()
4
![]()
5
![]()
#siteTitle("The Block")
6
![]()
7
![]()
#@menu()
8
![]()
9
![]()
#menuItem("index.page" "Home" "Home")
10
![]()
11
![]()
#menuItem("about.page" "About Us" "About")
12
![]()
13
![]()
#menuItem("blog.page" "Blog" "Blog")
14
![]()
15
![]()
#menuItem("gallery.page" "Gallery" "Gallery")
16
![]()
17
![]()
#menuItem("contact.page" "Contact" "Contact")
18
![]()
19
![]()
#end
20
![]()
21
![]()
#end
22
![]()
23
![]()
24
![]()
25
![]()
${pageContent}
26
![]()
27
![]()
28
![]()
29
![]()
#@tooplateFooter()
30
![]()
31
![]()
Copyright © 2048
<
a
href
="#"
>
Company Name
</
a
>
- Design:
<
a
href
="http://www.tooplate.com"
>
tooplate
</
a
>
32
![]()
33
![]()
34
![]()
35
![]()
#end
36
![]()
37
![]()
38
![]()
39
![]()
#end
40
![]()
41
![]()
<
script
type
="text/javascript"
>
42
![]()
43
![]()
$('#gallery a').lightBox();
44
![]()
45
![]()
</
script
>
46
![]()
47
![]()
<
script
type
="text/javascript"
>
48
![]()
49
![]()
$('#map a').lightBox();
50
![]()
51
![]()
</
script
>
上面代码的函义是：
在整个页面中，上面放置Header，下面旋转Footer，中间放置内容
最后两段js，是说：对某指定选择器中的图片用lightbox去进行处理。
这里就把所有的通用的部分都抽取到布局文件中了。
6.定义相关页面
首页：
1
![]()
#pageTitle("Home" "Home")
2
![]()
3
![]()
4
![]()
5
![]()
#@tooplateMiddle()
6
![]()
7
![]()
#flashGridSlider()
8
![]()
9
![]()
#end
10
![]()
11
![]()
12
![]()
13
![]()
#@tooplateContent()
14
![]()
15
![]()
16
![]()
17
![]()
<
h2
>
Welcome To The Block!
</
h2
>
18
![]()
19
![]()
20
![]()
21
![]()
<
div
class
="image_wrapper image_fl"
><
span
></
span
>
22
![]()
23
![]()
#img("/images/tooplate_image_01.jpg" "image")
24
![]()
25
![]()
</
div
>
26
![]()
27
![]()
<
p
><
em
>
The Block is a
<
a
rel
="nofollow"
href
="http://www.tooplate.com"
>
free website template
</
a
>
from
<
a
28
![]()
29
![]()
rel
="nofollow"
href
="http://www.tooplate.com"
>
Tooplate
</
a
>
. Credit goes to
<
a
rel
="nofollow"
30
![]()
31
![]()
href
="http://www.photovaco.com"
>
Free
32
![]()
33
![]()
Photos
</
a
>
for photos used in this template.
</
em
></
p
>
34
![]()
35
![]()
36
![]()
37
![]()
<
p
align
="justify"
>
Aliquam et augue et odio luctus posuere sit amet et nisi. Maecenas convallis, est sit amet
38
![]()
39
![]()
convallis consectetur, elementum lacus, ut fermentum elit sem. Duis eu elit tortor, sed condimentum nulla.
40
![]()
41
![]()
Phasellus varius posuere adipiscing. Mauris sodales dictum ullamcorper. Validate
<
a
42
![]()
43
![]()
href
="http://validator.w3.org/check?uri=referer"
rel
="nofollow"
><
strong
>
XHTML
</
strong
></
a
>
and
<
a
44
![]()
45
![]()
href
="http://jigsaw.w3.org/css-validator/check/referer"
rel
="nofollow"
><
strong
>
CSS
</
strong
></
a
>
.
</
p
>
46
![]()
47
![]()
48
![]()
49
![]()
<
div
class
="cleaner h40"
></
div
>
50
![]()
51
![]()
#@box220()
52
![]()
53
![]()
<
h4
>
pharetra id turpis
<
span
>
Lorem Ipsum Dolor
</
span
></
h4
>
54
![]()
55
![]()
56
![]()
57
![]()
<
p
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta adi Piscing libero, eget elem
58
![]()
59
![]()
ntum lectus varius sed.
</
p
>
60
![]()
61
![]()
<
a
href
="#"
class
="more"
>
more
</
a
>
62
![]()
63
![]()
#end
64
![]()
65
![]()
#@box220()
66
![]()
67
![]()
<
h4
>
semper nisl ac nibh
<
span
>
Donec Tincidunt Varius
</
span
></
h4
>
68
![]()
69
![]()
70
![]()
71
![]()
<
p
>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
72
![]()
73
![]()
eu mauris id neque porttitor.
</
p
>
74
![]()
75
![]()
<
a
href
="#"
class
="more"
>
more
</
a
>
76
![]()
77
![]()
#end
78
![]()
79
![]()
#@box220("rmb")
80
![]()
81
![]()
<
h4
>
consect adipiscing elit
<
span
>
Etiam Gravida Sagittis
</
span
></
h4
>
82
![]()
83
![]()
84
![]()
85
![]()
<
p
>
Cras eu egestas sem. Aenean mollis feugiat massa, eget pharetra nunc interdum non. Etiam euismod sem ac
86
![]()
87
![]()
sem tincidunt adipiscin.
</
p
>
88
![]()
89
![]()
<
a
href
="#"
class
="more"
>
more
</
a
>
90
![]()
91
![]()
#end
92
![]()
93
![]()
#end
由于这个里面的数据是具体写的，因此就没有再进行抽象，如果这些数据是从数据库来的，那可以再进行一下抽象，就可以用for循环直接搞定了。
关于：
![]()
#pageTitle("About" "About")
![]()
![]()
![]()
![]()
![]()
![]()
#@tooplateMiddleSub()
![]()
![]()
<
h2
>
About Our Company
</
h2
>
![]()
![]()
<
p
>
Sed tempus nunc dolor, sit amet aliquet ligula. Ut euismod lectus vel ligula euismod id porttitor tortor placerat. Aenean tincidunt magna sit amet turpis auctor sagittis. Phasellus aliquet augue nec elit lacinia et faucibus massa scelerisque.
</
p
>
![]()
![]()
#end
![]()
![]()
![]()
![]()
#@tooplateContent()
![]()
![]()
<
h2
>
Our Company Objectives
</
h2
>
![]()
![]()
<
div
class
="image_wrapper image_fr"
><
span
></
span
>
![]()
![]()
#img("/images/tooplate_image_01.jpg" "image")
![]()
![]()
</
div
>
![]()
![]()
<
p
><
em
>
Morbi congue lorem sit amet odio iaculis tincidunt. Donec nibh, molestie nec pellentesque non, in diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra.
</
em
></
p
>
![]()
![]()
<
p
>
Aliquam et augue et odio luctus posuere sit amet et nisi. Maecenas, est sit amet convallis consectetur, lacus ligula elementum lacus, ut fermentum elit sem et nisi. Duis eu elit tortor, sed condimentum nulla. Phasellus varius posuere adipiscing. Mauris sodales ullamcorper. Validate
<
a
href
="http://validator.w3.org/check?uri=referer"
rel
="nofollow"
><
strong
>
XHTML
</
strong
></
a
>
and
<
a
href
="http://jigsaw.w3.org/css-validator/check/referer"
rel
="nofollow"
><
strong
>
CSS
</
strong
></
a
>
.
</
p
>
![]()
![]()
<
div
class
="cleaner h40"
></
div
>
![]()
![]()
#@box330("float_l")
![]()
![]()
<
h4
>
what our customers say
<
span
>
Testimonial
</
span
></
h4
>
![]()
![]()
<
blockquote
>
![]()
![]()
<
p
>
Fusce nec felis id lacus sollicitudin vulputate. Sed vitae elit at diam vestibulum ullamcorper et nec quam. Aenean eit ut luctus sit amet, elementum quis enim. Proin tincidunt, arcu id pellentesque accumsan, neque dolor imperdiet ligula, quis viverra tellus nulla a odio. Curabitur vitae enim risus, at placerat turpis. Mauris feugiat suscipit tempus fringilla, felis in velit.
</
p
>
![]()
![]()
![]()
![]()
<
cite
>
Harry -
<
span
>
Senior Webmaster
</
span
></
cite
>
![]()
![]()
</
blockquote
>
![]()
![]()
<
a
href
="#"
class
="more"
>
more
</
a
>
![]()
![]()
#end
![]()
![]()
#@box330("float_r")
![]()
![]()
<
h4
>
what we do
<
span
>
Services
</
span
></
h4
>
![]()
![]()
<
p
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit eget elementum lectus varius sed.
</
p
>
![]()
![]()
<
ul
class
="tooplate_list"
>
![]()
![]()
<
li
>
Morbi quis lorem risus
</
li
>
![]()
![]()
<
li
>
Suspendisse cursus
</
li
>
![]()
![]()
<
li
>
Donec at viverra
</
li
>
![]()
![]()
<
li
>
Proin eget purus ante
</
li
>
![]()
![]()
</
ul
>
![]()
![]()
<
a
href
="#"
class
="more"
>
more
</
a
>
![]()
![]()
#end
![]()
![]()
#end
日志：
1
![]()
#pageTitle("Blog" "Blog")
2
![]()
3
![]()
4
![]()
5
![]()
6
![]()
7
![]()
#@tooplateMiddleSub()
8
![]()
9
![]()
<
h2
>
Our Blog Posts
</
h2
>
10
![]()
11
![]()
<
p
>
Vestibulum eleifend consequat laoreet. Pellentesque vel orci sapien. Duis lacus ipsum, pretium ut accumsan in, tempor
12
![]()
13
![]()
nec mauris. Aenean accumsan placerat elit, sit amet faucibus ante commodo a. In et neque nibh, ac tristique
14
![]()
15
![]()
dui.
</
p
>
16
![]()
17
![]()
#end
18
![]()
19
![]()
20
![]()
21
![]()
#@tooplateContent()
22
![]()
23
![]()
#@postBos("20" "Lorem ipsum dolor sit amet" "/images/tooplate_image_02.jpg" "Image 02" ["Templates","Freebie"] "148")
24
![]()
25
![]()
26
![]()
27
![]()
<
p
>
Vestibulum adipiscing tempus elit eu condimentum. Fusce at mi felis. Etiam sed velit nibh. Nunc bibendum
28
![]()
29
![]()
justo elementum auctor. Donec at magna eu neque. Vestibulum ante ipsum primis in faucibus orci luctus et
30
![]()
31
![]()
ultrices posuere cubilia.
</
p
>
32
![]()
33
![]()
#end
34
![]()
35
![]()
36
![]()
37
![]()
#@postBos("17" "Etiam gravida sagittis lacus" "/images/tooplate_image_03.jpg" "Image 03" ["CSS Templates","Web Design"] "128")
38
![]()
39
![]()
40
![]()
41
![]()
<
p
>
Ellentesque vitae velit eu lectus rhoncus tincidunt. Phasellus dictum dignissim sapien et dapibus. Sed
42
![]()
43
![]()
egestas consequat mauris, orci tincidunt sit amet. Donec pharetra porta ultrices. Sed sit amet lectus
44
![]()
45
![]()
libero, at porttitor odio. Validate
<
a
href
="http://validator.w3.org/check?uri=referer"
46
![]()
47
![]()
rel
="nofollow"
><
strong
>
XHTML
</
strong
></
a
>
and
<
a
48
![]()
49
![]()
href
="http://jigsaw.w3.org/css-validator/check/referer"
rel
="nofollow"
><
strong
>
CSS
</
strong
></
a
>
.
</
p
>
50
![]()
51
![]()
#end
52
![]()
53
![]()
54
![]()
55
![]()
#@postBos("10" "Aenean vitae velit eget" "/images/tooplate_image_04.jpg" "Image 04" ["Illustrations","Graphics"] "208")
56
![]()
57
![]()
58
![]()
59
![]()
<
p
>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin gravida
60
![]()
61
![]()
ornare mauris ac lobortis. Praesent elit neque, lacinia eget interdum eu. Phasellus posuere nisl et odio
62
![]()
63
![]()
egestas ac tristique justo ultrices.
</
p
>
64
![]()
65
![]()
#end
66
![]()
67
![]()
#end
画廊：
1
![]()
#pageTitle("Gallery" "Gallery")
2
![]()
3
![]()
4
![]()
5
![]()
#@tooplateMiddleSub()
6
![]()
7
![]()
<
h2
>
Our Gallery
</
h2
>
8
![]()
9
![]()
<
p
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta adipiscing libero, eget elementum lectus
10
![]()
11
![]()
varius sed. Aliquam metus urna, dignissim quis posuere at, posuere eget mauris. Vestibulum laoreet sodales tellus
12
![]()
13
![]()
nec mollis. Validate
<
a
href
="http://validator.w3.org/check?uri=referer"
rel
="nofollow"
><
strong
>
XHTML
</
strong
></
a
>
14
![]()
15
![]()
and
<
a
href
="http://jigsaw.w3.org/css-validator/check/referer"
rel
="nofollow"
><
strong
>
CSS
</
strong
></
a
>
.
</
p
>
16
![]()
17
![]()
#end
18
![]()
19
![]()
20
![]()
21
![]()
#@tooplateContent()
22
![]()
23
![]()
#@gallery()
24
![]()
25
![]()
#galleryBox("/images/gallery/image_01_l.jpg" "/images/gallery/image_01_s.jpg" "Nunc et tellus id risus ultrices" "Image 01" "Nunc et tellus id risus ultrices")
26
![]()
27
![]()
#galleryBox("/images/gallery/image_02_l.jpg" "/images/gallery/image_02_s.jpg" "Nunc et tellus id risus ultrices" "Image 02" "Nunc et tellus id risus ultrices")
28
![]()
29
![]()
#galleryBox("/images/gallery/image_03_l.jpg" "/images/gallery/image_03_s.jpg" "Nunc et tellus id risus ultrices" "Image 03" "Nunc et tellus id risus ultrices" "gb_rmb")
30
![]()
31
![]()
#galleryBox("/images/gallery/image_04_l.jpg" "/images/gallery/image_04_s.jpg" "Nunc et tellus id risus ultrices" "Image 04" "Nunc et tellus id risus ultrices")
32
![]()
33
![]()
#galleryBox("/images/gallery/image_05_l.jpg" "/images/gallery/image_05_s.jpg" "Nunc et tellus id risus ultrices" "Image 05" "Nunc et tellus id risus ultrices")
34
![]()
35
![]()
#galleryBox("/images/gallery/image_06_l.jpg" "/images/gallery/image_06_s.jpg" "Nunc et tellus id risus ultrices" "Image 06" "Nunc et tellus id risus ultrices" "gb_rmb")
36
![]()
37
![]()
#end
38
![]()
39
![]()
#end
三、运行
首页
关于
日志
画廊
联系我们
四、总结
上面的完整示例展现了采用Tiny框架开发页面的完整过程，下面总结一下需要说明的一些内容：
- 上面展示采用的模板引擎是TinyTemplate，当然也支持Velocity，但是推荐使用TinyTemplate，因为执行速度更快、功能更强、更容易使用
- 布局支持多重嵌套，上面的示例中有两层布局，根上的解决js、css引入，标题，网站图标等部分的内容，/page/目录中的解决网站的整体结构部分的内容，随着网站的复杂，可以做更多层的布局，使得很多页面共用的部分都放在布局文件中
- xxx.ui.xml定义了UI组件包的内容及其依赖关系，UI引擎会自动根据ui组件包的定义对js及css进行引入、整合、压缩。
- 整个页面只引入一个css和一个js文件，避免引入文件数太多导致的性能下降，同时提供了压缩，提升网络传输效率（这个例子中的文件都已压缩，因此压缩率不高）。
- page文件是用来编写展示内容的页面，在显示.page文件时，有两种方式，一种是.pagelet方式，一种是.page方式，区别在于用.page方式访问时，会渲染布局，而pagelet方式不会渲染布局，适合于Ajax方式使用。
- 整个网站在重构完成之后，没有一段内容是重复的，真正做到Tiny框架所说的DRY原则。
- 所有对上层布局文件的修改都会对所有下层页面产生影响，真正做到Tiny框架所说的下级服从上级原则。
- 越到底层的开发人员接触的越少，真正的页面编写文件，只需要从控制层转过来的数据再利用宏去显示内容即可，可以避免接触js,css,html等相关内容。(这一点在示例中还没有做到，毕竟示例是一个静态网站)，真正做到Tiny框架所说的减法原则，越到下面会的技能越少。
- 实际上框架也支持某个页面不服从上层布局的限制，但是我们不推荐这么做，因此这里没有展示这种用法。
采用Tiny框架制作前台，需要考虑好如下角色的协作：
- 美工：用于进行界面设计，页面切分
- UI组件包开发工程师：根据功能特性，把具有不同功能特性的js,css,image等放在一个jar包中 ，并编写对应的xxx.ui.xml文件，并设定好依赖关系，如果需要还需要编写公共的宏文件，用于方便别人使用，并隔离功能与具体的实现，使得后续的开发工程师尽量少的接触css,js。
- 业务组件开发工程师：根据功能特性，把页面中的一些比较业务化的，封装成业务组件，最终暴露的接口是一个名字及一些数据的输入，使得最终的界面开发工程师尽可能少的接触原生的html。
- 界面开发工程师：不关心界面展现的具体技术，利用UI组件包及业务组件开发工程师开发的组件，再加上控制层传过来的数据来编写最终的展现页面。
通过上面的分工，使得不同的开发人员关注于不同的技术细节，从而最大化的提升最终界面开发工程师的开发效率，同时因为有了一定的封装性，可以使得底层的变化不致于影响上层开发人员的工作成果。
欢迎访问框架论坛：http://web.j2ee.top。本例涉及的代码和框架资料，将会在论坛分享。《自己动手写框架》成员QQ群：228977971，让我们一起动手，了解框架的奥秘！
