一、环境配置
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的目录。如下图:
三、建立一个名为 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;
五、 配置 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文件中加入
<link href="js/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
在 Register.gwt.xml文件中加入
<inherits name="com.gwtext.GwtExt"/>
修改 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