随笔-126  评论-247  文章-5  trackbacks-0

准备

软件包 下载
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 阅读(6230) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: