新增加war包下載地址,呵呵願意體驗的可以直接下載並發布到容器即可試用,也可以查看里面的內容。
由於只花了兩天時間制作,一天時間搞頁面,一天時間搞內容,所以還非常粗糙,還有許多需要完善的地方,歡迎同學們提出改進和完善意見,但是今天網站做的好不好不是重點,重點講講網站是怎么做出來的。當然了,不用問,必須用Tiny框架來做,所以今天就來講一下如何利用Tiny框架來高速有效的進行網站開發。
網站模板選擇
首先聲明,本人是美工盲,前台界面盲,JS盲。所以,指望自己弄個漂亮的網站出來那是根本沒有可能的。好在現在互聯網發達,只要用心找就是可以找得到的。想想准備用bootstrap方式的響應式網頁方式,於是就找到了themeforest.net,然后就在其主題世界盪漾,最后感覺Perfetto網站效果不錯,是我想要的效果,再查看一下源文件,發現比較簡單,比較容易搞定。於是就想着就是它了。
於是從
http://www.angelomazzilli.com/Perfetto/index.html上把源文件搞下來,呵呵,第一手資料就算有了。由於這個不是重點,所以就快速過掉,總之,我拿到了這個網站的html,js,css,圖片等等一應資源,在本地目錄中打開文件訪問也正確,OK,可以進入下一步驟。
宏提取
所謂宏提取,就是把網頁里重復出現的東東搞成個宏,這樣就避免了重復內容到處復制來復制去:
上面就把宏處理方面的工作處理完畢了,接下來就是設定頁面結構了。
頁面結構設計
Html頁面結構
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
- <!--[if IE 7 ]> <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]-->
- <!--[if IE 8 ]> <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]-->
- <!--[if IE 9 ]> <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]-->
- <!--[if (gt IE 9)|!(IE)]><!-->
- <html class="no-js" lang="en-US"> <!--<![endif]-->
- <html lang="en">
- <head>
- <meta charset="utf-8"/>
- <link rel="shortcut icon" href="${TINY_CONTEXT_PATH}/tinysite/img/tiny.png" type="image/x-icon"/>
- <title>Tiny Framework-$!pageTitle</title>
- <meta name="description" content="Tiny Framework 是基於Java語言的面向組件的企業級開發框架。"/>
- <meta name="keywords" content="Tiny,Framework,Java,SOA,框架,組件,分層,水平擴展,分區,分表,分布式計算,VFS,Web" />
- <script src="${TINY_CONTEXT_PATH}/uiengine.uijs"></script>
- <link href="${TINY_CONTEXT_PATH}/uiengine.uicss" rel="stylesheet" />
- </head>
- <body class="boxed" style="background: url(${TINY_CONTEXT_PATH}/tinysite/img/bg/parquet-bg.jpg);">
- $pageContent
- </body>
- </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
其它頁面也大同小異,這里就不貼了。
運行結果
更多頁面,請看網站
www.tinygroup.org
增加google及Baidu站點統計
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
- <!--[if IE 7 ]> <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]-->
- <!--[if IE 8 ]> <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]-->
- <!--[if IE 9 ]> <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]-->
- <!--[if (gt IE 9)|!(IE)]><!-->
- <html class="no-js" lang="en-US"> <!--<![endif]-->
- <html lang="en">
- <head>
- <meta charset="utf-8"/>
- <link rel="shortcut icon" href="${TINY_CONTEXT_PATH}/tinysite/img/tiny.png" type="image/x-icon"/>
- <title>Tiny Framework-$!pageTitle</title>
- <meta name="description" content="Tiny Framework 是基於Java語言的面向組件的企業級開發框架。"/>
- <meta name="keywords" content="Tiny,Framework,Java,SOA,框架,組件,分層,水平擴展,分區,分表,分布式計算,VFS,Web" />
- <script src="${TINY_CONTEXT_PATH}/uiengine.uijs"></script>
- <link href="${TINY_CONTEXT_PATH}/uiengine.uicss" rel="stylesheet" />
- </head>
- <body class="boxed" style="background: url(${TINY_CONTEXT_PATH}/tinysite/img/bg/parquet-bg.jpg);">
- $pageContent
- <script type="text/javascript">
- var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
- document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F08ed66f35813cc4b68c4607c2a40d33c' type='text/javascript'%3E%3C/script%3E"));
- </script>
- <script>
- (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
- (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
- m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
- })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
- ga('create', 'UA-51345317-1', 'tinygroup.org');
- ga('send', 'pageview');
- </script>
- </body>
- </html>
復制代碼
考慮要個人也比較關心一些統計數據,於是就增加一baidu及google的統計分析。
很簡單,只要在根目錄中的default.layout中增加這兩段js就可以了,所有的其它文件都不必修改。
哇,已經可以收集數據了,同時也再一次驗證了Tiny框架對於DRY原則的堅持。
總結
上面展示了Tiny框架強大的頁面開發能力。
對於頁面開發人員來說,進行了相當的封裝,避免了直接使用html而出現不應該出現的問題。
對於開發人員來說,不必關心頁面結構,也不必關系js,css相關的內容,只要設置好頁面上的元素即可。
這里就可以非常清晰的看到,界面開發程序員做的事情非常簡單、易懂,且易於維護。明眼人也看得非常清晰,如果數據是來自於數據庫,那處理就更簡單了。