UI开发的终极解决方案

呵呵，有点标题党的意思，可是若是你正在寻找UI解决方案，你必定不会白来的。  虽然没有直接开发前台界面，可是好呆也看了这么些年，碰到许多关于UI的问题： 

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

这些问题直接带来开发得是否够快，系统是否够健壮，系统是否易扩展，是否易维护等等。 
为此，在Tiny框架中，咱们设计了整套的UI开发方案，与具体的技术实现无关，能够兼容各类现有或将来的JS,CSS框架。同时，对于上述的问题，也都有良好的思考及解决方案，可谓是界面开发的终极解决方案。 
那么，Tiny框架的UI解决方案是怎样的呢？ 
1、规范化，若是没有一个规范，那么全部的期许都没法落地。 
Tiny中规范中认为全部共用的内容都是一个UI组件包。UI组件包，由一个Jar工程组成，UI组件名最后以Jar名为单位进行发布。UI组件包中包含了其所需的css/jss/gif/htm等等各类资源。同时有一个UI组件包描述文件，对UI组件包的结构、内容、以及对其它UI组件包的依赖关系。 
好比：咱们要复用JQuery，实际上很是简单，在Maven工程结构中，在resources目录中，放置全部的JQuery资源进来，而后编写一个ui组件包描述文件。UI组件包就算开发完毕了。 
 

090443_cEg9_1245989.jpg (9.32 KB, 下载次数: 0)

下载附件

2015-5-27 21:03 上传

 

  
再看看UI组件包描述文件 

1 2 3 4 5 6

<ui-components>     <ui-component name="Jquery" order="99">         <js-resource>/jquery/js/jquery-1.9.1.min.js</js-resource>         <js-debug-resource>/jquery/js/jquery-1.9.1.js</js-debug-resource>     </ui-component> < /ui-components>

UI组件名描述信息，包含UI组件名名称，这里是JQuery，引入顺序，这里指定是99，固然，在大多数状况下，你都不须要指定它。这里指定了调试和非调试模式下引入的JS。这样，在实际运行时，能够根据运行模式来统一进行引入，而这个过程再也不须要程序员干预。  OK，mvn install以后，第一个UI组件包就开发好了，很是简单吧? 
2、引擎支持 
引擎要作内容就很是多了，这些js/css/img资源都是放在Jar包中的，在工程运行过程当中，须要访问到这些文件，引擎提供了访问Jar包中文件的能力，提供了css/js文件合并，提供根据运行模式引入调试或非调试JS或CSS的能力，提供文件缓冲以提速访问，提供压缩以缩小网络传输量，等等等等。固然，这些都至关有难度，但这正是框架要解决的问题，对于程序员来讲，与平时所作的内容惟一不一样就是须要配置一个UI描述文件。用如此小的付出换来如此多的便捷，投入产出比仍是至关高的。 
3、模板化支持 
咱们都知道不论是html,xml,wml等等，实际上都是文本内容，都是一些标记语言。所以，均可以经过一些模板语言来进行生成，咱们常说的asp,aspx,jsp,php等等，实际上均可以认为是模板语言。 
Tiny框架由于提供了良好的模块化组织方式，展示层的内容也是能够放在jar包中的，所以，再也不推荐使用jsp做为展示层(在某些容器如：tomcat,jetty，也是能够放入的，可是在Weblogic,Websphere等容器下，因为其没有遵循接口编程规范，而是使用了类型强转，因此没法进行处理)。另外，因为jsp自身的特殊性，实际上它最后是以Servlet形式存在，因此可控性稍差，虽然经过处理能够对其进行控制，可是投入产出比不高。因此，Tiny框架并不排斥，使用jsp，可是只能放在war中使用。带来的问题就是展示层没法模块化。（关于模板化的相关问题不在此说明，参见相关博文）。 
所以Tiny推荐采用模板语言,如：Velocity,FreeMaker等做为展示层。Tiny内部实现复用了Velocity，可是实际上并无限制，你彻底能够用其它模板语言作一样的事情。 
Tiny的模板体系组织方式以下： 

• 支持多层文件结构
• 布局文件统一用.layout扩展名结尾
• 页面文件统一用.page扩展名结构
• 只有.page文件能够被外部访问，访问方式有两种.page或.pagelet

Tiny的模板渲染方式为： 
若是访问aa.pagelet，则会读取aa.page中的文件内容，并用velocity引擎进行渲染后输出 
若是访问aa.page，则会读取aa.page中的文件内容，并用velocity引擎进行渲染，可是此时会作布局渲染 
好比：aa.page所中的路径是/a/b/c/aa.page，布局的渲染过程以下： 
查找/a/b/c/aa.layout是否存在？若是存在，则渲染，不然查找/a/b/c/default.layout，若是存在，则渲染。 

查找/a/b/aa.layout是否存在？若是存在，则渲染，不然查找/a/b/default.layout，若是存在，则渲染。 
查找/a/aa.layout是否存在？若是存在，则渲染，不然查找/a/default.layout，若是存在，则渲染。 
查找/aa.layout是否存在？若是存在，则渲染，不然查找/default.layout，若是存在，则渲染。 
经过上面的渲染机制，程序员有可能只写了很是少的内容，可是经过分层布局渲染，最后出来的效果也会很是丰富多彩。 
这样说说，可能很难理解，咱们来看个例子，程序写的例子是：demo.page。 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

#@homepage() #@faq("演示列表") #@servicesItem("idea") HelloWorld #end #@servicesItem("design") 四则运算 #end #@servicesItem("apps") 简单数据维护 #end #@servicesItem("mobile") 站内邮件系统 #end #end #end

运行结果以下：    

094317_1z8J_1245989.jpg (82.58 KB, 下载次数: 0)

下载附件

2015-5-27 21:03 上传

 

  可能看了有些云里雾里，可是无论怎么样，你看到了，只要写很是少的内容，就能够出来很是多的结果。 经过布局的支持，程序员不用管js，不用管css，不用管header,footer，不用管页面结构，只用管本身的那点事儿，就能够了。 国际化，可能对于小型我的网站来讲，无所谓，可是对于大型企业来讲是常常要用到的。TinyUI展示框架对国际化有良好支持，支持国际化资源方式国际化和国际化页面国际化两种方案。 国际化资源就很容易理解了，添加国际化资源文件，用国际化标签进行引用便可。国际化页面是指一样访问aa.page，在对其渲染时，会优先使用与访问者相同的语言的文件进行渲染，好比：存在aa.page，aa.zh_CN.page，若是非zh_CN语言的人来访问，渲染的是aa.page，zh_CN语言的人来访问，渲染的是aa.zh_CN.page。两种方式总有一款适合你。 小结： Tiny框架的前台开发，基本上帮助你解决了全部的难题，可是对你的工做没有任何限制，你能够用你想用的任何展示框架，作任何基于脚本语言的展示。固然还远远不止这些，框架还提供了缓冲功能，只要增长一点配置，就能够设定哪些页面进行缓冲，缓冲多长时间，等等。更多的好处与便利，须要你亲身体会。