您的位置：首页 > 其它

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

2015-09-10 09:39 405 查看

新增加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)



<div class="wide-bg">

<div class="container">

      $bodyContent

</div>

</div>

#end

#macro(sidebar $title)



<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)



<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)



#@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()

      

         #@row()

            #@span12()

            <div class="footer">

                  <hr/>

                  <p class="text-center">©Copy Right 2009~2014 <strong>tiny group</strong><br/>

                     www.tinygroup.org</p>

            </div>

            #end

         #end

      #end

#end

#end

#macro(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">









<html class="no-js" lang="en-US"> 

<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()

      #@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站点统计

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

      "http://www.w3.org/TR/html4/strict.dtd">









<html class="no-js" lang="en-US"> 

<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相关的内容，只要设置好页面上的元素即可。
这里就可以非常清晰的看到，界面开发程序员做的事情非常简单、易懂，且易于维护。明眼人也看得非常清晰，如果数据是来自于数据库，那处理就更简单了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航