TinyUI组件开发示例

TinyUI实际上并不是一个具体的UI展现组件，它只是一个UI构建体系。它可以适应于各种Html+CSS+JS的体系架构中。 TinyUI主要解决下面的问题：

• UI中JS的引入与顺序，JS合并的问题
• UI中css的引入与顺序，CSS合并的问题
• UI中碰到性能问题时的影响范围，比如：一个树出现问题，要改动许多用到树的地方
• 代码重复的问题，同样的内容在许多地方都有，如果要改动就要改动许多个地方
• 整体布局调整困难的问题
• 开发效率的问题
• 执行效率的问题，前台响应要求速度更快
• 集群的问题
• 国际化的问题
• 等等
  

所以，它只是一个体系，不提供具体的UI组件，只是便于进行对其它UI框架进行包装、集成，同时解决运行过程中的各种问题。它还解决了模块化的问题，也就是说大家都按照规范构建一个一个的模块，然后复用的时候，是不用考虑如何引入css,js以及其引入顺序的相关问题的。   关于体系性的说明，请移步查阅 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-resour