data binding tutorial

hi, is there a tutorial how i should use container and item classes?


The Container and Item are actually interfaces, not classes. The interfaces are used by many of the UI components in the Toolkit. For example, Table is a Container that contains Items. So, do you want to use it by defining your own implementation of the interfaces or by using some classes in the Toolkit that implemen them? Can you give more details on what you want to do?

The demo application has a few examples of various UI components that have the Container interface.

The following example uses the Table component:

import com.itmill.toolkit.ui.*;

/* Let us add an implementation of the ValueChangeListener interface. */
public class TableExample2 extends CustomComponent implements Property.ValueChangeListener {
    /* Create the table with a caption. */
    Table table = new Table("This is a Table");

    /* A layout needed for the example. */
    OrderedLayout layout = new OrderedLayout(OrderedLayout.ORIENTATION_VERTICAL);
    Label status = new Label("-");
    TableExample2 () {
        setCompositionRoot (layout);

        /* Define the names, data types, and default values of columns. */
        table.addContainerProperty("First Name", String.class, "(no first name)");
        table.addContainerProperty("Last Name", String.class, "(no last name)");
        table.addContainerProperty("Year", Integer.class, null);
        /* We use these entries to generate random items in a table. */
        final String[] firstnames = new String[]
{"Donald", "Patty", "Sally", "Douglas"};
        final String[] lastnames  = new String[]
{"Smith", "Jones", "Adams", "Knuth"};
        /* Add some items in the table and assign them an Item ID (IID). */
        for (int i=0; i<500; i++) {
            /* Add a randomly generated item in the Table. */
            table.addItem(new Object[]{firstnames[(int) (Math.random() * (firstnames.length-0.01))]
                                       lastnames [(int) (Math.random() * (lastnames.length-0.01))]
                                       (int) (1900+Math.random() * 100)}, i);
        /* Allow selecting a row in the table.
         * The selected item will be the property of the table. */
        /* By default, the change event is not communicated immediately
         * but only after some other event. */
        /* Listen for changes in the selection. */
        /* Set the number of items visible in the table. */

    /* 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 table. */
        status.setValue("Currently selected item ID: " + event.getProperty());

The following example iterates over a Container (a Table):

import com.itmill.toolkit.ui.*;
import com.itmill.toolkit.ui.Button.ClickEvent;
import com.itmill.toolkit.ui.Button.ClickListener;
import java.util.Iterator;

public class TableExample4 extends TableExample2 implements ClickListener {
    TableExample4 () {
        layout.addComponent(new Button("List selected", this));

    /* Handle the event from the "List selected" button. */
    public void buttonClick(ClickEvent event) {
        /* Collect the results of the iteration into this string. */
        String items = "";

        /* Iterate over the item identifiers of the table. */
        for (Iterator i = table.getItemIds().iterator(); i.hasNext();) {
            /* Get the current item identifier, which is an integer. */
            int iid = (Integer);
            /* Now get the actual item from the table. */
            Item item = table.getItem(iid);
            /* And now we can get to the actual checkbox object. */
            Button button = (Button) (item.getItemProperty("ismember").getValue());
            /* If the checkbox is selected. */
            if ((Boolean)button.getValue() == true) {
                /* Do something with the selected item; collect the first name. */
                items += item.getItemProperty("First Name").getValue() + " " +
                         item.getItemProperty("Last Name").getValue() + " ";
        /* Do something with the results; display the first names of the selected items. */
        layout.addComponent (new Label("Selected items: " + items));