TinyUI实际上并不是一个具体的UI展现组件，它只是一个UI构建体系。它可以适应于各种Html+CSS+JS的体系架构中。
TinyUI主要解决下面的问题：
- UI中JS的引入与顺序，JS合并的问题
- UI中css的引入与顺序，CSS合并的问题
- UI中碰到性能问题时的影响范围，比如：一个树出现问题，要改动许多用到树的地方
- 代码重复的问题，同样的内容在许多地方都有，如果要改动就要改动许多个地方
- 整体布局调整困难的问题
- 开发效率的问题
- 执行效率的问题，前台响应要求速度更快
- 集群的问题
- 国际化的问题
- 等等
关于体系性的说明，请移步查阅UI开发的终极方案。
下面我们就以集成Jquery和Jqueryui来示例，如何进行TinyUI组件包的开发。
JQuery TinyUI组件包的的开发
- 新建一个Maven的Jar类型工程
- 在main/resources/中创建jquery/js目录，然后在/jquery/js/目录中放入jquery-1.11.0.js文件
- 在main/resources目录中创建jquery.ui.xml，文件内容如下
|
1
2
3
4
5
|
<
ui-components
>
<
ui-component
name
=
"jquery"
>
<
js-resource
>/jquery/js/jquery-1.11.0.js</
js-resource
>
</
ui-component
>
</
ui-components
>
|
OK，JQuery的UI组件包就算开发完毕了。
简单说明：其实上面的文件组织形式，只是个示例而已，实际上你也可以根据你自己的需要制订自己的规范，来进行目录的组织，唯一需要注意的是js-resource中的jquery-1.11.0.js所在的路径，以/resources为根开始要正确引用。
JQueryUI TinyUI组件包的的开发
- 新建一个Maven的Jar类型工程，并依赖上面创建的jquery工程
- 在main/resources/中创建jqueryui/js目录，然后在/jqueryui/js/目录中放入jquery-1.11.0.js文件
- 在main/resource/jqueryui/中创建theme目录，里面放jqueryui的所有主题文件夹
- 在main/resources目录中创建jqueryui.ui.xml，文件内容如下
|
1
2
3
4
5
|
<
ui-components
>
<
ui-component
name
=
"jqueryui"
dependencies
=
"jquery"
>
<
js-resource
>/jqueryui/js/jquery-ui-1.10.3.custom.js</
js-resource
>
</
ui-component
>
</
ui-components
>
|
OK，JQueryUI的UI组件包就算基本开发完毕了。
解释一下与做JQuery工程时的差异，为什么要在pom中依赖上面创建的jquery工程呢？？原因是JQueryUI的运行需要用于JQuery运行库。
为什么已经在pom中依赖jquery包，还要在ui-component一行中要增加dependencies="jquery"属性呢？？
因为Pom依赖解决的问题是如果要用JQueryUI，则必须要有JQuery的运行库。
但是有了运行库之后呢，JS的引入是有先后顺序的。这个时候，TinyUI框架就无法知道把哪个js引入在前面，但是有了dependencies="jquery"属性，TinyUI框架就知道，哦，jqueryui只能在jquery之后引用。
为什么上面有个说法叫基本完成呢？就是说，现在确实可以算做已经完成，但是程序员在写代码的时候还是要对JQueryUI进行深入学习，然后编写时的写法与原来没有什么本质的区别，这当然不是TinyUI框架解决问题的终点。
有没有办法，让不懂JQueryUI的人也可以简单的使用JQueryUI？当然可以，请看下节，创建界面组件定义文件。
TinyUI组件的定义
在jqueryui工程的/resources目录中创建component目录，然后中其中创建jquery_ui.component文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
##==================================================================================
## jqueryUI Dialog
##==================================================================================
#*
参数
id
:ID
title:标题
construct:构建参数，详细参见jqueryui手册
*
#
#macro(jui_dialog $id $title $construct)
<div
id
=
"$id"
title=
"$!title"
>
$!bodyContent
<
/div
>
<script>
$(
function
() {
$(
"#$!id"
).dialog($!construct);
});
<
/script
>
#end
##=================================================================================
|
如上，定义了一个宏，名字叫jui_dialog，它有两个参数，一个是标题，一个是构建参数。
采用的语法是Velocity语法--因为内部就是集成了Velocity模板语言的。
以后的人开发的时候，使用就非常简单了，只要输入下面的内容：
|
1
2
3
|
#@jui_dialog("窗口标题")
这里放内容
#end
|
就可以直接使用JQueryUI的Dialog来显示一个对话框了。
当然，你也可以定义更多的宏，比如：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
##==================================================================================
## jquery accordion，参数：ID,构建参数
##==================================================================================
#macro(jui_accordion $id $construct)
<
div
id
=
"$id"
>
$!bodyContent
</
div
>
<
script
>
$(function() {
$( "#$id" ).accordion($construct);
});
</
script
>
#end
##==================================================================================
##==================================================================================
##by 罗果 jquery accordion section,参数：标题
##==================================================================================
#macro(jui_accordionSection $title)
<
h3
>$!title</
h3
>
<
div
>
$!bodyContent
</
div
>
#end
##==================================================================================
|
然后就可以在编写界面的时候用下面的方式来构建一个抽屉效果了：
|
1
2
3
4
5
6
7
8
9
10
11
|
#@jui_accordion("abc")
#@jui_accordionSection("第一个抽屉")
第一个抽屉的内容
#end
#@jui_accordionSection("第二个抽屉")
第二个抽屉的内容
#end
#@jui_accordionSection("第二个抽屉")
第二个抽屉的内容
#end
#end
|
TinyUI界面的开发
TinyUI的界面开发，有两种文件格式，一种以.page结尾，一种以.layout结尾.page文件表示是用来展现的一个页面文件，.layout文件表示是一个布局文件，它自己不能被单独用来展示，但是可以进行布局定义，并影响.page文件的展现效果。干巴巴的说，比较晦涩，还是用例子来进行演示：
- 新建一个jar类型的maven工程
- 在main/resources/目录中创建下面的目录结构目录，
|
1
2
|
main/resources/demo/a
main/resources/demo/b
|
也就是说在main/resources上创建demo目录，然后在demo目录中分别创建a和b两个子目录
在demo目录中创建default.layout文件，内容如下：
|
1
2
3
|
<
h3
>这里是Header</
h3
>
$pageContent
<
h3
>这里是Footer</
h3
>
|
然后在a目录中创建一个a.page，内容如下：
|
1
|
我是a
|
在b目录中创建一个 b.page，内容如下：
|
1
|
我是b
|
在执行的时候，浏览器中输入http://localhost:8080/sample1/demo/a.page
它的运行结果是：
|
1
2
3
|
<
h3
>这里是Header</
h3
>
我是a
<
h3
>这里是Footer</
h3
>
|
在执行的时候，浏览器中输入http://localhost:8080/sample1/demo/b.page
它的运行结果是：
|
1
2
3
|
<
h3
>这里是Header</
h3
>
我是b
<
h3
>这里是Footer</
h3
>
|
看起来，布局文件确实已经起效果了。
一些特殊用法
用法1：个性化，从上面的例子中，可以看到布局文件会对当前文件夹中的所有文件起作用。但是在特殊场景下，确实有想不一样的情况出现，这时有两个办法：一个是把不一样的从当前目录中分离出去，另外一个是创建一个同名的布局文件。比如，在上面的例子中，在demo目录中创建一个a.layout文件，其内容是如下：
|
1
2
3
|
<
h3
>This is Header</
h3
>
$pageContent
<
h3
>This is Footer</
h3
>
|
在执行的时候，浏览器中输入http://localhost:8080/sample1/demo/a.page
它的运行结果就会变成：
|
1
2
3
|
<
h3
>This is Header</
h3
>
我是a
<
h3
>This is Footer</
h3
>
|
用法2：Ajax支持：
比如，用Ajax进行局部加载的时候，不期望进行布局加载，只想这个page文件有啥就出啥，否则就会导致重复渲染的情况。TinyUI框架对此也有良好支持，只要请求的时候，在page后面加个let即可：
http://localhost:8080/sample1/demo/a.pagelet
这个时候它出来的内容都只有：
|
1
|
我是a
|
如果我想中国人访问，显示“我是a”，美国人访问，显示"I am a"，怎么办呢？
创建a.zh_CN.page内容是“我是a”
创建a.en_US.page内容是 “I am a”
同理，布局文件也支持同样的国际化规则支持。
当然这个适合于两个页面结构及内容大相径庭的情况。
如果只是利用国际化资源进行简单的国际化内容支持
比如，有个国际国资源key值是title，那只要简单的写成#i("title")即可。
总结：
TinyUI是一个UI构建体系，但它不是一个具体的UI框架，因此它里面没有JS，没有CSS，也没有HTML，它只是提供了集成各种UI展现框架的能力，并提供了UI组件包的组织形式。并解决JS,CSS引入顺序、合并、压缩、国际化等问题。
上面只演示了部分的特性，更多的请参阅相关文档或下载后直接试用。
