Remote TreeTable

Overview

This tutorial will walk through the steps to create a TreeTable that loads its children on demand using GWT RPC. The tutorial will cover data loading, the store, and binder API.

FileService

Service Interface

The first step will be to define and implement the remote service and data loading code.

There will be 2 types of model objects: FolderModel and FileModel which will be ModelData instances that extend BaseModelData. Lets start with the service interface. As with all GWT RPC services, FileService extends GWT RemoteService.

Async Service Interface

Next we will define the asynchronous version of the FileService interface. This is a standard requirement for GWT RPC. /** * Async <code>FileService<code> interface. */ public interface FileServiceAsync { public void getFolderChildren(FileModel model, AsyncCallback<List<FileModel>> children); }

Service Implementation

Next we need to create the server side implementation of the FileService. This class must extend RemoteServiceImpl and implement FileService. The class navigates the gxt.jar folders and files. public class FileServiceImpl extends RemoteServiceServlet implements FileService { private File root; private FilenameFilter filter; public FileServiceImpl() { URL rootUrl = getClass().getClassLoader().getResource(""); root = new File(rootUrl.getFile()); filter = new FilenameFilter() { public boolean accept(File dir, String name) { return !name.startsWith("."); } }; } public List<FileModel> getFolderChildren(FileModel folder) { File[] files = null; if (folder == null) { files = root.listFiles(filter); } else { File f = new File(folder.getPath()); files = f.listFiles(filter); } List<FileModel> models = new ArrayList<FileModel>(); for (File f : files) { FileModel m = null; if (f.isDirectory()) { m = new FolderModel(f.getName(), f.getAbsolutePath()); } else { m = new FileModel(f.getName(), f.getAbsolutePath()); } m.set("date", new Date(f.lastModified())); models.add(m); } return models; } }

Module Config

web.xml

Both the servlet and servlet mapping must be defined in the web.xml. This step is not required when testing with GWT, but is required when deploying your application to your respective servlet container. <servlet> <servlet-name>fileservice</servlet-name> <servlet-class>com.extjs.gxt.samples.explorer.server.FileServiceImpl</servlet-class> </servlet> <servlet-mapping> <servlet-name>service</servlet-name> <url-pattern>/service</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>fileservice</servlet-name> <url-pattern>/fileservice</url-pattern> </servlet-mapping>

Client Side Code

Service

First, we will get a reference to the new service using the standard GWT boilerplate code:

Data Proxy, Loader, and Store

The TreeTable will be bound to a TreeStore. The TreeStore will use a TreeLoader to load the remote data. The TreeLoader will use an RpcProxy to read the data from the server.

The RpcProxy is a data proxy designed to work with GWT RPC. When declaring the proxy, you specify both the load config and load result type. In our case, the load config will be a TreeModel and the result will be a list of file models.

We override the load method and use the passed callback with our remote call.

Next we define our data loader. We will use a TreeLoader. Loaders can use both a DataReader and a DataProxy. We will not be using a DataReader as the data returned from the server is already the desired type. This would not be the case if the data proxy returned XML. Then a DataReader would be needed to convert the XML into a list of FileModel objects.

We pass the proxy into the constructor and also override the hasChildren method. Since we are loading the children on demand, the Tree needs to know if if the item is a leaf node, or has children. Normally, the TreeItem checks to see if it has any children, but this will not work with lazy loading. The hasChildren method allows the data loader to control which nodes are treated as leafs before the children have been realized.

Next we create our TreeStore and pass it our TreeLoader. Stores can work with, and without, loaders. We also add a StoreSorter that ensures that the folders are listed before the files in our tree table.

And last, we create our TreeBinder which will "bind" our store to the tree table. Then load() is called on our loader to begin the load operation.

The following steps occur when load is called:

1. load() is called on the loader, null is passed as the input as this is a request for the root elements which have no parent
2. The loader uses the proxy to load the data
3. Our RpcProxy executes, and the service call is made
4. The RpcProxy returns the data to the loader and the loader fires the Load event
5. The Store is listening for the loader's events, gets the new data, adds it to the store, and fires the DataChanged event
6. The TreeBinder is listening to store events. Gets the DataChanged event, and builds the first level of tree table items.

TreeBinder listens for the BeforeExpand event on Tree. If the children have not been loaded, the binder cancels the expand event, then uses its loader to make a request to get the children for the expanding item. The same steps as above are repeated. The only differece is that when binder gets the DataChanged event, the data will be for the active parent, so the child tree table items are then created and the node is expanded.

The complete code for this tutorial is included in the Explorer Demo. See com.extjs.gxt.samples.explorer.client.pages.TreeTablePage.