准备
|
软件包
|
下载
|
|
gwt 2.5.1 （Google Web Toolkit）
|
点击下载
|
|
eclipse ee 3.7 （Indigo）
|
点击下载
|
|
gpe （Google Plugin for Eclipse）
|
点击下载
|
|
gwtdesigner
|
点击下载
|
|
如无法打开下载页面，请将下载地址直接复制到下载器中进行下载
|
GWT 安装
解压 gwt 压缩包。如果你需要经常在 CMD 中敲命令，将 gwt 添加到系统的 path 环境变量中。
eclipse 插件安装
将选中的两个文件夹解压出来，并按下面规则构建文件路径：
将选中的两个文件夹解压出来，并按下面规则构建文件路径：
在 eclipse 解压缩目录下创建 2 文件夹，并将构建好的 gep、d2gwt 文件夹丢到 extplugins 文件夹里面
在 links 文件夹里面创建 2 文件，gpe.link、d2gwt.link，用文本编辑器打开并编辑（推荐
notepad++）：
gpe.link 文件：
path=%extplugins%/gpe
d2gwt.link 文件：
path=%extplugins%/d2gwt
%extplugins% 代表你 extplugins 文件夹的真实路径，请用真实路径替换之，如 path=D:/eclipse/extplugins/gpe
启动 eclipse
如果你能看到下面的这个图标，说明插件已经安装成功了
eclipse 配置
点解 Add，将你 gwt 解压缩的目录选中，配置好你要使用的 gwt 版本
创建你的第一个 GWT 程序
New --> Other --> WindowBuilder --> GWT Designer --> Model --> GWT Java Project
修改 HelloWorld.java ：
package fan.tutorial.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
Button button = new Button(" Click me ", new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert("I got you");
}
});
RootPanel.get().add(button);
}
}
选中 HelloWorld 项目，选择编译，让 JAVA 代码翻译成适合多浏览器兼容的 javascript 代码：
这个过程会比较慢，稍等就好，后续会写篇 debug 模式下编写 GWT 程序的文章，可以不用每次修改代码后编译才可以看到结果。
编译完成之后，选择 HelloWorld 项目，运行：
程序跑起来之后，你会看到 Development Model 选卡 中为你生成了一个访问的地址，鼠标双击它可以在浏览器中打开：
完了之后呢，很遗憾，你看到的是这样一个界面：
不要伤心！这是 debug 模式的访问地址，后续讲 debug 的时候讲到，将访问地址 http://127.0.0.1:8888/HelloWorld.html?gwt.codesvr=127.0.0.1:9997 后面的参数全部删掉，即访问 http://127.0.0.1:8888/HelloWorld.html。
这时候就能看到结果了，里面只有一个按钮，点击按钮弹出一个对话框。
posted on 2014-05-16 15:13
fancydeepin 阅读(6256)
评论(0) 编辑 收藏