新建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*)?$");
}
- 运行效果如下:
设置验证提示消息
就像设置校验策略一样,同样可以设置不同验证策略下的提示内容——FieldMessagesFields已经使用内部类实现了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);
}
}