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

Tiny框架的官网已经开通：http://www.tinygroup.org/

新增加war包下载地址，呵呵愿意体验的可以直接下载并发布到容器即可试用，也可以查看里面的内容。

由于只花了两天时间制作，一天时间搞页面，一天时间搞内容，所以还非常粗糙，还有许多需要完善的地方，欢迎同学们提出改进和完善意见，但是今天网站做的好不好不是重点，重点讲讲网站是怎么做出来的。当然了，不用问，必须用Tiny框架来做，所以今天就来讲一下如何利用Tiny框架来高速有效的进行网站开发。

网站模板选择

首先声明，本人是美工盲，前台界面盲，JS盲。所以，指望自己弄个漂亮的网站出来那是根本没有可能的。好在现在互联网发达，只要用心找就是可以找得到的。想想准备用bootstrap方式的响应式网页方式，于是就找到了themeforest.net，然后就在其主题世界荡漾，最后感觉Perfetto网站效果不错，是我想要的效果，再查看一下源文件，发现比较简单，比较容易搞定。于是就想着就是它了。

于是从http://www.angelomazzilli.com/Perfetto/index.html上把源文件搞下来，呵呵，第一手资料就算有了。由于这个不是重点，所以就快速过掉，总之，我拿到了这个网站的html,js,css,图片等等一应资源，在本地目录中打开文件访问也正确，OK，可以进入下一步骤。

宏提取

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

#macro (a $aHref $title $aTarget )
<a#if($title) title="$title"#end#if($aHref)
              href="#if($aHref.startWith('/'))#if($TINY_CONTEXT_PATH.equals("/"))#else{TINY_CONTEXT_PATH}#end$#end$aHref"#end#if($aTarget)
              target="$aTarget"#end>
    $bodyContent
</a>
#end

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

#macro(section)
<div class="section">
    $bodyContent
</div>
#end

#macro(container)
<div class="container">
    $bodyContent
</div>
#end

#macro(row)
<div class="row">
    $bodyContent
</div>
#end

#macro(span1)
<div class="span1">
    $bodyContent
</div>
#end

#macro(span2)
<div class="span2">
    $bodyContent
</div>
#end

#macro(span3)
<div class="span3">
    $bodyContent
</div>
#end

#macro(span4)
<div class="span4">
    $bodyContent
</div>
#end

#macro(span5)
<div class="span5">
    $bodyContent
</div>
#end


#macro(span6)
<div class="span6">
    $bodyContent
</div>
#end

#macro(span7)
<div class="span7">
    $bodyContent
</div>
#end

#macro(span8)
<div class="span8">
    $bodyContent
</div>
#end

#macro(span9)
<div class="span9">
    $bodyContent
</div>
#end

#macro(span10)
<div class="span10">
    $bodyContent
</div>
#end

#macro(span11)
<div class="span11">
    $bodyContent
</div>
#end

#macro(span12)
<div class="span12">
    $bodyContent
</div>
#end

#macro(hr)
<hr/>
#end

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

#macro(menu $menuTitle $menuHref $menuSubTitle  $menuKey)
<li class="dropdown#if($menuKey==$activePage) active#end"><a
        href="${menuHref}">$menuTitle</a>
    <span>$menuSubTitle</span>
    $!bodyContent
</li>
#end

#macro(nav)
<ul class="nav">
    $bodyContent
</ul>
#end

#macro(subMenu)
<ul>
    $bodyContent
</ul>
#end

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

#macro(pageTitle $title $page)
    #set($pageTitle="$title")
    #set($activePage="$page")
#end

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

#macro(breadcrumb)
<ul class="breadcrumb">
    $bodyContent
</ul>
#end

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

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

#macro(thumbnails $thumbnailsId)
<ul class="thumbnails"#if($thumbnailsId)id="$thumbnailsId"#end>
    $bodyContent
</ul>
#end

#macro(filterContainer)
<ul id="portfolio" class="thumbnails ">
    $bodyContent
</ul>
#end

#macro(filterContainerItem $column $type)
<li class="span$column $type" style="opacity: 1;">
    <div class="thumbnail" style="text-align:left;">
            $bodyContent
    </div>
</li>
#end

#macro(clearfix)
<div class="clearfix"></div>
#end

#macro(thumbnailsItem $name $title $qq $email $imgUrl)
<li class="span3">
    <div class="thumbnail">
        #img($imgUrl)
        <div class="caption">
            <h3><a href="#">$name</a></h3>
            <em>$title</em>

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

            <p>邮箱:$!email</p>
            #clearfix
            $!bodyContent
        </div>
    </div>
</li>
#end

#macro(slides)
<div class="slides">
    $bodyContent
</div>
#end

#macro(slidesItem $imgSrc $title $href)
<div>#@a($href $title)#img($imgSrc $title) #end
$bodyContent
</div>
#end

#macro(slidesDetail)
<div class="detail">
    $bodyContent
</div>
#end

#macro(slidesDetailInfo $title $subTitle)
<h3>#@a($href $title)$title#end</h3>
<em>$subTitle</em>
    $bodyContent
#end

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

        <p class="lead">$subTitle</p>
    </div>
</div>
#end

#macro(wideBanner)
<!-- Wide Banner -->
<div class="wide-bg">
    <div class="container">
        $bodyContent
    </div>
</div>
#end

#macro(sidebar $title)
<!-- Sidebar -->
<div class="span3 sidebar">
    #if($title)
        <h3 class="half-margin">$!title</h3>
    #end
    <ul class="nav nav-tabs nav-stacked">
        $bodyContent
    </ul>
</div>
#end

#macro(sidebarItem $title $href )
<li>#@a($href $title)$title#end</li>
#end

#macro(lead $id $title)
<p class="lead no-margin" id="$id">$title</p>
<div class="">
    $bodyContent
</div>
<hr class="no-margin" style="margin: 5pt;5pt;5pt;5pt;"/>
#end

#macro(filter)
<!-- Portfolio Filter -->
<div id="filter" class="half-margin">
    $bodyContent
</div>
<div class="clearfix"></div>
</div>
#end

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

#macro(shortcut $title $href $icon)
    #@a($href $title "_blank")#img($icon)#end
#end

#macro(caption $title)
<div class="head" style="text-align: left;">
    <h3><strong>$title</strong></h3>
    $bodyContent
</div>
#end

#macro(masonry)
<div id="masonry">
    $bodyContent
</div>
#end
#macro(masonryItem $masonryItemClass)
<div class="single $masonryItemClass">
    $bodyContent
</div>
#end

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

#macro(toTop)
<div id="toTop">Top</div>
#end

通用的宏已经写好，接下来就是写与网站有关部分的宏：

#macro(header)
<!-- Header -->
    #@row()
        #@span3()
        #logo
        #end
        #@span9()
        <div class="top-header text-right"><em>QQ群: <em>228977971</em> 邮箱：<a
                href="mailto:luo_guo@icloud.com">luo_guo@icloud.com</a></em>

            <div class="social">
                #shortcut("Sonar代码检查" "http://www.tinygroup.org/sonar/dashboard/index/org.tinygroup:tiny" "img/sonar.ico")
                #shortcut("Hudson持续集成" "http://www.tinygroup.org/hudson/job/tiny/" "img/hudson.png")
                #shortcut("TinyFramework OSC首页" "http://www.tinygroup.org/sonar/dashboard/index/org.tinygroup:tiny" "img/osc.ico")
                #shortcut("TinyFramework GIT网址" "http://git.oschina.net/tinyframework/tiny" "img/git.ico")
            </div>
        </div>
        <div class="text-left">
            <h2></bit> Think big, start small, scale fast.</h2>
        </div>
        #end
    #end
#end

#macro(footer)
    #@section()
        #@container()
        <!-- Footer -->
            #@row()
                #@span12()
                <div class="footer">
                    <hr/>
                    <p class="text-center">&copy;Copy Right 2009~2014 <strong>tiny group</strong><br/>
                        www.tinygroup.org</p>
                </div>
                #end
            #end
        #end
    #end

#end

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

            <div class="nav-collapse collapse navbar-responsive-collapse">
                #@nav()
                    #@menu("Homepage" "home.page" "首页" "home")#end
                    #@menu("philosophy" "philosophy.page" "设计理念" "philosophy")#end
                    #@menu("principle" "principle.page" "设计原则" "principle")#end
                    #@menu("Features" "feature.page" "功能特性" "feature")#end
                    #@menu("FAQ" "faq.page" "常见问题解答" "faq")#end
                    #@menu("encourage us" "encourage.page" "鼓励我们" "encourage")#end
                    #@menu("About us" "about.page" "关于我们" "about")#end
                #end
            </div>
        </div>
    </div>
</div>
#end

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

页面结构设计

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"菜单为选中状态 #title("Tiny framework" "基于组件化的J2EE开发框架")

#@slides()##轮播
    #@slidesItem("img/example-slide-1.jpg" "Photo" "#")##第一个轮播项
        #@slidesDetail()
            #@slidesDetailInfo("名字" "Tiny名称的来历")##轮播中的详细解释段
            <p>取名Tiny是取其微不足道，微小之意。</p>
            <p>Tiny的构建者认为，一个J2EE开发框架是非常复杂的，只有把框架分解成非常细小、可控的部分，并且对每个细小、可控的部分都有一个最优解或相对最优解，
            那么整个方案也就可以非常不错的落地。</p>
            #end
        #end
    #end
    #@slidesItem("img/example-slide-2.jpg" "Photo" "#")
        #@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" "Photo" "#")
        #@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" "Photo" "#")
        #@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相关的内容，只要设置好页面上的元素即可。

这里就可以非常清晰的看到，界面开发程序员做的事情非常简单、易懂，且易于维护。明眼人也看得非常清晰，如果数据是来自于数据库，那处理就更简单了。