GXT之旅：第三章：表单和窗口(4)——表单的提交和RPC

时间：2023-03-08 16:54:48

表单使用HTTP提交

表单有两种提交方式，第一种就是传统的HTTP提交。

最直接的步骤就是：

  • 使用FormPanel的setAction()方法，去定义submit的URL
  • 使用FormPanel的isValid()方法，去验证所有的fields是否有正确
  • 如果正确，使用FormPanel的submit()方法提交表单。
  1. setAction("http://www.example.com/submit.php");
  2. final Button btnSave = new Button("Save");
  3. btnSave.setIconStyle("save");
  4. btnSave.addSelectionListener(new SelectionListener<ButtonEvent>()
  5. {
  6. public void componentSelected(ButtonEvent ce) {
  7. if (isValid())
  8. {
  9. submit();
  10. } }
  11. });
  12. addButton(btnSave);
setAction("http://www.example.com/submit.php");

final Button btnSave = new Button("Save");

btnSave.setIconStyle("save");

btnSave.addSelectionListener(new SelectionListener<ButtonEvent>()

{

public void componentSelected(ButtonEvent ce) {

if (isValid())

{

submit();

} }

});

addButton(btnSave);

GWT RPC

表单就拥有了另外一种提交方式——RPC。对于GWT和GXT来说，他不像传统的web应用，在client端我们可以选择存储和操作java类型的数据——不管这些数据是在web前端还是通过GWT RPC或者JSON别的什么方法提交到后端，我们都可以操作他们。

在RSSReader项目里，我们就会使用GWT RPC。

创建一个Feed service

为了能够检索到Feed对象，就必须有唯一的ID。java里有专门用来生成的主键的类——UUID。接下来我们要实现一个功能，就是当在client端所使用Feed的实例对象，是通过RPC从server端返回的，并且已经赋值ID的。因为先前，我们所创建的Feed类，就是为了在client和server两端都可以使用。那么接下来就要创建一个GWT RPC的service去处理Feed实例对象。

  • 创建新包：com.danielvaughan.rssreader.client.services，在此包下，新建一个接口FeedService，继承GWT RemoteService。定义一个方法createNewFeed()：
  1. package com.danielvaughan.rssreader.client.services;
  2. import com.danielvaughan.rssreader.shared.model.Feed;
  3. import com.google.gwt.user.client.rpc.RemoteService;
  4. import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
  5. @RemoteServiceRelativePath("feed-service")
  6. public interface FeedService extends RemoteService {
  7. Feed createNewFeed();
  8. }
package com.danielvaughan.rssreader.client.services;

import com.danielvaughan.rssreader.shared.model.Feed;

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

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

@RemoteServiceRelativePath("feed-service")

public interface FeedService extends RemoteService {

	Feed createNewFeed();

}
  • 注意1：@RemoteServiceRelativePath("feed-service") 注解了当前这个service，在web.xml应该配置的url映射地址。也就是说不管哪个类实现了FeedService接口，那么他在web.xml的servlet url映射就应该设置成"feed-service"。
  • 注意2：FeedService接口创建完毕之后，GWT就会自动的提示你去创建与之对应的另外一个接口FeedServiceAsync

GXT之旅：第三章：表单和窗口(4)——表单的提交和RPC

  1. package com.danielvaughan.rssreader.client.services;
  2. import com.danielvaughan.rssreader.shared.model.Feed;
  3. import com.google.gwt.user.client.rpc.AsyncCallback;
  4. public interface FeedServiceAsync {
  5. void createNewFeed(AsyncCallback<Feed> callback);
  6. }
package com.danielvaughan.rssreader.client.services;

import com.danielvaughan.rssreader.shared.model.Feed;

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

public interface FeedServiceAsync {

	void createNewFeed(AsyncCallback<Feed> callback);

}
  • FeedServiceAsync接口中生成了FeedService接口中的，异步回调的抽象方法。其目的是在createNewFeed()方法执行之后的返回期间会调用FeedServiceAsync接口中的与之对应的createNewFeed(AsyncCallback<Feed> callback)方法，来作为createNewFeed()方法执行情况的反馈。
  • 之前的两个接口都是属于client端的services，具体的实现类就应该属于的server端的services。所以新建包：com.danielvaughan.rssreader.server.services，在此包下创建FeedServiceImpl类实现FeedService，继承RemoteServiceServlet。具体的实现如下代码：
  1. package com.danielvaughan.rssreader.server.services;
  2. import java.io.IOException;
  3. import java.util.UUID;
  4. import com.danielvaughan.rssreader.client.services.FeedService;
  5. import com.danielvaughan.rssreader.shared.model.Feed;
  6. import com.google.gwt.user.server.rpc.RemoteServiceServlet;
  7. @SuppressWarnings("serial")
  8. public class FeedServiceImpl extends RemoteServiceServlet implements
  9. FeedService {
  10. @Override
  11. public Feed createNewFeed() {
  12. UUID uuid = UUID.randomUUID();
  13. return new Feed(uuid.toString());
  14. }
  15. }
package com.danielvaughan.rssreader.server.services;

import java.io.IOException;

import java.util.UUID;

import com.danielvaughan.rssreader.client.services.FeedService;

import com.danielvaughan.rssreader.shared.model.Feed;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;

@SuppressWarnings("serial")

public class FeedServiceImpl extends RemoteServiceServlet implements

		FeedService {

	@Override

	public Feed createNewFeed() {

		UUID uuid = UUID.randomUUID();

		return new Feed(uuid.toString());

	}

}
  • 配置FeedServiceImpl的servlet映射。编辑web.xml
  1. <servlet>
  2. <servlet-name>feedServlet</servlet-name>
  3. <servlet-class>
  4. com.danielvaughan.rssreader.server.services.FeedServiceImpl
  5. </servlet-class>
  6. </servlet>
  7. <servlet-mapping>
  8. <servlet-name>feedServlet</servlet-name>
  9. <url-pattern>/rssreader/feed-service</url-pattern>
  10. </servlet-mapping>
<servlet>

<servlet-name>feedServlet</servlet-name>

<servlet-class>

com.danielvaughan.rssreader.server.services.FeedServiceImpl

</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>feedServlet</servlet-name>

<url-pattern>/rssreader/feed-service</url-pattern>

</servlet-mapping>
  • 注意：<url-pattern>/rssreader/feed-service</url-pattern>其中的rssreader是小写，这与<script type="text/javascript" language="javascript"
        src="rssreader/rssreader.nocache.js"></script>是一直的。
  • RPC的services已经创建完毕了。只要记住他包括client端和server端代码。client端是接口的定义，server端是具体的实现。web.xml里配置的server端的servlet。

GXT之旅：第三章：表单和窗口(4)——表单的提交和RPC

相关文章