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
组件列表：

评论

18 楼 crazywan 2008-11-28  

smartgwt好像有自己的js脚本！感觉不是纯java的gwt！不过很多控件的设计思想还是很不错的！

17 楼 stone 2008-11-25  

windflee 写道

stone,用过smartgwt没有，觉得这个怎么样

引一段作者的原话吧，等有时间研究一下再发表自己的看法．

引用

So what's so smart about SmartGWT? Let me try to explain. SmartGWT is not just another Widget library. While most Ajax frameworks focus primarily on presentation and displaying mostly read-only data, either local or via XML / JSON, SmartClient was built with server side integration in mind. Most enterprise applications are not just about about data presentation, but about being able to propagate data changes made by the user to the backend. So while its tempting to use library X that has a cool tree widget, it's not until you actually try to use it your application that you encounter the real world hard problems. For example, how do you take data from your business objects on the server to not only display in a tree widget, but also be able to update your data model when, say, the user reorders the tree nodes or make edits / deletes in the UI. How do you display hierarchical data where nodes may have hundreds of children? And so on..

引用参考http://www.jroller.com/sjivan/entry/smartgwt_1_0_released

16 楼 windflee 2008-11-25  

stone,用过smartgwt没有，觉得这个怎么样

15 楼 suan2046 2008-10-31  

不错，关注！

14 楼 abo 2008-10-29  

谢谢stone.

13 楼 dan 2008-10-28  

stone 写道

如果对组件的美工要求不高的话，我还是喜欢自己开发组件的 

你真的很強，不知我要學多久才能深入了解，謝謝你的回答，我會按照你所說的學看看，謝謝你

12 楼 stone 2008-10-28  

dan 写道

我發現GWT-EXT是使基於Ext-js，而EXT-GWT是基於GWT方式所實現，可是在EXT-GWT核心部份仍然用
自己自訂的核心，在EXT-GWT很多都用com.extjs.gxt.ui.client.core.Template實現組件，好像GWT
各種所廷伸專案項目所訂制的組件方式都不一樣，還有發現寫一個組件必須用比較多的代碼，即使
初步了解GWT，可是在深入了解的階段，好像比較難了解的。

一、能不能提供學習的流程，比如先學GWT-EXT再學其它框架諸如此類方式。

二、還有現在基於GWT的架構組件那麼多，你在開發時還會自己寫組件嗎？

謝謝。

使用gwt-ext和ext-gwt的好处是你有好多组件可以使用，尤其是布局组件、树、表和form，通过这些组件基本上可以搭建自己的应用，而无须自己定义太多的组件。但EXT-GWT的组件设计的比较复杂，从学习的角度还是建议从gwt自己本身的组件开始（简单而实用），然后可以看看incubator和gwt-widgets。看他们的demo是最好的学习途径，
参考http://code.google.com/webtoolkit/examples/
http://www.gwtchismes.alcala.org/GWTCSample.html
gwt in practice的代码http://code.google.com/p/gwt-in-practice/

另外，如果对组件的美工要求不高的话，我还是喜欢自己开发组件的 

11 楼 dan 2008-10-28  

我發現GWT-EXT是使基於Ext-js，而EXT-GWT是基於GWT方式所實現，可是在EXT-GWT核心部份仍然用
自己自訂的核心，在EXT-GWT很多都用com.extjs.gxt.ui.client.core.Template實現組件，好像GWT
各種所廷伸專案項目所訂制的組件方式都不一樣，還有發現寫一個組件必須用比較多的代碼，即使
初步了解GWT，可是在深入了解的階段，好像比較難了解的。

一、能不能提供學習的流程，比如先學GWT-EXT再學其它框架諸如此類方式。

二、還有現在基於GWT的架構組件那麼多，你在開發時還會自己寫組件嗎？

謝謝。

10 楼 stone 2008-10-27  

abo 写道

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

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

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

9 楼 abo 2008-10-27  

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

8 楼 crazywan 2008-10-24  

楼上的图片很亲切！楼主提供的资料很全面！

7 楼 dan 2008-10-19  

stone 写道

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

說明的很清楚，謝謝你。

6 楼 stone 2008-10-19  

dan 写道

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

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

dan 写道

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

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

5 楼 dan 2008-10-19  

謝謝你的回答

stone 写道

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

可是在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方法中都寫的不一樣，這樣要如克服呢？

4 楼 stone 2008-10-18  

dan 写道

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

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

3 楼 stone 2008-10-18  

dolang 写道

有没有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

引用

对于model的实现，其实关键在于model的值如何和组件对应上的实现上面，关于这一点可以参考网址http://www.zenika.com/blog/2007/08/03/gwt-data-binding-english-version/
上面介绍了一种如何在gwt中将一个bean的属性邦定到gwt组件的一个简单实现。
其实难点在于reflection上面，gwt不支持反射。在上面的网址下载代码分析可知，它是动态的生成了一个wrapper类，用来访问邦定bean的属性。

2 楼 dan 2008-10-18  

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

1 楼 dolang 2008-10-18  

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