GXT之旅：第四章：Data与Components(1)——ModelData

第四章：Data与Components

本章我们要学习，GXT是如何允许我们和Data协同工作的。我们会着眼与components的检索，操作，加工data的能力。并且学习具有操作数据能力的components。

本章，我们会涉及到如下GXt功能集

Data

• ModelData
• BeanModel
• BeanModelTag
• BeanModelMarker
• BeanModelFactory
• Stores

Remote Data

•  DataProxies
• DataReaders
• ListLoadResults
• ModelType
• Loaders
• LoadConfigs
  

Data-backed components

• 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