GXT之旅：第三章：表单和窗口(3)——表单

新建FeedForm

先前窗口的工作已经完成了，下面要在窗口里加入表单。

• 新建包：com.danielvaughan.rssreader.client.forms，在此包下新建FeedForm类，继承FormPanel。
• 通过构造函数，设置隐藏题头

public FeedForm()
{
setHeaderVisible(false);
}

• 定义表单中的Fields，就是先前提到的title，link，description

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

• 我们希望这三个Fields，在当前的FeedForm被渲染之后，才被渲染。因此override onRender()方法

@Override
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);
tfTitle.setFieldLabel("Title");
taDescription.setFieldLabel("Description");
tfLink.setFieldLabel("Link");
add(tfTitle);
add(taDescription);
add(tfLink);
}

• FeedForm类编写完毕之后，要把它添加到先前的FeedWindow类中。因此打开FeedWindow类，加入属性FeedForm

private final FeedForm feedForm = new FeedForm();

• 同样，在onRender()方法中渲染feedForm
  

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

• 此时运行程序，再次点击Create feed button的时候，弹出的FeedWindow里就会显示FeedForm
  

Validation Fields

GXT Fields提供内建的校验功能。通过isValid()方法，可以验证任何的Field是否包含有效值。当Fields被包含在FormPanel中，那么就可以调用FormPanel.isValid()来验证其所有的子Fields是否都有效。

默认情况下，Fields的校验时间是在用户编辑完毕（on blur）。当然我们可以通过setAutoValidate(true)，让用户的每次录入都会校验（key press）。

• 接下来，对FeedForm的表单Fields进行校验。打开FeedForm class，编辑onRender()，加入校验的设置代码：

@Override
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);
tfTitle.setFieldLabel("Title");
tfTitle.setAllowBlank(false);
taDescription.setFieldLabel("Description");
taDescription.setAllowBlank(false);
tfLink.setFieldLabel("Link");
tfLink.setAllowBlank(false);
tfLink.setRegex("^http\\://[a-zA-Z0-9\\-\\.]+\\.[a-zA-Z]{2,3}(/\\S*)?$");
}

• 运行效果如下：

设置验证提示消息

就像设置校验策略一样，同样可以设置不同验证策略下的提示内容——FieldMessages

Fields已经使用内部类实现了FieldMessages。所以设置消息的最好方式是使用Field里的getMessages()获得FieldMessages之后，在设置合适的消息内容。

• 具体代码如下。
  

@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*)?$");
		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);
	}

• 显示效果：

• 完整的FeedForm类如下：

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*)?$");
		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);
	}
}