Tiny实例：TINY框架官网制作过程详解

新增加war包下载地址，呵呵愿意体验的可以直接下载并发布到容器即可试用，也可以查看里面的内容。 
由于只花了两天时间制作，一天时间搞页面，一天时间搞内容，所以还非常粗糙，还有许多需要完善的地方，欢迎同学们提出改进和完善意见，但是今天网站做的好不好不是重点，重点讲讲网站是怎么做出来的。当然了，不用问，必须用Tiny框架来做，所以今天就来讲一下如何利用Tiny框架来高速有效的进行网站开发。 

网站模板选择 
首先声明，本人是美工盲，前台界面盲，JS盲。所以，指望自己弄个漂亮的网站出来那是根本没有可能的。好在现在互联网发达，只要用心找就是可以找得到的。想想准备用bootstrap方式的响应式网页方式，于是就找到了themeforest.net，然后就在其主题世界荡漾，最后感觉Perfetto网站效果不错，是我想要的效果，再查看一下源文件，发现比较简单，比较容易搞定。于是就想着就是它了。 
于是从http://www.angelomazzilli.com/Perfetto/index.html上把源文件搞下来，呵呵，第一手资料就算有了。由于这个不是重点，所以就快速过掉，总之，我拿到了这个网站的html,js,css,图片等等一应资源，在本地目录中打开文件访问也正确，OK，可以进入下一步骤。 

宏提取 
所谓宏提取，就是把网页里重复出现的东东搞成个宏，这样就避免了重复内容到处复制来复制去： 

1. #macro (a $aHref $title $aTarget )
2. <a#if($title) title="$title"#end#if($aHref)
3.               href="#if($aHref.startWith('/'))#if($TINY_CONTEXT_PATH.equals("/"))#else{TINY_CONTEXT_PATH}#end$#end$aHref"#end#if($aTarget)
4.               target="$aTarget"#end>
5.     $bodyContent
6. </a>
7. #end
9. #macro (img $imgHref $imgTitle)
10.         <img#if($imgTitle) alt="$imgTitle"#end#if($imgHref)
11.                            src="#if($imgHref.startWith('/'))#if($TINY_CONTEXT_PATH.equals("/"))#else{TINY_CONTEXT_PATH}#end$#end$imgHref"#end#>
12. </a>
13. #end
15. #macro(section)
16. <div class="section">
17.     $bodyContent
18. </div>
19. #end
21. #macro(container)
22. <div class="container">
23.     $bodyContent
24. </div>
25. #end
27. #macro(row)
28. <div class="row">
29.     $bodyContent
30. </div>
31. #end
33. #macro(span1)
34. <div class="span1">
35.     $bodyContent
36. </div>
37. #end
39. #macro(span2)
40. <div class="span2">
41.     $bodyContent
42. </div>
43. #end
45. #macro(span3)
46. <div class="span3">
47.     $bodyContent
48. </div>
49. #end
51. #macro(span4)
52. <div class="span4">
53.     $bodyContent
54. </div>
55. #end
57. #macro(span5)
58. <div class="span5">
59.     $bodyContent
60. </div>
61. #end
64. #macro(span6)
65. <div class="span6">
66.     $bodyContent
67. </div>
68. #end
70. #macro(span7)
71. <div class="span7">
72.     $bodyContent
73. </div>
74. #end
76. #macro(span8)
77. <div class="span8">
78.     $bodyContent
79. </div>
80. #end
82. #macro(span9)
83. <div class="span9">
84.     $bodyContent
85. </div>
86. #end
88. #macro(span10)
89. <div class="span10">
90.     $bodyContent
91. </div>
92. #end
94. #macro(span11)
95. <div class="span11">
96.     $bodyContent
97. </div>
98. #end
100. #macro(span12)
101. <div class="span12">
102.     $bodyContent
103. </div>
104. #end
106. #macro(hr)
107. <hr/>
108. #end
110. #macro(dropdownMenu $dropdownTitle $dropdownHref $dropdownSubTitle )
111. <li class="dropdown"><a href="$dropdownHref?activePage=$!menuKey">$dropdownTitle</a> <b class="caret"></b>
112.     <span>$dropdownSubTitle</span>
113.     $!bodyContent
114. </li>
115. #end
117. #macro(menu $menuTitle $menuHref $menuSubTitle  $menuKey)
118. <li class="dropdown#if($menuKey==$activePage) active#end"><a
119.         href="${menuHref}">$menuTitle</a>
120.     <span>$menuSubTitle</span>
121.     $!bodyContent
122. </li>
123. #end
125. #macro(nav)
126. <ul class="nav">
127.     $bodyContent
128. </ul>
129. #end
131. #macro(subMenu)
132. <ul>
133.     $bodyContent
134. </ul>
135. #end
137. #macro(subMenuItem  $title $href $menuKey)
138. <li><a href="$href"#if($menuKey==$activePage) class="current"#end >$title</a></li>
139. #end
141. #macro(pageTitle $title $page)
142.     #set($pageTitle="$title")
143.     #set($activePage="$page")
144. #end
146. #macro(modalFooter)
147. <div class="modal-footer">
148.     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
149. </div>
150. #end
152. #macro(breadcrumb)
153. <ul class="breadcrumb">
154.     $bodyContent
155. </ul>
156. #end
158. #macro(breadcrumbParentItem $title $url)
159. <li>#@a($url $title)$title#end <span class="divider">/</span></li>
160. #end
162. #macro(breadcrumbItem $title)
163. <li class="active">$title</li>
164. #end
166. #macro(thumbnails $thumbnailsId)
167. <ul class="thumbnails"#if($thumbnailsId)id="$thumbnailsId"#end>
168.     $bodyContent
169. </ul>
170. #end
172. #macro(filterContainer)
173. <ul id="portfolio" class="thumbnails ">
174.     $bodyContent
175. </ul>
176. #end
178. #macro(filterContainerItem $column $type)
179. <li class="span$column $type" style="opacity: 1;">
180.     <div class="thumbnail" style="text-align:left;">
181.             $bodyContent
182.     </div>
183. </li>
184. #end
186. #macro(clearfix)
187. <div class="clearfix"></div>
188. #end
190. #macro(thumbnailsItem $name $title $qq $email $imgUrl)
191. <li class="span3">
192.     <div class="thumbnail">
193.         #img($imgUrl)
194.         <div class="caption">
195.             <h3><a href="#">$name</a></h3>
196.             <em>$title</em>
198.             <p>QQ:$!qq</p>
200.             <p>邮箱:$!email</p>
201.             #clearfix
202.             $!bodyContent
203.         </div>
204.     </div>
205. </li>
206. #end
208. #macro(slides)
209. <div class="slides">
210.     $bodyContent
211. </div>
212. #end
214. #macro(slidesItem $imgSrc $title $href)
215. <div>#@a($href $title)#img($imgSrc $title) #end
216. $bodyContent
217. </div>
218. #end
220. #macro(slidesDetail)
221. <div class="detail">
222.     $bodyContent
223. </div>
224. #end
226. #macro(slidesDetailInfo $title $subTitle)
227. <h3>#@a($href $title)$title#end</h3>
228. <em>$subTitle</em>
229.     $bodyContent
230. #end
232. #macro(title $title $subTitle)
233. <div class="row">
234.     <div class="span12">
235.         <h1 class="no-margin">$title</h1>
237.         <p class="lead">$subTitle</p>
238.     </div>
239. </div>
240. #end
242. #macro(wideBanner)
243. <!-- Wide Banner -->
244. <div class="wide-bg">
245.     <div class="container">
246.         $bodyContent
247.     </div>
248. </div>
249. #end
251. #macro(sidebar $title)
252. <!-- Sidebar -->
253. <div class="span3 sidebar">
254.     #if($title)
255.         <h3 class="half-margin">$!title</h3>
256.     #end
257.     <ul class="nav nav-tabs nav-stacked">
258.         $bodyContent
259.     </ul>
260. </div>
261. #end
263. #macro(sidebarItem $title $href )
264. <li>#@a($href $title)$title#end</li>
265. #end
267. #macro(lead $id $title)
268. <p class="lead no-margin" id="$id">$title</p>
269. <div class="">
270.     $bodyContent
271. </div>
272. <hr class="no-margin" style="margin: 5pt;5pt;5pt;5pt;"/>
273. #end
275. #macro(filter)
276. <!-- Portfolio Filter -->
277. <div id="filter" class="half-margin">
278.     $bodyContent
279. </div>
280. <div class="clearfix"></div>
281. </div>
282. #end
284. #macro(filterItem $title $current)
285. <button class="btn btn-small half-margin#if($current) current#end">$title</button>
286. #end
288. #macro(shortcut $title $href $icon)
289.     #@a($href $title "_blank")#img($icon)#end
290. #end
292. #macro(caption $title)
293. <div class="head" style="text-align: left;">
294.     <h3><strong>$title</strong></h3>
295.     $bodyContent
296. </div>
297. #end
299. #macro(masonry)
300. <div id="masonry">
301.     $bodyContent
302. </div>
303. #end
304. #macro(masonryItem $masonryItemClass)
305. <div class="single $masonryItemClass">
306.     $bodyContent
307. </div>
308. #end
310. #macro(logo)
311. <p class="logo"><a href="home.page"><span>Tiny Framework</span></a></p>
312. #end
314. #macro(toTop)
315. <div id="toTop">Top</div>
316. #end
322. 通用的宏已经写好，接下来就是写与网站有关部分的宏： 
326. #macro(header)
327. <!-- Header -->
328.     #@row()
329.         #@span3()
330.         #logo
331.         #end
332.         #@span9()
333.         <div class="top-header text-right"><em>QQ群: <em>228977971</em> 邮箱：<a
334.                 href="mailto:luo_guo@icloud.com">luo_guo@icloud.com</a></em>
336.             <div class="social">
337.                 #shortcut("Sonar代码检查" "http://www.tinygroup.org/sonar/dashboard/index/org.tinygroup:tiny" "img/sonar.ico")
338.                 #shortcut("Hudson持续集成" "http://www.tinygroup.org/hudson/job/tiny/" "img/hudson.png")
339.                 #shortcut("TinyFramework OSC首页" "http://www.tinygroup.org/sonar/dashboard/index/org.tinygroup:tiny" "img/osc.ico")
340.                 #shortcut("TinyFramework GIT网址" "http://git.oschina.net/tinyframework/tiny" "img/git.ico")
341.             </div>
342.         </div>
343.         <div class="text-left">
344.             <h2></bit> Think big, start small, scale fast.</h2>
345.         </div>
346.         #end
347.     #end
348. #end
350. #macro(footer)
351.     #@section()
352.         #@container()
353.         <!-- Footer -->
354.             #@row()
355.                 #@span12()
356.                 <div class="footer">
357.                     <hr/>
358.                     <p class="text-center">©Copy Right 2009~2014 <strong>tiny group</strong><br/>
359.                         www.tinygroup.org</p>
360.                 </div>
361.                 #end
362.             #end
363.         #end
364.     #end
366. #end
368. #macro(navbar)
369. <!-- Navbar -->
370. <div class="navbar"#* id="nav-follow"*#>
371.     <div class="navbar-inner">
372.         <div class="container"><a data-target=".navbar-responsive-collapse" data-toggle="collapse"
373.                                   class="btn btn-navbar"><i class="icon-th-list"></i></a> <a
374.                 data-target=".navbar-responsive-collapse" data-toggle="collapse" class="brand">Navbar</a>
376.             <div class="nav-collapse collapse navbar-responsive-collapse">
377.                 #@nav()
378.                     #@menu("Homepage" "home.page" "首页" "home")#end
379.                     #@menu("philosophy" "philosophy.page" "设计理念" "philosophy")#end
380.                     #@menu("principle" "principle.page" "设计原则" "principle")#end
381.                     #@menu("Features" "feature.page" "功能特性" "feature")#end
382.                     #@menu("FAQ" "faq.page" "常见问题解答" "faq")#end
383.                     #@menu("encourage us" "encourage.page" "鼓励我们" "encourage")#end
384.                     #@menu("About us" "about.page" "关于我们" "about")#end
385.                 #end
386.             </div>
387.         </div>
388.     </div>
389. </div>
390. #end

复制代码

上面就把宏处理方面的工作处理完毕了，接下来就是设定页面结构了。  
页面结构设计 
Html页面结构 

1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2.         "http://www.w3.org/TR/html4/strict.dtd">
3. <!--[if IE 7 ]>        <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]-->
4. <!--[if IE 8 ]>        <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]-->
5. <!--[if IE 9 ]>        <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]-->
6. <!--[if (gt IE 9)|!(IE)]><!-->
7. <html class="no-js" lang="en-US"> <!--<![endif]-->
8. <html lang="en">
9. <head>
10.     <meta charset="utf-8"/>
11.     <link rel="shortcut icon" href="${TINY_CONTEXT_PATH}/tinysite/img/tiny.png" type="image/x-icon"/>
12.     <title>Tiny Framework-$!pageTitle</title>
13.     <meta name="description" content="Tiny Framework 是基于Java语言的面向组件的企业级开发框架。"/>
14.     <meta name="keywords" content="Tiny,Framework,Java,SOA,框架,组件,分层,水平扩展,分区，分表,分布式计算,VFS,Web" />
15.     <script src="${TINY_CONTEXT_PATH}/uiengine.uijs"></script>
16.     <link href="${TINY_CONTEXT_PATH}/uiengine.uicss" rel="stylesheet" />
17. </head>
18. <body class="boxed"  style="background: url(${TINY_CONTEXT_PATH}/tinysite/img/bg/parquet-bg.jpg);">
19. $pageContent
20. </body>
21. </html>

复制代码

网站页面结构： 
#@section()
    #@container()
    #header
    #navbar
    #hr
    #end
    #@container()
        $pageContent
    #end
#end
#footer
#toTop

上面的页面结构就非常清晰了： 
下面详细解释： 

#@section()##开一段
    #@container()##开一个容器
    #header##放header进去
    #navbar##放导航条进去
    #hr##放一个分隔线
    #end
    #@container()##再开一个容器
        $pageContent##里面放展现的内容
    #end
#end
#footer ##这里放页脚
#toTop  ##这里放返回页顶按钮

是不是非常清晰呀？ 
然后就是每一页的内容编写了。 

页面编写 

首页 
在需要解释的行的后面我会增加注释 

#pageTitle("首页" "home")##设定这一面展现时的标题是”首页“，并且置"home"菜单为选中状态<span></span> #title("Tiny framework" "基于组件化的J2EE开发框架")

#@slides()##轮播
    #@slidesItem("img/example-slide-1.jpg" "hoto" "#")##第一个轮播项
        #@slidesDetail()
            #@slidesDetailInfo("名字" "Tiny名称的来历")##轮播中的详细解释段
            <p>取名Tiny是取其微不足道，微小之意。</p>
            <p>Tiny的构建者认为，一个J2EE开发框架是非常复杂的，只有把框架分解成非常细小、可控的部分，并且对每个细小、可控的部分都有一个最优解或相对最优解，
            那么整个方案也就可以非常不错的落地。</p>
            #end
        #end
    #end
    #@slidesItem("img/example-slide-2.jpg" "hoto" "#")
        #@slidesDetail()
            #@slidesDetailInfo("策略" "Tiny框架的构建策略")
            <p>Think big, start small, scale fast.</p>
            <p>想法要宏伟，但是要从小的开始，同时可以快速的进行扩展。</p>
            <p>Tiny框架的构建者认为：如果想法不够宏伟，那么就会局限于细节；如果一开始就铺非常大的摊子，将会失去控制；如果不能快速扩展，就无法满足应用需要。</p>
            #end
        #end
    #end
    #@slidesItem("img/example-slide-3.jpg" "hoto" "#")
        #@slidesDetail()
            #@slidesDetailInfo("定位" "Tiny框架的应用定位")
            <p>基于WEB的展现平台</p>
            <p>主要包括展现层及控制层，可以让开发人员方便快速的实现WEB层的开发，同时要避免现有方案的缺点，同时要有自己非常突出的优点。</p>
            <p>基于SOA的服务开发平台</p>
            <p>可以方便的开发平台无关的服务，同时有水平扩展，应用集群方面要有良好的支持，可以满足7*24的运维要求。</p>
            #end
        #end
    #end
    #@slidesItem("img/example-slide-4.jpg" "hoto" "#")
        #@slidesDetail()
            #@slidesDetailInfo("目标" "Tiny框架的目标定位")
            <p>Tiny框架的构建者认为再好的框架也有过时的时候，再优秀的架构师也有视野盲区，再NB的写手也无法实现所有的部分。</p>
            <p>所以Tiny框架的构建者认为：只有建立一个良好的生态圈，让广大开发者使用者都在生态圈在找到自己的位置，才是有生命的模式。</p>
            #end
        #end
    #end
#end

可以看到上面的内容语法结构非常清晰，容易理解，容易修改。 

设计理念 

#pageTitle("philosophy" "philosophy")
#title("philosophy" "主要介绍Tiny框架的设计理念")


#@row()
    #@masonry()
    <!-- Content -->
        #@masonryItem()
            #@caption("使用灵活")
            <p>可以整个使用它，也可以只用它的一个或几个部分。</p>
            <p>Tiny构建者认为，一个完整的框架可能需要有许许多多个部分组成，但是对于实际应用的用户来说，它可能只需要其中的一部分功能。构架一定要有这种能力，可以由使用者进行点菜式，使用，避免只要用一点点功能，就要引入许许多多的内容。</p>
            #end
        #end

        #@masonryItem("big")
            #@caption("学习成本低、上手容易")
            <p>框架的学习成本必须非常低，这样才可以让使用者更容易上手，避免由于学习难度大而导致的学习曲线太陡、太长。</p>
            <p>经过许多次的实践，我们总结出来：有基础的JAVA开发人员经过半天的培训，就可以完全学会基于Tiny框架进行开发，经过1天到两天的实践就会变成熟手。</p>
            <p>对框架进行扩展或基于框架扩展接口进行扩展，则需要3天左右的培训，就可以完全掌握，经过一周的实践就会变成熟手。</p>
            #end
        #end

         ##后面的内容都类似就不贴了
    #end
#end


鼓励与支持 
#pageTitle("鼓励" "encourage")
#title("encourage" "鼓励与支持")
#@row()
    #@span3()
    #end
    #@span6()
    <div class="thumbnail" style="text-align: left;">
            <p>我想每一个访问到这个页面的人，一定也是同样对技术有所追求的人。相对于金钱来说，我们更需要您的支持、鼓励，以及对我们所做工作的认可。</p>
            <p>我们不希望收到多少金钱，但是我们希望收获许多支持。</p>
            <p>如果您感受得到我们的努力及付出，请不辞辛苦为我们捐赠<em style="color:red"><strong>一块钱</strong></em>，为我们加油，为我们助威！</p>
            <p><em style="color:red">请用支付宝中的二维码扫描功能扫描下面的二维码</em></p>
        #img("img/appxl1rc0koh8fj044.png")
    </div>
    #end
    #@span3()
    #end
#end

其它页面也大同小异，这里就不贴了。  
运行结果 

125502_T1DY_1245989.png (199.12 KB, 下载次数: 0)

下载附件

2015-5-26 23:07 上传

 

125700_7n3X_1245989.png (102.4 KB, 下载次数: 0)

下载附件

2015-5-26 23:07 上传

 

125908_E9QS_1245989.png (189.1 KB, 下载次数: 0)

下载附件

2015-5-26 23:07 上传

 

155553_517R_1245989.png (26.78 KB, 下载次数: 0)

下载附件

2015-5-26 23:07 上传

 

更多页面，请看网站www.tinygroup.org 

增加google及Baidu站点统计 

1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2.         "http://www.w3.org/TR/html4/strict.dtd">
3. <!--[if IE 7 ]>        <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]-->
4. <!--[if IE 8 ]>        <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]-->
5. <!--[if IE 9 ]>        <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]-->
6. <!--[if (gt IE 9)|!(IE)]><!-->
7. <html class="no-js" lang="en-US"> <!--<![endif]-->
8. <html lang="en">
9. <head>
10.     <meta charset="utf-8"/>
11.     <link rel="shortcut icon" href="${TINY_CONTEXT_PATH}/tinysite/img/tiny.png" type="image/x-icon"/>
12.     <title>Tiny Framework-$!pageTitle</title>
13.     <meta name="description" content="Tiny Framework 是基于Java语言的面向组件的企业级开发框架。"/>
14.     <meta name="keywords" content="Tiny,Framework,Java,SOA,框架,组件,分层,水平扩展,分区，分表,分布式计算,VFS,Web" />
15.     <script src="${TINY_CONTEXT_PATH}/uiengine.uijs"></script>
16.     <link href="${TINY_CONTEXT_PATH}/uiengine.uicss" rel="stylesheet" />
17. </head>
18. <body class="boxed"  style="background: url(${TINY_CONTEXT_PATH}/tinysite/img/bg/parquet-bg.jpg);">
19. $pageContent
20. <script type="text/javascript">
21.     var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
22.     document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F08ed66f35813cc4b68c4607c2a40d33c' type='text/javascript'%3E%3C/script%3E"));
23. </script>
24. <script>
25.     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
26.         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
27.             m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
28.     })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
30.     ga('create', 'UA-51345317-1', 'tinygroup.org');
31.     ga('send', 'pageview');
33. </script>
34. </body>
35. </html>

复制代码

考虑要个人也比较关心一些统计数据，于是就增加一baidu及google的统计分析。 
很简单，只要在根目录中的default.layout中增加这两段js就可以了，所有的其它文件都不必修改。 
哇，已经可以收集数据了，同时也再一次验证了Tiny框架对于DRY原则的坚持。 

总结 
上面展示了Tiny框架强大的页面开发能力。 
对于页面开发人员来说，进行了相当的封装，避免了直接使用html而出现不应该出现的问题。 
对于开发人员来说，不必关心页面结构，也不必关系js,css相关的内容，只要设置好页面上的元素即可。 
这里就可以非常清晰的看到，界面开发程序员做的事情非常简单、易懂，且易于维护。明眼人也看得非常清晰，如果数据是来自于数据库，那处理就更简单了。