第四章:Data与Components
本章我们要学习,GXT是如何允许我们和Data协同工作的。我们会着眼与components的检索,操作,加工data的能力。并且学习具有操作数据能力的components。
本章,我们会涉及到如下GXt功能集
- ModelData
- BeanModel
- BeanModelTag
- BeanModelMarker
- BeanModelFactory
- Stores
- DataProxies
- DataReaders
- ListLoadResults
- ModelType
- Loaders
- LoadConfigs
- ListField
- ComboBox
- Grid
- ColumnModel
- ColumnConfig
- GridCellRenderer
操作数据(Data)
AJAX应用,包括用GXT搭建的应用程序,其中一个最大的优势在于——在浏览器中可以直接操作数据。GXT提供了非常有用的可以操作数据的components(Data-backed components),可以允许用户直接通过他们操作数据。比如ListField,ComboBox,Grid等components。通过使用这些components,可以方便快捷的对数据进行过滤,排序,编辑内容等操作。
当然还有另一组非可视化的控件集合:负责获得远程数据,缓存客户端数据,传递数据给可视化components。
我们这章都会涉及到他们。但是,首先我们要创建一组data,作为可视化components(Data-backed components)的数据源。
ModelData接口
GXT提供了ModelData接口。data-backed components使用的任何data objects必须实现此接口。比如查看一下GXT中ListField的类定义,就明白此话的含义了:public class ListField<D extends ModelData> extends Field<D> implements SelectionProvider<D>
ModelData接口提供了执行期间检索names和values的能力。GWT不支持反射,而GXT则使用反射机制。摘自ModelData接口里的注释
:
/**
* Primary interface for GXT model objects without support events. Models
* support a form of "introspection" as property names and values can be
* retrieved at runtime.
*/
在我们RSSReader项目里,目前我们使用的Feed JavaBean去存储feed 数据。 但是Feed类还没有实现ModelData接口,所以Feed类还不能够作为data-backed components的数据源!
想要让一个JaveBean可以作为data-backed components的数据源,有下面三种方法:
1.修改Feed JaveBean,让其extends com.extjs.gxt.ui.client.data.BaseModel。这种方法不可取,因为改动量大,而且keys容易出错,看代码便知晓:
public class Feed extends BaseModel {
public Feed () {
}
public Feed (String uuid) {
set("uuid", uuid);
}
public String getDescription() {
return get("description");
}
public String getLink() {
return get("link");
}
public String getTitle() {
return get("title");
}
public String getUuid() {
return get("uuid");
}
public void setDescription(String description) {
set("description", description);
}
public void setLink(String link) {
set("link", link);
}
public void setTitle(String title) {
set("title", title);
}
}
2.修改Feed JaveBean,让其implements com.extjs.gxt.ui.client.data.BeanModelTag。具体代码如下:
public class Feed implements Serializable, BeanModelTag {
private String description;
private String link;
private String title;
private String uuid;
public Feed() {
}
public Feed(String uuid) {
this.uuid = uuid;
}
public String getDescription() {
return description;
}
public String getLink() {
return link;
}
public String getTitle() {
return title;
}
public String getUuid() {
return uuid;
}
public void setDescription(String description) {
this.description = description;
}
public void setLink(String link) {
this.link = link;
}
public void setTitle(String title) {
this.title = title;
}
}
3.新建一个类FeedBeanModel,实现BeanModelMarker 接口,通过在FeedBeanModel类中的注解@BEAN,指定此类包装了Feed JavaBean。此方法可以避免直接修改Feed JaveBean。我们推荐使用此方法。
- Feed JavaBean在shared包下,但是BeanModel相关的类,属于client端的代码。所以新建包:com.danielvaughan.rssreader.client.model:
package com.danielvaughan.rssreader.client.model;
import com.extjs.gxt.ui.client.data.BeanModelMarker;
import com.extjs.gxt.ui.client.data.BeanModelMarker.BEAN;
@BEAN(com.danielvaughan.rssreader.shared.model.Feed.class)
public class FeedBeanModel implements BeanModelMarker {
}
- @BEAN(com.danielvaughan.rssreader.shared.model.Feed.class)就指定了FeedBeanModel是Feed的包装BeanModel类。
总结
简单明了的说,本章就是讲了如下意思:- 如果想让Data-backed components的组件能够显示出来数据,其数据必须是ModelData。
- 想让一个普通的JavaBean成为ModelData,有三种方法。
- 我们推荐第三种方法实现ModelData——因为不需要修改原先的JavaBean。
- That's all