`
simen_net
  • 浏览: 306333 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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难得多。总之,没有差得框架只有不适合的框架。

 

  • 大小: 82.2 KB
  • 大小: 150.7 KB
  • 大小: 72.7 KB
  • 大小: 147.6 KB
  • 大小: 50.8 KB
  • 大小: 89.4 KB
  • 大小: 95.8 KB
  • 大小: 37 KB
  • 大小: 35.6 KB
  • 大小: 92.3 KB
  • 大小: 151.1 KB
  • 大小: 82.4 KB
分享到:
评论
27 楼 char1st 2010-12-07  
这个怎么说呢,同样是封装了ext
http://www.ext.net/。
ps.其实gwt的作用远不在做前端
26 楼 simen_net 2010-11-29  
dengzhangtao 写道
楼主你的java ee  eclipse  ,是什么版本哦

Eclipse IDE for Java EE Developers标准版+EditorList插件
25 楼 dengzhangtao 2010-11-27  
楼主你的java ee  eclipse  ,是什么版本哦
24 楼 dengzhangtao 2010-11-27  
我想问 ,有必要么?  没看到效率得到提高
23 楼 simen_net 2010-11-26  
shmily2038 写道
使用的少,但是能大体介绍下extjs和gwt extjs有什么本质区别?

EXT-GWT(GXT)是ExtJS的GWT官方实现,GWT是Google Web Tools,简单说就是用于将JAVA编译成JS
22 楼 dir_murong 2010-11-26  
lz 你的工具很不错  看来得学习学习
21 楼 pengjj2 2010-11-26  
lanjia728604 写道
diggywang 写道
pengjj2 写道
大哥们,你们真认为这个减少了调试时间,我的天,这个东西的调试简直就是一场灾难。

服了!

晕,调试快多了!可以直接断点调试。你用js要调试还比较麻烦列。各位是否同感!  

我从来不觉得firebug不能断点调试,我也没觉得gwt提供的调试工具比firebug更快。gwt客户端代码的调试,需要自己的插件,然后进入eclipse。我十次调试能死5五次。
20 楼 shmily2038 2010-11-25  
使用的少,但是能大体介绍下extjs和gwt extjs有什么本质区别?
19 楼 black.angel 2010-11-25  
wilsonjunjie 写道
只要会写swing 就会gwt,有Swing基础的java程序员很好上手,就是gwt开发的时候,需要一台强劲的电脑,否则太卡了。


GWT 远远没有仁兄说的这么简单。特别是扩展纯JS的时候。很多东西让人吐血。
不过GWT还是蛮适合JAVA开发人员的。
18 楼 aws 2010-11-24  
may_cauc 写道
aws 写道
对于习惯些swing的可能更适合一些
但是感觉对JS比较熟的还是直接写JS吧


不要老是拿习惯来说是。

我觉得GWT想解决的是用java这种强约束的语言去生成js,减少调试时间。
用java熟悉的swing风格去约束编程的方式,更利于多人协作。


Extjs用得好的话,写起来很像开发C/S系统而不是在写JSP+js
17 楼 lanjia728604 2010-11-22  
diggywang 写道
pengjj2 写道
大哥们,你们真认为这个减少了调试时间,我的天,这个东西的调试简直就是一场灾难。

服了!

晕,调试快多了!可以直接断点调试。你用js要调试还比较麻烦列。各位是否同感!  
16 楼 diggywang 2010-11-22  
pengjj2 写道
大哥们,你们真认为这个减少了调试时间,我的天,这个东西的调试简直就是一场灾难。

服了!
15 楼 pengjj2 2010-11-22  
大哥们,你们真认为这个减少了调试时间,我的天,这个东西的调试简直就是一场灾难。
14 楼 andy54321 2010-11-22  
这个入门的话都不容易;
不过Google的产品很是好用,最近研究Maps
13 楼 may_cauc 2010-11-22  
aws 写道
对于习惯些swing的可能更适合一些
但是感觉对JS比较熟的还是直接写JS吧


不要老是拿习惯来说是。

我觉得GWT想解决的是用java这种强约束的语言去生成js,减少调试时间。
用java熟悉的swing风格去约束编程的方式,更利于多人协作。
12 楼 aws 2010-11-22  
对于习惯些swing的可能更适合一些
但是感觉对JS比较熟的还是直接写JS吧
11 楼 simen_net 2010-11-20  
jordan_micle 写道
觉得LZ的开发工具出奇的舒服

Ubuntu10.04后的风格,我也非常喜欢
10 楼 simen_net 2010-11-20  
witcheryne 写道
楼主现在在用Gxt 开发项目????

去年Gxt用了一年``` 从  Gwt 1.5  -> Gwt1.7.1  Gxt 1.2.3 -> Gxt2.0
升级升吐血了!

Ext项目的通病,尤其是3.1 > 3.2的时候小虫子一堆堆
9 楼 witcheryne 2010-11-20  
楼主现在在用Gxt 开发项目????

去年Gxt用了一年``` 从  Gwt 1.5  -> Gwt1.7.1  Gxt 1.2.3 -> Gxt2.0
升级升吐血了!
8 楼 wilsonjunjie 2010-11-20  
也不用重新编译,客户端代码只要刷新下页面下就可以了,服务端修改了只要重启下服务就行了,不过感觉在开发时会不断生成大量js代码,会造成机器很卡,一个项目下来,可能又几个G的临时文件

相关推荐

    GWT入门 GWT中文教程

    “GWT快速开发”这部分教程则专注于提高开发效率,可能包含了GWT的开发工具、IDE集成、代码生成、调试技巧等内容,让开发者能快速上手并高效地进行GWT项目开发。 “GWT入门”和“GWT中文教程”显然是针对初学者的,...

    GWT开发教程.pdf

    本教程将引导你了解如何在Eclipse环境中配置和使用GWT进行开发。 首先,为了在Eclipse中开发GWT应用,你需要安装GWT插件。根据Eclipse的版本,你可以从以下地址获取插件: - Eclipse 3.5 (Galileo): ...

    GWT快速开发(GWT) 是一个Java软件开发框架用于开发类似于Google Maps和Gmail的AJAX应用程序。GWT的设计参考Java AWT包设计,类命名规则、接口设计、事件监听等。你可以用Java编程语言开发你的界面,然后用GWT编译器将Java类转换成适合浏览器执行的...

    ### GWT快速开发知识点详解 #### 一、GWT简介 **Google Web Toolkit (GWT)** 是由Google推出的一款开源的Java开发框架,主要用于构建高度交互式的Web应用程序,特别是那些类似Google Maps和Gmail这样的AJAX应用。...

    java教程GWT开发

    Java GWT 开发初级教程 标题解释 本文的标题是 "Java GWT 开发",...本文是一个初级的 GWT 开发教程,旨在帮助读者更好地掌握 GWT 的入门,并展示了如何使用 GWT 和熟悉的 Java 工具来开发一个简单的 Ajax 应用程序。

    GWT 开发和部署文档

    如果你对EXTJS提供的界面效果不满意,还可以开发自定义的GWT-EXT插件,增强GWT应用的界面功能。 总结来说,GWT通过Java语言为Web开发提供了一种高效且易维护的解决方案,它简化了前端开发的复杂性,使得开发者可以...

    GWT快速开发.pdf

    根据提供的文档内容,本文将重点围绕"GWT快速开发"这一主题进行深入解析,涵盖GWT的基本概念、安装步骤以及如何使用Eclipse进行开发等方面的知识点。 ### GWT基本概念 **GWT**(Google Web Toolkit)是一款由Google...

    Gwt Designer 开发实例一

    文件列表中的`gwtd_internationalization.swf`可能包含了一个演示如何在GWT Designer中实现国际化功能的互动教程;`gwtd_css_support.swf`可能展示了如何设计和应用CSS;而`gwtd_composite.swf`则可能是一个关于创建...

    gwt in practice gwt快速开发

    1. **GWT快速开发.pdf**:这可能是一个简明扼要的GWT教程,专注于快速学习和理解GWT的关键概念和工具,可能包括基本的UI组件使用、事件处理、异步通信(RPC)、模块化和编译配置等。 2. **Manning.GWT.In.Practice....

    gwt开发实例实现

    - **强大的开发工具**:GWT提供了丰富的开发工具,如开发服务器、编译器、测试工具等,简化开发流程。 - **可维护性和扩展性**:由于使用Java编程,GWT应用具有良好的结构和可维护性,同时Java的类库和框架可以...

    非常好的gwt-ext培训教程

    GWT-Ext 是一个高级的网页开发控件库,它结合了 Google Web Toolkit (GWT) 和 ExtJs 的优势,为开发者提供了丰富的 UI 组件和强大的功能。GWT 是一个由 Google 开发的用于构建富互联网应用程序 (RIA) 的框架,它允许...

    GWT开发文档

    ### GWT开发文档详解 #### GWT概览 Google Web Toolkit (GWT),作为一款由谷歌推出的开源框架,旨在简化并加速复杂的JavaScript前端应用程序的构建与维护过程。它通过允许开发者使用熟悉的Java语言进行编码,随后...

    ext gwt gxt初学教程

    ### ExtGWT、GWT与GXT初学教程:打造企业级富客户端Web应用 #### 构建初识:ExtGWT与GWT的协同工作 ExtGWT,作为GWT(Google Web Toolkit)的有力补充,旨在为Java开发者提供更为丰富、功能全面的组件库,从而构建...

    Ext-Gwt(GWT)开发实例(整合Spring +Hibernate)

    标题 "Ext-Gwt(GWT)开发实例(整合Spring +Hibernate)" 涉及到的是一个实际项目开发的教程,其中结合了三个重要的技术框架:Google Web Toolkit (GWT),Spring 和 Hibernate。这个实例旨在展示如何在Web应用开发中...

    GWT开发环境JAVA

    **GWT(Google Web Toolkit)开发环境JAVA** Google Web Toolkit(GWT)是一个开放源代码的Java框架,它允许开发者使用Java语言来编写富互联网应用程序(Rich Internet Applications,RIA),并将其编译成优化的...

    smartGWT开发环境搭建(完整工程)

    本教程将详细阐述如何搭建SmartGWT的开发环境,以及如何利用附带的`build.xml`编译器进行项目构建。 首先,你需要确保已经安装了Java Development Kit (JDK)。SmartGWT和GWT都是基于Java的,因此至少需要JDK 8或更...

    GWT EXT 教程全集

    【GWT EXT 教程全集】是一份综合性的教程资源集合,主要涵盖了GWT(Google Web Toolkit)和EXT-GWT这两个技术领域的知识。GWT是Google推出的一个用于开发富互联网应用程序(RIA)的开放源代码框架,它允许开发者使用...

    GWT完整教程,Word版

    【GWT完整教程,Word版】是一份详尽的在线应用程序开发指南,专注于Google Web Toolkit(GWT)的教育和实践。本教程分为三个主要部分:入门、进阶和高级,旨在为不同水平的开发者提供逐步指导,帮助他们掌握GWT的精髓...

    gwt-ext培训教程

    本教程将深入探讨GWT-Ext的核心概念、使用方法以及实际开发中的应用。 1. **GWT-Ext简介** GWT-Ext是GWT的一个扩展,它引入了大量桌面级应用的UI组件,如表格、树形视图、按钮、面板等,使得在Web应用中实现复杂...

    GWT EXT 企业开发应用教程

    基于EXT的google web toolkit是一套非常好的ajax开发框架MVC,但是其开发资料较少,这是一本很好的GWT EXT企业级应用开发教程。内容全面,通俗易懂,是开发GWT EXT的必备利器。

Global site tag (gtag.js) - Google Analytics