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集成完毕。

你可能感兴趣的:(smartgwt)