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

  8. #macro (img $imgHref $imgTitle)
  9.         <img#if($imgTitle) alt="$imgTitle"#end#if($imgHref)
  10.                            src="#if($imgHref.startWith('/'))#if($TINY_CONTEXT_PATH.equals("/"))#else{TINY_CONTEXT_PATH}#end$#end$imgHref"#end#>
  11. </a>
  12. #end

  13. #macro(section)
  14. <div class="section">
  15.     $bodyContent
  16. </div>
  17. #end

  18. #macro(container)
  19. <div class="container">
  20.     $bodyContent
  21. </div>
  22. #end

  23. #macro(row)
  24. <div class="row">
  25.     $bodyContent
  26. </div>
  27. #end

  28. #macro(span1)
  29. <div class="span1">
  30.     $bodyContent
  31. </div>
  32. #end

  33. #macro(span2)
  34. <div class="span2">
  35.     $bodyContent
  36. </div>
  37. #end

  38. #macro(span3)
  39. <div class="span3">
  40.     $bodyContent
  41. </div>
  42. #end

  43. #macro(span4)
  44. <div class="span4">
  45.     $bodyContent
  46. </div>
  47. #end

  48. #macro(span5)
  49. <div class="span5">
  50.     $bodyContent
  51. </div>
  52. #end


  53. #macro(span6)
  54. <div class="span6">
  55.     $bodyContent
  56. </div>
  57. #end

  58. #macro(span7)
  59. <div class="span7">
  60.     $bodyContent
  61. </div>
  62. #end

  63. #macro(span8)
  64. <div class="span8">
  65.     $bodyContent
  66. </div>
  67. #end

  68. #macro(span9)
  69. <div class="span9">
  70.     $bodyContent
  71. </div>
  72. #end

  73. #macro(span10)
  74. <div class="span10">
  75.     $bodyContent
  76. </div>
  77. #end

  78. #macro(span11)
  79. <div class="span11">
  80.     $bodyContent
  81. </div>
  82. #end

  83. #macro(span12)
  84. <div class="span12">
  85.     $bodyContent
  86. </div>
  87. #end

  88. #macro(hr)
  89. <hr/>
  90. #end

  91. #macro(dropdownMenu $dropdownTitle $dropdownHref $dropdownSubTitle )
  92. <li class="dropdown"><a href="$dropdownHref?activePage=$!menuKey">$dropdownTitle</a> <b class="caret"></b>
  93.     <span>$dropdownSubTitle</span>
  94.     $!bodyContent
  95. </li>
  96. #end

  97. #macro(menu $menuTitle $menuHref $menuSubTitle  $menuKey)
  98. <li class="dropdown#if($menuKey==$activePage) active#end"><a
  99.         href="${menuHref}">$menuTitle</a>
  100.     <span>$menuSubTitle</span>
  101.     $!bodyContent
  102. </li>
  103. #end

  104. #macro(nav)
  105. <ul class="nav">
  106.     $bodyContent
  107. </ul>
  108. #end

  109. #macro(subMenu)
  110. <ul>
  111.     $bodyContent
  112. </ul>
  113. #end

  114. #macro(subMenuItem  $title $href $menuKey)
  115. <li><a href="$href"#if($menuKey==$activePage) class="current"#end >$title</a></li>
  116. #end

  117. #macro(pageTitle $title $page)
  118.     #set($pageTitle="$title")
  119.     #set($activePage="$page")
  120. #end

  121. #macro(modalFooter)
  122. <div class="modal-footer">
  123.     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  124. </div>
  125. #end

  126. #macro(breadcrumb)
  127. <ul class="breadcrumb">
  128.     $bodyContent
  129. </ul>
  130. #end

  131. #macro(breadcrumbParentItem $title $url)
  132. <li>#@a($url $title)$title#end <span class="divider">/</span></li>
  133. #end

  134. #macro(breadcrumbItem $title)
  135. <li class="active">$title</li>
  136. #end

  137. #macro(thumbnails $thumbnailsId)
  138. <ul class="thumbnails"#if($thumbnailsId)id="$thumbnailsId"#end>
  139.     $bodyContent
  140. </ul>
  141. #end

  142. #macro(filterContainer)
  143. <ul id="portfolio" class="thumbnails ">
  144.     $bodyContent
  145. </ul>
  146. #end

  147. #macro(filterContainerItem $column $type)
  148. <li class="span$column $type" style="opacity: 1;">
  149.     <div class="thumbnail" style="text-align:left;">
  150.             $bodyContent
  151.     </div>
  152. </li>
  153. #end

  154. #macro(clearfix)
  155. <div class="clearfix"></div>
  156. #end

  157. #macro(thumbnailsItem $name $title $qq $email $imgUrl)
  158. <li class="span3">
  159.     <div class="thumbnail">
  160.         #img($imgUrl)
  161.         <div class="caption">
  162.             <h3><a href="#">$name</a></h3>
  163.             <em>$title</em>

  164.             <p>QQ:$!qq</p>

  165.             <p>郵箱:$!email</p>
  166.             #clearfix
  167.             $!bodyContent
  168.         </div>
  169.     </div>
  170. </li>
  171. #end

  172. #macro(slides)
  173. <div class="slides">
  174.     $bodyContent
  175. </div>
  176. #end

  177. #macro(slidesItem $imgSrc $title $href)
  178. <div>#@a($href $title)#img($imgSrc $title) #end
  179. $bodyContent
  180. </div>
  181. #end

  182. #macro(slidesDetail)
  183. <div class="detail">
  184.     $bodyContent
  185. </div>
  186. #end

  187. #macro(slidesDetailInfo $title $subTitle)
  188. <h3>#@a($href $title)$title#end</h3>
  189. <em>$subTitle</em>
  190.     $bodyContent
  191. #end

  192. #macro(title $title $subTitle)
  193. <div class="row">
  194.     <div class="span12">
  195.         <h1 class="no-margin">$title</h1>

  196.         <p class="lead">$subTitle</p>
  197.     </div>
  198. </div>
  199. #end

  200. #macro(wideBanner)
  201. <!-- Wide Banner -->
  202. <div class="wide-bg">
  203.     <div class="container">
  204.         $bodyContent
  205.     </div>
  206. </div>
  207. #end

  208. #macro(sidebar $title)
  209. <!-- Sidebar -->
  210. <div class="span3 sidebar">
  211.     #if($title)
  212.         <h3 class="half-margin">$!title</h3>
  213.     #end
  214.     <ul class="nav nav-tabs nav-stacked">
  215.         $bodyContent
  216.     </ul>
  217. </div>
  218. #end

  219. #macro(sidebarItem $title $href )
  220. <li>#@a($href $title)$title#end</li>
  221. #end

  222. #macro(lead $id $title)
  223. <p class="lead no-margin" id="$id">$title</p>
  224. <div class="">
  225.     $bodyContent
  226. </div>
  227. <hr class="no-margin" style="margin: 5pt;5pt;5pt;5pt;"/>
  228. #end

  229. #macro(filter)
  230. <!-- Portfolio Filter -->
  231. <div id="filter" class="half-margin">
  232.     $bodyContent
  233. </div>
  234. <div class="clearfix"></div>
  235. </div>
  236. #end

  237. #macro(filterItem $title $current)
  238. <button class="btn btn-small half-margin#if($current) current#end">$title</button>
  239. #end

  240. #macro(shortcut $title $href $icon)
  241.     #@a($href $title "_blank")#img($icon)#end
  242. #end

  243. #macro(caption $title)
  244. <div class="head" style="text-align: left;">
  245.     <h3><strong>$title</strong></h3>
  246.     $bodyContent
  247. </div>
  248. #end

  249. #macro(masonry)
  250. <div id="masonry">
  251.     $bodyContent
  252. </div>
  253. #end
  254. #macro(masonryItem $masonryItemClass)
  255. <div class="single $masonryItemClass">
  256.     $bodyContent
  257. </div>
  258. #end

  259. #macro(logo)
  260. <p class="logo"><a href="home.page"><span>Tiny Framework</span></a></p>
  261. #end

  262. #macro(toTop)
  263. <div id="toTop">Top</div>
  264. #end





  265. 通用的宏已經寫好,接下來就是寫與網站有關部分的宏:



  266. #macro(header)
  267. <!-- Header -->
  268.     #@row()
  269.         #@span3()
  270.         #logo
  271.         #end
  272.         #@span9()
  273.         <div class="top-header text-right"><em>QQ群: <em>228977971</em> 郵箱:<a
  274.                 href="mailto:luo_guo@icloud.com">luo_guo@icloud.com</a></em>

  275.             <div class="social">
  276.                 #shortcut("Sonar代碼檢查" "http://www.tinygroup.org/sonar/dashboard/index/org.tinygroup:tiny" "img/sonar.ico")
  277.                 #shortcut("Hudson持續集成" "http://www.tinygroup.org/hudson/job/tiny/" "img/hudson.png")
  278.                 #shortcut("TinyFramework OSC首頁" "http://www.tinygroup.org/sonar/dashboard/index/org.tinygroup:tiny" "img/osc.ico")
  279.                 #shortcut("TinyFramework GIT網址" "http://git.oschina.net/tinyframework/tiny" "img/git.ico")
  280.             </div>
  281.         </div>
  282.         <div class="text-left">
  283.             <h2></bit> Think big, start small, scale fast.</h2>
  284.         </div>
  285.         #end
  286.     #end
  287. #end

  288. #macro(footer)
  289.     #@section()
  290.         #@container()
  291.         <!-- Footer -->
  292.             #@row()
  293.                 #@span12()
  294.                 <div class="footer">
  295.                     <hr/>
  296.                     <p class="text-center">©Copy Right 2009~2014 <strong>tiny group</strong><br/>
  297.                         www.tinygroup.org</p>
  298.                 </div>
  299.                 #end
  300.             #end
  301.         #end
  302.     #end

  303. #end

  304. #macro(navbar)
  305. <!-- Navbar -->
  306. <div class="navbar"#* id="nav-follow"*#>
  307.     <div class="navbar-inner">
  308.         <div class="container"><a data-target=".navbar-responsive-collapse" data-toggle="collapse"
  309.                                   class="btn btn-navbar"><i class="icon-th-list"></i></a> <a
  310.                 data-target=".navbar-responsive-collapse" data-toggle="collapse" class="brand">Navbar</a>

  311.             <div class="nav-collapse collapse navbar-responsive-collapse">
  312.                 #@nav()
  313.                     #@menu("Homepage" "home.page" "首頁" "home")#end
  314.                     #@menu("philosophy" "philosophy.page" "設計理念" "philosophy")#end
  315.                     #@menu("principle" "principle.page" "設計原則" "principle")#end
  316.                     #@menu("Features" "feature.page" "功能特性" "feature")#end
  317.                     #@menu("FAQ" "faq.page" "常見問題解答" "faq")#end
  318.                     #@menu("encourage us" "encourage.page" "鼓勵我們" "encourage")#end
  319.                     #@menu("About us" "about.page" "關於我們" "about")#end
  320.                 #end
  321.             </div>
  322.         </div>
  323.     </div>
  324. </div>
  325. #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');

  29.     ga('create', 'UA-51345317-1', 'tinygroup.org');
  30.     ga('send', 'pageview');

  31. </script>
  32. </body>
  33. </html>
復制代碼



考慮要個人也比較關心一些統計數據,於是就增加一baidu及google的統計分析。
很簡單,只要在根目錄中的default.layout中增加這兩段js就可以了,所有的其它文件都不必修改。
哇,已經可以收集數據了,同時也再一次驗證了Tiny框架對於DRY原則的堅持。

總結
上面展示了Tiny框架強大的頁面開發能力。
對於頁面開發人員來說,進行了相當的封裝,避免了直接使用html而出現不應該出現的問題。
對於開發人員來說,不必關心頁面結構,也不必關系js,css相關的內容,只要設置好頁面上的元素即可。
這里就可以非常清晰的看到,界面開發程序員做的事情非常簡單、易懂,且易於維護。明眼人也看得非常清晰,如果數據是來自於數據庫,那處理就更簡單了。

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com