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、搭建开发环境：
下载
?
?