User Interface Components

Figure 5.55. Cell Style Generator for a Table

5.16. Tree

The Tree component allows a natural way to represent data that has hierarchical relationships, such as filesystems or message threads. The Tree component in Vaadin works much like the tree components of most modern desktop user interface toolkits, for example in directory browsing.

The typical use of the Tree component is for displaying a hierachical menu, like a menu on the left side of the screen, as in Figure 5.56, “A Tree Component as a Menu”, or for displaying filesystems or other hierarchical datasets. The menu style makes the appearance of the tree more suitable for this purpose.

final Object[][] planets = new Object[][]{ new Object[]{"Mercury"},

new Object[]{"Venus"},

new Object[]{"Earth", "The Moon"},

new Object[]{"Mars", "Phobos", "Deimos"},

new Object[]{"Jupiter", "Io", "Europa", "Ganymedes", "Callisto"},

new Object[]{"Saturn", "Titan", "Tethys", "Dione", "Rhea", "Iapetus"},

new Object[]{"Uranus", "Miranda", "Ariel", "Umbriel", "Titania", "Oberon"},

new Object[]{"Neptune", "Triton", "Proteus", "Nereid", "Larissa"}};

Tree tree = new Tree("The Planets and Major Moons");

/* Add planets as root items in the tree. */ for (int i=0; i<planets.length; i++) {

String planet = (String) (planets[i][0]); tree.addItem(planet);

if (planets[i].length == 1) {

//The planet has no moons so make it a leaf. tree.setChildrenAllowed(planet, false);

}else {

//Add children (moons) under the planets. for (int j=1; j<planets[i].length; j++) { String moon = (String) planets[i][j];

//Add the item as a regular item.

Tree

157

User Interface Components

tree.addItem(moon);

//Set it to be a child. tree.setParent(moon, planet);

//Make the moons look like leaves. tree.setChildrenAllowed(moon, false);

}

// Expand the subtree. tree.expandItemsRecursively(planet);

}

}

main.addComponent(tree);

Figure 5.56, “A Tree Component as a Menu” below shows the tree from the code example in a practical situation.

You can read or set the currently selected item by the value property of the Tree component, that is, with getValue() and setValue(). When the user clicks an item on a tree, the tree will receive an ValueChangeEvent, which you can catch with a ValueChangeListener. To receive the event immediately after the click, you need to set the tree as setImmediate(true).

The Tree component uses Container data sources much like the Table component, with the addition that it also utilizes hierarchy information maintained by a HierarchicalContainer. The contained items can be of any item type supported by the container. The default container and its addItem() assume that the items are strings and the string value is used as the item ID.

5.17. MenuBar

The MenuBar component allows creating horizontal dropdown menus, much like the main menu in desktop applications.

// Create a menu bar

final MenuBar menubar = new MenuBar(); main.addComponent(menubar);

You insert the top-level menu items to a MenuBar object with the addItem() method. It takes a string label, an icon resource, and a command as its parameters. The icon and command are not required and can be null.

MenuBar.MenuItem beverages = menubar.addItem("Beverages", null, null);

The command is called when the user clicks the item. A menu command is a class that implements the MenuBar.Command interface.

// A feedback component

final Label selection = new Label("-"); main.addComponent(selection);

// Define a common menu command for all the menu items. MenuBar.Command mycommand = new MenuBar.Command() {

public void menuSelected(MenuItem selectedItem) { selection.setValue("Ordered a " +

selectedItem.getText() + " from menu.");

}

};

158

MenuBar

User Interface Components

Figure 5.56. A Tree Component as a Menu

The addItem() method returns a MenuBar.MenuItem object, which you can use to add submenu items. The MenuItem has an identical addItem() method.

//Put some items in the menu hierarchically MenuBar.MenuItem beverages =

menubar.addItem("Beverages", null, null); MenuBar.MenuItem hot_beverages =

beverages.addItem("Hot", null, null); hot_beverages.addItem("Tea", null, mycommand); hot_beverages.addItem("Coffee", null, mycommand); MenuBar.MenuItem cold_beverages =

beverages.addItem("Cold", null, null); cold_beverages.addItem("Milk", null, mycommand);

//Another top-level item

MenuBar.MenuItem snacks = menubar.addItem("Snacks", null, null);

snacks.addItem("Weisswurst", null, mycommand); snacks.addItem("Salami", null, mycommand);

// Yet another top-level item MenuBar.MenuItem services =

menubar.addItem("Services", null, null); services.addItem("Car Service", null, mycommand);

The menu will look as follows:

Figure 5.57. Menu Bar

CSS Style Rules

.v-menubar { }

.gwt-MenuItem {}

.gwt-MenuItem-selected {}

CSS Style Rules

159