相信在看到这篇文章之前,你已经查看过网上一些其他帖子。对于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、搭建开发环境:
下载
![](http://dl.iteye.com/upload/attachment/0062/0982/454668e2-34d5-3598-a615-5bcf736af605.png)
![](http://dl.iteye.com/upload/attachment/0062/0993/899c4003-f1dd-37aa-9878-eb14bad96820.png)
如图:
![](http://dl.iteye.com/upload/attachment/0062/0991/c43251a6-c221-3fca-a667-fe76fb8d6d90.png)
如图: New -> other...
![](http://dl.iteye.com/upload/attachment/0062/1002/f0a9c024-bded-3245-9964-896cbd51508a.png)
把解压后的 tomcatPlugin 文件夹直接放到 eclipse的plugins 目录下 ,重新启动 eclipse ;
![](http://dl.iteye.com/upload/attachment/0062/1015/42e2f2b5-c8fe-3355-8130-cda07fc8c34d.png)
![](http://dl.iteye.com/upload/attachment/0062/1017/57127487-d5a8-37e0-bca4-bb7e80b78ea0.png)
选择对应的版本,配置正确的Tomcat的解压路径
![](http://dl.iteye.com/upload/attachment/0062/1024/e01b9b36-df8f-391e-9be3-ab3cbf7803ad.png)
![](http://dl.iteye.com/upload/attachment/0062/1026/3b9fad0a-66cf-3859-8e38-0327d9321708.png)
配置自己的JRE,