交流web上的UI组件，我来开个头

Ajax相关问题大家讨论很多了，但看不到关于各位自己开发UI组件的介绍。我来开个头吧，希望能看到更有创意的UI组件可供大家相互学习。
附件中包含了我开发的一些组件，这些组件都已经在项目中正式使用了。其中的tree,grid,list等都已经比较完善了，SigmaForm这块还不完善。
各组件的介绍如下：
tree：树型结构数据展示与操纵组件，该组件的特点是：只画需要展示的dom对象，最初只展示第一层节点，然后你打开哪个节点的时候展示哪个节点。这样就大大提高了组件载入的速度。

grid组件：这是一个表格显示和编辑组件，这个组件允许你定义每一列的字段类型，根据字段类型来显示单元格内容。每行数据对应一个js对象，整个grid的model是一个js对象数组。声明列的时候要把该列的名称和对象中的某个属性名对应起来，列名的申明支持对象嵌套。假如某列显示订单的客户的名称，你可以把列名申明为：customer.name，多层的嵌套也是允许的。列上面还可以声明监听器，监听valueChange等事件。grid可以根据列上声明的值类型来选择某个cell的编辑器。详细功能请看附件中源代码。


list组件：list组件与grid组件很类似，差别在于list组件不具备编辑功能，但性能大幅提高。它能让你在2秒内载入6000个对象到表格中来显示。它可以响应选择相关的事件。

SigmaForm组件：这个组件用来包装普通的form，经过包装的form可以在input上申明值类型（form根据值类型选择编辑器，假如你申明某个input是date类型，单击这个input会弹出日历控件供你编辑日期）、是否允许为空等。它还能绑定一个js对象（假如你像我一样有一个从实体到js对象的转换工具，js对象可以随手拈来了），把对象的各个属性赋值到form中。

不罗嗦了，大家看附件吧。附件中包含了所有组件的演示html。

不错，但是tree,grid是各个组件都有的功能，能否介绍下功能特点或构架不同的地方

大部分功能特点我已经在上面提到了，详细地你可以再看一下rar文件中的html文件，html演示了如何在普通页面文件中如何使用组件、如何绑定数据以及操纵数据。没有仔细了解过其他的组件，不能给你详细的与其它组件的比较。你还可以从包里面看到组件的未经混淆的源代码，仔细看看，你能看到你所需的信息。

不错 不过有个小bug 在grid中改变列宽度的时候 那个鼠标箭头不大对 有时一直是左右拉的状态

这块处理的确有问题，现在是在表格上设置了鼠标事件监听器，而不是body上的，一旦鼠标移动到表格之外并松开鼠标，组件的行为就有点诡异了。有时间的话我会改一下这个问题，把事件监听设置在body上就行了。

好象以前有一个类似的帖子，回的人不少，LZ可以翻翻看。

找到以前一个帖子：
http://forum.iteye.com/viewtopic.php?t=8646&postdays=0&postorder=asc&highlight=%D2%B3%C3%E6&start=0

一个基于 HTML 的 Rich Client 框架需要哪些内容？
http://www.primeton.com/index.htm

1、我不大赞同dlee以前（现在dlee未必还是那样做的）的观点："控件中的大多数都需要结合后台的 Java 组件的配合"。我觉得纯粹的界面组件使用起来更灵活。比如我的这些组件，可以很方便的和多种现有的MVC框架结合(比如ww)，还可以和dwr这类ajax框架集成。界面组件只处理已经到达浏览器的数据，而不应知晓任何服务器端的信息，如果需要，那也应在界面中用xmlhttprequest以及js把服务器端数据和组件粘合起来，而不应该在组件内部实现。

2、关于普元的web构件，稍微了解了一下应该也是和后台紧密集成的那种。而且我不知道是否能够修改其中的Web组件源代码。这两个问题都是我们不可接受的。

3、为什么没有用现有的开源组件呢？因为我看到的开源组件都没能满足我的要求，以我们使用的grid组件来说，他不仅仅是展示一个对象集合并且设置列宽之类的功能，还包含了丰富的编辑功能。在我们的订单录入界面中，有这样一些特点：a. 列可以设置值类型，还可以设置格式化是所用格式。比如：mode:"number",format:"#.000"。b.列上可以设置监听器，各种监听器让我们达到这种效果：鼠标双击产品名称单元格的时候，监听器弹出产品选择对话框，供用户选择产品；如果在产品助记码单元格输入助记码，监听器弹出与该助记码匹配的产品列表供用户选择。

关于普元的web构件中的UI部分，我了解点，说两句。

UI部分构件是是一组JSP扩展Tag，也就绑定了相应的普元应用服务器；不过其UI构件比较全面，而且跟服务器传递数据配合得很好，当然这也就需要一定量的学习成本了。

如果是普通的小型商业应用，不推荐使用普元的web构件；除非你全部使用普元的东西，或者普元把web的UI部分单独抽取出来开源并免费。

我的感觉是dlee说的有他道理，当然也不能说后台就只有单一的Java，还有很多其他后台嘛。但是纯粹的界面组件感觉也只能纯粹了。

我想到一个问题：Browser端需要MVC(Mb, Vb, Cb)，但同样Server端也需要MVC(Ms, Vs, Cs)，而且两层的MVC需要进行结合起来，这就有很多种方案了，譬如：

1. Mb <-> Ms
中间传输的是数据，也就是服务器不知道页面控件如何生成的（实际上是脱离服务器端编写的网页表格），服务器端只是处理数据然后跳转；Writely等在线编辑文档算是这类模式；很多的框架都应该是这个模式吧；另外这也是目前AJAX兴起的主要模式？
2. (Vb, Cb) <-> (Vs, Cs)
这个模式是服务器生成对应的页面控件，而且还生成对应的控制代码，譬如如何提交数据等，服务器后台重新组装数据成为Model，这个不知道普元的EOS算不算如此模式，同时JSF应该也算这类模式，另外ZK也算这个模式的；这个模式的框架也不少
3. (Mb, Cb) <-> (Ms, Cs)
这个模式存在吗？我感觉我做过一个类似的产品。也就是服务器根据一套XML文件，生成一套包含布局的Web表格，然后生成对应Schema的XML数据文件；浏览器端可以进行表格填写，或者调用Applet来进行数字签名或验证签名；之后浏览器端重新封装数据为XML文件，并返回给服务器端处理；服务器端可以验证其中的签名，并提取其中的数据保存到服务器端
4. (Mb, Vb, Cb) <-> (Ms, Vs, Cs)
这个我没有想到什么？可能其中的组合太多太复杂了，好像很多框架都算得上，但有都算不上？
5. (Mb + Ms, Vb, Cb + Cs) <-> (Mb + Ms, , Cs)
这个算一种模式吗？是否有必要存在如此的模式？能够提供开发效率吗？
6. (Mb<->Ms, Vb<->Vs, Cb<->Cs)
理想的模式？

不知道大家是否认识更多其他模式，或者认为以上模式根本上就不算什么模式，或者认为其中框架归类错误？