GWT ExtJS开发图文教程

JS的前台开发相对JAVA还不算方便，各种优化处理也很让人讨厌，看了GWT的说明，尝试了一下EXT-GWT的开发，写个简单的教程备用。

 

================无语的分割线==================

好好的ExtJS搞什么了授权变化，弄得GWT-EXT项目终止，虽然作者去做了SmartGWT，但是SmartClient本身较差的用户体验还是不能与ExtJS比较。唉``````无语啊

============================================

 

看图说话开始

 

1、安装插件，具体过程看GWT官网，我安装了Plugin for Eclipse 和 GWT Designer两个插件

 

2、新建一个WTP项目

 

2、右键点该项目选择Google > Web Toolkit Setting...

 

3、勾选上Use Google Web Toolkit 这样就可以在项目中使用GWT

 

3.5、重要的一步～～～～！！！！！

由于tomcat 6.0的lib中有一个org.eclipse.jdt.internal.compiler.impl.CompilerOptions的类貌似版本不够，在GWT编译JS的时候会报错【java.lang.NoSuchFieldError: reportUnusedDeclaredThrownExceptionIncludeDocCommentReference】，所以项目建立后必需在Java Build Path > Order and Export 中把GWT SDK移动到最上面（至少要在Tomcat的上面）

 

4、右键点项目 Google Web Tookit > GWT module

 

5、选择Ext GWT（不是GWT EXT 这个项目非常不错，可以已经停止了）

 

6、点击Finish之后会让你选择gxt.jar所在目录，注意在ExtJS的下载中有两个gxt的包，一个是对GWT1.7的一个是2.0的，我这里用的2.0

 

7、这个时候会自动打开新建的class，在编辑器的左下有三个选项，源码、设计和数据绑定，在设计可以可见即所得的进行编辑，这个好啊，比ExtJS官网的那个编辑器感觉还好，还可以直接预览... Good!。数据绑定如果大家做过SWT的就是一样的。可以实现多语言等等。

 

8、在class的源码编辑界面中，点右键 > debug / run > Compile GWT Application就可以将class编译出静态的js对象，这样就可以直接使用tomcat来运行。当然GWT还有一个更好的调试方法，以前叫做Hotsts模式，现在就是点击Web application这个时候会自动启动一个jetty的服务器，当然我们也可以选择Web Application(running on an external server) 直接在tomcat的环境中调试。

 

9、选择Web Application(running on an external server) 后，填入项目在tomcat中运行的地址

 

10、跑起来吧`````阿门，不过首先还要选择一下WAR所在目录，本项目就是 WebContent 目录

 

11、JAVA大神，让代码跑起来吧。yeah 真的可以了，这个时候我们只需要在class中修改内容，然后直接刷新浏览器，前台的js就能够自动刷新出效果来了。和直接写js差不多吧哈哈``````（说明：采用这种模式需要给浏览器安装一个插件，最好是使用Chrome浏览器，但是```可惜这个插件不支持Linux下的Chrome，所以我无奈的选择了Firefox来调试）

 

12、写在最后：GWT好东西，但是资料少（至少在国内）。对JS有点包装过度，如果需要直接增加一些JS就有点麻烦。最主要的，扩展EXT-GWT比扩展ExtJS难得多。总之，没有差得框架只有不适合的框架。