Gwt第三方组件、框架介绍

虽然是晚上，但是手头还是有很多事情要做，但是杂乱无章，自己也没有特别的计划，于是信步闲逛到javaeye上随手涂鸦。见谅见谅！

介绍一下我接触过的Gwt第三方组件、框架及项目

1． Mygwt
曾经的大名鼎鼎的gwt第三方框架，在某些gwt框架的排名中排名第一。这个框架完全用gwt的方式实现了ext-js的功能，不依赖于ext-js的js脚本，突出功能点是布局、菜单、树和table组件。但不幸的是没有到1.0版就夭折，变成了ext-js下面的一个子项目ext-gwt。
曾经的网址：http://mygwt.net
特点：做出的UI和ext-js一样，但底下的代码却是java。

2． Gwt-ext
这个也是比较流行的gwt第三方的框架。用官方的话说：它是一个强大的组件库，提供可排序、分页和过滤功能的grid，提供可以拖拽的树，还有Tab Panels, Menus & Toolbars, Dialogs, Forms等等。其实只要ext-js提供的，它就可以提供，因为它的底层是ext的js脚本，而不是java，这是和mygwt的最大区别。由于ext-js最近更改了license，弄得作者郁闷了好一阵，最新的代码都是基于ext-js2.0.2的。
网址：http://code.google.com/p/gwt-ext/
特点：基于ext-js，外面套了一层java的外套，最大的麻烦是从服务器端得到的oo data，要变成js可接受的data 格式，比如数组。最大的优点是如果你对ext-js那个地方不了解了，看看它的demo吧。


3． Ext-gwt
看到这就有些伤心，曾经的mygwt啊。在mygwt刚刚拥有了新的form组件的时候，ext-gwt诞生了，而mygwt则消失了。：（。这个框架相比mygwt最大的区别是form组件。正式发布的mygwt没有form组件，另外对一些组件的功能作了细化，比如panel的左右伸缩。内部包名当然也全都变了。
网址：http://extjs.com/products/gxt/
特点：和新的ext-js一样的license限制。


4． hibernate4gwt
顾名思义，这个项目是为了整合hibernate和gwt的。对gwt不了解的同志可能会有疑问，这个有什么？那我简单说几句吧。Gwt是可以把java代码编译成js的代码，但也有限制，只能局限于jdk的一些核心代码，其他非gwt的第三方的代码gwt是不能直接使用的。而hibernate有几个明显的限制：通过hibernate查询到的集合是hibernate自己定义的对象，Lazy的对象不能取到，date属性的类型是sql的date，等等，这些都是不能在gwt中，或者说在gwt的客户端上面使用hibernate的pojo的阻碍。一般的解决办法是做一个中间转换处理（pojo—）vo），而hibernate4gwt则完全解决了这些问题，并且lazy的属性也可以取到（在客户端），这个可比opensessioninview强多了。
网址：http://hibernate4gwt.sourceforge.net/
特点：hibernate4gwt permits you to use your Hibernate POJO (and especiallay the partially loaded ones) in the GWT client side code without pain.
另：由于和spring做了集成，配置起来稍显复杂。

5． google-web-toolkit-incubator
gwt开发团队的另外一个项目，主要集中于gwt的组件方面。官方说这些组件以后会放到gwt的核心包里面。有详细的组件设计文档和社区支持。这里面有好多好玩的组件，比如：GlassPanel 、DatePicker、PagingScrollTable 、 ProgressBar、StyleInjector 等等。
网址：http://code.google.com/p/google-web-toolkit-incubator/
特点：学习gwt组件的好地方。

6． gwt-validator
一个简单的gwt交验框架。对gwt提供的form组件作了简单的整合，提供正则表达式的校验。
网址：http://code.google.com/p/gwt-validator/
特点：如果你想写一些校验的代码，参考一下吧。

7． gwt-dnd
一个基于gwt的提供拖拽功能的框架。可以给组件增加拖拽的功能，它的demo中有可以拖拽的下拉列表、table的行列、图片等等。还可以对树table进行拖拽，真是强啊。
网址：http://code.google.com/p/gwt-dnd/
特点：想给自己的组件加上拖拽的功能吗？就是它了。

8． Gchart
这个偶尔看过，但是没有用过。不多说了，贴个图吧。



网址：http://code.google.com/p/gchart/


9． Lotura
这个和前面的都有些不同，它是一个提供gwt的model和gwt 的UI进行binding的框架。简单来说，就是在一段html的form上面，不再需要手工一个值一个值的将model的各个属性对应到form的各个组件中了，也不需要在提交form的时候，一个值一个值得组装model了。高深一点的说，model要加个属性吗？那就加吧，Lotura会知道如何将该属性在ui上显示的。
网址：http://code.google.com/p/lotura/
特点：好久不更新了。

10． Uface
按照JFace Data Binding 的设计实现了对 GWT, gwt-ext, MyGWT 和 Swing的模型绑定.
网址：http://code.google.com/p/uface/
特点：有深度。

11． gwt-widgets
很老的一个关于gwt的widgets框架，涉及client端的组件库和server端的spring整合。Gwt刚一出道的时候它就存在了，提供很多组件，比较突出的有canvas的组件，还有一个对非常有名的一个date组件的warpper的东东。Server端将spring和gwt的service做了整合，有兴趣可以看看。
网址：http://gwt-widget.sourceforge.net/
特点：老牌的gwt框架

12． gwt-google-apis-1.0.0
可以通过gwt对google的一些服务进行访问的api的一些代码。主要包括：Gears 1.1 Library (Release Candidate)、Gadgets 1.0 Library (Release Candidate)、Google AJAX Search 1.0 Library (Release Candidate)、Google Maps 1.0 Library (Release Candidate)
网址：http://code.google.com/p/gwt-google-apis/
特点：相当于gphone上andriod。

13. GWT Reflection

由于gwt不支持反射，导致一些java的高级功能不能在gwt中使用。但是有个这个GWT Reflection框架，gwt的开发者可以欢呼雀跃了。

网址：http://gwtreflection.sourceforge.net/


14. gwt-mosaic

Gwt-Mosaic是一个主要由gwt标准的控件实现的一个widget lib demo。非常适合初学者学习和参考
除此之外，它还引用了gwt-incubator、gwt-dnd、GWTx、gwt-beans-binding等第三方的gwt框架，针对不同的框架都有实现的demo。也可以说是一个gwt 的组件综合性研究所。

网站地址：http://code.google.com/p/gwt-mosaic/
demo地址：http://69.20.122.77/gwt-mosaic/Showcase.html
组件列表：

有没有GWT数据绑定的框架啊，用起来会方便一些。

講的非常詳細，很有用的資料，謝謝你。
可否貼一個程式例子說明Gwt自訂組件，跟第三方JS UI的差異性
因為到現在我還是搞大太清楚，還有用Gwt自訂組件的優缺點
對於使用Gwt有什麼的建議，謝謝。

关于gwt数据绑定的框架，可以参考

1.[url]http://code.google.com/p/lotura/ [/url]
2.[url]http://code.google.com/p/uface/ [/url]
3.http://code.google.com/p/gwt-model/

gwt数据绑定的关键点在于model的反射，虽然gwt的核心包不支持，但是我们可以利用GWT reflection http://gwtreflection.sourceforge.net/来实现gwt的反射


下面是在一篇帖子中的回答，见http://www.iteye.com/topic/123620

gwt自定义组件和普通的js 组件的区别：
1.使用gwt定义组件，你可以最大化的发挥你的java的、oo的经验
2.如果你的js水平一般，那么用gwt将使你轻松迈过js的门槛，完成js的组件是一件轻而易举的事情（gwt的最终也是把java变成了js）
3.调试，这个永远是js的痛处，而在gwt的host模式下，你可以设置断点进行跟踪和调试，而且gwt提供的log，在host模式下会输出log信息，但在web模式下（编译成js后），gwt的log将被过滤掉。
4.默认情况下gwt产生的最终的js组件是混淆过的，你可以不必采用其他混淆的工具了
5.另：http://code.google.com/p/gwt-exporter/，这个框架可以将你的gwt的组件导出成普通的js组件

关于gwt的建议，参考http://www.iteye.com/topic/254254

謝謝你的回答


可是在google-web-toolkit-incubator中自訂組件我還是不懂，需要寫很多嗎

例如FixedWidthFlexTable的JAVA代碼:

private static class FixedWidthFlexTableImplFirefox extends
      FixedWidthFlexTableImpl {
      public void setColumnWidth(FixedWidthFlexTable grid, int column, int width) {
      ...... 
      }
}
private static class FixedWidthFlexTableImplIE6 extends
      FixedWidthFlexTableImpl {
      public Element createGhostRow() {
      ....
      }
      public void setColumnWidth(FixedWidthFlexTable grid, int column, int width) {
      ......
      }
}

在IE與Firefox在setColumnWidth方法中都寫的不一樣，這樣要如克服呢？

单独发了一个帖子介绍gwt的延迟绑定，可以参考http://www.iteye.com/topic/254981这个可以解决你遇到的问题



gwt是基于java的所以不可避免的带来了java的一些特点，不如脚本语言灵活。关于写一个组件可能会写许多代码的解决方案
1.如果有类似的组件，可以考虑继承；
2.如果功能比较单一，可以考虑直接使用html（比如使用htmlpanel）；
3.还有一个第三方的框架,一时记不清名字了，他在组件组装方面采用了一种不同的方式；
4.还可以基于template，参考http://code.google.com/p/gwt-templates/

說明的很清楚，謝謝你。

请教stone一个问题：
tabpanel中的tab多了以后，tabbar越来越宽，无法控制，弄得页面很难看，不知道有没有简单的解决方法。

参考extjs的实现，他在右边多了一个滚动tab窗体的按钮。相关gwt的第三方框架为ext-gwt和Gwt-ext 。

原理如下：
在gwt的tabpanel中，每次增加tab时都做监听，判断当前所有显示的tab头的宽度是否超过了窗体的宽度，如果超过了，则显示一个可左右选择的按钮，按钮的动作就是：如果看后面被隐藏的tab窗体，则把第一个tab的标题隐藏掉，如果看前一个窗体，则把最后一个tab标题隐藏掉