Do you think IIT Guwahati certified course can help you in your career?
Introduction🌼
The CellTree Widget in GWT represents a view that lowkey resembles a tree. This GWT CellTree Widget can be used to create complex layouts, for example, the accordion menu. Now let's see its class declaration and other properties like class construction and methods.
A panel with all of its widgets arranged in a tree-like fashion.
Class Declaration📜
Declaration of com.google.gwt.user.cellview.client.CellTree class −
public class CellTree
extends AbstractCellTree
implements HasAnimation, Focusable
Nested Class Summary🧅
GWT CellTree Widget uses the different types of classes with specific purposes; some of the nested classes are defined below
Modifier and the Type
Class and it’s Description
static interface
CellTree.BasicResources
Resources that correspond to the GWT standard style theme.
(package private) static interface
CellTree.BasicStyle
Styles used by CellTree.BasicResources.
static interface
CellTree.CellTreeMessages
CellTree's styles. BasicResources.
static class
CellTree.NodeAnimation
A node’s animation.
static interface
CellTree.Resources
A ClientBundle containing images for this widget.
static class
CellTree.RevealAnimation
The contents of child nodes are revealed by a CellTree.NodeAnimation.
static class
CellTree.SlideAnimation
A CellTree.NodeAnimation for bringing children into focus.
static interface
CellTree.Style
This widget's styles.
(package private) static interface
CellTree.Template
Class Constructors and Description🗒️
GWT CellTree Widget constructors and their descriptions are listed below
Constructor
Description
CellTree(TreeViewModel viewModel, T ValueOfRoot)
Create a new CellTree.
CellTree(TreeViewModel viewModel, T ValueOfRoot, CellTree.Resources resources)
Create a new CellTree.
Class Methods and Description🗒️
GWT CellTree Widget methods and their descriptions are listed below:
Sr.No.
Function name
Description
1
protected char getAccessKey()
Obtain the access key.
2
CellTree.NodeAnimation getAnimation()
If animations are enabled, get the animation used to open and close nodes in this tree.
3
int getDefaultNodeSize()
Get the maximum number of children to display under each tree node by default.
4
TreeNode getRootTreeNode()
Get the TreeNode's root.
5
int getTabIndex()
The widget's position in the tab index is returned.
6
boolean isAnimationEnabled()
If animations are enabled, this function returns true; otherwise, it returns false.
7
protected void onBlur()
When the keyboard selected node loses focus, this method is called.
8
void onBrowserEvent(Event event)
When a browser event is received, this event is fired.
9
protected void onFocus()
When the keyboard selected node gains focus, this method is called.
10
void setAccessKey(char key)
Sets the 'access key' of the widget.
GWT CellTree Widget Methods Inherited⚓
GWT CellTree Widget inherits the following methods
In this example, we look for the usage of a CellTree Widget in GWT in simple steps. Now let's have a look at the step-wise construction of the GWT CellTree Widget.
Step 1: We’ll start off by creating a project with the name CellTree Widget under a package com.codingninjas.
Step 2: Then change the CellTreeWidget.gwt.xml, CellTreeWidget.css, CellTreeWidget.html, and CellTreeWidget.java as explained below.
Step 3: Now, Compile and run the application to get the output.
Here’s the content of the modified module descriptor src/com.codingninjas/CellTreeWidget.gwt.xml.
<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'HelloWorld'>
<inherits name = 'com.google.gwt.user.User'/>
<inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
<entry-point class = 'com.codingninjas.client.HelloWorld'/>
<source path ='client'/>
<source path = 'shared'/>
</module>
Content of the modified Style Sheet file war/CellTreeWidget.css.
Let us have the following content of the Java file src/com.codingninjas/CellTreeWidget.java, which will demonstrate the use of the CellTree widget.
package com.codingninjas.client;
import java.util.ArrayList;
import java.util.List;
import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.cell.client.Cell;
import com.google.gwt.cell.client.TextCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.user.cellview.client.CellTree;
import com.google.gwt.user.cellview.client.HasKeyboardSelectionPolicy.KeyboardSelectionPolicy;
import com.google.gwt.user.cellview.client.TreeNode;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.view.client.ListDataProvider;
import com.google.gwt.view.client.SingleSelectionModel;
import com.google.gwt.view.client.TreeViewModel;
public class HelloWorld implements EntryPoint {
/**
*A collection of songs.
*/
private static class Playlist {
private final String name;
private final List songs = new ArrayList();
public Playlist(String name) {
this.name = name;
}
/**
* Insert a song into the playlist.
* @param name for song’s name
*/
public void addSong(String name) {
songs.add(name);
}
public String getName() {
return name;
}
/**
* Return a list of all the songs in the playlist.
*/
public List getSongs() {
return songs;
}
}
/**
* A classical music composer.
*/
private static class Composer {
private final String name;
private final List playlists = new ArrayList();
public Composer(String name) {
this.name = name;
}
/**
* Create a playlist in the composer.
* @param playlist to add to the playlist
*/
public Playlist addPlaylist(Playlist playlist) {
playlists.add(playlist);
return playlist;
}
public String getName() {
return name;
}
/**
* Return this composer's playlist.
*/
public List getPlaylists() {
return playlists;
}
}
/**
* The model that defines the tree's nodes.
*/
private static class CustomTreeModel implements TreeViewModel {
private final List composers;
/**
* This model of selection is shared by all leaf nodes.
A selection model can also be shared by all tree nodes,
or each set of child nodes can have its own instance.
This gives you control over how nodes are selected.
*/
private final SingleSelectionModel selectionModel = new SingleSelectionModel();
public CustomTreeModel() {
// Create information’s database.
composers = new ArrayList();
// Add compositions by Bach.
{
Composer bach = new Composer("Bach");
composers.add(bach);
Playlist concertos = bach.addPlaylist(new Playlist("Pieces"));
concertos.addSong("washington bach");
concertos.addSong("happy holiday");
concertos.addSong("the origin of sarabanda");
concertos.addSong("christmas oratorio");
concertos.addSong("hercules at the crossroad");
Playlist quartets = bach.addPlaylist(new Playlist("Lindsey String");
Playlist sonatas = bach.addPlaylist(new Playlist("Pagenini"));
Playlist symphonies = bach.addPlaylist(new Playlist("Symphonies"));
}
/**
* Retrieve the @link NodeInfo containing the children of the specified value.
*/
public NodeInfo getNodeInfo(T value) {
if (value == null) {
// LEVEL 0.
// As the root value, we specified null. Please return the composers.
// Create a data provider with a list of composers.
ListDataProvider dataProvider = new ListDataProvider(composers); // Make a cell to show a composer.
Cell cell = new AbstractCell() {
@Override public void render(Composer value, Object key, SafeHtmlBuilder sb) {
if (value != null) {
sb.appendHtmlConstant(" ");
sb.appendEscaped(value.getName());
}
}
};
// Return node information that connects the data provider and the cell.
return new DefaultNodeInfo(dataProvider, cell);
} else if (value instanceof Composer) { // We want the composer's children. Bring back the playlists.
ListDataProvider dataProvider = new ListDataProvider(((Composer) value).getPlaylists());
Cell cell = new AbstractCell() {
@Override public void render(Playlist value, Object key, SafeHtmlBuilder sb) {
if (value != null) {
sb.appendHtmlConstant(" ");
sb.appendEscaped(value.getName());
}
}
};
return new DefaultNodeInfo(dataProvider, cell);
} else if (value instanceof Playlist) { // We want the playlist's offspring. Please return the songs.
ListDataProvider dataProvider = new ListDataProvider(((Playlist) value).getSongs()); // Make use of the shared selection model.
return new DefaultNodeInfo(dataProvider, new TextCell(), selectionModel, null);
}
return null;
}
/**
* Check to see if the specified value is a leaf node. It is not possible to open leaf nodes.
*/
public boolean isLeaf(Object value) {
// Strings are the songs represented by the leaf nodes.
if (value instanceof String) {
return true;
}
return false;
}
}
public void onModuleLoad() {
// Make a model of the tree.
TreeViewModel model = new CustomTreeModel();
//CellTree style can be obtained by using its BasicResource
//CellTree.Resources res = GWT.create(CellTree.BasicResources.class);
/*
* Using the model, build the tree.
* We use null as the root node's default value.
* CustomTreeModel#getNodeInfo() will be called with the default value.
*/
CellTree tree = new CellTree(model, null);
tree.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED); // By default, the first playlist is displayed.
TreeNode rootNode = tree.getRootTreeNode();
TreeNode firstPlaylist = rootNode.setChildOpen(0, true);
firstPlaylist.setChildOpen(0, true);
VerticalPanel panel = new VerticalPanel();
panel.setBorderWidth(1);
panel.setWidth("300");
panel.add(tree); // Add the widgets to the root panel.
RootPanel.get().add(panel);
}
}
Output:
Frequently Asked Questions
What is GWT?
GWT (Google web toolkit) is an open-source development toolkit provided by google for developing browser-based, complex Ajax applications. We can even develop Rich Internet Applications (RIA) in Java using GWT, which will then be compiled into Javascript and cross-browser compliant.
What is GWT Cell Tree Widget?
The Cell Tree widget represents a panel that lays all of its widgets in a tree-like fashion.
What characteristics does GWT have?
Asynchronous remote procedure calls, history management, bookmarking, UI abstraction, internationalization, and cross-browser portability.
Who uses GWT - Google Web Toolkit?
Companies like Crimsonlogic Pte. Ltd., StudyBlue Inc., and Intrado Inc. are using GWT.
How advantageous is learning GWT?
Many Google projects, both internal and external, are based on GWT; therefore Google will need to sustain the technology as long as they need to keep improving the front-end.
Conclusion
In this article, we have extensively discussed how the project GWT CellTree Widget. We have discussed its constructors, methods, and implementation. GWT CellTree Widget is a part of form widgets that are used in many places while developing applications. and if you would like to learn more, check out our articles on
7+ registered 
