UI开发的终极解决方案

呵呵，有点标题党的意思，但是如果你正在寻找UI解决方案，你一定不会白来的。

虽然没有直接开发前台界面，但是好呆也看了这么些年，碰到许多关于UI的问题：

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

这些问题直接带来开发得是否够快，系统是否够健壮，系统是否易扩展，是否易维护等等。

为此，在Tiny框架中，我们设计了整套的UI开发方案，与具体的技术实现无关，可以兼容各种现有或未来的JS,CSS框架。同时，对于上述的问题，也都有良好的思考及解决方案，可谓是界面开发的终极解决方案。

那么，Tiny框架的UI解决方案是怎样的呢？

一、规范化，如果没有一个规范，那么所有的期许都无法落地。

Tiny中规范中认为所有共用的内容都是一个UI组件包。UI组件包，由一个Jar工程组成，UI组件名最后以Jar名为单位进行发布。UI组件包中包含了其所需的css/jss/gif/htm等等各种资源。同时有一个UI组件包描述文件，对UI组件包的结构、内容、以及对其它UI组件包的依赖关系。

比如：我们要复用JQuery，实际上非常简单，在Maven工程结构中，在resources目录中，放置所有的JQuery资源进来，然后编写一个ui组件包描述文件。UI组件包就算开发完毕了。

再看看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组件包就开发好了，非常简单吧?

二、引擎支持

引擎要做内容就非常多了，这些js/css/img资源都是放在Jar包中的，在工程运行过程中，需要访问到这些文件，引擎提供了访问Jar包中文件的能力，提供了css/js文件合并，提供根据运行模式引入调试或非调试JS或CSS的能力，提供文件缓冲以提速访问，提供压缩以缩小网络传输量，等等等等。当然，这些都相当有难度，但这正是框架要解决的问题，对于程序员来说，与平时所做的内容唯一不同就是需要配置一个UI描述文件。用如此小的付出换来如此多的便捷，投入产出比还是相当高的。

三、模板化支持

我们都知道不管是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

运行结果如下：

可能看了有些云里雾里，但是不管怎么样，你看到了，只要写非常少的内容，就可以出来非常多的结果。

通过布局的支持，程序员不用管js，不用管css，不用管header,footer，不用管页面结构，只用管自己的那点事儿，就可以了。

国际化，可能对于小型个人网站来说，无所谓，但是对于大型企业来说是经常要用到的。TinyUI展现框架对国际化有良好支持，支持国际化资源方式国际化和国际化页面国际化两种方案。

国际化资源就很容易理解了，添加国际化资源文件，用国际化标签进行引用即可。国际化页面是指同样访问aa.page，在对其渲染时，会优先使用与访问者相同的语言的文件进行渲染，比如：存在aa.page，aa.zh_CN.page，如果非zh_CN语言的人来访问，渲染的是aa.page，zh_CN语言的人来访问，渲染的是aa.zh_CN.page。两种方式总有一款适合你。

小结：

Tiny框架的前台开发，基本上帮助你解决了所有的难题，但是对你的工作没有任何限制，你可以用你想用的任何展现框架，做任何基于脚本语言的展现。当然还远远不止这些，框架还提供了缓冲功能，只要增加一点配置，就可以设定哪些页面进行缓冲，缓冲多长时间，等等。更多的好处与便利，需要你亲身体会。

时间： 2024-03-01 02:54:15

UI开发的终极解决方案的相关文章

c++-C++ UI开发 界面开发 窗口开发

问题描述 C++ UI开发 界面开发 窗口开发 自学C++的,目前都是照着书本写程序的,书上从win32 API开始讲解,然后讲MFC 很简略,所以我只会用Winmain(win32 API)写很简单的窗体,但是win32 api写 窗口很丑,而且学win32 API主要是打基础,了解程序的运行方式, 然后呢MFC书本讲的很简单,找不到书也找不到相应MSDN, win32 API好歹有个MSDN 所以呢,C++UI开发有哪些软件呢?我要所有的软件名字好有个概念,然后求推荐其中哪个好用 解决方案

Android软键盘挡住输入框的终极解决方案_Android

前言 开发做得久了,总免不了会遇到各种坑. 而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑--来来来,我们慢慢看. 入门篇 最基本的情况,如图所示:在页面底部有一个EditText,如果不做任何处理,那么在软键盘弹出的时候,就有可能会挡住EditText. 对于这种情况的处理其实很简单,只需要在AndroidManifest文件中对activity设置:android:windowSoftInputMode的值adjustPan或者adjustResize即

VS2010“当前不会命中断点。还没有为该文档加载任何符号”寻觅终极解决方案

问题描述 问题如图中所示,在网上找了多种方法依旧无法解决,项目的的确确是在dubug模式下运行的,可有的代码就是无法被断点命中,调试起来诸多不便. 解决方案 解决方案二:关闭vs重新打开再试试.解决方案三:是附加到进程调试的时候出现的?那得重新再弄下,或者关闭在看下解决方案四:此问题源于我对自己做的项目的无知所致,之前是做j2ee开发的,公司几年前的项目需要升级,无奈在学校里学了些.net,就交给我升级,不料对.net确实有许多不懂的地方.以前发帖总是石沉帖海,这次有幸被回答,非常感谢!我的终极

让UI开发轻松而快乐，用SonicUI引擎实现常见UI效果

作为windows工程师,UI开发是无可避免的工作,无论你是写一个供销存系统,还是一款聊天IM,UI开发总是会占据你大量的时间.前段时间在公司开发项目中,带着些许私心实现了一个构想了较长时间的UI引擎,自已在使用过程中感觉极大的加快了UI开发的效率,希望与大家分享,并用大家的建议来不断完善. 接下来将以几个在实际工作中常见的UI开发问题为例,介绍实现方法及效果,相信这几个问题能引起客户端UI开发同仁的共鸣. 1.多格式图片支持 2.文字和超链接 3.自绘按钮 4.脏处理与区域刷新 5.异形窗体(

静态页转换平台(StaticPol)－静态页生成终极解决方案

为什么要生成静态页? 这个问题咱们就不多说了,他的优点只有一个,大大提高网站性能,对于数据量大.访问量大的网站不采用静态页输出的解决方案,恐怕真受不了了.缺点就不说了,一 大堆....不过单这一个优点就值得我们研究一番.下面咱们讨论一下静态页生成方案的常规处理方式和 StaticPol 灵活的处理方式,对他们进行一个比较. 说他是一个平台的理由: 常规方式:在每个程序中为静态页生成写相应的模块(程序),执行对应的更新,而且一般都是手动更新(首页.分类页.信息页),好麻烦,即使是定时更新,也要写

Android UI开发专题(二) 之绘图基础

在Android UI开发专题(一) 之界面设计中我们介绍了有关Android平台资源使用以及Bitmap相关类的操作,接下来将会以实例的方式给大家演示各种类的用处以及注意点.今天我们继续了解android.graphics包中比较重要的绘图类. 一. android.graphics.Matrix 有关图形的变换.缩放等相关操作常用的方法有: void reset() // 重置一个matrix对象. void set(Matrix src) //复制一个源矩阵,和本类的构造方法 Matrix

车载嵌入式系统开发的新解决方案

尽管汽车产量可能会在未来的几年增长缓慢,但嵌入式电子设备和更精确的嵌入式软件这一部分的产量正在增长.找出车载嵌入式系统开发的新解决方案是法国EEA(嵌入式电子架构)合作研究和开发计划 "AEE"的目标.其获得的成果有:嵌入式组件级别的识别.一类嵌入式架构的详细说明,并且定义了一种陈述性语言. 现在,嵌入于汽车内的功能包括辅助制动.主动悬架.转向功能性等.它们都受严格的时间约束,更笼统地说,是受可靠性的约束.在不远的未来,随着电控X (X-by-Wire)技术的普及,这些约束会变得更加重

Android的ui开发类库 GreenDroid

问题描述 本帖最后由 天使牛 于 2015-2-22 18:28 编辑 GreenDroid是一个Android的ui开发类库,能够使你的ui开发更加简便.EasyREST_API.zip

c#开发 如何遍历解决方案中（项目中）所有的FORM类（不是所有OPEN的form）

问题描述 c#开发如何遍历解决方案中(项目中)所有的FORM类(不是所有OPEN的form) 解决方案 解决方案二:varformTypes=Assembly.GetExecutingAssembly().GetTypes().Where(t=>typeof(Form).IsAssignableFrom(t)).ToList();