User Interface Components

VerticalLayout layout = new VerticalLayout();

Label status = new Label("-");

SelectExample () { setCompositionRoot (layout); layout.addComponent(select);

//Fill the component with some items. final String[] planets = new String[] {

"Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"};

for (int i=0; i<planets.length; i++) select.addItem(planets[i]);

//By default, the change event is not triggered

//immediately when the selection changes.

//This enables the immediate events. select.setImmediate(true);

//Listen for changes in the selection. select.addListener(this);

layout.addComponent(status);

}

/* Respond to change in the selection. */

public void valueChange(Property.ValueChangeEvent event) {

//The event.getProperty() returns the Item ID (IID)

//of the currently selected item in the component. status.setValue("Currently selected item ID: " +

event.getProperty());

}

}

5.14.9. Other Common Features

Item Icons

You can set an icon for each item with setItemIcon(), or define an item property that provides the icon resource with setItemIconPropertyId(), in a fashion similar to captions. Notice, however, that icons are not supported in NativeSelect, TwinColSelect, and some other selection components and modes.This is because HTML does not support images inside the native select elements. Icons are also not really visually applicable.

5.15. Table

Because of pressing release schedules to get this edition to your hands, we were unable to completely update this section. The description of the Table component should be mostly up-to- date, but some data binding related topics still require significant revision. Please consult the web version once it is updated, or the next print edition.

The Table component is intended for presenting tabular data organized in rows and columns. The Table is one of the most versatile components in Vaadin. Table cells can include text or arbitrary UI components. You can easily implement editing of the table data, for example clicking on a cell could change it to a text field for editing.

The data contained in a Table is managed using the Data Model of Vaadin (see Chapter 9, Binding Components to Data), through the Container interface of the Table.This makes it possible to bind a table directly to a data source, such as a database query. Only the visible part of the table is loaded into the browser and moving the visible window with the scrollbar loads content

Other Common Features

139

User Interface Components

from the server. While the data is being loaded, a tooltip will be displayed that shows the current range and total number of items in the table. The rows of the table are items in the container and the columns are properties. Each table row (item) is identified with an item identifier (IID), and each column (property) with a property identifier (PID).

When creating a table, you first need to define columns with addContainerProperty(). This method comes in two flavors. The simpler one takes the property ID of the column and uses it also as the caption of the column. The more complex one allows differing PID and header for the column. This may make, for example, internationalization of table headers easier, because if a PID is internationalized, the internationalization has to be used everywhere where the PID is used.The complex form of the method also allows defining an icon for the column from a resource. The "default value" parameter is used when new properties (columns) are added to the table, to fill in the missing values. (This default has no meaning in the usual case, such as below, where we add items after defining the properties.)

/* Create the table with a		caption. */
Table table = new Table("This is my Table");
/* Define the names and data types of columns.
* The "default value" parameter is meaningless here. */
table.addContainerProperty("First Name", String.class,				null);
table.addContainerProperty("Last Name",			String.class,	null);
table.addContainerProperty("Year",			Integer.class, null);
/* Add a few items in the table. */
table.addItem(new Object[]		{
"Nicolaus","Copernicus",new Integer(1473)}, new Integer(1));
table.addItem(new Object[]		{
"Tycho",	"Brahe",	new Integer(1546)}, new Integer(2));
table.addItem(new Object[]		{
"Giordano","Bruno",		new Integer(1548)}, new Integer(3));
table.addItem(new Object[]		{
"Galileo", "Galilei",		new Integer(1564)}, new Integer(4));
table.addItem(new Object[]		{
"Johannes","Kepler",		new Integer(1571)}, new Integer(5));
table.addItem(new Object[]		{
"Isaac",	"Newton",	new Integer(1643)}, new Integer(6));

In this example, we used an increasing Integer object as the Item Identifier, given as the second parameter to addItem(). The actual rows are given simply as object arrays, in the same order in which the properties were added. The objects must be of the correct class, as defined in the addContainerProperty() calls.

Figure 5.46. Basic Table Example

Scalability of the Table is largely dictated by the container. The default IndexedContainer is relatively heavy and can cause scalability problems, for example, when updating the values. Use of an optimized application-specific container is recommended. Table does not have a limit for

140

Table

User Interface Components

the number of items and is just as fast with hundreds of thousands of items as with just a few. With the current implementation of scrolling, there is a limit of around 500 000 rows, depending on the browser and the pixel height of rows.

5.15.1. Selecting Items in a Table

The Table allows selecting one or more items by clicking them with the mouse. When the user selects an item, the IID of the item will be set as the property of the table and a ValueChangeEvent is triggered. To enable selection, you need to set the table selectable. You will also need to set it as immediate in most cases, as we do below, because without it, the change in the property will not be communicated immediately to the server.

The following example shows how to enable the selection of items in a Table and how to handle ValueChangeEvent events that are caused by changes in selection. You need to handle the event with the valueChange() method of the Property.ValueChangeListener interface.

//Allow selecting items from the table. table.setSelectable(true);

//Send changes in selection immediately to server. table.setImmediate(true);

//Shows feedback from selection.

final Label current = new Label("Selected: -");

// Handle selection change.

table.addListener(new Property.ValueChangeListener() { public void valueChange(ValueChangeEvent event) {

current.setValue("Selected: " + table.getValue());

}

});

Figure 5.47. Table Selection Example

If the user clicks on an already selected item, the selection will deselected and the table property will have null value. You can disable this behaviour by setting setNullSelectionAllowed(false) for the table.

The selection is the value of the table's property, so you can get it with getValue(). You can get it also from a reference to the table itself. In single selection mode, the value is the item identifier of the selected item or null if no item is selected. In multiple selection mode (see below), the value is a Set of item identifiers. Notice that the set is unmodifiable, so you can not simply change it to change the selection.

Selecting Items in a Table

141