GWT - CellBrowser Widget



The CellBrowser widget represents a browsable view of a tree in which only a single node per level may be open at one time.

Class Declaration

Following is the declaration for<T> class −

public class CellBrowser
   extends AbstractCellTree
      implements ProvidesResize, RequiresResize, HasAnimation

Class Constructors

Sr.No. Constructor & Description

CellBrowser(TreeViewModel viewModel, T rootValue)

Construct a new CellBrowser.


CellBrowser(TreeViewModel viewModel, T rootValue, CellBrowser.Resources resources)

Construct a new CellBrowser with the specified CellBrowser.Resources.

Class Methods

Sr.No. Function name & Description

protected <C> Widget createPager(HasData<C> display)

Create a pager to control the list view.


int getDefaultColumnWidth()

Get the default width of new columns.


int getMinimumColumnWidth()

Get the minimum width of columns.


TreeNode getRootTreeNode()

Get the root TreeNode.


boolean isAnimationEnabled()

Returns true if animations are enabled, false if not.


void onBrowserEvent(Event event)

Fired whenever a browser event is received.


void onResize()

This method must be called whenever the implementor's size has been modified.


void setAnimationEnabled(boolean enable)

Enable or disable animations.


void setDefaultColumnWidth(int width)

Set the default width of new columns.


void set Keyboard Selection Policy (Has Keyboard Selection Policy.Keyboard Selection Policy policy)

Set the HasKeyboardSelectionPolicy.KeyboardSelectionPolicy.


void setMinimumColumnWidth(int minWidth)

Set the minimum width of columns.

Methods Inherited

This class inherits methods from the following classes −





  • java.lang.Object

CellBrowser Widget Example

This example will take you through simple steps to show usage of a CellBrowser Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter −

Step Description
1 Create a project with a name HelloWorld under a package com.tutorialspoint as explained in the GWT - Create Application chapter.
2 Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and as explained below. Keep rest of the files unchanged.
3 Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = ''/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = ''/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>


Following is the content of the modified Style Sheet file war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;

Following is the content of the modified HTML host file war/HelloWorld.html.

      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">

      <h1>CellBrowser Widget Demonstration</h1>
      <div id = "gwtContainer"></div>

Let us have following content of Java file src/com.tutorialspoint/ which will demonstrate use of CellBrowser widget.

package com.tutorialspoint.client;

import java.util.ArrayList;
import java.util.List;


public class HelloWorld implements EntryPoint {

    * A list of songs.
   private static class Playlist {
      private final String name;
      private final List<String> songs = new ArrayList<String>();

      public Playlist(String name) { = name;

       * Add a song to the playlist.
       * @param name the name of the song
      public void addSong(String name) {

      public String getName() {
         return name;

       * Return the list of songs in the playlist.
      public List<String> getSongs() {
         return songs;

    * A composer of classical music.
   private static class Composer {
      private final String name;
      private final List<Playlist> playlists = new ArrayList<Playlist>();

      public Composer(String name) { = name;

       * Add a playlist to the composer.
       * @param playlist the playlist to add
      public Playlist addPlaylist(Playlist playlist) {
         return playlist;

      public String getName() {
         return name;

       * Return the rockin' playlist for this composer.
      public List<Playlist> getPlaylists() {
         return playlists;

    * The model that defines the nodes in the tree.
   private static class CustomTreeModel implements TreeViewModel {

      private final List<Composer> composers;

       * This selection model is shared across all leaf nodes.
       * A selection model can also be shared across all nodes 
       * in the tree, or each set of child nodes can have its 
       * own instance. This gives you flexibility to determine 
       * how nodes are selected.
      private final SingleSelectionModel<String> selectionModel
      = new SingleSelectionModel<String>();
      public CustomTreeModel() {
         // Create a database of information.
         composers = new ArrayList<Composer>();

      // Add compositions by Beethoven.
         Composer beethoven = new Composer("Beethoven");

         Playlist concertos = beethoven.addPlaylist(
         new Playlist("Concertos"));
         concertos.addSong("No. 1 - C");
         concertos.addSong("No. 2 - B-Flat Major");
         concertos.addSong("No. 3 - C Minor");
         concertos.addSong("No. 4 - G Major");
         concertos.addSong("No. 5 - E-Flat Major");

         Playlist quartets = beethoven.addPlaylist(
         new Playlist("Quartets"));
         quartets.addSong("Six String Quartets");
         quartets.addSong("Three String Quartets");
         quartets.addSong("Grosse Fugue for String Quartets");

         Playlist sonatas = beethoven.addPlaylist(
         new Playlist("Sonatas"));
         sonatas.addSong("Sonata in A Minor");
         sonatas.addSong("Sonata in F Major");

         Playlist symphonies = beethoven.addPlaylist(
         new Playlist("Symphonies"));
         symphonies.addSong("No. 2 - D Major");
         symphonies.addSong("No. 2 - D Major");
         symphonies.addSong("No. 3 - E-Flat Major");
         symphonies.addSong("No. 4 - B-Flat Major");
         symphonies.addSong("No. 5 - C Minor");
         symphonies.addSong("No. 6 - F Major");
         symphonies.addSong("No. 7 - A Major");
         symphonies.addSong("No. 8 - F Major");
         symphonies.addSong("No. 9 - D Minor");

      // Add compositions by Brahms.
         Composer brahms = new Composer("Brahms");
         Playlist concertos = brahms.addPlaylist(
         new Playlist("Concertos"));
         concertos.addSong("Violin Concerto");
         concertos.addSong("Double Concerto - A Minor");
         concertos.addSong("Piano Concerto No. 1 - D Minor");
         concertos.addSong("Piano Concerto No. 2 - B-Flat Major");

         Playlist quartets = brahms.addPlaylist(
         new Playlist("Quartets"));
         quartets.addSong("Piano Quartet No. 1 - G Minor");
         quartets.addSong("Piano Quartet No. 2 - A Major");
         quartets.addSong("Piano Quartet No. 3 - C Minor");
         quartets.addSong("String Quartet No. 3 - B-Flat Minor");

         Playlist sonatas = brahms.addPlaylist(
         new Playlist("Sonatas"));
         sonatas.addSong("Two Sonatas for Clarinet - F Minor");
         sonatas.addSong("Two Sonatas for Clarinet - E-Flat Major");

         Playlist symphonies = brahms.addPlaylist(
         new Playlist("Symphonies"));
         symphonies.addSong("No. 1 - C Minor");
         symphonies.addSong("No. 2 - D Minor");
         symphonies.addSong("No. 3 - F Major");
         symphonies.addSong("No. 4 - E Minor");

      // Add compositions by Mozart.
         Composer mozart = new Composer("Mozart");
         Playlist concertos = mozart.addPlaylist(
         new Playlist("Concertos"));
         concertos.addSong("Piano Concerto No. 12");
         concertos.addSong("Piano Concerto No. 17");
         concertos.addSong("Clarinet Concerto");
         concertos.addSong("Violin Concerto No. 5");
         concertos.addSong("Violin Concerto No. 4");

    * Get the {@link NodeInfo} that provides the children of the specified
    * value.
   public <T> NodeInfo<?> getNodeInfo(T value) {
      if (value == null) {
         // LEVEL 0.
         // We passed null as the root value. Return the composers.

         // Create a data provider that contains the list of composers.
         ListDataProvider<Composer> dataProvider 
         = new ListDataProvider<Composer>(composers);

         //Create a cell to display a composer.
         Cell<Composer> cell = new AbstractCell<Composer>(){
            public void render(Composer value, Object key,
            SafeHtmlBuilder sb) {

         // Return a node info that pairs the data provider and the cell.
         return new DefaultNodeInfo<Composer>(dataProvider, cell);
      } else if (value instanceof Composer) {
         // LEVEL 1.
         // We want the children of the composer. Return the playlists.
         ListDataProvider<Playlist> dataProvider 
         = new ListDataProvider<Playlist>(
         ((Composer) value).getPlaylists());
         Cell<Playlist> cell = new AbstractCell<Playlist>() {
            public void render(Playlist value, Object key, 
            SafeHtmlBuilder sb) {
               if (value != null) {
         return new DefaultNodeInfo<Playlist>(dataProvider, cell);
      } else if (value instanceof Playlist) {
         // LEVEL 2 - LEAF.
         // We want the children of the playlist. Return the songs.
         ListDataProvider<String> dataProvider
         = new ListDataProvider<String>(
         ((Playlist) value).getSongs());

         // Use the shared selection model.
         return new DefaultNodeInfo<String>(dataProvider, new TextCell(),
         selectionModel, null);
      return null;

    * Check if the specified value represents a leaf node. 
    * Leaf nodes cannot be opened.
   public boolean isLeaf(Object value) {
      // The leaf nodes are the songs, which are Strings.
      if (value instanceof String) {
         return true;
      return false;

   public void onModuleLoad() {
      // Create a model for the browser.
      TreeViewModel model = new CustomTreeModel();

       * Create the browser using the model. We use <code>null</code> as the
       * default value of the root node. The default value will be passed to
       * CustomTreeModel#getNodeInfo();
      CellBrowser browser = new CellBrowser(model, null);

      VerticalPanel panel = new VerticalPanel();

      // Add the widgets to the root panel.

Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, this will produce following result −

GWT CellBrowser Widget