GXT之旅：第三章：表单和窗口(6)——表单提交的后续

创建RSS XML

接下来，要把用户录入的feed内容保存起来。最合适的方式是，保存为RSS XML格式的文档。所以要在FeedService接口中新增一个方法saveFeed()方法。

我们需要使用JDOM 1.1库，操作feed对象，将其转换成XML格式。http://www.jdom.org/downloads/index.html下载jdom-1.1.2.jar包，放入工作空间里。

• 编辑FeedService接口，加入：

void saveFeed(Feed feed);

• GWT在Eclipse中会提示并自动在FeedServiceAsync接口里生成：

void saveFeed(Feed feed, AsyncCallback<Void> callback);

• 在FeedServiceImpl类中，实现saveFeed方法。

@Override
	public void saveFeed(Feed feed) {
		Element eleRoot = new Element("rss");
		eleRoot.setAttribute(new Attribute("version", "2.0"));

		// Create a document from the feed object
		Document document = new Document(eleRoot);

		Element eleChannel = new Element("channel");
		Element eleTitle = new Element("title");
		Element eleDescription = new Element("description");
		Element eleLink = new Element("link");

		eleTitle.setText(feed.getTitle());
		eleDescription.setText(feed.getDescription());
		eleLink.setText(feed.getLink());

		eleChannel.addContent(eleTitle);
		eleChannel.addContent(eleDescription);
		eleChannel.addContent(eleLink);

		eleRoot.addContent(eleChannel);

		try {
			XMLOutputter serializer = new XMLOutputter();
			Format prettyFormat = Format.getPrettyFormat();
			serializer.setFormat(prettyFormat);
			System.out
					.println("At this point we would serialize the feed "
							+ feed.getTitle()
							+ " to a file. For now we are just going to write it to the console.");
			serializer.output(document, System.out);
		} catch (IOException e) {
			System.out.println("Error saving feed");
		}
	}

• 上面的代码，只是把feed数据，转换成document 。然后将document输出到控制台。
  

• 编辑FeedForm类的save方法。加入RPC的调用代码。

package com.danielvaughan.rssreader.client.forms;

import com.danielvaughan.rssreader.client.RSSReaderConstants;
import com.danielvaughan.rssreader.client.services.FeedServiceAsync;
import com.danielvaughan.rssreader.shared.model.Feed;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextArea;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;

public class FeedForm extends FormPanel {

	private final TextField<String> tfTitle = new TextField<String>();
	private final TextArea taDescription = new TextArea();
	private final TextField<String> tfLink = new TextField<String>();

	public FeedForm() {
		setHeaderVisible(false);
	}

	@Override
	protected void onRender(Element parent, int pos) {
		super.onRender(parent, pos);

		tfTitle.setFieldLabel("Title");
		tfTitle.setAllowBlank(false);
		tfTitle.getMessages().setBlankText("Title is required");

		taDescription.setFieldLabel("Description");
		taDescription.setAllowBlank(false);
		taDescription.getMessages().setBlankText("Description is required");

		tfLink.setFieldLabel("Link");
		tfLink.setAllowBlank(false);
		tfLink.setRegex("^http\\://[a-zA-Z0-9\\-\\.]+\\.[a-zA-Z]{2,3}(/\\S*)?{1}quot;);
		tfLink.getMessages().setBlankText("Link is required");
		tfLink.getMessages()
				.setRegexText(
						"The link field must be a URL e.g. http://www.example.com/rss.xml");

		add(tfTitle);
		add(taDescription);
		add(tfLink);
	}

	public void save(final Feed feed) {
		feed.setTitle(tfTitle.getValue());
		feed.setDescription(taDescription.getValue());
		feed.setLink(tfLink.getValue());

		final FeedServiceAsync feedService = Registry
				.get(RSSReaderConstants.FEED_SERVICE);
		feedService.saveFeed(feed, new AsyncCallback<Void>() {
			@Override
			public void onFailure(Throwable caught) {
				Info.display("RSS Reader",
						"Failed to save feed: " + feed.getTitle());
			}

			@Override
			public void onSuccess(Void result) {
				Info.display("RSS Reader", "Feed " + feed.getTitle()
						+ " saved sucessfully");
			}
		});

	}

}

• 最后当用户录入数据后，提交到server端处理。就会在控制台显示如下格式的xml内容：
  

<rss version="2.0">
<channel>
<title>Example Feed</title>
<description>This is an example feed</description>
<link>http://www.example.com/</link>
</channel>
</rss>

优化LinkFeedPopup

还记得LinkFeedPopup窗口，用来提供用户输入URL的页面吗？现在要给他优化一下，加入validation的代码。

package com.danielvaughan.rssreader.client.components;

import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.KeyListener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.Popup;
import com.extjs.gxt.ui.client.widget.Text;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;

public class LinkFeedPopup extends Popup {
    private final TextField<String> tfUrl = new TextField<String>();

    public LinkFeedPopup() {
        setSize(300, 55);
        setBorders(true);
        setShadow(true);
        setAutoHide(false);
    }

    public void addFeed(String url) {
        Window.alert("We would now attempt to add " + url + " at this point");
    }

    @Override
    protected void onRender(Element parent, int pos) {
        super.onRender(parent, pos);
        final Text txtExplaination = new Text("Enter a feed url");
        final Button btnAdd = new Button("add");
        btnAdd.addSelectionListener(new SelectionListener<ButtonEvent>() {
            public void componentSelected(ButtonEvent ce) {
                if (tfUrl.isValid())
                    addFeed(tfUrl.getValue());
            }
        });

        tfUrl.addKeyListener(new KeyListener() {
            public void componentKeyDown(ComponentEvent event) {
                if (event.getKeyCode() == KeyCodes.KEY_ENTER) {
                    addFeed(tfUrl.getValue());
                }
            }
        });
        tfUrl.setAllowBlank(false);
        tfUrl.setRegex("^http\\://[a-zA-Z0-9\\-\\.]+\\.[a-zA-Z]{2,3}(/\\S*)?$");
        tfUrl.setAllowBlank(false);
        tfUrl.getMessages().setBlankText(
                "Please enter the URL of an existing feed");
        tfUrl.setAutoValidate(true);
        tfUrl
                .getMessages()
                .setRegexText(
                        "The link field must be a URL e.g. http://www.example.com/rss.xml");

        final BorderLayout layout = new BorderLayout();
        setLayout(layout);

        final BorderLayoutData northData = new BorderLayoutData(
                LayoutRegion.NORTH, 20);
        northData.setMargins(new Margins(2));
        add(txtExplaination, northData);

        final BorderLayoutData centerData = new BorderLayoutData(
                LayoutRegion.CENTER);
        centerData.setMargins(new Margins(2));
        add(tfUrl, centerData);

        final BorderLayoutData eastData = new BorderLayoutData(
                LayoutRegion.EAST, 50);
        eastData.setMargins(new Margins(2, 2, 2, 20));
        add(btnAdd, eastData);
    }

}