Gwt 轻松入门

      相信在看到这篇文章之前，你已经查看过网上一些其他帖子。对于Gwt，我也是刚刚入门。在写这篇文章之前我也曾看过网上的一些有关Gwt的资料。但发现其中有些文章介绍的Gwt版本已经过时，应该是由于文章的创作时间比较早的缘故，为此我走了段弯路。也正是绕了个弯为此对Gwt有了点初步的了解。写这篇文章的目的是为了让想了解gwt的入门者少走弯路。

 

网上我见的最多的对Gwt介绍的版本如下：

首先：配置你的开发环境

       使用Eclipse 和插件 Cypal Studio 下载地址：http://code.google.com/p/cypal-studio/downloads/list

使用方法 http://www.ibm.com/developerworks/cn/opensource/os-eclipse-ajaxcypal  ，当然如果你能按照上面的描述顺利的操作，那你比我幸运。

      我当时刚刚了解Gwt的时候用的是MyEclipse6.6.0，装Cypal Studio插件的时候还算是顺利，但创建 Gwt 项目的时候就杯具了。只能创建普通web项目，根本没有下面的创建界面选项

 

 

      出现上面情况怎么办呢？ GWT 不就是由Java生成JS么，所以可以这么大胆的尝试。既然不能如上方式创建Web项目，那就干脆创建普通的Java项目。

New -> Java Project

New -> Other -> GWT Module -> Next 

创建好之后将 "gwt-dev-windows.jar" "gwt-user.jar"  加入 classpath

选中项目 -> 右键 -> Run As -> Run Configuration 

运行之前需要配置参数

Main class:com.google.gwt.dev.GWTShell

 
 
 配置运行参数 -out www com.demo.PanelDemo/PanelDemo.html

虚拟机参数 -Xms128m -Xmx128m -XX:PermSize=128m -XX:MaxPermSize=128m

 

运行的 Demo

 

demo project 截图：

 

 

代码 如下 ：

package com.demo.client;

import com.google.gwt.core.client.EntryPoint;
import com.gwtext.client.core.Margins;
import com.gwtext.client.core.RegionPosition;
import com.gwtext.client.widgets.Panel;
import com.gwtext.client.widgets.Viewport;
import com.gwtext.client.widgets.layout.BorderLayout;
import com.gwtext.client.widgets.layout.BorderLayoutData;
import com.gwtext.client.widgets.layout.FitLayout;

public class PanelDemo implements EntryPoint {

	public void onModuleLoad() {
		
		Panel panel = new Panel("Border Layout Sample");
		panel.setBorder(false);
		panel.setPaddings(15);
		panel.setLayout(new FitLayout());

		Panel borderPanel = new Panel();
		borderPanel.setLayout(new BorderLayout());
		
		Panel northPanel = new Panel();
		northPanel.setHtml("<p>north panel 北</p>");
		northPanel.setHeight(32);
		northPanel.setBodyStyle("background-color:#FFFF88");
		borderPanel.add(northPanel, new BorderLayoutData(RegionPosition.NORTH));
		
		Panel southPanel = new Panel();
		southPanel.setHtml("<p>south panel 南</p>");
		southPanel.setHeight(100);
		southPanel.setBodyStyle("background-color:#CDEB8B");
		southPanel.setCollapsible(true);
		southPanel.setTitle("South");

		BorderLayoutData southData = new BorderLayoutData(RegionPosition.SOUTH);
		southData.setCollapseModeMini(true) ;
		
		southData.setMinSize(100);
		southData.setMaxSize(200);
		southData.setMargins(new Margins(0, 0, 0, 0));
		southData.setSplit(true);
		borderPanel.add(southPanel, southData);
		
		Panel eastPanel = new Panel();
		eastPanel.setHtml("<p>east panel 东</p>");
		eastPanel.setTitle("East Side");
		eastPanel.setCollapsible(true);
		eastPanel.setWidth(225);

		BorderLayoutData eastData = new BorderLayoutData(RegionPosition.EAST);
		eastData.setCollapseModeMini(true) ;
		eastData.setSplit(true);
		eastData.setMinSize(175);
		eastData.setMaxSize(400);
		eastData.setMargins(new Margins(0, 0, 5, 0));

		borderPanel.add(eastPanel, eastData);

		Panel westPanel = new Panel();
		westPanel.setHtml("<p>west panel 西</p>");
		westPanel.setTitle("West");
		westPanel.setBodyStyle("background-color:#EEEEEE");
		westPanel.setCollapsible(true);
		westPanel.setWidth(200);

		BorderLayoutData westData = new BorderLayoutData(RegionPosition.WEST);
		westData.setSplit(true);
		westData.setMinSize(175);
		westData.setMaxSize(400);
		westData.setMargins(new Margins(0, 5, 0, 0));

		borderPanel.add(westPanel, westData);

		Panel centerPanel = new Panel();
		centerPanel.setHtml("<p>center panel 中间</p>");
		centerPanel.setBodyStyle("background-color:#C3D9FF");

		borderPanel.add(centerPanel,new BorderLayoutData(RegionPosition.CENTER));

		panel.add(borderPanel);	

        new Viewport(panel);   

	}

}

 

 

<module>

	<!-- Inherit the core Web Toolkit stuff.                  -->
	<inherits name="com.google.gwt.user.User" />
	<inherits name="com.gwtext.GwtExt" />

	<!-- Specify the app entry point class.                   -->
	<entry-point class='com.demo.client.PanelDemo'/>
  
  	<inherits name="com.google.gwt.user.theme.standard.Standard"/>
  	<!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> -->
  	<!-- <inherits name="com.google.gwt.user.theme.dark.Dark"/> -->
  	<stylesheet src="js/ext/resources/css/ext-all.css" />
	<script src="js/ext/adapter/ext/ext-base.js" />
	<script src="js/ext/ext-all.js" />
</module>

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Gwt PanelDemo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="js/ext/resources/css/ext-all.css"/>  
		<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>  
		<script type="text/javascript" src="js/ext/ext-all.js"></script> 
	</head>
	<body>
		<!-- OPTIONAL: include this if you want history support -->
		<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
   		<script type="text/javascript" language="javascript" src="com.demo.PanelDemo.nocache.js"></script>
   		
	</body>
</html>

 

 

 

 

 上面的一切均是对 Gwt 入门做一些了解与铺垫，下面描述一下Gwt-Ext Web 开发应用

 

1、搭建开发环境：

下载

eclipse-jee-helios-SR2-win32

地址：http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/helios/SR2/eclipse-jee-helios-SR2-win32.zip

如图：

下载后解压。

 

 

2、安装所需的插件

方式一：在线安装 http://code.google.com/intl/zh-CN/eclipse/docs/install-eclipse-3.6.html

方式二：下载下载下来安装

下载  Google Web Toolkit  开发插件 gpe-e36-latest-updatesite.zip

地址：http://code.google.com/intl/zh-CN/eclipse/docs/install-from-zip.html

  eclipse->Help -> Install new Software - > add ->archive… 
如图：

 

成功安装之后重新启动Eclpse。

安装成功之后如图：

 

如图：  New -> other...

 

3、安装Tomcat插件 tomcatPluginV33.zip 这是当前的最新版本

地址： http://www.eclipsetotale.com/tomcatPlugin.html
把解压后的 tomcatPlugin 文件夹直接放到 eclipse的plugins 目录下 ，重新启动 eclipse ；

菜单上多了一个下拉项Tomcat， 快捷栏里多了三个Tomcat的猫图标。

如图：

下面进行配置：

Window->Preferences->Tomat

如图：
 

 选择对应的版本，配置正确的Tomcat的解压路径

 

 

 

  配置自己的JRE，

Window->Preferences->Java->Installed JREs->add->Standard VM->next

在JRE home 选择你JDK的安装路径。

gwt-ext 提供了很多的例子地址：http://gwt-ext.com/demo/

所需的插件如果你懒得去下载 下面我已经上传了，经过整合验证可以使用。