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

最新推荐文章于 2023-03-02 22:20:29 发布

TINY框架

最新推荐文章于 2023-03-02 22:20:29 发布

阅读量1.7k

点赞数

分类专栏：介绍与实践

本文链接：https://blog.csdn.net/j2eetop/article/details/46428365

版权

介绍与实践专栏收录该内容

77 篇文章 0 订阅

订阅专栏

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

TINY框架

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Tiny实例：TINY框架官网制作过程详解

新增加war包下载地址，呵呵愿意体验的可以直接下载并发布到容器即可试用，也可以查看里面的内容。由于只花了两天时间制作，一天时间搞页面，一天时间搞内容，所以还非常粗糙，还有许多需要完善的地方，欢迎同学们提出改进和完善意见，但是今天网站做的好不好不是重点，重点讲讲网站是怎么做出来的。当然了，不用问，必须用Tiny框架来做，所以今天就来讲一下如何利用Tiny框架来高速有效的进行网站开发。
复制链接

扫一扫