GWT - GWT Designer开发Ajax应用 (05) 利用RPC传递对象

来源：互联网发布：淘宝卖家如何优化标题编辑：程序博客网时间：2024/04/29 07:41

前篇：GWT - GWT Designer开发Ajax应用 (04)

概要说明：

输入一个ID，从服务器端传递与此ID对应的Contact对象。

1. 新建一个GWT Java Project

图1

设置项目名称为“ContactInfo”，点击Next按钮，

图2

选中Create GWT module，并设定module的名称为“ContactInfo”，Package名称为“com.pnft.ajax”，点击Finish按钮。创建项目的详细过程见GWTDesigner04。

2. 创建一个POJO类：Contact

图3

注意，一定要在com.pnft.ajax.client包中创建。编辑Contact.java代码，使之如下：

package com.pnft.ajax.client;

import com.google.gwt.user.client.rpc.IsSerializable;

public class Contact implements IsSerializable

{

private int id;

private String name;

private String sex;

private int age;

private String email;

private String address;

private String phone;

public Contact()

{

}

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getSex() {

return sex;

}

public void setSex(String sex) {

this.sex = sex;

}

public int getAge() {

return age;

}

public void setAge(int age) {

this.age = age;

}

public String getEmail() {

return email;

}

public void setEmail(String email) {

this.email = email;

}

public String getAddress() {

return address;

}

public void setAddress(String address) {

this.address = address;

}

public String getPhone() {

return phone;

}

public void setPhone(String phone) {

this.phone = phone;

}

注意：一定要使其实现IsSerializable接口，否则Contact对象不能正确传递。

3. 创建一个GWT Remote Service，并将其取名为ContactInfoService。

图4

创建Remote Service的详细步骤，请见GWTDesigner04。

在ContactInfoService中增加一个方法：public Contact getContact(int id);

使得整个ContactInfoService.java代码如下：

public interface ContactInfoService extends RemoteService

{

public Contact getContact(int id);

/**

* Utility class for simplifying access to the instance of async service.

public static class Util {

private static ContactInfoServiceAsync instance;

public static ContactInfoServiceAsync getInstance(){

if (instance == null) {

instance = (ContactInfoServiceAsync) GWT.create(ContactInfoService.class);

ServiceDefTarget target = (ServiceDefTarget) instance;

target.setServiceEntryPoint(GWT.getModuleBaseURL() + "ContactInfoService");

}

return instance;

}

保存。这会导致在ContactInfoServiceAsync.java和ContactInfoServiceImpl.java中增加和这个接口方法相关的的一些代码。

4. 在GWT Designer中的Design模式下修改ContactInfo.java文件，使其界面如下：

图5

注意：修改了Button，TextBox和Label的相关的css。

5. 在步骤4的基础上修改代码，增加OK按钮的消息处理方法，是整个ContactInfo.java代码如下：

public class ContactInfo implements EntryPoint

{

// 创建Widget

private TextBox textBoxID = new TextBox();

private Button buttonOK = new Button();

private Label labelName = new Label("Name:");

private Label labelSex = new Label("Sex:");

private Label labelAge = new Label("Age:");

private Label labelEmail = new Label("Email:");

private Label labelAddress = new Label("Address:");

private Label labelPhone = new Label("Phone:");

private TextBox textBoxName = new TextBox();

private TextBox textBoxSex = new TextBox();

private TextBox textBoxAge = new TextBox();

private TextBox textBoxEmail = new TextBox();

private TextBox textBoxAddress = new TextBox();

private TextBox textBoxPhone = new TextBox();

private Label labelWarning = new Label("");

// 使相关Widget可见或者不可见

private void setVisible(boolean isVisible)

{

labelName.setVisible(isVisible);

labelSex.setVisible(isVisible);

labelAge.setVisible(isVisible);

labelEmail.setVisible(isVisible);

labelAddress.setVisible(isVisible);

labelPhone.setVisible(isVisible);

textBoxName.setVisible(isVisible);

textBoxSex.setVisible(isVisible);

textBoxAge.setVisible(isVisible);

textBoxEmail.setVisible(isVisible);

textBoxAddress.setVisible(isVisible);

textBoxPhone.setVisible(isVisible);

labelWarning.setVisible(!isVisible);

}

public void onModuleLoad()

{

final RootPanel rootPanel = RootPanel.get();

// Widget在rootPanel中的布局，由GWT Designer自动生成

textBoxID = new TextBox();

rootPanel.add(textBoxID, 42, 41);

buttonOK = new Button();

rootPanel.add(buttonOK, 182, 37);

buttonOK.setSize("46px", "27px");

buttonOK.setText("OK");

labelName = new Label("Name:");

rootPanel.add(labelName, 70, 105);

labelSex = new Label("Sex:");

rootPanel.add(labelSex, 80, 130);

labelAge = new Label("Age:");

rootPanel.add(labelAge, 80, 155);

labelEmail = new Label("Email:");

rootPanel.add(labelEmail, 70, 180);

labelAddress = new Label("Address:");

rootPanel.add(labelAddress, 55, 205);

labelPhone = new Label("Phone:");

rootPanel.add(labelPhone, 65, 230);

textBoxName = new TextBox();

rootPanel.add(textBoxName, 135, 100);

textBoxName.setEnabled(false);

textBoxSex = new TextBox();

rootPanel.add(textBoxSex, 135, 125);

textBoxSex.setEnabled(false);

textBoxSex.setWidth("63px");

textBoxAge = new TextBox();

rootPanel.add(textBoxAge, 135, 150);

textBoxAge.setEnabled(false);

textBoxAge.setWidth("63px");

textBoxEmail = new TextBox();

rootPanel.add(textBoxEmail, 135, 175);

textBoxEmail.setEnabled(false);

textBoxEmail.setVisibleLength(30);

textBoxEmail.setWidth("263px");

textBoxAddress = new TextBox();

rootPanel.add(textBoxAddress, 135, 200);

textBoxAddress.setEnabled(false);

textBoxAddress.setVisibleLength(30);

textBoxAddress.setWidth("263px");

textBoxPhone = new TextBox();

rootPanel.add(textBoxPhone, 135, 225);

textBoxPhone.setEnabled(false);

textBoxPhone.setSize("124px", "21px");

labelWarning = new Label("");

rootPanel.add(labelWarning, 40, 78);

labelWarning.setWidth("221px");

// 开始时使相关Widget不可见

setVisible(false);

// 消息响应方法

buttonOK.addClickListener(new ClickListener()

{

public void onClick(final Widget sender)

{

ContactInfoServiceAsync cisa = (ContactInfoServiceAsync)

GWT.create(ContactInfoService.class);

((ServiceDefTarget)cisa).setServiceEntryPoint(GWT.getModuleBaseURL() +

"ContactInfoService");

// 如果textBoxID为空，则将其值设为0，否则转换成对应的数字

Integer aInt = new Integer(0);

if (textBoxID.getText() != "")

{

aInt = new Integer(Integer.parseInt(textBoxID.getText()));

}

cisa.getContact(aInt.intValue(), new AsyncCallback()

{

public void onFailure(Throwable caught)

{

// 失败

Window.alert("Failed to get response form server:/n" +

caught.getMessage());

}

public void onSuccess(Object result)

{

// 成功。有Contact对象返回

Contact contact = (Contact)result;

if(contact != null)

{

// 如果contact不为空，则显示相关Wdiget，并根据返回结果，设置相应的值

setVisible(true);

textBoxName.setText(contact.getName());

textBoxSex.setText(contact.getSex());

textBoxAge.setText((new Integer(contact.getAge())).toString());

textBoxEmail.setText(contact.getEmail());

textBoxAddress.setText(contact.getAddress());

textBoxPhone.setText(contact.getPhone());

}

else

{

// 如果contact为空，则不隐藏相关的Widget，并在labelWarning上显示

// "No person with such an ID!"

setVisible(false);

labelWarning.setText("No person with such an ID!");

textBoxName.setText("");

textBoxSex.setText("");

textBoxAge.setText("");

textBoxEmail.setText("");

textBoxAddress.setText("");

textBoxPhone.setText("");

}

});

}

});

}

6. 在服务器端实现在ContactInfoServiceImpl.java中定义的getContact方法如下：

@Override

public Contact getContact(int id)

{

Contact contact = new Contact();

if(id == 100)

{

// 假设一下数据是从数据库或其他数据源中得到

contact.setId(100);

contact.setName("玄机逸士");

contact.setSex("男");

contact.setAge(30);

contact.setEmail("pathuang68@gmail.com");

contact.setPhone("18968919681");

contact.setAddress("中国北京东城区xx街道xx号xx楼xx房间");

return contact;

}

return null;

}

到此，所有代码的开发工作已经完成。

7. 在hosted mode运行。

图6

结果如下：

图7

输入100，并点击OK按钮，得到

图8

输入101，点击OK按钮将得到，

图9

结果正确。

8. 部署。

图10

部署到D:/Tomcat6/webapps目录下：

图11

点击OK按钮即可。

9. web mode下的运行结果(启动Tomcat，如果没有启动的话)：

- IE6中的结果：

图12

输入100，点击OK按钮，

图13

输入101，点击OK按钮，

图14

结果正确。

- 在FireFox3中的运行结果：

图15

输入100，点击OK按钮，

图16

输入101，点击OK按钮，

图17

运行结果也正确。但表现形式和IE6有所不同，同时GWT Designer自动产生的css的作用似乎也没有表现出来。

10. 建立数据库表，并插入测试数据。

图18

利用MySQL Administrator，在数据库andrew中新建一个数据表，各字段信息如上图，它们和Contact.java中的属性一一对应。

新建一个sql文件testdata.sql，其内容如下：

insert into contact(name, sex, age, email, phone, address) values('玄机逸士01', '男', 30, 'pathuang30@163.com', '13823098201', '中国北京市东城区x街道x大厦x层x房间');

insert into contact(name, sex, age, email, phone, address) values('玄机逸士02', '男', 31, 'pathuang31@163.com', '13823098202', '中国北京市东城区x街道x大厦x层x房间');

……

insert into contact(name, sex, age, email, phone, address) values('玄机逸士60', '男', 89, 'pathuang69@163.com', '13823098260', '中国北京市东城区x街道x大厦x层x房间');

共60条记录，也就是说他们的ID是从1到60。

用如下方式导入testdata.sql中的数据：

图19

11. 修改ContactInfoServiceImpl.java，使其从真正意义上链接数据库。代码如下：

public class ContactInfoServiceImpl extends RemoteServiceServlet

implements ContactInfoService

{

private static Statement mysqlStmt;

private Statement getStatement()

{

Connection conn = null;

Statement stmt = null;

try

{

// localhost:3306 mysql服务器地址:mysql服务端口

// andrew 数据库名称

// user=patrick 用户名为patrick

// password=hi 密码为hi

Class.forName("com.mysql.jdbc.Driver");

conn = DriverManager.getConnection(

"jdbc:mysql://localhost:3306/andrew?user=patrick&password=hi");

stmt = conn.createStatement();

}

catch(Exception e)

{

e.printStackTrace();

}

return stmt;

}

// 重载servlet的init方法，在这里获取mysqlStmt

@Override

public void init() throws ServletException

{

mysqlStmt = getStatement();

super.init();

}

private ResultSet selectByID(int id)

{

ResultSet rs = null;

try

{

rs = mysqlStmt.executeQuery("select * from Contact where id = '" + id + "'" );

}

catch(Exception ex)

{

ex.printStackTrace();

}

return rs;

}

@Override

public Contact getContact(int id)

{

Contact contact = new Contact();

ResultSet rs = selectByID(id);

try

{

if(rs.next())

{

contact.setName(rs.getString("name"));

contact.setSex(rs.getString("sex"));

contact.setAge(((Integer)rs.getInt("age")).intValue());

contact.setEmail(rs.getString("email"));

contact.setPhone(rs.getString("phone"));

contact.setAddress(rs.getString("address"));

return contact;

}

catch(Exception e)

{

e.printStackTrace();

}

return null;

}

保存，并重新发布。结果如下：

图20

输入100，点击OK按钮，得到，

图21

根据前面数据库表的测试数据知道ID的范围是1~60，因此不存在ID为100的情况。

输入为1的情况：

图22

输入为30的情况：

图23

输入为60的情况：

图24

后篇：GWT - GWT Designer开发Ajax应用 (06) - 常用控件使用