Eclipse上gwt代码基础

Eclipse下gwt代码基础

一、环境配置

1。下载WTP插件，配置中对版本要有要求，所以最好是下载已经配置好WTP插件的Eclipse，这样省去了配置WTP插件，我下载的是已配置好WTP1.5.5的Eclipse，下载这个到WTP插件中去找有一个all-in-one。

2。下载cypal Studio插件，这个也对版本是有要求的，我下载的是cypal.studio.for.gwt-RC7.zip。

3。下载GWT，这个可能和版本没有关系，我下载的是最新的gwt-windows-1.5.3.zip。这个解压以后放到一个固定的目录下，这个在下边的配置中要用到。

4。下载gwt-ext与ext，这俩个相互有版本的限制，我分别下载的是gwtext-2.0.6.zip、ext-2.0.2.rar。这两个要用到gwtext.jar文件与ext下边的JS文件。

二、配置GWT

配置 GWT Home目录，打开 Eclipse的 Window—Preferences—Cypal Studio 选择 Gwt的目录。如下图：

Eclipse上gwt代码基础

三、建立一个名为 gwtext的 GWT项目

新建一个动态 web项目， File—New—Other—Web—Dynamic Web Project，在 Configurations中选择 Cypal Studio GWT Project，其他的默认即可。

四、创建 Module模型

gwtext项目上点击右键 New—Other—Cypal Studio—Module，输入包名 org.gwtext.julycn,类名 Register。在 org.gwtext.julycn包下面生产 client包、 server包、 public目录和 Register.gwt.xml、 Register.html；

Eclipse上gwt代码基础

五、 配置 GWT-Ext环境

1。加入 gwtext的 gwtext.jar和 ext资源

把 gwtext-2.0.6目录下的 gwtext.jar加入到项目中。

在项目的 public目录中新建 js文件夹，然后把 ext-2.0.2目录下的 adapter目录、 resources目录和

ext-all.js、ext-core.js导入到 js文件夹下。

2。修改 HTML宿主页面 Register.html和模块配置文件 Register.gwt.xml 六、运行 GWT-Ext实例

在 Register.html文件中加入

在 Register.gwt.xml文件中加入

修改 Register.java模型文件 ,内容如下：

import com.google.gwt.core.client.EntryPoint；

import com.google.gwt.user.client.ui.RootPanel;

import com.gwtext.client.widgets.*;

import com.gwtext.client.widgets.event.ButtonListenerAdapter;

import com.gwtext.client.widgets.form.FormPanel;

import com.gwtext.client.widgets.form.TextField;

import com.gwtext.client.core.EventObject;

import com.gwtext.client.widgets.layout.HorizontalLayout;

import com.gwtext.client.widgets.form.VType;

public class Register implements EntryPoint {

public void onModuleLoad() {

createComponents();

        }

private void createComponents() {
        final FormPanel frm = new FormPanel();
        frm.setDraggable(true);
        frm.setWidth(300);
        frm.setTitle("用户注册");
        frm.setPaddings(25);

        TextField txtUsername = new TextField("用户名", "username");
        TextField txtPassword = new TextField("密码", "password");
        TextField txtEmail = new TextField("邮箱", "email");
        TextField txtPhone = new TextField("电话", "phone");

        txtUsername.setRegex("^[a-zA-Z]*$");
        txtUsername.setRegexText("用户名必须为字母！");
        txtUsername.setAllowBlank(false);

        txtPassword.setPassword(true);
        txtPassword.setRegex("^[a-zA-Z]*$");
        txtPassword.setRegexText("密码必须为字母！");
        txtPassword.setAllowBlank(false);

        txtEmail.setVtype(VType.EMAIL);
        txtEmail.setVtypeText("请输入合法的邮箱地址！");
        txtEmail.setAllowBlank(false);

        txtPhone.setRegex("^\\d*$");
        txtPhone.setRegexText("电话必须为数字！");
        txtPhone.setAllowBlank(false);

        frm.add(txtUsername);
        frm.add(txtPassword);
        frm.add(txtEmail);
        frm.add(txtPhone);

        Panel buttonPanel = new Panel();
        buttonPanel.setLayout(new HorizontalLayout(10));


        Button btnSave = new Button("保存");
        btnSave.addListener(new ButtonListenerAdapter() {
            public void onClick(Button button, EventObject e) {
                if (frm.getForm().isValid()) {
                    MessageBox.alert("成功","信息提交成功！");
                } else {
                    MessageBox.alert("错误","请验证输入的信息是否正确！");
                }
            }
        });

        Button btnClear = new Button("取消");
        btnClear.addListener(new ButtonListenerAdapter() {
            public void onClick(Button button, EventObject e) {
                MessageBox.alert("取消", "注册信息保存失败！");
            }
        });

        buttonPanel.add(btnSave);
        buttonPanel.add(btnClear);

        frm.add(buttonPanel);

        RootPanel.get().add(frm);
    }

}

六、运行

选择 Run—Open Run Dialog—Gwt Hosted Mode Application,选择 New,新建一个运行实例 gwtext,

在Project中选择 gwtext， Module会自动选择所要运行的模型类。

七、注意的一些事项

Eclipse中java设置中compiler的JDK要选择1.4或者以上,Install JARS中JDK要选择1.5或者以上。

项目编码要用utf-8

Eclipse上gwt代码基础

相关推荐