Updated feature browser in automatedtests package to current feature browser.

svn changeset:6342/svn branch:trunk

17 files changed, 987 insertions, 146 deletions

diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/AccordionExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/AccordionExample.java
new file mode 100644
index 0000000000..f5e81ba9d5
--- /dev/null
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/AccordionExample.java
@@ -0,0 +1,38 @@
+package com.itmill.toolkit.automatedtests.featurebrowser;
+
+import com.itmill.toolkit.ui.Accordion;
+import com.itmill.toolkit.ui.CustomComponent;
+import com.itmill.toolkit.ui.Label;
+import com.itmill.toolkit.ui.TextField;
+import com.itmill.toolkit.ui.VerticalLayout;
+
+/**
+ * Accordion is a derivative of TabSheet, a vertical tabbed layout that places
+ * the tab contents between the vertical tabs.
+ */
+public class AccordionExample extends CustomComponent {
+    public AccordionExample() {
+        // Create a new accordion
+        final Accordion accordion = new Accordion();
+        setCompositionRoot(accordion);
+
+        // Add a few tabs to the accordion.
+        for (int i = 0; i < 5; i++) {
+            // Create a root component for a accordion tab
+            VerticalLayout layout = new VerticalLayout();
+            accordion.addComponent(layout);
+
+            // The accordion tab label is taken from the caption of the root
+            // component. Notice that layouts can have a caption too.
+            layout.setCaption("Tab " + (i + 1));
+
+            // Add some components in each accordion tab
+            Label label = new Label("These are the contents of Tab " + (i + 1)
+                    + ".");
+            layout.addComponent(label);
+
+            TextField textfield = new TextField("Some text field");
+            layout.addComponent(textfield);
+        }
+    }
+}
diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/ButtonExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/ButtonExample.java
index 5f73b3fc43..bf61a443c6 100644
--- a/src/com/itmill/toolkit/automatedtests/featurebrowser/ButtonExample.java
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/ButtonExample.java
@@ -9,10 +9,11 @@ import com.itmill.toolkit.terminal.ThemeResource;
 import com.itmill.toolkit.ui.Button;

 import com.itmill.toolkit.ui.CheckBox;

 import com.itmill.toolkit.ui.CustomComponent;

+import com.itmill.toolkit.ui.HorizontalLayout;

 import com.itmill.toolkit.ui.Label;

 import com.itmill.toolkit.ui.Link;

-import com.itmill.toolkit.ui.OrderedLayout;

 import com.itmill.toolkit.ui.Panel;

+import com.itmill.toolkit.ui.VerticalLayout;

 import com.itmill.toolkit.ui.Button.ClickEvent;

 

 /**

@@ -25,12 +26,12 @@ public class ButtonExample extends CustomComponent implements
 

     public ButtonExample() {

 

-        final OrderedLayout main = new OrderedLayout();

+        final VerticalLayout main = new VerticalLayout();

         main.setMargin(true);

         setCompositionRoot(main);

 

-        final OrderedLayout horiz = new OrderedLayout(

-                OrderedLayout.ORIENTATION_HORIZONTAL);

+        final HorizontalLayout horiz = new HorizontalLayout();

+        horiz.setWidth("100%");

         main.addComponent(horiz);

         final Panel basic = new Panel("Basic buttons");

         basic.setStyleName(Panel.STYLE_LIGHT);

diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/ClientCachingExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/ClientCachingExample.java
index 42199b1cd1..6cddcd29dc 100644
--- a/src/com/itmill/toolkit/automatedtests/featurebrowser/ClientCachingExample.java
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/ClientCachingExample.java
@@ -9,8 +9,8 @@ import com.itmill.toolkit.terminal.PaintTarget;
 import com.itmill.toolkit.ui.CustomComponent;

 import com.itmill.toolkit.ui.Label;

 import com.itmill.toolkit.ui.Layout;

-import com.itmill.toolkit.ui.OrderedLayout;

 import com.itmill.toolkit.ui.TabSheet;

+import com.itmill.toolkit.ui.VerticalLayout;

 

 /**

  * This example is a (simple) demonstration of client-side caching. The content

@@ -32,7 +32,7 @@ public class ClientCachingExample extends CustomComponent {
 

     public ClientCachingExample() {

 

-        final OrderedLayout main = new OrderedLayout();

+        final VerticalLayout main = new VerticalLayout();

         main.setMargin(true);

         setCompositionRoot(main);

 

@@ -41,7 +41,7 @@ public class ClientCachingExample extends CustomComponent {
         final TabSheet ts = new TabSheet();

         main.addComponent(ts);

 

-        Layout layout = new OrderedLayout();

+        Layout layout = new VerticalLayout();

         layout.setMargin(true);

         Label l = new Label("This is a normal label, quick to render.");

         l.setCaption("A normal label");

@@ -49,9 +49,10 @@ public class ClientCachingExample extends CustomComponent {
 

         ts.addTab(layout, "Normal", null);

 

-        layout = new OrderedLayout();

+        layout = new VerticalLayout();

         layout.setMargin(true);

         l = new Label("Slow label - until cached client side.") {

+            @Override

             public void paintContent(PaintTarget target) throws PaintException {

                 try {

                     Thread.sleep(3000);

diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/EmbeddedBrowserExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/EmbeddedBrowserExample.java
index 2134c8cff3..22f7d103f4 100644
--- a/src/com/itmill/toolkit/automatedtests/featurebrowser/EmbeddedBrowserExample.java
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/EmbeddedBrowserExample.java
@@ -4,11 +4,15 @@
 
 package com.itmill.toolkit.automatedtests.featurebrowser;
 
+import java.net.MalformedURLException;
+import java.net.URL;
+
 import com.itmill.toolkit.data.Property.ValueChangeEvent;
 import com.itmill.toolkit.terminal.ExternalResource;
 import com.itmill.toolkit.ui.Embedded;
-import com.itmill.toolkit.ui.ExpandLayout;
 import com.itmill.toolkit.ui.Select;
+import com.itmill.toolkit.ui.VerticalLayout;
+import com.itmill.toolkit.ui.Window.Notification;
 
 /**
  * Demonstrates the use of Embedded and "suggesting" Select by creating a simple
@@ -17,7 +21,7 @@ import com.itmill.toolkit.ui.Select;
  * @author IT Mill Ltd.
  * @see com.itmill.toolkit.ui.Window
  */
-public class EmbeddedBrowserExample extends ExpandLayout implements
+public class EmbeddedBrowserExample extends VerticalLayout implements
         Select.ValueChangeListener {
 
     // Default URL to open.
@@ -54,21 +58,33 @@ public class EmbeddedBrowserExample extends ExpandLayout implements
         select.addListener(this);
         select.setValue(urls[0]);
 
+        select.setWidth("100%");
+
         // configure the embedded and add to layout
         emb.setType(Embedded.TYPE_BROWSER);
+        emb.setSizeFull();
         addComponent(emb);
         // make the embedded as large as possible
-        expand(emb);
+        setExpandRatio(emb, 1);
 
     }
 
     public void valueChange(ValueChangeEvent event) {
         final String url = (String) event.getProperty().getValue();
         if (url != null) {
-            // the selected url has changed, let's go there
-            emb.setSource(new ExternalResource(url));
+            try {
+                // the selected url has changed, let's go there
+                @SuppressWarnings("unused")
+                URL u = new URL(url);
+                emb.setSource(new ExternalResource(url));
+
+            } catch (MalformedURLException e) {
+                getWindow().showNotification("Invalid address",
+                        e.getMessage() + " (example: http://www.itmill.com)",
+                        Notification.TYPE_WARNING_MESSAGE);
+            }
+
         }
 
     }
-
 }
diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/FeatureBrowser.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/FeatureBrowser.java
index 4eb7f9e321..499aa60f15 100644
--- a/src/com/itmill/toolkit/automatedtests/featurebrowser/FeatureBrowser.java
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/FeatureBrowser.java
@@ -5,6 +5,7 @@
 package com.itmill.toolkit.automatedtests.featurebrowser;
 
 import java.util.HashMap;
+import java.util.Iterator;
 
 import com.itmill.toolkit.data.Item;
 import com.itmill.toolkit.data.Property;
@@ -17,15 +18,15 @@ import com.itmill.toolkit.ui.AbstractSelect;
 import com.itmill.toolkit.ui.Button;
 import com.itmill.toolkit.ui.Component;
 import com.itmill.toolkit.ui.Embedded;
-import com.itmill.toolkit.ui.ExpandLayout;
+import com.itmill.toolkit.ui.HorizontalLayout;
 import com.itmill.toolkit.ui.Label;
 import com.itmill.toolkit.ui.Layout;
-import com.itmill.toolkit.ui.OrderedLayout;
 import com.itmill.toolkit.ui.Select;
 import com.itmill.toolkit.ui.SplitPanel;
 import com.itmill.toolkit.ui.TabSheet;
 import com.itmill.toolkit.ui.Table;
 import com.itmill.toolkit.ui.Tree;
+import com.itmill.toolkit.ui.VerticalLayout;
 import com.itmill.toolkit.ui.Window;
 import com.itmill.toolkit.ui.Button.ClickEvent;
 
@@ -72,8 +73,11 @@ public class FeatureBrowser extends com.itmill.toolkit.Application implements
             { "Getting started", "Choices, choices",
                     "Some variations of simple selects", SelectExample.class },
             // Layouts
-            { "Getting started", "Layouts", "Laying out components",
+            { "Layouts", "Basic layouts", "Laying out components",
                     LayoutExample.class },
+            // Layouts
+            { "Layouts", "Accordion", "Play the Accordion!",
+                    AccordionExample.class },
             // Wrangling data: ComboBox
             { "Wrangling data", "ComboBox", "ComboBox - the swiss army select",
                     ComboBoxExample.class },
@@ -83,6 +87,9 @@ public class FeatureBrowser extends com.itmill.toolkit.Application implements
                     "Table (\"grid\")",
                     "Table with bells, whistles, editmode and actions (contextmenu)",
                     TableExample.class },
+            // Wrangling data: Form
+            { "Wrangling data", "Form", "Every application needs forms",
+                    FormExample.class },
             // Wrangling data: Tree
             { "Wrangling data", "Tree", "A hierarchy of things",
                     TreeExample.class },
@@ -105,6 +112,7 @@ public class FeatureBrowser extends com.itmill.toolkit.Application implements
     // END
     };
 
+    @Override
     public void init() {
 
         // Need to set a theme for ThemeResources to work
@@ -158,6 +166,12 @@ public class FeatureBrowser extends com.itmill.toolkit.Application implements
         tree.addListener(this);
         tree.setImmediate(true);
         tree.expandItemsRecursively(rootId);
+        for (Iterator i = container.getItemIds().iterator(); i.hasNext();) {
+            Object id = i.next();
+            if (container.getChildren(id) == null) {
+                tree.setChildrenAllowed(id, false);
+            }
+        }
 
         split.addComponent(tree);
 
@@ -185,25 +199,25 @@ public class FeatureBrowser extends com.itmill.toolkit.Application implements
         table.setImmediate(true);
         split2.addComponent(table);
 
-        final ExpandLayout exp = new ExpandLayout();
+        final VerticalLayout exp = new VerticalLayout();
+        exp.setSizeFull();
         exp.setMargin(true);
         split2.addComponent(exp);
 
-        final OrderedLayout wbLayout = new OrderedLayout(
-                OrderedLayout.ORIENTATION_HORIZONTAL);
+        final HorizontalLayout wbLayout = new HorizontalLayout();
         Button b = new Button("Open in sub-window", new Button.ClickListener() {
             public void buttonClick(ClickEvent event) {
                 Component component = (Component) ts.getComponentIterator()
                         .next();
                 String caption = ts.getTabCaption(component);
                 try {
-                    component = (Component) component.getClass().newInstance();
+                    component = component.getClass().newInstance();
                 } catch (Exception e) {
                     // Could not create
                     return;
                 }
                 Window w = new Window(caption);
-                w.setWidth(640);
+                w.setWidth("640px");
                 if (Layout.class.isAssignableFrom(component.getClass())) {
                     w.setLayout((Layout) component);
                 } else {
@@ -223,8 +237,7 @@ public class FeatureBrowser extends com.itmill.toolkit.Application implements
                 Window w = getWindow(caption);
                 if (w == null) {
                     try {
-                        component = (Component) component.getClass()
-                                .newInstance();
+                        component = component.getClass().newInstance();
                     } catch (final Exception e) {
                         // Could not create
                         return;
@@ -246,22 +259,22 @@ public class FeatureBrowser extends com.itmill.toolkit.Application implements
         wbLayout.addComponent(b);
 
         exp.addComponent(wbLayout);
-        exp.setComponentAlignment(wbLayout, OrderedLayout.ALIGNMENT_RIGHT,
-                OrderedLayout.ALIGNMENT_TOP);
+        exp.setComponentAlignment(wbLayout, VerticalLayout.ALIGNMENT_RIGHT,
+                VerticalLayout.ALIGNMENT_TOP);
 
         ts = new TabSheet();
         ts.setSizeFull();
         ts.addTab(new Label(""), "Choose example", null);
         exp.addComponent(ts);
-        exp.expand(ts);
+        exp.setExpandRatio(ts, 1);
 
         final Label status = new Label(
                 "<a href=\"http://www.itmill.com/developers/\">Developer Area</a>"
                         + " | <a href=\"http://www.itmill.com/documentation/\">Documentation</a>");
         status.setContentMode(Label.CONTENT_XHTML);
         exp.addComponent(status);
-        exp.setComponentAlignment(status, OrderedLayout.ALIGNMENT_RIGHT,
-                OrderedLayout.ALIGNMENT_VERTICAL_CENTER);
+        exp.setComponentAlignment(status, VerticalLayout.ALIGNMENT_RIGHT,
+                VerticalLayout.ALIGNMENT_VERTICAL_CENTER);
 
         // select initial section ("All")
         tree.setValue(rootId);
@@ -298,6 +311,9 @@ public class FeatureBrowser extends com.itmill.toolkit.Application implements
     public void valueChange(ValueChangeEvent event) {
         if (event.getProperty() == tree) {
             final Object id = tree.getValue();
+            if (id == null) {
+                return;
+            }
             final Item item = tree.getItem(id);
             //
             String newSection;
diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/FormExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/FormExample.java
new file mode 100644
index 0000000000..90ce0237c7
--- /dev/null
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/FormExample.java
@@ -0,0 +1,206 @@
+package com.itmill.toolkit.automatedtests.featurebrowser;
+
+import com.itmill.toolkit.data.Item;
+import com.itmill.toolkit.data.Validator;
+import com.itmill.toolkit.data.util.BeanItem;
+import com.itmill.toolkit.ui.BaseFieldFactory;
+import com.itmill.toolkit.ui.Button;
+import com.itmill.toolkit.ui.Component;
+import com.itmill.toolkit.ui.CustomComponent;
+import com.itmill.toolkit.ui.Field;
+import com.itmill.toolkit.ui.Form;
+import com.itmill.toolkit.ui.HorizontalLayout;
+import com.itmill.toolkit.ui.TextField;
+import com.itmill.toolkit.ui.VerticalLayout;
+import com.itmill.toolkit.ui.Button.ClickEvent;
+
+/**
+ * This example demonstrates the most important features of the Form component:
+ * binding Form to a JavaBean so that form fields are automatically generated
+ * from the bean properties, creation of custom field editors using a
+ * FieldFactory, customizing the form without FieldFactory, buffering
+ * (commit/discard) and validation. Please note that the example is quite a bit
+ * more complex than real use, as it tries to demonstrate more features than
+ * needed in general case.
+ */
+public class FormExample extends CustomComponent {
+
+    static final String cities[] = { "Amsterdam", "Berlin", "Helsinki",
+            "Hong Kong", "London", "Luxemburg", "New York", "Oslo", "Paris",
+            "Rome", "Stockholm", "Tokyo", "Turku" };
+
+    /** Compose the demo. */
+    public FormExample() {
+
+        // Example data model
+        final Address dataModel = new Address();
+        Button peekDataModelState = new Button("Show the data model state",
+                new Button.ClickListener() {
+
+                    public void buttonClick(ClickEvent event) {
+                        getWindow().showNotification(
+                                dataModel.getAddressAsText());
+                    }
+                });
+
+        // Example form
+        final AddressForm form = new AddressForm("Contact Information");
+        form.setDataSource(dataModel);
+        form
+                .setDescription("Please enter valid name and address. Fields marked with * are required. "
+                        + "If you try to commit with invalid values, a form error message is displayed. "
+                        + "(Address is required but failing to give it a value does not display an error.)");
+
+        // Layout the example
+        VerticalLayout root = new VerticalLayout();
+        root.setMargin(true);
+        root.setSpacing(true);
+        root.addComponent(form);
+        root.addComponent(peekDataModelState);
+        setCompositionRoot(root);
+    }
+
+    public static class AddressForm extends Form {
+        public AddressForm(String caption) {
+
+            setCaption(caption);
+
+            // Use custom field factory to modify the defaults on how the
+            // components are created
+            setFieldFactory(new MyFieldFactory());
+
+            // Add Commit and Discard controls to the form.
+            Button commit = new Button("Save", this, "commit");
+            Button discard = new Button("Reset", this, "discard");
+            HorizontalLayout footer = new HorizontalLayout();
+            footer.addComponent(commit);
+            footer.addComponent(discard);
+            setFooter(footer);
+        }
+
+        public void setDataSource(Address dataModel) {
+
+            // Set the form to edit given datamodel by converting pojo used as
+            // the datamodel to Item
+            setItemDataSource(new BeanItem(dataModel));
+
+            // Ensure that the fields are shown in correct order as the
+            // datamodel does not force any specific order.
+            setVisibleItemProperties(new String[] { "name", "streetAddress",
+                    "postalCode", "city" });
+
+            // For examples sake, customize some of the form fields directly
+            // here. The alternative way is to use custom field factory as shown
+            // above.
+            getField("name").setRequired(true);
+            getField("name").setRequiredError("Name is missing");
+            getField("streetAddress").setRequired(true); // No error message
+            getField("postalCode").setRequired(true); // No error message
+            replaceWithSelect("city", cities, cities).setNewItemsAllowed(true);
+
+            // Set the form to act immediately on user input. This is
+            // automatically transports data between the client and the server
+            // to do server-side validation.
+            setImmediate(true);
+
+            // Enable buffering so that commit() must be called for the form
+            // before input is written to the data. (Form input is not written
+            // immediately through to the underlying object.)
+            setWriteThrough(false);
+        }
+    }
+
+    /**
+     * This is example on how to customize field creation. Any kind of field
+     * components could be created on the fly.
+     */
+    static class MyFieldFactory extends BaseFieldFactory {
+
+        @Override
+        public Field createField(Item item, Object propertyId,
+                Component uiContext) {
+
+            Field field = super.createField(item, propertyId, uiContext);
+
+            if ("postalCode".equals(propertyId)) {
+                ((TextField) field).setColumns(5);
+                field.addValidator(new PostalCodeValidator());
+            }
+
+            return field;
+        }
+
+    }
+
+    /**
+     * This is an example of how to create a custom validator for automatic
+     * input validation.
+     */
+    static class PostalCodeValidator implements Validator {
+
+        public boolean isValid(Object value) {
+            if (value == null || !(value instanceof String)) {
+                return false;
+            }
+
+            return ((String) value).matches("[0-9]{5}");
+        }
+
+        public void validate(Object value) throws InvalidValueException {
+            if (!isValid(value)) {
+                throw new InvalidValueException(
+                        "Postal code must be a five digit number.");
+            }
+        }
+    }
+
+    /**
+     * Contact information data model created as POJO. Note that in many cases
+     * it would be a good idea to implement Item -interface for the datamodel to
+     * make it directly bindable to form (without BeanItem wrapper)
+     */
+    public static class Address {
+        String name = "";
+        String streetAddress = "";
+        String postalCode = "";
+        String city;
+
+        public String getAddressAsText() {
+            return name + "\n" + streetAddress + "\n" + postalCode + " "
+                    + (city == null ? "" : city);
+        }
+
+        public void setName(String name) {
+            this.name = name;
+        }
+
+        public String getName() {
+            return name;
+        }
+
+        public void setStreetAddress(String address) {
+            streetAddress = address;
+        }
+
+        public String getStreetAddress() {
+            return streetAddress;
+        }
+
+        public void setPostalCode(String postalCode) {
+            this.postalCode = postalCode;
+        }
+
+        public String getPostalCode() {
+            return postalCode;
+        }
+
+        public void setCity(String city) {
+            this.city = city;
+        }
+
+        public String getCity() {
+            return city;
+        }
+    }
+
+}
diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/GeneratedColumnExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/GeneratedColumnExample.java
new file mode 100644
index 0000000000..6052d96642
--- /dev/null
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/GeneratedColumnExample.java
@@ -0,0 +1,556 @@
+/* 
+@ITMillApache2LicenseForJavaFiles@
+ */
+
+package com.itmill.toolkit.automatedtests.featurebrowser;
+
+import java.util.Collection;
+import java.util.Date;
+import java.util.GregorianCalendar;
+import java.util.Vector;
+
+import com.itmill.toolkit.data.Container;
+import com.itmill.toolkit.data.Item;
+import com.itmill.toolkit.data.Property;
+import com.itmill.toolkit.data.Container.Indexed;
+import com.itmill.toolkit.data.util.BeanItem;
+import com.itmill.toolkit.ui.AbstractField;
+import com.itmill.toolkit.ui.BaseFieldFactory;
+import com.itmill.toolkit.ui.CheckBox;
+import com.itmill.toolkit.ui.Component;
+import com.itmill.toolkit.ui.CustomComponent;
+import com.itmill.toolkit.ui.Field;
+import com.itmill.toolkit.ui.Label;
+import com.itmill.toolkit.ui.Table;
+import com.itmill.toolkit.ui.VerticalLayout;
+import com.itmill.toolkit.ui.Button.ClickEvent;
+import com.itmill.toolkit.ui.Button.ClickListener;
+
+/**
+ * This example demonstrates the use of generated columns in a table. Generated
+ * columns can be used for formatting values or calculating them from other
+ * columns (or properties of the items).
+ * 
+ * For the data model, we use POJOs bound to a custom Container with BeanItem
+ * items.
+ * 
+ * @author magi
+ */
+public class GeneratedColumnExample extends CustomComponent {
+    /**
+     * The business model: fill-up at a gas station.
+     */
+    public class FillUp {
+        Date date;
+        double quantity;
+        double total;
+
+        public FillUp() {
+        }
+
+        public FillUp(int day, int month, int year, double quantity,
+                double total) {
+            date = new GregorianCalendar(year, month - 1, day).getTime();
+            this.quantity = quantity;
+            this.total = total;
+        }
+
+        /** Calculates price per unit of quantity (€/l). */
+        public double price() {
+            if (quantity != 0.0) {
+                return total / quantity;
+            } else {
+                return 0.0;
+            }
+        }
+
+        /** Calculates average daily consumption between two fill-ups. */
+        public double dailyConsumption(FillUp other) {
+            double difference_ms = date.getTime() - other.date.getTime();
+            double days = difference_ms / 1000 / 3600 / 24;
+            if (days < 0.5) {
+                days = 1.0; // Avoid division by zero if two fill-ups on the
+                // same day.
+            }
+            return quantity / days;
+        }
+
+        /** Calculates average daily consumption between two fill-ups. */
+        public double dailyCost(FillUp other) {
+            return price() * dailyConsumption(other);
+        }
+
+        // Getters and setters
+
+        public Date getDate() {
+            return date;
+        }
+
+        public void setDate(Date date) {
+            this.date = date;
+        }
+
+        public double getQuantity() {
+            return quantity;
+        }
+
+        public void setQuantity(double quantity) {
+            this.quantity = quantity;
+        }
+
+        public double getTotal() {
+            return total;
+        }
+
+        public void setTotal(double total) {
+            this.total = total;
+        }
+    };
+
+    /**
+     * This is a custom container that allows adding BeanItems inside it. The
+     * BeanItem objects must be bound to an object. The item ID is an Integer
+     * from 0 to 99.
+     * 
+     * Most of the interface methods are implemented with just dummy
+     * implementations, as they are not needed in this example.
+     */
+    public class MySimpleIndexedContainer implements Container, Indexed {
+        Vector items;
+        Object itemtemplate;
+
+        public MySimpleIndexedContainer(Object itemtemplate) {
+            this.itemtemplate = itemtemplate;
+            items = new Vector(); // Yeah this is just a test
+        }
+
+        public boolean addContainerProperty(Object propertyId, Class type,
+                Object defaultValue) throws UnsupportedOperationException {
+            throw new UnsupportedOperationException();
+        }
+
+        public Item addItem(Object itemId) throws UnsupportedOperationException {
+            throw new UnsupportedOperationException();
+        }
+
+        public Object addItem() throws UnsupportedOperationException {
+            throw new UnsupportedOperationException();
+        }
+
+        /**
+         * This addItem method is specific for this container and allows adding
+         * BeanItem objects. The BeanItems must be bound to MyBean objects.
+         */
+        public void addItem(BeanItem item) throws UnsupportedOperationException {
+            items.add(item);
+        }
+
+        public boolean containsId(Object itemId) {
+            if (itemId instanceof Integer) {
+                int pos = ((Integer) itemId).intValue();
+                if (pos >= 0 && pos < items.size()) {
+                    return items.get(pos) != null;
+                }
+            }
+            return false;
+        }
+
+        /**
+         * The Table will call this method to get the property objects for the
+         * columns. It uses the property objects to determine the data types of
+         * the columns.
+         */
+        public Property getContainerProperty(Object itemId, Object propertyId) {
+            if (itemId instanceof Integer) {
+                int pos = ((Integer) itemId).intValue();
+                if (pos >= 0 && pos < items.size()) {
+                    Item item = (Item) items.get(pos);
+
+                    // The BeanItem provides the property objects for the items.
+                    return item.getItemProperty(propertyId);
+                }
+            }
+            return null;
+        }
+
+        /** Table calls this to get the column names. */
+        public Collection getContainerPropertyIds() {
+            Item item = new BeanItem(itemtemplate);
+
+            // The BeanItem knows how to get the property names from the bean.
+            return item.getItemPropertyIds();
+        }
+
+        public Item getItem(Object itemId) {
+            if (itemId instanceof Integer) {
+                int pos = ((Integer) itemId).intValue();
+                if (pos >= 0 && pos < items.size()) {
+                    return (Item) items.get(pos);
+                }
+            }
+            return null;
+        }
+
+        public Collection getItemIds() {
+            Vector ids = new Vector(items.size());
+            for (int i = 0; i < items.size(); i++) {
+                ids.add(Integer.valueOf(i));
+            }
+            return ids;
+        }
+
+        public Class getType(Object propertyId) {
+            return BeanItem.class;
+        }
+
+        public boolean removeAllItems() throws UnsupportedOperationException {
+            throw new UnsupportedOperationException();
+        }
+
+        public boolean removeContainerProperty(Object propertyId)
+                throws UnsupportedOperationException {
+            throw new UnsupportedOperationException();
+        }
+
+        public boolean removeItem(Object itemId)
+                throws UnsupportedOperationException {
+            throw new UnsupportedOperationException();
+        }
+
+        public int size() {
+            return items.size();
+        }
+
+        public Object addItemAt(int index) throws UnsupportedOperationException {
+            // TODO Auto-generated method stub
+            return null;
+        }
+
+        public Item addItemAt(int index, Object newItemId)
+                throws UnsupportedOperationException {
+            // TODO Auto-generated method stub
+            return null;
+        }
+
+        public Object getIdByIndex(int index) {
+            return Integer.valueOf(index);
+        }
+
+        public int indexOfId(Object itemId) {
+            return ((Integer) itemId).intValue();
+        }
+
+        public Object addItemAfter(Object previousItemId)
+                throws UnsupportedOperationException {
+            // TODO Auto-generated method stub
+            return null;
+        }
+
+        public Item addItemAfter(Object previousItemId, Object newItemId)
+                throws UnsupportedOperationException {
+            // TODO Auto-generated method stub
+            return null;
+        }
+
+        public Object firstItemId() {
+            return new Integer(0);
+        }
+
+        public boolean isFirstId(Object itemId) {
+            return ((Integer) itemId).intValue() == 0;
+        }
+
+        public boolean isLastId(Object itemId) {
+            return ((Integer) itemId).intValue() == (items.size() - 1);
+        }
+
+        public Object lastItemId() {
+            return new Integer(items.size() - 1);
+        }
+
+        public Object nextItemId(Object itemId) {
+            int pos = indexOfId(itemId);
+            if (pos >= items.size() - 1) {
+                return null;
+            }
+            return getIdByIndex(pos + 1);
+        }
+
+        public Object prevItemId(Object itemId) {
+            int pos = indexOfId(itemId);
+            if (pos <= 0) {
+                return null;
+            }
+            return getIdByIndex(pos - 1);
+        }
+    }
+
+    /** Formats the dates in a column containing Date objects. */
+    class DateColumnGenerator implements Table.ColumnGenerator {
+        /**
+         * Generates the cell containing the Date value. The column is
+         * irrelevant in this use case.
+         */
+        public Component generateCell(Table source, Object itemId,
+                Object columnId) {
+            Property prop = source.getItem(itemId).getItemProperty(columnId);
+            if (prop.getType().equals(Date.class)) {
+                Label label = new Label(String.format("%tF",
+                        new Object[] { (Date) prop.getValue() }));
+                label.addStyleName("column-type-date");
+                return label;
+            }
+
+            return null;
+        }
+    }
+
+    /** Formats the value in a column containing Double objects. */
+    class ValueColumnGenerator implements Table.ColumnGenerator {
+        String format; /* Format string for the Double values. */
+
+        /** Creates double value column formatter with the given format string. */
+        public ValueColumnGenerator(String format) {
+            this.format = format;
+        }
+
+        /**
+         * Generates the cell containing the Double value. The column is
+         * irrelevant in this use case.
+         */
+        public Component generateCell(Table source, Object itemId,
+                Object columnId) {
+            Property prop = source.getItem(itemId).getItemProperty(columnId);
+            if (prop.getType().equals(Double.class)) {
+                Label label = new Label(String.format(format,
+                        new Object[] { (Double) prop.getValue() }));
+
+                // Set styles for the column: one indicating that it's a value
+                // and a more
+                // specific one with the column name in it. This assumes that
+                // the column
+                // name is proper for CSS.
+                label.addStyleName("column-type-value");
+                label.addStyleName("column-" + (String) columnId);
+                return label;
+            }
+            return null;
+        }
+    }
+
+    /** Table column generator for calculating price column. */
+    class PriceColumnGenerator implements Table.ColumnGenerator {
+        public Component generateCell(Table source, Object itemId,
+                Object columnId) {
+            // Retrieve the item.
+            BeanItem item = (BeanItem) source.getItem(itemId);
+
+            // Retrieves the underlying POJO from the item.
+            FillUp fillup = (FillUp) item.getBean();
+
+            // Do the business logic
+            double price = fillup.price();
+
+            // Create the generated component for displaying the calcucated
+            // value.
+            Label label = new Label(String.format("%1.2f €",
+                    new Object[] { new Double(price) }));
+
+            // We set the style here. You can't use a CellStyleGenerator for
+            // generated columns.
+            label.addStyleName("column-price");
+            return label;
+        }
+    }
+
+    /** Table column generator for calculating consumption column. */
+    class ConsumptionColumnGenerator implements Table.ColumnGenerator {
+        /**
+         * Generates a cell containing value calculated from the item.
+         */
+        public Component generateCell(Table source, Object itemId,
+                Object columnId) {
+            Indexed indexedSource = (Indexed) source.getContainerDataSource();
+
+            // Can not calculate consumption for the first item.
+            if (indexedSource.isFirstId(itemId)) {
+                Label label = new Label("N/A");
+                label.addStyleName("column-consumption");
+                return label;
+            }
+
+            // Index of the previous item.
+            Object prevItemId = indexedSource.prevItemId(itemId);
+
+            // Retrieve the POJOs.
+            FillUp fillup = (FillUp) ((BeanItem) indexedSource.getItem(itemId))
+                    .getBean();
+            FillUp prev = (FillUp) ((BeanItem) source.getItem(prevItemId))
+                    .getBean();
+
+            // Do the business logic
+            return generateCell(fillup, prev);
+        }
+
+        public Component generateCell(FillUp fillup, FillUp prev) {
+            double consumption = fillup.dailyConsumption(prev);
+
+            // Generate the component for displaying the calculated value.
+            Label label = new Label(String.format("%3.2f l",
+                    new Object[] { new Double(consumption) }));
+
+            // We set the style here. You can't use a CellStyleGenerator for
+            // generated columns.
+            label.addStyleName("column-consumption");
+            return label;
+        }
+    }
+
+    /** Table column generator for calculating daily cost column. */
+    class DailyCostColumnGenerator extends ConsumptionColumnGenerator {
+        @Override
+        public Component generateCell(FillUp fillup, FillUp prev) {
+            double dailycost = fillup.dailyCost(prev);
+
+            // Generate the component for displaying the calculated value.
+            Label label = new Label(String.format("%3.2f €",
+                    new Object[] { new Double(dailycost) }));
+
+            // We set the style here. You can't use a CellStyleGenerator for
+            // generated columns.
+            label.addStyleName("column-dailycost");
+            return label;
+        }
+    }
+
+    /**
+     * Custom field factory that sets the fields as immediate.
+     */
+    public class ImmediateFieldFactory extends BaseFieldFactory {
+        @Override
+        public Field createField(Class type, Component uiContext) {
+            // Let the BaseFieldFactory create the fields
+            Field field = super.createField(type, uiContext);
+
+            // ...and just set them as immediate
+            ((AbstractField) field).setImmediate(true);
+
+            return field;
+        }
+    }
+
+    public GeneratedColumnExample() {
+        final Table table = new Table();
+
+        // Define table columns. These include also the column for the generated
+        // column, because we want to set the column label to something
+        // different than the property ID.
+        table
+                .addContainerProperty("date", Date.class, null, "Date", null,
+                        null);
+        table.addContainerProperty("quantity", Double.class, null,
+                "Quantity (l)", null, null);
+        table.addContainerProperty("price", Double.class, null, "Price (€/l)",
+                null, null);
+        table.addContainerProperty("total", Double.class, null, "Total (€)",
+                null, null);
+        table.addContainerProperty("consumption", Double.class, null,
+                "Consumption (l/day)", null, null);
+        table.addContainerProperty("dailycost", Double.class, null,
+                "Daily Cost (€/day)", null, null);
+
+        // Define the generated columns and their generators.
+        table.addGeneratedColumn("date", new DateColumnGenerator());
+        table
+                .addGeneratedColumn("quantity", new ValueColumnGenerator(
+                        "%.2f l"));
+        table.addGeneratedColumn("price", new PriceColumnGenerator());
+        table.addGeneratedColumn("total", new ValueColumnGenerator("%.2f €"));
+        table.addGeneratedColumn("consumption",
+                new ConsumptionColumnGenerator());
+        table.addGeneratedColumn("dailycost", new DailyCostColumnGenerator());
+
+        // Create a data source and bind it to the table.
+        MySimpleIndexedContainer data = new MySimpleIndexedContainer(
+                new FillUp());
+        table.setContainerDataSource(data);
+
+        // Generated columns are automatically placed after property columns, so
+        // we have to set the order of the columns explicitly.
+        table.setVisibleColumns(new Object[] { "date", "quantity", "price",
+                "total", "consumption", "dailycost" });
+
+        // Add some data.
+        data.addItem(new BeanItem(new FillUp(19, 2, 2005, 44.96, 51.21)));
+        data.addItem(new BeanItem(new FillUp(30, 3, 2005, 44.91, 53.67)));
+        data.addItem(new BeanItem(new FillUp(20, 4, 2005, 42.96, 49.06)));
+        data.addItem(new BeanItem(new FillUp(23, 5, 2005, 47.37, 55.28)));
+        data.addItem(new BeanItem(new FillUp(6, 6, 2005, 35.34, 41.52)));
+        data.addItem(new BeanItem(new FillUp(30, 6, 2005, 16.07, 20.00)));
+        data.addItem(new BeanItem(new FillUp(2, 7, 2005, 36.40, 36.19)));
+        data.addItem(new BeanItem(new FillUp(6, 7, 2005, 39.17, 50.90)));
+        data.addItem(new BeanItem(new FillUp(27, 7, 2005, 43.43, 53.03)));
+        data.addItem(new BeanItem(new FillUp(17, 8, 2005, 20, 29.18)));
+        data.addItem(new BeanItem(new FillUp(30, 8, 2005, 46.06, 59.09)));
+        data.addItem(new BeanItem(new FillUp(22, 9, 2005, 46.11, 60.36)));
+        data.addItem(new BeanItem(new FillUp(14, 10, 2005, 41.51, 50.19)));
+        data.addItem(new BeanItem(new FillUp(12, 11, 2005, 35.24, 40.00)));
+        data.addItem(new BeanItem(new FillUp(28, 11, 2005, 45.26, 53.27)));
+
+        // Have a check box that allows the user to make the quantity
+        // and total columns editable.
+        final CheckBox editable = new CheckBox(
+                "Edit the input values - calculated columns are regenerated");
+        editable.setImmediate(true);
+        editable.addListener(new ClickListener() {
+            public void buttonClick(ClickEvent event) {
+                table.setEditable(editable.booleanValue());
+
+                // The columns may not be generated when we want to have them
+                // editable.
+                if (editable.booleanValue()) {
+                    table.removeGeneratedColumn("quantity");
+                    table.removeGeneratedColumn("total");
+                } else {
+                    // In non-editable mode we want to show the formatted
+                    // values.
+                    table.addGeneratedColumn("quantity",
+                            new ValueColumnGenerator("%.2f l"));
+                    table.addGeneratedColumn("total", new ValueColumnGenerator(
+                            "%.2f €"));
+                }
+                // The visible columns are affected by removal and addition of
+                // generated columns so we have to redefine them.
+                table.setVisibleColumns(new Object[] { "date", "quantity",
+                        "price", "total", "consumption", "dailycost" });
+            }
+        });
+
+        // Use a custom field factory to set the edit fields as immediate.
+        // This is used when the table is in editable mode.
+        table.setFieldFactory(new ImmediateFieldFactory());
+
+        // Setting the table itself as immediate has no relevance in this
+        // example,
+        // because it is relevant only if the table is selectable and we want to
+        // get the selection changes immediately.
+        table.setImmediate(true);
+
+        table.setHeight("300px");
+
+        VerticalLayout layout = new VerticalLayout();
+        layout.setMargin(true);
+        layout
+                .addComponent(new Label(
+                        "Table with column generators that format and calculate cell values."));
+        layout.addComponent(table);
+        layout.addComponent(editable);
+        layout.addComponent(new Label(
+                "Columns displayed in blue are calculated from Quantity and Total. "
+                        + "Others are simply formatted."));
+        layout.setExpandRatio(table, 1);
+        layout.setSizeUndefined();
+        setCompositionRoot(layout);
+        // setSizeFull();
+    }
+}
diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/JavaScriptAPIExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/JavaScriptAPIExample.java
index 15f4e36777..1f7825d661 100644
--- a/src/com/itmill/toolkit/automatedtests/featurebrowser/JavaScriptAPIExample.java
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/JavaScriptAPIExample.java
@@ -11,8 +11,8 @@ import com.itmill.toolkit.terminal.PaintTarget;
 import com.itmill.toolkit.ui.Button;

 import com.itmill.toolkit.ui.CustomComponent;

 import com.itmill.toolkit.ui.Label;

-import com.itmill.toolkit.ui.OrderedLayout;

 import com.itmill.toolkit.ui.TextField;

+import com.itmill.toolkit.ui.VerticalLayout;

 import com.itmill.toolkit.ui.Button.ClickEvent;

 

 /**

@@ -21,15 +21,15 @@ import com.itmill.toolkit.ui.Button.ClickEvent;
  */

 public class JavaScriptAPIExample extends CustomComponent {

 

-    public static final String txt = "(more examples will be added here as the APIs are made public)<br/><br/><A href=\"javascript:itmill.forceSync();\">javascript:itmill.forceSync();</A>";

+    public static final String txt = "<p>For advanced client side programmers Toolkit offers a simple method which can be used to force sync client with server. This may be needed for example if another part of a mashup changes things on server.</p> (more examples will be added here as the APIs are made public)<br/><br/><A href=\"javascript:itmill.forceSync();\">javascript:itmill.forceSync();</A>";

 

-    private final OrderedLayout main;

+    private final VerticalLayout main;

     private final Label l;

     private final TextField editor = new TextField();

 

     public JavaScriptAPIExample() {

         // main layout

-        main = new OrderedLayout();

+        main = new VerticalLayout();

         main.setMargin(true);

         setCompositionRoot(main);

         editor.setRows(7);

@@ -54,8 +54,8 @@ public class JavaScriptAPIExample extends CustomComponent {
             }

         });

         main.addComponent(b);

-        main.setComponentAlignment(b, OrderedLayout.ALIGNMENT_RIGHT,

-                OrderedLayout.ALIGNMENT_VERTICAL_CENTER);

+        main.setComponentAlignment(b, VerticalLayout.ALIGNMENT_RIGHT,

+                VerticalLayout.ALIGNMENT_VERTICAL_CENTER);

 

         // 

         Label l = new Label(

@@ -63,6 +63,7 @@ public class JavaScriptAPIExample extends CustomComponent {
                         + "The client will be synchronized on reload, when you click a button, "

                         + "or when itmill.forceSync() is called.") {

 

+            @Override

             public void paintContent(PaintTarget target) throws PaintException {

 

                 super.paintContent(target);

@@ -82,6 +83,7 @@ public class JavaScriptAPIExample extends CustomComponent {
             label = l;

         }

 

+        @Override

         public void run() {

             try {

                 Thread.sleep(500);

diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/LabelExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/LabelExample.java
index ec90f37231..0412a85104 100644
--- a/src/com/itmill/toolkit/automatedtests/featurebrowser/LabelExample.java
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/LabelExample.java
@@ -7,7 +7,6 @@ package com.itmill.toolkit.automatedtests.featurebrowser;
 import com.itmill.toolkit.ui.CustomComponent;

 import com.itmill.toolkit.ui.GridLayout;

 import com.itmill.toolkit.ui.Label;

-import com.itmill.toolkit.ui.OrderedLayout;

 import com.itmill.toolkit.ui.Panel;

 

 /**

@@ -28,26 +27,19 @@ public class LabelExample extends CustomComponent {
             + "       This is an indented row. \n       Same indentation here.";

 

     public LabelExample() {

-

-        final OrderedLayout main = new OrderedLayout();

-        main.setMargin(true);

-        setCompositionRoot(main);

-

         final GridLayout g = new GridLayout(2, 4);

-        main.addComponent(g);

+        g.setMargin(true);

+        setCompositionRoot(g);

+        g.setWidth("100%");

 

         // plain w/o caption

-        Panel p = new Panel("Plain");

-        p.setDebugId(p.getCaption());

-        p.setStyleName(Panel.STYLE_LIGHT);

+        Panel p = getExpamplePanel("Plain");

         Label l = new Label("A plain label without caption.");

         l.setDebugId("label1");

         p.addComponent(l);

         g.addComponent(p);

         // plain w/ caption

-        p = new Panel("Plain w/ caption + tooltip");

-        p.setDebugId(p.getCaption());

-        p.setStyleName(Panel.STYLE_LIGHT);

+        p = getExpamplePanel("Plain w/ caption + tooltip");

         l = new Label("A plain label with caption.");

         l.setCaption("Label caption");

         l.setDebugId("label2");

@@ -55,34 +47,26 @@ public class LabelExample extends CustomComponent {
         p.addComponent(l);

         g.addComponent(p);

         // plain w/ xhtml

-        p = new Panel("Plain w/ XHTML content");

-        p.setDebugId(p.getCaption());

-        p.setStyleName(Panel.STYLE_LIGHT);

+        p = getExpamplePanel("Plain w/ XHTML content");

         l = new Label(xhtml);

         l.setDebugId("label3");

         p.addComponent(l);

         g.addComponent(p);

         // xhtml w/ xhtml

-        p = new Panel("XHTML-mode w/ XHTML content");

-        p.setDebugId(p.getCaption());

-        p.setStyleName(Panel.STYLE_LIGHT);

+        p = getExpamplePanel("XHTML-mode w/ XHTML content");

         l = new Label(xhtml);

         l.setDebugId("label4");

         l.setContentMode(Label.CONTENT_XHTML);

         p.addComponent(l);

         g.addComponent(p);

         // plain w/ preformatted

-        p = new Panel("Plain w/ preformatted content");

-        p.setDebugId(p.getCaption());

-        p.setStyleName(Panel.STYLE_LIGHT);

+        p = getExpamplePanel("Plain w/ preformatted content");

         l = new Label(pre);

         l.setDebugId("label5");

         p.addComponent(l);

         g.addComponent(p);

         // preformatted w/ preformatted

-        p = new Panel("Preformatted-mode w/ preformatted content");

-        p.setDebugId(p.getCaption());

-        p.setStyleName(Panel.STYLE_LIGHT);

+        p = getExpamplePanel("Preformatted-mode w/ preformatted content");

         l = new Label(pre);

         l.setDebugId("label6");

         l.setContentMode(Label.CONTENT_PREFORMATTED);

@@ -90,4 +74,11 @@ public class LabelExample extends CustomComponent {
         g.addComponent(p);

 

     }

+

+    private Panel getExpamplePanel(String caption) {

+        Panel p = new Panel(caption);

+        p.setDebugId(p.getCaption());

+        p.addStyleName(Panel.STYLE_LIGHT);

+        return p;

+    }

 }

diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/LayoutExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/LayoutExample.java
index 184e3f1812..5229cfc25e 100644
--- a/src/com/itmill/toolkit/automatedtests/featurebrowser/LayoutExample.java
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/LayoutExample.java
@@ -6,10 +6,11 @@ package com.itmill.toolkit.automatedtests.featurebrowser;
 

 import com.itmill.toolkit.ui.CustomComponent;

 import com.itmill.toolkit.ui.GridLayout;

+import com.itmill.toolkit.ui.HorizontalLayout;

 import com.itmill.toolkit.ui.Label;

-import com.itmill.toolkit.ui.OrderedLayout;

 import com.itmill.toolkit.ui.Panel;

 import com.itmill.toolkit.ui.TabSheet;

+import com.itmill.toolkit.ui.VerticalLayout;

 

 /**

  * A few examples of layout possibilities.

@@ -20,11 +21,12 @@ public class LayoutExample extends CustomComponent {
 

     public LayoutExample() {

 

-        final OrderedLayout main = new OrderedLayout();

+        final VerticalLayout main = new VerticalLayout();

         main.setMargin(true);

         setCompositionRoot(main);

 

         final GridLayout g = new GridLayout(2, 5);

+        g.setWidth("100%");

         main.addComponent(g);

 

         // panel

@@ -44,7 +46,7 @@ public class LayoutExample extends CustomComponent {
         TabSheet ts = new TabSheet();

         g.addComponent(ts, 0, 1, 1, 1);

 

-        OrderedLayout ol = new OrderedLayout();

+        VerticalLayout ol = new VerticalLayout();

         ol.setDebugId("VerticalOrderedLayout");

         ol.setMargin(true);

         ol.addComponent(new Label("Component 1"));

@@ -52,13 +54,13 @@ public class LayoutExample extends CustomComponent {
         ol.addComponent(new Label("Component 3"));

         ts.addTab(ol, "Vertical OrderedLayout", null);

 

-        ol = new OrderedLayout(OrderedLayout.ORIENTATION_HORIZONTAL);

-        ol.setDebugId("HorizontalOrderedLayout");

-        ol.setMargin(true);

-        ol.addComponent(new Label("Component 1"));

-        ol.addComponent(new Label("Component 2"));

-        ol.addComponent(new Label("Component 3"));

-        ts.addTab(ol, "Horizontal OrderedLayout", null);

+        HorizontalLayout hl = new HorizontalLayout();

+        hl.setDebugId("HorizontalOrderedLayout");

+        hl.setMargin(true);

+        hl.addComponent(new Label("Component 1"));

+        hl.addComponent(new Label("Component 2"));

+        hl.addComponent(new Label("Component 3"));

+        ts.addTab(hl, "Horizontal OrderedLayout", null);

 

         final GridLayout gl = new GridLayout(3, 3);

         gl.setDebugId("GridLayout");

diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/NotificationExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/NotificationExample.java
index f6518c13e9..30a86e9ad0 100644
--- a/src/com/itmill/toolkit/automatedtests/featurebrowser/NotificationExample.java
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/NotificationExample.java
@@ -4,16 +4,14 @@
 
 package com.itmill.toolkit.automatedtests.featurebrowser;
 
-import java.util.Date;
-
 import com.itmill.toolkit.data.Item;
 import com.itmill.toolkit.ui.AbstractSelect;
 import com.itmill.toolkit.ui.Button;
 import com.itmill.toolkit.ui.CustomComponent;
 import com.itmill.toolkit.ui.NativeSelect;
-import com.itmill.toolkit.ui.OrderedLayout;
 import com.itmill.toolkit.ui.RichTextArea;
 import com.itmill.toolkit.ui.TextField;
+import com.itmill.toolkit.ui.VerticalLayout;
 import com.itmill.toolkit.ui.Window;
 import com.itmill.toolkit.ui.Button.ClickEvent;
 import com.itmill.toolkit.ui.Button.ClickListener;
@@ -39,7 +37,9 @@ public class NotificationExample extends CustomComponent {
      */
     public NotificationExample() {
         // Main layout
-        final OrderedLayout main = new OrderedLayout();
+        final VerticalLayout main = new VerticalLayout();
+        main.setSizeUndefined();
+        main.setSpacing(true);
         main.setMargin(true); // use theme-specific margin
         setCompositionRoot(main);
 
@@ -86,11 +86,10 @@ public class NotificationExample extends CustomComponent {
                 getWindow().showNotification((String) caption.getValue(),
                         (String) message.getValue(),
                         ((Integer) type.getValue()).intValue());
-                getWindow().setCaption(new Date().toString());
             }
         });
         main.addComponent(b);
-        main.setComponentAlignment(b, OrderedLayout.ALIGNMENT_RIGHT,
-                OrderedLayout.ALIGNMENT_VERTICAL_CENTER);
+        main.setComponentAlignment(b, VerticalLayout.ALIGNMENT_RIGHT,
+                VerticalLayout.ALIGNMENT_VERTICAL_CENTER);
     }
 }
diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/RichTextExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/RichTextExample.java
index edc65899f3..1ea2fba00d 100644
--- a/src/com/itmill/toolkit/automatedtests/featurebrowser/RichTextExample.java
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/RichTextExample.java
@@ -7,8 +7,8 @@ package com.itmill.toolkit.automatedtests.featurebrowser;
 import com.itmill.toolkit.ui.Button;

 import com.itmill.toolkit.ui.CustomComponent;

 import com.itmill.toolkit.ui.Label;

-import com.itmill.toolkit.ui.OrderedLayout;

 import com.itmill.toolkit.ui.RichTextArea;

+import com.itmill.toolkit.ui.VerticalLayout;

 import com.itmill.toolkit.ui.Button.ClickEvent;

 

 /**

@@ -23,16 +23,19 @@ public class RichTextExample extends CustomComponent {
             + "See the <A href=\"http://www.itmill.com/documentation/itmill-toolkit-5-reference-manual/\">manual</a> "

             + "for more information.";

 

-    private final OrderedLayout main;

+    private final VerticalLayout main;

     private final Label l;

     private final RichTextArea editor = new RichTextArea();

     private final Button b;

 

     public RichTextExample() {

         // main layout

-        main = new OrderedLayout();

+        main = new VerticalLayout();

         main.setMargin(true);

         setCompositionRoot(main);

+

+        editor.setWidth("100%");

+

         // Add the label

         l = new Label(txt);

         l.setContentMode(Label.CONTENT_XHTML);

@@ -53,8 +56,8 @@ public class RichTextExample extends CustomComponent {
             }

         });

         main.addComponent(b);

-        main.setComponentAlignment(b, OrderedLayout.ALIGNMENT_RIGHT,

-                OrderedLayout.ALIGNMENT_VERTICAL_CENTER);

+        main.setComponentAlignment(b, VerticalLayout.ALIGNMENT_RIGHT,

+                VerticalLayout.ALIGNMENT_VERTICAL_CENTER);

     }

 

 }

diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/SelectExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/SelectExample.java
index c6369562ad..f1b305a4e2 100644
--- a/src/com/itmill/toolkit/automatedtests/featurebrowser/SelectExample.java
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/SelectExample.java
@@ -9,12 +9,13 @@ import com.itmill.toolkit.ui.AbstractSelect;
 import com.itmill.toolkit.ui.ComboBox;

 import com.itmill.toolkit.ui.CustomComponent;

 import com.itmill.toolkit.ui.Field;

+import com.itmill.toolkit.ui.HorizontalLayout;

 import com.itmill.toolkit.ui.ListSelect;

 import com.itmill.toolkit.ui.NativeSelect;

 import com.itmill.toolkit.ui.OptionGroup;

-import com.itmill.toolkit.ui.OrderedLayout;

 import com.itmill.toolkit.ui.Panel;

 import com.itmill.toolkit.ui.TwinColSelect;

+import com.itmill.toolkit.ui.VerticalLayout;

 

 /**

  * Shows some basic fields for value input; TextField, DateField, Slider...

@@ -31,12 +32,12 @@ public class SelectExample extends CustomComponent {
     };

 

     public SelectExample() {

-        final OrderedLayout main = new OrderedLayout();

+        final VerticalLayout main = new VerticalLayout();

         main.setMargin(true);

         setCompositionRoot(main);

 

-        final OrderedLayout horiz = new OrderedLayout(

-                OrderedLayout.ORIENTATION_HORIZONTAL);

+        final HorizontalLayout horiz = new HorizontalLayout();

+        horiz.setWidth("100%");

         main.addComponent(horiz);

         final Panel single = new Panel("Single selects");

         single.setStyleName(Panel.STYLE_LIGHT);

diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/TableExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/TableExample.java
index ddfe92acd7..c67a4ef03b 100644
--- a/src/com/itmill/toolkit/automatedtests/featurebrowser/TableExample.java
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/TableExample.java
@@ -5,8 +5,6 @@
 package com.itmill.toolkit.automatedtests.featurebrowser;

 

 import java.util.Iterator;

-import java.util.LinkedList;

-import java.util.List;

 import java.util.Random;

 import java.util.Set;

 

@@ -16,8 +14,10 @@ import com.itmill.toolkit.event.Action;
 import com.itmill.toolkit.ui.Button;

 import com.itmill.toolkit.ui.CheckBox;

 import com.itmill.toolkit.ui.CustomComponent;

-import com.itmill.toolkit.ui.OrderedLayout;

+import com.itmill.toolkit.ui.HorizontalLayout;

+import com.itmill.toolkit.ui.TabSheet;

 import com.itmill.toolkit.ui.Table;

+import com.itmill.toolkit.ui.VerticalLayout;

 import com.itmill.toolkit.ui.Button.ClickEvent;

 

 /**

@@ -52,15 +52,23 @@ public class TableExample extends CustomComponent implements Action.Handler,
     Button deselect;

 

     public TableExample() {

+        VerticalLayout margin = new VerticalLayout();

+        margin.setMargin(true);

+

+        TabSheet root = new TabSheet();

+        setCompositionRoot(margin);

+        margin.addComponent(root);

+

         // main layout

-        final OrderedLayout main = new OrderedLayout();

+        final VerticalLayout main = new VerticalLayout();

+        root.addComponent(main);

+        main.setCaption("Basic Table");

         main.setMargin(true);

-        setCompositionRoot(main);

 

         // "source" table with bells & whistlesenabled

         source = new Table("All creatures");

         source.setPageLength(7);

-        source.setWidth(550);

+        source.setWidth("550px");

         source.setColumnCollapsingAllowed(true);

         source.setColumnReorderingAllowed(true);

         source.setSelectable(true);

@@ -72,8 +80,8 @@ public class TableExample extends CustomComponent implements Action.Handler,
         source.setDebugId("AllCreatures");

 

         // x-selected button row

-        final OrderedLayout horiz = new OrderedLayout(

-                OrderedLayout.ORIENTATION_HORIZONTAL);

+        final HorizontalLayout horiz = new HorizontalLayout();

+

         horiz.setMargin(false, false, true, false);

         main.addComponent(horiz);

         saveSelected = new Button("Save selected");

@@ -106,7 +114,7 @@ public class TableExample extends CustomComponent implements Action.Handler,
         // "saved" table, minimalistic

         saved = new Table("Saved creatures");

         saved.setPageLength(5);

-        saved.setWidth(550);

+        saved.setWidth("550px");

         saved.setSelectable(false);

         saved.setColumnHeaderMode(Table.COLUMN_HEADER_MODE_HIDDEN);

         saved.setRowHeaderMode(Table.ROW_HEADER_MODE_ID);

@@ -126,6 +134,9 @@ public class TableExample extends CustomComponent implements Action.Handler,
         b.setImmediate(true);

         main.addComponent(b);

 

+        GeneratedColumnExample gencols = new GeneratedColumnExample();

+        gencols.setCaption("Generated Columns");

+        root.addComponent(gencols);

     }

 

     // set up the properties (columns)

@@ -185,11 +196,9 @@ public class TableExample extends CustomComponent implements Action.Handler,
             if (action == ACTION_HIRE) {

                 // set HIRED property to true

                 item.getItemProperty(PROPERTY_HIRED).setValue(Boolean.TRUE);

-                source.requestRepaint();

                 if (saved.containsId(target)) {

                     item = saved.getItem(target);

                     item.getItemProperty(PROPERTY_HIRED).setValue(Boolean.TRUE);

-                    saved.requestRepaint();

                 }

                 getWindow().showNotification("Hired", "" + item);

 

@@ -234,15 +243,7 @@ public class TableExample extends CustomComponent implements Action.Handler,
             // loop each selected and copy to "saved" table

             final Set selected = (Set) source.getValue();

             int s = 0;

-

-            // The set can return the items in quite any order, but

-            // for testing purposes they always have to be in the

-            // same order.

-            List ordered = new LinkedList(selected);

-            java.util.Collections.sort(ordered);

-

-            // Now move the items to the other table

-            for (final Iterator it = ordered.iterator(); it.hasNext();) {

+            for (final Iterator it = selected.iterator(); it.hasNext();) {

                 final Object id = it.next();

                 if (!saved.containsId(id)) {

                     final Item item = source.getItem(id);

@@ -261,7 +262,6 @@ public class TableExample extends CustomComponent implements Action.Handler,
                 }

             }

             getWindow().showNotification("Saved " + s);

-            saved.requestRepaint();

 

         } else if (b == hireSelected) {

             // loop each selected and set property HIRED to true

@@ -273,14 +273,12 @@ public class TableExample extends CustomComponent implements Action.Handler,
                 final Property p = item.getItemProperty(PROPERTY_HIRED);

                 if (p.getValue() == Boolean.FALSE) {

                     p.setValue(Boolean.TRUE);

-                    source.requestRepaint();

                     s++;

                 }

                 if (saved.containsId(id)) {

                     // also update "saved" table

                     item = saved.getItem(id);

                     item.getItemProperty(PROPERTY_HIRED).setValue(Boolean.TRUE);

-                    saved.requestRepaint();

                 }

             }

             getWindow().showNotification("Hired " + s);

@@ -294,7 +292,6 @@ public class TableExample extends CustomComponent implements Action.Handler,
                 if (source.containsId(id)) {

                     s++;

                     source.removeItem(id);

-                    source.requestRepaint();

                 }

             }

             getWindow().showNotification("Deleted " + s);

diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/TreeExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/TreeExample.java
index 496af76842..c2f6e2e930 100644
--- a/src/com/itmill/toolkit/automatedtests/featurebrowser/TreeExample.java
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/TreeExample.java
@@ -10,8 +10,8 @@ import com.itmill.toolkit.data.Property.ValueChangeEvent;
 import com.itmill.toolkit.event.Action;
 import com.itmill.toolkit.ui.AbstractSelect;
 import com.itmill.toolkit.ui.CustomComponent;
+import com.itmill.toolkit.ui.HorizontalLayout;
 import com.itmill.toolkit.ui.Label;
-import com.itmill.toolkit.ui.OrderedLayout;
 import com.itmill.toolkit.ui.Panel;
 import com.itmill.toolkit.ui.TextField;
 import com.itmill.toolkit.ui.Tree;
@@ -37,8 +37,8 @@ public class TreeExample extends CustomComponent implements Action.Handler,
     TextField editor;
 
     public TreeExample() {
-        final OrderedLayout main = new OrderedLayout(
-                OrderedLayout.ORIENTATION_HORIZONTAL);
+        final HorizontalLayout main = new HorizontalLayout();
+        main.setWidth("100%");
         main.setDebugId("mainLayout");
         main.setMargin(true);
         setCompositionRoot(main);
@@ -46,7 +46,7 @@ public class TreeExample extends CustomComponent implements Action.Handler,
         // Panel w/ Tree
         Panel p = new Panel("Select item");
         p.setStyleName(Panel.STYLE_LIGHT);
-        p.setWidth(250);
+        p.setWidth("250px");
         // Description
         p.addComponent(new Label(desc));
         // Tree with a few items
@@ -81,6 +81,7 @@ public class TreeExample extends CustomComponent implements Action.Handler,
         editor.setColumns(15);
         p.addComponent(editor);
         main.addComponent(p);
+        main.setExpandRatio(p, 1);
     }
 
     public Action[] getActions(Object target, Object sender) {
@@ -153,7 +154,9 @@ public class TreeExample extends CustomComponent implements Action.Handler,
         final Property p = item.getItemProperty(CAPTION_PROPERTY);
         p.setValue(caption);
         if (parent != null) {
+            tree.setChildrenAllowed(parent, true);
             tree.setParent(id, parent);
+            tree.setChildrenAllowed(id, false);
         }
         return id;
     }
diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/ValueInputExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/ValueInputExample.java
index 8704d6f347..e291499adc 100644
--- a/src/com/itmill/toolkit/automatedtests/featurebrowser/ValueInputExample.java
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/ValueInputExample.java
@@ -10,11 +10,12 @@ import com.itmill.toolkit.data.Property.ValueChangeEvent;
 import com.itmill.toolkit.ui.CustomComponent;

 import com.itmill.toolkit.ui.DateField;

 import com.itmill.toolkit.ui.Field;

+import com.itmill.toolkit.ui.HorizontalLayout;

 import com.itmill.toolkit.ui.InlineDateField;

-import com.itmill.toolkit.ui.OrderedLayout;

 import com.itmill.toolkit.ui.Panel;

 import com.itmill.toolkit.ui.Slider;

 import com.itmill.toolkit.ui.TextField;

+import com.itmill.toolkit.ui.VerticalLayout;

 import com.itmill.toolkit.ui.Window.Notification;

 

 /**

@@ -25,7 +26,7 @@ import com.itmill.toolkit.ui.Window.Notification;
 public class ValueInputExample extends CustomComponent {

 

     public ValueInputExample() {

-        final OrderedLayout main = new OrderedLayout();

+        final VerticalLayout main = new VerticalLayout();

         main.setMargin(true);

         setCompositionRoot(main);

 

@@ -39,8 +40,8 @@ public class ValueInputExample extends CustomComponent {
         };

 

         // TextField

-        OrderedLayout horiz = new OrderedLayout(

-                OrderedLayout.ORIENTATION_HORIZONTAL);

+        HorizontalLayout horiz = new HorizontalLayout();

+        horiz.setWidth("100%");

         main.addComponent(horiz);

         Panel left = new Panel("TextField");

         left.setStyleName(Panel.STYLE_LIGHT);

@@ -65,10 +66,9 @@ public class ValueInputExample extends CustomComponent {
         right.addComponent(tf);

 

         // DateFields

-

         Date d = new Date(98, 1, 22, 13, 14, 15);

-

-        horiz = new OrderedLayout(OrderedLayout.ORIENTATION_HORIZONTAL);

+        horiz = new HorizontalLayout();

+        horiz.setWidth("100%");

         main.addComponent(horiz);

         left = new Panel("DateField");

         left.setStyleName(Panel.STYLE_LIGHT);

@@ -123,7 +123,7 @@ public class ValueInputExample extends CustomComponent {
         // int slider

         Slider slider = new Slider(0, 100);

         slider.setDebugId("Slider1");

-        slider.setSize(300);

+        slider.setWidth("300px");

         slider.setImmediate(true);

         slider.addListener(new Slider.ValueChangeListener() {

             public void valueChange(ValueChangeEvent event) {

@@ -140,6 +140,7 @@ public class ValueInputExample extends CustomComponent {
         left.addComponent(slider);

         // double slider

         slider = new Slider(0.0, 1.0, 1);

+        slider.setOrientation(Slider.ORIENTATION_VERTICAL);

         slider.setDebugId("Slider2");

         slider.setImmediate(true);

         slider.addListener(new Slider.ValueChangeListener() {

diff --git a/src/com/itmill/toolkit/automatedtests/featurebrowser/WindowingExample.java b/src/com/itmill/toolkit/automatedtests/featurebrowser/WindowingExample.java
index 9da87d87a6..6c46853dca 100644
--- a/src/com/itmill/toolkit/automatedtests/featurebrowser/WindowingExample.java
+++ b/src/com/itmill/toolkit/automatedtests/featurebrowser/WindowingExample.java
@@ -10,7 +10,7 @@ import com.itmill.toolkit.terminal.ExternalResource;
 import com.itmill.toolkit.ui.Button;

 import com.itmill.toolkit.ui.CustomComponent;

 import com.itmill.toolkit.ui.Label;

-import com.itmill.toolkit.ui.OrderedLayout;

+import com.itmill.toolkit.ui.VerticalLayout;

 import com.itmill.toolkit.ui.Window;

 import com.itmill.toolkit.ui.Button.ClickEvent;

 

@@ -20,16 +20,16 @@ import com.itmill.toolkit.ui.Button.ClickEvent;
  */

 public class WindowingExample extends CustomComponent {

 

-    public static final String txt = "<p>There are two main types of windows: application-level windows, and"

-            + "\"subwindows\". </p><p> A subwindow is rendered as a \"inline\" popup window"

+    public static final String txt = "<p>There are two main types of windows: application-level windows, and "

+            + "\"sub windows\".</p><p>A sub window is rendered as a \"inline\" popup window"

             + " within the (native) browser window to which it was added. You can create"

-            + " a subwindow by creating a new Window and adding it to a application-level window, for instance"

+            + " a sub window by creating a new Window and adding it to a application-level window, for instance"

             + " your main window. </p><p> In contrast, you create a application-level window by"

             + " creating a new Window and adding it to the Application. Application-level"

             + " windows are not shown by default - you need to open a browser window for"

             + " the url representing the window. You can think of the application-level"

             + " windows as separate views into your application - and a way to create a"

-            + " \"native\" browser window. </p><p> Depending on your needs, it's also"

+            + " \"native\" browser window.</p><p>Depending on your needs, it's also"

             + " possible to create a new window instance (with it's own internal state)"

             + " for each new (native) browser window, or you can share the same instance"

             + " (and state) between several browser windows (the latter is most useful"

@@ -38,7 +38,7 @@ public class WindowingExample extends CustomComponent {
     private URL windowUrl = null;

 

     public WindowingExample() {

-        final OrderedLayout main = new OrderedLayout();

+        final VerticalLayout main = new VerticalLayout();

         main.setMargin(true);

         setCompositionRoot(main);

 

@@ -46,29 +46,33 @@ public class WindowingExample extends CustomComponent {
         l.setContentMode(Label.CONTENT_XHTML);

         main.addComponent(l);

 

-        main.addComponent(new Button("Create a new subwindow",

+        Button b = new Button("Create a new subwindow",

                 new Button.ClickListener() {

                     public void buttonClick(ClickEvent event) {

                         final Window w = new Window("Subwindow");

+                        w.setWidth("50%");

                         final Label l = new Label(txt);

                         l.setContentMode(Label.CONTENT_XHTML);

                         w.addComponent(l);

                         getApplication().getMainWindow().addWindow(w);

                     }

-                }));

-        main.addComponent(new Button("Create a new modal window",

-                new Button.ClickListener() {

-                    public void buttonClick(ClickEvent event) {

-                        final Window w = new Window("Modal window");

-                        w.setModal(true);

-                        final Label l = new Label(txt);

-                        l.setContentMode(Label.CONTENT_XHTML);

-                        w.addComponent(l);

-                        getApplication().getMainWindow().addWindow(w);

-                    }

-                }));

-        main.addComponent(new Button(

-                "Open a application-level window, with shared state",

+                });

+        b.setStyleName(Button.STYLE_LINK);

+        main.addComponent(b);

+        b = new Button("Create a new modal window", new Button.ClickListener() {

+            public void buttonClick(ClickEvent event) {

+                final Window w = new Window("Modal window");

+                w.setWidth("50%");

+                w.setModal(true);

+                final Label l = new Label(txt);

+                l.setContentMode(Label.CONTENT_XHTML);

+                w.addComponent(l);

+                getApplication().getMainWindow().addWindow(w);

+            }

+        });

+        b.setStyleName(Button.STYLE_LINK);

+        main.addComponent(b);

+        b = new Button("Open a application-level window, with shared state",

                 new Button.ClickListener() {

                     public void buttonClick(ClickEvent event) {

                         if (windowUrl == null) {

@@ -82,8 +86,10 @@ public class WindowingExample extends CustomComponent {
                         getApplication().getMainWindow().open(

                                 new ExternalResource(windowUrl), "_new");

                     }

-                }));

-        main.addComponent(new Button(

+                });

+        b.setStyleName(Button.STYLE_LINK);

+        main.addComponent(b);

+        b = new Button(

                 "Create a new application-level window, with it's own state",

                 new Button.ClickListener() {

                     public void buttonClick(ClickEvent event) {

@@ -97,7 +103,9 @@ public class WindowingExample extends CustomComponent {
                         getApplication().getMainWindow().open(

                                 new ExternalResource(w.getURL()), "_new");

                     }

-                }));

+                });

+        b.setStyleName(Button.STYLE_LINK);

+        main.addComponent(b);

 

     }