Web前端框架 界面UI框架调查说明

框架简介

ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。

授权协议：GPL

开发语言：JavaScript

演示Demo地址：http://www.sencha.com/products/extjs/examples/

框架说明

ExtJs 前台数据显示采用的JSON形式的数据格式

示例

{"total":239,
"rows":[
{"code":"001","name":"Name 1","addr":"Address 1","col4":"col4 data"},
{"code":"002","name":"Name 2","addr":"Address 2","col4":"col4 data"}
]}

这种格式的数据与目前系统框架Hibernate本身的实体查询和Struts的Form绑定有很大的出入，系统如果引用类似的框架对系统本身改动较大，但是相对于其他前台框架此框架比较成熟学习文档资料比较多，对于解决问题时查询比较方便。

Easy UI

框架简介

jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，window等等。

授权协议：GPLv3

开发语言： JavaScript

演示Demo地址：http://www.jeasyui.com/demo/index.php

框架说明

EasyUi 的dataGrid 与java后台数据交互也是采用json系统采用此框架的最大难点与1.3相同，一般采用此框架的系统主要采用的前台EasyUi jsp 文件与js文件一对一，界面大多功能在对应JS中编写，并采用AJAX方式进行提交，后台多采用STRUTS2 数据层用IBAITS 和 Hibernate等。EasyUi 相对成熟度比ExtJs略有不足，一些相对复杂的功能在实现时查找资料比较麻烦一些。

Liger UI

框架简介

jQuery LigerUI 是基于jQuery的一系列UI控件组合，简单而又强大，致力于快速打造Web前端界面解决方案。 因为是前端控件，跟服务器无关，可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有100K左右,很轻巧。使用插件式的开发模式，以“简单”为原则的设计，每个插件尽量独立，并可依赖拓展。
jQuery LigerUI控件丰富，包括基础、导航、布局、表单、表格、树形、窗口等

授权协议： Apache
开发语言： JavaScript

演示Demo地址：http://www.ligerui.com/

框架说明

Liger UI dataGrid 与java后台数据交互也是采用json系统采用此框架的最大难点与1.3相同，相对于前两个使用此框架的不多，所以导致教程信息比较少，仅官网发布的一些教程。

Kendo UI

框架简介

KendoUI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。
Kendo UI包含了开发现代JavaScript开发所需要的所有一切，包括：强大的数据源，通用的拖拉（Drag-and-Drop）功能，模板，和UI控件。
Kendo UI 又名剑道UI 是国外Telerik公司开发，支持WEB网站开发和移动互联网开发，同时还有类似数据统计的图展示。

授权协议： GPLv3
开发语言： JavaScript HTML/CSS

演示Demo地址：http://demos.kendoui.com/web/overview/index.html

框架说明

与其他Jquery框架一样前台DataGrid数据与后台交互一样采用的是JSON形式，优点是功能比较强大，界面显示采用了HTML5的玻璃体元素，用户体验更友好，同时还有数据统计显示饼图等

缺点技术资料比较少

Flex

框架简介

Adobe® Flex® 3 是用于构建和维护在所有主要浏览器、桌面和操作系统一致地部署的极具表现力的 Web 应用程序的高效率的开放源码框架。 可以使用免费的 Flex SDK 构建 Flex 应用程序, 开发人员可以使用 Adobe Flex Builder™ 3 软件来显著促进开发。
Flex是开发富互联网应用程序（Rich Internet Application，缩写为RIA）的利器，目前已广泛应用于各种商业领域，如电子商务、行政管理，企业业务流程自动化等方面。
不仅是传统的Flash开发人员，还包括越来越多的Web开发人员，都开始注意到Flex这一富有活力的新技术，2007年，“Flex”成为Web应用中被谈论得最多的词汇。

授权协议： 免费，非开源
开发语言： ActionScript

演示Demo地址：http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

框架说明

Flex与java交互有一套协议，使用Flex需要在原有的系统上引入Flex SDK 由Java端将数据发送给Flex，由Flex的类 .as文件对数据进行重新整理，也可以在flex端进行业务逻辑编写，编写完毕发送给页面，好处是界面编写简单，技术相对成熟API比较详细，缺点Flex有它自己的一套语言需要重新学习，对于程序代码质量较高，需要比较好的优化，由于页面生成后为swf文件，长期使用如果优化不好会导致程序响应缓慢。