Tiny快速入門之Web界面快速開發實踐

時間 2019-11-07

標籤 tiny 快速入門 web 界面開發實踐欄目 HTML 简体版

原文原文鏈接

前面講了基於Tiny作服務，這篇來說講用Tiny怎麼作界面。f javascript

下面是一些經常使用的連接，供你們使用： css

GIT地址(必須是OSC家的)：https://git.oschina.net/tinyframework/tiny
問題報告：https://git.oschina.net/tinyframework/tiny/issues
html

官方網站：http://www.tinygroup.org java

更多內容，請看本人博客，不同的內容，同樣的精彩！ jquery

原本想改改OSChina的界面，可是研究了一下，OSChina界面實在是高大上呀，不是作不出來，只是工做量比較大，所以仍是作個簡單的網站來展現一下用Tiny開發界面的過程，同時在展現過程的同時，會把相關的知識作一個充分的介紹。

1、尋找網站模板

要作網站，不能沒有模板，本身不會作網頁設計，咋辦？問谷歌找百度唄，找了一陣，看到下面這個模板不錯，就它了。 ios

http://www.tooplate.com/zip_files/2042_the_block.zip git

相仔細瞭解這篇文章的同窗，建議把原板的下載下來，對比着看，會更有感受。 web

2、開工製做

1.編寫default.layout佈局文件

位置：/default.layout 數據庫

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>演示網站-${pageTitle}</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <script src="${TINY_CONTEXT_PATH}/uiengine.uijs"></script>
    <link href="${TINY_CONTEXT_PATH}/uiengine.uicss" rel="stylesheet" />
</head>
<body>
    ${pageContent}
</body>
</html>

這個是標準佈局了，直接貼過來，惟一要改的就是標題處加了「演示網站-」開頭。
裏面引入的js和css是TinyUI引擎所獨有的，主要處理JS,CSS順序處理、合併、打包等相關，因爲這個是框架內部實現的部分，這裏只是使用就不展開來敘述了。

${pageContent} 這個標記了渲染替換的位置，一個layout文檔中必須有且只能有一個(若是沒有，你會發現無論怎麼寫頁面，內容都是佈局的內容；若是有多個，你會發現頁面中的內容會加屢次)。 api

2.編寫UI組件定義文件

位置：/demosite.ui.xml

<ui-components>
    <ui-component name="demosite" dependencies="">
        <css-resource>/css/jquery.lightbox-0.5.css,/css/slider_style.css,/css/tooplate_style.css</css-resource>
        <js-resource>/js/jquery.js,/js/jquery.lightbox-0.5.js,/js/swfobject.js</js-resource>
    </ui-component>
</ui-components>

這裏主要是定義用到的js和css，因爲只是一個網站，就簡單處理，只寫一個了，實際應用當中，要根據用途和職能不一樣定義爲許多個UI組件包。

3.編寫通用宏定義

位置：/common.component

#macro a(title url)
<a href="#link(url)">${title}</a>
#end

#macro img(url alt)
<img src=#link(url) alt="${alt}">
#end

#macro link(url)#if(url.startsWith("/"))${TINY_CONTEXT_PATH}#end${url}#end

#macro pageTitle(title page)
    #!set(pageTitle=title)
    #!set(activePage=page)
#end

這面主要定義了4個宏，a是超鏈接的，img是圖片的，link是把連接地址轉換成絕對地址，pageTitle用於定義頁面的標題和當前頁是哪一個頁面的。

4.編寫業務宏

位置：/demosite.component

#macro header()
<div id="tooplate_header">
    #bodyContent
</div>
#end

#macro siteTitle(title))
<div id="site_title"><h1><a href="#">${title}</a></h1></div>
#end

#macro menu()
<div id="tooplate_menu">
    <ul>
        #bodyContent
    </ul>
</div>
#end

#macro menuItem(url title page)
<li><a href="#link(url)"#if(activePage==page) class="current"#end >${title}</a></li>
#end

#macro tooplateWrapper())
<div id="tooplate_wrapper">
    #bodyContent
</div>
#end

#macro tooplateMiddleSub()
<div id="tooplate_middle_sub">
    #bodyContent
</div>
#end

#macro tooplateMiddle()
<div id="tooplate_middle">
    #bodyContent
</div>
#end


#macro flashGridSlider()
<div id="flash_grid_slider">
    <a rel="nofollow" href="http://www.adobe.com/go/getflashplayer">
        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
             alt="Get Adobe Flash player"/>
    </a>
</div>
<script type="text/javascript">
    var flashvars = {};
    flashvars.xml_file = '#link("/photo_list.pagelet")';
    var params = {};
    params.wmode = "transparent";
    var attributes = {};
    attributes.id = "slider";
    swfobject.embedSWF('#link(
        "/flash_slider.swf")', "flash_grid_slider", "780", "210", "9.0.0", false, flashvars, params, attributes);
</script>
#end

#macro tooplateContent())
<div id="tooplate_content">
    <span class="content_top"></span>
    #bodyContent
    <div class="cleaner"></div>
</div>
#end

#macro tooplateFooter())
<div id="tooplate_footer">
    #bodyContent
    <div class="cleaner"></div>
</div>
#end

#macro box220(class)
<div class="box_w220 ${class}">
   #bodyContent
</div>
#end

#macro box330(class)
<div class="box_w330 ${class}">
    #bodyContent
</div>
#end

#macro gallery()
<div id="gallery">
    #bodyContent
</div>
#end

#macro galleryBox(largeImage smallImage title alt info class)
<div class="gallery_box ${class}">
    <div class="gallery_img"><span></span>
        <a href="#link(largeImage)" title="${title}">
            <img src="#link(smallImage)" alt="${alt}"/>
        </a>
    </div>
    <h6>${info}</h6>
</div>
#end

#macro postBos(comment title imageUrl imageAlt postedInList commentCount)
<div class="post_box">
    <div class="comment"><a href="#">${comment}</a></div>
    <h2>${title}</h2>

    <div class="image_wrapper image_fl"><span></span>#img(imageUrl imageAlt)</div>
    <p><span class="cat">Posted in
     #for(postedIn in postedInList)
        <a href="#">${postedIn}</a>&nbsp;
     #end
    </span></p>
    #bodyContent
    ${commentCount} comments <a class="more float_r" href="#">More</a>
    <div class="cleaner"></div>
</div>
#end

業務宏的定義，就是根據狀況從美工製做的頁面文件中抽取一些具備共性的內容，定義成一個宏，這樣之後使用的時候，就只要使用有意義的宏而不是原來一堆一堆的Html標記。

5.定義演示網站佈局文件

分析一下幾個頁面，都有頁頭，頁腳，菜單，所以能夠把這些共性的文件放在演示網站佈局文件中：

位置：/page/default.layout

#@tooplateWrapper()
    #@header()
        #siteTitle("The Block")
        #@menu()
            #menuItem("index.page" "Home" "Home")
            #menuItem("about.page" "About Us" "About")
            #menuItem("blog.page" "Blog" "Blog")
            #menuItem("gallery.page" "Gallery" "Gallery")
            #menuItem("contact.page" "Contact" "Contact")
        #end
    #end

    ${pageContent}

    #@tooplateFooter()
    Copyright © 2048 <a href="#">Company Name</a> - Design: <a href="http://www.tooplate.com">tooplate</a>

    #end

#end 
<script type="text/javascript">
    $('#gallery a').lightBox();
</script>
<script type="text/javascript">
    $('#map a').lightBox();
</script>

上面代碼的函義是：

在整個頁面中，上面放置Header，下面旋轉Footer，中間放置內容

最後兩段js，是說：對某指定選擇器中的圖片用lightbox去進行處理。

這裏就把全部的通用的部分都抽取到佈局文件中了。

6.定義相關頁面

首頁：

#pageTitle("Home" "Home")

#@tooplateMiddle()
  #flashGridSlider()
#end

#@tooplateContent()

    <h2>Welcome To The Block!</h2>

    <div class="image_wrapper image_fl"><span></span>
        #img("/images/tooplate_image_01.jpg" "image")
    </div>
    <p><em>The Block is a <a rel="nofollow" href="http://www.tooplate.com">free website template</a> from <a
            rel="nofollow" href="http://www.tooplate.com">Tooplate</a>. Credit goes to <a rel="nofollow"
                                                                                          href="http://www.photovaco.com">Free
        Photos</a> for photos used in this template.</em></p>

    <p align="justify">Aliquam et augue et odio luctus posuere sit amet et nisi. Maecenas convallis, est sit amet
        convallis consectetur, elementum lacus, ut fermentum elit sem. Duis eu elit tortor, sed condimentum nulla.
        Phasellus varius posuere adipiscing. Mauris sodales dictum 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>
    #@box220()
        <h4>pharetra id turpis<span>Lorem Ipsum Dolor</span></h4>

        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta adi Piscing libero, eget elem
            ntum lectus varius sed.</p>
        <a href="#" class="more">more</a>
    #end
    #@box220()
        <h4>semper nisl ac nibh<span>Donec Tincidunt Varius</span></h4>

        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
            eu mauris id neque porttitor.</p>
        <a href="#" class="more">more</a>
    #end
    #@box220("rmb")
        <h4>consect adipiscing elit<span>Etiam Gravida Sagittis</span></h4>

        <p>Cras eu egestas sem. Aenean mollis feugiat massa, eget pharetra nunc interdum non. Etiam euismod sem ac
            sem tincidunt adipiscin.</p>
        <a href="#" class="more">more</a>
    #end
#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

日誌：

#pageTitle("Blog" "Blog")


#@tooplateMiddleSub()
<h2>Our Blog Posts</h2>
<p>Vestibulum eleifend consequat laoreet. Pellentesque vel orci sapien. Duis lacus ipsum, pretium ut accumsan in, tempor
    nec mauris. Aenean accumsan placerat elit, sit amet faucibus ante commodo a. In et neque nibh, ac tristique
    dui. </p>
#end

#@tooplateContent()
    #@postBos("20" "Lorem ipsum dolor sit amet" "/images/tooplate_image_02.jpg" "Image 02" ["Templates","Freebie"] "148")

        <p>Vestibulum adipiscing tempus elit eu condimentum. Fusce at mi felis. Etiam sed velit nibh. Nunc bibendum
            justo elementum auctor. Donec at magna eu neque. Vestibulum ante ipsum primis in faucibus orci luctus et
            ultrices posuere cubilia. </p>
    #end

    #@postBos("17" "Etiam gravida sagittis lacus" "/images/tooplate_image_03.jpg" "Image 03" ["CSS Templates","Web Design"] "128")

    <p>Ellentesque vitae velit eu lectus rhoncus tincidunt. Phasellus dictum dignissim sapien et dapibus. Sed
        egestas consequat mauris, orci tincidunt sit amet. Donec pharetra porta ultrices. Sed sit amet lectus
        libero, at porttitor odio. 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>
    #end

    #@postBos("10" "Aenean vitae velit eget" "/images/tooplate_image_04.jpg" "Image 04" ["Illustrations","Graphics"] "208")

    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin gravida
        ornare mauris ac lobortis. Praesent elit neque, lacinia eget interdum eu. Phasellus posuere nisl et odio
        egestas ac tristique justo ultrices. </p>
    #end
#end

畫廊：

#pageTitle("Gallery" "Gallery")

#@tooplateMiddleSub()
<h2>Our Gallery</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta adipiscing libero, eget elementum lectus
    varius sed. Aliquam metus urna, dignissim quis posuere at, posuere eget mauris. Vestibulum laoreet sodales tellus
    nec mollis. 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>
#end

#@tooplateContent()
    #@gallery()
    #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")
    #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")
    #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")
    #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")
    #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")
    #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")
    #end
#end

3、運行

首頁

關於

日誌

畫廊

聯繫咱們

4、總結

上面的完整示例展示了採用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組件包及業務組件開發工程師開發的組件，再加上控制層傳過來的數據來編寫最終的展示頁面。

經過上面的分工，使得不一樣的開發人員關注於不一樣的技術細節，從而最大化的提高最終界面開發工程師的開發效率，同時由於有了必定的封裝性，可使得底層的變化不致於影響上層開發人員的工做成果。