`
cppmule
  • 浏览: 449312 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

GWT与SmartGWT应用简单例子

 
阅读更多

一.为什么我们选择GWT？

Google 网页工具包 (GWT)，可以使用 Java 编程语言编写 AJAX 前端，然后 GWT 会交叉编译到优化的 JavaScript 中，而 JavaScript 可以自动在所有主要浏览器上运行。在开发过程中，您可以用 JavaScript 按照您习惯的相同“编辑 - 刷新 - 查看”循环快速反复，还有另一个好处就是能够调试和逐行单步调试 Java 代码。准备好进行部署后，GWT 会将 Java 源代码编译到优化且独立的 JavaScript 文件中。使用 Google 网页工具包可以轻松地为现有网页或整个应用程序构建一个 Widget。
使用 Java 语言编写 AJAX 应用程序，然后编译为优化的 JavaScript
与仅在文本级别运行的 JavaScript Minifier 不同，GWT 编译器会在整个 GWT 代码库中执行综合性静态分析和优化，通常生成的 JavaScript 加载和执行均比等效手写的 JavaScript 更快。例如，GWT 编译器可以安全地消除无用代码 -- 极大的减少不使用的类、方法、字段甚至方法参数 -- 以确保您编译的脚本尽可能最小。另一个示例：GWT 编译器选择性地内联方法，消除方法调用的性能开销。
交叉编译提供了开发所需的可维护的抽象方法和模块性，而不会导致运行时性能损失。
二.为什么会选择SmartGWT？
SmartGWT是一个利用GWT封装SmartClient的开源项目。类似于GWT-Ext。SmartClient是一个企业级的ajax框架，包括非常出色的UI库、工具库和客户端服务端数据绑定等功能。
看看它的Dome，你就会为它的功能所折服的。
http://www.smartclient.com/smartgwt/showcase/ 
三.GWT与SmartGWT整合
1.下载SmartGWT2.0，在这里，http://code.google.com/p/smartgwt/downloads/list 
解压，里面包括smartgwt.jar，smartgwt-skins.jar两个jar文件，API以及几个dome。
2.假定你已经配置好Eclipse下开发GWT的环境，如果你还没有配置好，请看这里：
http://code.google.com/webtoolkit/usingeclipse.html 
3.在Eclipse下，新建项目firstSmartGWT，包名：com.mycompany.app
可以看到它已经给你生成了一个helloworld的例子。
4.引入smartGWT相关的jar包，右击项目，build path，add external Archives，如后选择smartgwt.jar，smartgwt-skins.jar引入。
5.修改FirstSmartGWT.html

在war包下面，打开FirstSmartGWT.html，添加SmartGWT的资源引用模块（红色部分），其中firstsmartgwt为项目名的全部小写名称。

 

 

Html代码  收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <!-- The HTML 4.01 Transitional DOCTYPE declaration-->  
  3. <!-- above set at the top of the file will set     -->  
  4. <!-- the browser's rendering engine into           -->  
  5. <!-- "Quirks Mode". Replacing this declaration     -->  
  6. <!-- with a "Standards Mode" doctype is supported, -->  
  7. <!-- but may lead to some differences in layout.   -->  
  8.   
  9. <html>  
  10.   <head>  
  11.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  12.   
  13.     <!--                                                               -->  
  14.     <!-- Consider inlining CSS to reduce the number of requested files -->  
  15.     <!--                                                               -->  
  16.     <link type="text/css" rel="stylesheet" href="FirstSmartGWT.css">  
  17.    <span style="color: #ff0000;"> <script> var isomorphicDir = "firstsmartgwt/sc/"; </script></span>  
  18.     <!--                                           -->  
  19.     <!-- Any title is fine                         -->  
  20.     <!--                                           -->  
  21.     <title>GWT和SmartGWT整合实例</title>  
  22.       
  23.     <!--                                           -->  
  24.     <!-- This script loads your compiled module.   -->  
  25.     <!-- If you add any GWT meta tags, they must   -->  
  26.     <!-- be added before this line.                -->  
  27.     <!--                                           -->  
  28.     <script type="text/javascript" language="javascript" src="firstsmartgwt/firstsmartgwt.nocache.js"></script>  
  29.   </head>  
  30.   
  31.   <!--                                           -->  
  32.   <!-- The body can have arbitrary html, or      -->  
  33.   <!-- you can leave the body empty if you want  -->  
  34.   <!-- to create a completely dynamic UI.        -->  
  35.   <!--                                           -->  
  36.   <body>  
  37. <span style="white-space: pre;">    </span>  
  38.     <!-- OPTIONAL: include this if you want history support -->  
  39.     <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>  
  40.       
  41.     <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->  
  42.     <noscript>  
  43.       <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">  
  44.         Your web browser must have JavaScript enabled  
  45.         in order for this application to display correctly.  
  46.       </div>  
  47.     </noscript>  
  48.   
  49.     <span style="color: #00ff00;"><h1>Web Application Starter Project</h1>  
  50.   
  51.     <table align="center">  
  52.       <tr>  
  53.         <td colspan="2" style="font-weight:bold;">Please enter your name:</td>          
  54.       </tr>  
  55.       <tr>  
  56.         <td id="nameFieldContainer"></td>  
  57.         <td id="sendButtonContainer"></td>  
  58.       </tr>  
  59.     </table></span>  
  60.   </body>  
  61. </html>  

  下面的为helloworld相关的内容，删掉。

Html代码  收藏代码
  1. <h1>Web Application Starter Project</h1>  
  2.   
  3.     <table align="center">  
  4.       <tr>  
  5.         <td colspan="2" style="font-weight:bold;">Please enter your name:</td>          
  6.       </tr>  
  7.       <tr>  
  8.         <td id="nameFieldContainer"></td>  
  9.         <td id="sendButtonContainer"></td>  
  10.       </tr>  
  11.     </table>  

 

 


 

6.修改web.xml

在war/WEB-INF下面打开web.xml。

 

Xml代码  收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <!DOCTYPE web-app  
  3.     PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"  
  4.     "http://java.sun.com/dtd/web-app_2_3.dtd">  
  5.   
  6. <web-app>  
  7.     
  8.   <span style="color: #00ff00;"><!-- Servlets -->  
  9.   <servlet>  
  10.     <servlet-name>greetServlet</servlet-name>  
  11.     <servlet-class>com.mycompany.app.server.GreetingServiceImpl</servlet-class>  
  12.   </servlet>  
  13.     
  14.   <servlet-mapping>  
  15.     <servlet-name>greetServlet</servlet-name>  
  16.     <url-pattern>/firstsmartgwt/greet</url-pattern>  
  17.   </servlet-mapping></span>  
  18.     
  19.   <!-- Default page to serve -->  
  20.   <welcome-file-list>  
  21.     <welcome-file>FirstSmartGWT.html</welcome-file>  
  22.   </welcome-file-list>  
  23.   
  24. </web-app>  

  删掉下面的内容

Xml代码  收藏代码
  1. <!-- Servlets -->  
  2.  <servlet>  
  3.    <servlet-name>greetServlet</servlet-name>  
  4.    <servlet-class>com.mycompany.app.server.GreetingServiceImpl</servlet-class>  
  5.  </servlet>  
  6.    
  7.  <servlet-mapping>  
  8.    <servlet-name>greetServlet</servlet-name>  
  9.    <url-pattern>/firstsmartgwt/greet</url-pattern>  
  10.  </servlet-mapping>  

 

7.修改FirstSmartGWT.gwt.xml

在src/com/mycompany/app下面，添加<inherits name="com.smartgwt.SmartGwt"/>，引用SmartGWT模块

 

Xml代码  收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <module rename-to='firstsmartgwt'>  
  3.   <!-- Inherit the core Web Toolkit stuff.                        -->  
  4.   <inherits name='com.google.gwt.user.User'/>  
  5.   
  6.   <!-- Inherit the default GWT style sheet.  You can change       -->  
  7.   <!-- the theme of your GWT application by uncommenting          -->  
  8.   <!-- any one of the following lines.                            -->  
  9.   <inherits name='com.google.gwt.user.theme.standard.Standard'/>  
  10.   <span style="color: #ff0000;"><inherits name="com.smartgwt.SmartGwt"/></span>  
  11.   <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->  
  12.   <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->  
  13.   
  14.   <!-- Other module inherits                                      -->  
  15.   
  16.   <!-- Specify the app entry point class.                         -->  
  17.   <entry-point class='com.mycompany.app.client.FirstSmartGWT'/>  
  18.   
  19.   <!-- Specify the paths for translatable code                    -->  
  20.   <source path='client'/>  
  21.   
  22. </module>  

8.修改FirstSmartGWT.java

打开src/com/mycompany/client下面的FirstSmartGWT.java，用下面的内容替换掉以前的内容。

 

Java代码  收藏代码
  1. package com.mycompany.app.client;  
  2.   
  3. import com.google.gwt.core.client.EntryPoint;  
  4. import com.smartgwt.client.util.SC;  
  5. import com.smartgwt.client.widgets.IButton;   
  6. import com.smartgwt.client.widgets.events.ClickEvent;  
  7. import com.smartgwt.client.widgets.events.ClickHandler;  
  8.   
  9. /** 
  10.  * Entry point classes define <code>onModuleLoad()</code>. 
  11.  */  
  12. public class FirstSmartGWT implements EntryPoint {  
  13.       
  14.     /** 
  15.      * This is the entry point method. 
  16.      */  
  17.     public void onModuleLoad() {  
  18.           
  19.         IButton button = new IButton("点我");  
  20.         button.addClickHandler(new ClickHandler() {     
  21.               
  22.             @Override  
  23.             public void onClick(ClickEvent event) {  
  24.                 // TODO Auto-generated method stub  
  25.                 SC.say("恭喜你，GWT和SmartGWT集成好了。");      
  26.             }     
  27.         });  
  28.           
  29.           
  30.         button.draw();  
  31.     }  
  32. }  

 9.至此GWT和smartGWT集成完毕。

分享到：
| ExtJS和GWT的比较
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    smartgwt官方实例

    8. **国际化和本地化**：SmartGWT支持多语言应用，你可以从实例中学习如何设置和切换不同的语言环境。 9. **性能优化**：SmartGWT提供了很多工具和策略来优化应用程序的性能，例如延迟加载、缓存策略等。通过分析...

    smartGWT 3.1 最新版本

    SmartGWT是一个基于Google Web Toolkit (GWT) 的扩展框架，它通过提供大量预定义的用户界面组件和高级数据管理功能，极大地简化了GWT应用的开发。SmartGWT 3.1在前一版本的基础上进行了改进和优化，提升了性能和...

    smartGWT最新zip

    SmartGWT是一个强大的Java库，专门用于构建富互联网应用程序（RIA）。它基于Google Web Toolkit (GWT) 平台，并提供了丰富的用户界面组件和优化工具，使得开发人员能够轻松创建功能丰富的、交互性强的Web应用。GWT...

    smartgwt应用实例

    smartgwt结合数据库应用实例 体验富网络应用（RIA） 对应blog—— http://hi.csdn.net/link.php?url=http://blog.csdn.net%2FcatPan

    smartgwt最新版本GWT的DEMO

    在这个"smartgwt最新版本GWT的DEMO"中，我们可以深入学习SmartGWT如何与GWT结合，创建功能强大的Web应用。 Google Web Toolkit (GWT) 是一个由Google开发的开放源代码Java SDK，它允许开发者使用Java语言编写客户端...

    SmartGwt 之原生 Desktop（与gxt无关）

    SmartGwt 是一款基于 Java 的开源库，它为开发人员提供了丰富的组件和工具，用于构建高性能、富交互式的 Web 应用程序。在 SmartGwt 中，原生的 Desktop 功能是一个强大的特性，它允许开发者创建类似桌面应用的用户...

    smartgwt 分页grid

    在IT行业中，SmartGWT是一个基于Google Web Toolkit (GWT) 的强大且高效的用户界面库，它提供了大量的组件，使得开发者能够快速构建复杂的Web应用程序。本文将深入探讨如何使用SmartGWT来创建一个自定义的分页Grid...

    smartgwt+mybatis+spring的整合

    SmartGwt、Mybatis与Spring的整合是企业级Java应用开发中的常见技术栈组合，这三种框架各有其专长，可以高效地构建出强大的后台系统。SmartGwt是一款基于GWT（Google Web Toolkit）的开源UI组件库，提供丰富的用户...

    smartGwt、spring、Mybatis整合

    本项目"smartGwt、spring、Mybatis整合"就是一个很好的例子，它将三种流行的技术——SmartGWT、Spring和Mybatis融合在一起，创建了一个包含登录功能和分页查询功能的应用。以下是关于这三个技术及其整合方式的详细...

    Gwt FusionCharts简单demo

    标签 "源码" 暗示了压缩包可能包含一个简单的GWT项目源代码，我们可以从中学习如何设置和运行这个GWT与FusionCharts的集成实例。"工具"标签可能指的是使用到的开发工具，如Eclipse、IntelliJ IDEA，或者是构建工具如...

    SmartGWT 2.0 API.zip

    SmartGWT是一个强大的Java库，专门用于构建富互联网应用程序（RIA）。它基于Google Web Toolkit (GWT) 并扩展了其功能，提供了丰富的组件库和更直观的开发接口。SmartGWT 2.0是该框架的一个早期版本，对初学者来说是...

    GWT DEMO 增删改查

    总的来说，这个DEMO将演示如何使用GWT和SmartGWT实现一个基本的数据管理界面，包括创建新的记录，查看列表，编辑选定记录以及删除记录。通过学习和理解这个DEMO，初学者能够快速掌握GWT中的CRUD操作，并为以后的项目...

    java smartclient实例

    SmartClient通常会提供一个包含所有必需库的jar包集合，包括SmartGWT库和SmartClient服务器端组件。如果你发现这些jar包被删除，你可以从SmartClient的官方网站或者通过Maven仓库下载最新版本，确保包括以下关键组件...

    一个smart+struts2的例子

    总的来说，这个例子旨在帮助学习者理解如何将SmartGWT的富客户端功能与Struts2的服务器端控制能力相结合，以构建高效、互动的Web应用。通过深入研究这个示例，开发者可以学习到如何在实际项目中整合这两个框架，提升...

    GWT EJB3 Entity

    GWT最初由SmartGWT公司开发，后来被Google收购并进一步发展。 **EJB3 (Enterprise JavaBeans 3)** 是Java EE（现在称为Jakarta EE）平台的一部分，它是一种用于构建可扩展、模块化、面向服务的企业级应用程序的标准...

    gwt-978-1-8495-1200-8:Google Web Toolkit 2应用程序开发手册

    11. **GWT库与框架**：探讨GWT社区中流行的库和框架，如SmartGWT、GXT、Vaadin等，它们扩展了GWT的功能，简化开发工作。 12. **测试与调试**：讲解如何使用GWT的单元测试框架和模拟器进行测试，以及如何利用Chrome...

    java开源包1

    GWT Spring 使得在 Spring 框架下构造 GWT 应用变得很简单，提供一个易于理解的依赖注入和RPC机制。 Java扫雷游戏 JVMine JVMine用Applets开发的扫雷游戏，可在线玩。 public class JVMine extends java.applet....

    java开源包2

    GWT Spring 使得在 Spring 框架下构造 GWT 应用变得很简单，提供一个易于理解的依赖注入和RPC机制。 Java扫雷游戏 JVMine JVMine用Applets开发的扫雷游戏，可在线玩。 public class JVMine extends java.applet....

    java开源包3

    GWT Spring 使得在 Spring 框架下构造 GWT 应用变得很简单，提供一个易于理解的依赖注入和RPC机制。 Java扫雷游戏 JVMine JVMine用Applets开发的扫雷游戏，可在线玩。 public class JVMine extends java.applet....

Magicbox
Global site tag (gtag.js) - Google Analytics