]> source.dussan.org Git - vaadin-framework.git/commitdiff
Fixed OrderedLayout test so it does not use deprecated layouts and moved it to a...
authorArtur Signell <artur.signell@itmill.com>
Tue, 20 Jan 2009 20:32:57 +0000 (20:32 +0000)
committerArtur Signell <artur.signell@itmill.com>
Tue, 20 Jan 2009 20:32:57 +0000 (20:32 +0000)
svn changeset:6605/svn branch:trunk

src/com/itmill/toolkit/tests/TestOrderedLayout.java [deleted file]
src/com/itmill/toolkit/tests/layouts/OrderedLayoutBasics.java [new file with mode: 0644]

diff --git a/src/com/itmill/toolkit/tests/TestOrderedLayout.java b/src/com/itmill/toolkit/tests/TestOrderedLayout.java
deleted file mode 100644 (file)
index 0d8b24a..0000000
+++ /dev/null
@@ -1,1268 +0,0 @@
-package com.itmill.toolkit.tests;\r
-\r
-import java.util.HashSet;\r
-import java.util.Iterator;\r
-import java.util.Set;\r
-\r
-import com.itmill.toolkit.Application;\r
-import com.itmill.toolkit.terminal.ThemeResource;\r
-import com.itmill.toolkit.terminal.UserError;\r
-import com.itmill.toolkit.ui.Button;\r
-import com.itmill.toolkit.ui.Component;\r
-import com.itmill.toolkit.ui.Label;\r
-import com.itmill.toolkit.ui.Layout;\r
-import com.itmill.toolkit.ui.OrderedLayout;\r
-import com.itmill.toolkit.ui.Panel;\r
-import com.itmill.toolkit.ui.Select;\r
-import com.itmill.toolkit.ui.TextField;\r
-import com.itmill.toolkit.ui.Window;\r
-import com.itmill.toolkit.ui.Button.ClickEvent;\r
-import com.itmill.toolkit.ui.Button.ClickListener;\r
-import com.itmill.toolkit.ui.Layout.AlignmentHandler;\r
-\r
-public class TestOrderedLayout extends Application {\r
-\r
-    String valignName[] = new String[] { "top", "middle", "bottom" };\r
-    int valign[] = new int[] { OrderedLayout.ALIGNMENT_TOP,\r
-            OrderedLayout.ALIGNMENT_VERTICAL_CENTER,\r
-            OrderedLayout.ALIGNMENT_BOTTOM };\r
-\r
-    Set<OrderedLayout> layouts = new HashSet<OrderedLayout>();\r
-    private OrderedLayout layoutContainer;\r
-    private int suffix = 0;\r
-\r
-    public void init() {\r
-        Window w = new Window(getClass().getSimpleName());\r
-        setMainWindow(w);\r
-        // setTheme("tests-tickets");\r
-        // GridLayout layout = new OrderedLayout(1, 10);\r
-        // w.setLayout(layout);\r
-        w.getLayout().addComponent(new Button("Swap", new ClickListener() {\r
-\r
-            public void buttonClick(ClickEvent event) {\r
-                swapLayouts();\r
-            }\r
-\r
-        }));\r
-\r
-        layoutContainer = new OrderedLayout(OrderedLayout.ORIENTATION_VERTICAL);\r
-        createUI(layoutContainer);\r
-        w.getLayout().addComponent(layoutContainer);\r
-\r
-        // swapLayouts();\r
-    }\r
-\r
-    public void swapLayouts() {\r
-        OrderedLayout mainLayout = layoutContainer;\r
-\r
-        int mainOrient = 1 - mainLayout.getOrientation();\r
-        mainLayout.setOrientation(mainOrient);\r
-        for (OrderedLayout ol : layouts) {\r
-            ol.setOrientation(1 - mainOrient);\r
-            float h = ol.getHeight();\r
-            int hUnit = ol.getHeightUnits();\r
-            float w = ol.getWidth();\r
-            int wUnit = ol.getWidthUnits();\r
-            ol.setWidth(h, hUnit);\r
-            ol.setHeight(w, wUnit);\r
-\r
-        }\r
-\r
-    }\r
-\r
-    private void createUI(Layout layout) {\r
-        layout\r
-                .addComponent(wrapLayout(layout_field_100pct_button_field(new OrderedLayout(\r
-                        OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout.addComponent(wrapLayout(layout_overfilled(new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout\r
-                .addComponent(wrapLayout(layout_overfilled_dynamic_height(new OrderedLayout(\r
-                        OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout\r
-                .addComponent(wrapLayout(layout_symmetric_fields(new OrderedLayout(\r
-                        OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout.addComponent(wrapLayout(layout_leftAndRight(new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout.addComponent(wrapLayout(layout_fixed_filled(new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout.addComponent(wrapLayout(layout_dynamic(new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout.addComponent(wrapLayout(layout_labels(new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout.addComponent(wrapLayout(layout_captions(new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout\r
-                .addComponent(wrapLayout(layout_captions_fixed_size(new OrderedLayout(\r
-                        OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout\r
-                .addComponent(wrapLayout(layout_captions_fixed_size_and_relative_size(new OrderedLayout(\r
-                        OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout\r
-                .addComponent(wrapLayout(layout_captions_fixed_size_and_fixed_size(new OrderedLayout(\r
-                        OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout\r
-                .addComponent(wrapLayout(layout_add_remove_components(new OrderedLayout(\r
-                        OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout.addComponent(wrapLayout(layout_pctFilled(new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout.addComponent(wrapLayout(layout_pctFilled(new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_VERTICAL))));\r
-        layout.addComponent(wrapLayout(layout_underFilled(new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-        layout.addComponent(wrapLayout(layout_basic_test(new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_HORIZONTAL))));\r
-    }\r
-\r
-    private Layout wrapLayout(Layout ol) {\r
-        Panel p = new Panel(ol);\r
-        p.setSizeUndefined();\r
-        p.setCaption(ol.getCaption());\r
-        ol.setCaption(null);\r
-\r
-        OrderedLayout l = new OrderedLayout();\r
-        l.setSizeUndefined();\r
-        l.addComponent(p);\r
-        // p.setWidth("600px");\r
-\r
-        if (ol instanceof OrderedLayout) {\r
-            layouts.add((OrderedLayout) ol);\r
-        }\r
-        return l;\r
-    }\r
-\r
-    /* LAYOUTS */\r
-\r
-    private Layout layout1() {\r
-        OrderedLayout ol = new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_HORIZONTAL);\r
-        ol.setHeight("200px");\r
-        ol.setWidth("");\r
-        ol.setCaption("Fixed height (200px) and dynamic width");\r
-\r
-        TextField tf = new TextField("100px high TextField, valign: bottom");\r
-        tf.setHeight("100px");\r
-        tf.setWidth("");\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        Select s = new Select("100% high select");\r
-        s.setMultiSelect(true);\r
-        s.setHeight("100%");\r
-        s.setWidth("");\r
-        ol.addComponent(s);\r
-\r
-        s = new Select("200 px high select");\r
-        s.setMultiSelect(true);\r
-        s.setHeight("200px");\r
-        s.setWidth("");\r
-        ol.addComponent(s);\r
-\r
-        // tf = new TextField("100% high TextField, right/bottom");\r
-        // tf.setHeight("100%");\r
-        // tf.setWidth("");\r
-        // ol.addComponent(tf);\r
-        // ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-        // OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        // tf = new TextField("100% high, 200px wide TextField");\r
-        // tf.setHeight("100%");\r
-        // tf.setWidth("200px");\r
-        // ol.addComponent(tf);\r
-\r
-        return ol;\r
-\r
-    }\r
-\r
-    private Layout layout2() {\r
-        OrderedLayout ol = new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_HORIZONTAL);\r
-        ol.setHeight("70px");\r
-        ol.setWidth("");\r
-        ol.setCaption("Fixed height (50px) and dynamic width");\r
-\r
-        TextField tf = new TextField(\r
-                "100px high TextField, valign: bottom, should be partly outside");\r
-        tf.setHeight("100px");\r
-        tf.setWidth("");\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        tf = new TextField(\r
-                "100% high, 50px wide TextField, valign: bottom, should fill full height");\r
-        tf.setHeight("100%");\r
-        tf.setWidth("50px");\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        Label l = new Label(\r
-                "100% high, 50px wide Label, valign: bottom, does not fill full height, only needed space");\r
-        tf.setHeight("100%");\r
-        tf.setWidth("50px");\r
-        ol.addComponent(l);\r
-        ol.setComponentAlignment(l, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        Select s = new Select("100% high select, should fit into layout");\r
-        s.setMultiSelect(true);\r
-        s.setHeight("100%");\r
-        s.setWidth("");\r
-        for (int i = 0; i < 10; i++) {\r
-            s.addItem(new Object());\r
-        }\r
-\r
-        ol.addComponent(s);\r
-\r
-        s = new Select("200 px high select, should be partly outside");\r
-        s.setMultiSelect(true);\r
-        s.setHeight("200px");\r
-        s.setWidth("");\r
-        ol.addComponent(s);\r
-\r
-        return ol;\r
-    }\r
-\r
-    private Layout layout3() {\r
-        OrderedLayout ol = new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_HORIZONTAL);\r
-        ol.setHeight("");\r
-        ol.setWidth("500px");\r
-        ol.setCaption("Fixed width (500px) and dynamic height");\r
-        TextField tf;\r
-\r
-        tf = new TextField("100px high TextField, valign: bottom");\r
-        tf.setHeight("100px");\r
-        tf.setWidth("100%");\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        tf = new TextField("100px high TextField, valign: top");\r
-        tf.setHeight("100px");\r
-        tf.setWidth("100%");\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_TOP);\r
-\r
-        tf = new TextField("100% high, 50px wide TextField, valign: bottom");\r
-        tf.setHeight("100%");\r
-        tf.setWidth("50px");\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        Label l = new Label(\r
-                "100% high, 50px wide Label, valign: bottom, does not fill full height, only needed space");\r
-        tf.setHeight("100%");\r
-        tf.setWidth("50px");\r
-        ol.addComponent(l);\r
-        ol.setComponentAlignment(l, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        Select s = new Select("100% high select, should fit into layout");\r
-        s.setMultiSelect(true);\r
-        s.setHeight("100%");\r
-        s.setWidth("100%");\r
-        for (int i = 0; i < 10; i++) {\r
-            s.addItem(new Object());\r
-        }\r
-\r
-        ol.addComponent(s);\r
-\r
-        s = new Select("200 px high select, should make the layout 200px high");\r
-        s.setMultiSelect(true);\r
-        s.setHeight("200px");\r
-        s.setWidth("100%");\r
-        ol.addComponent(s);\r
-\r
-        return ol;\r
-    }\r
-\r
-    private Layout layout3New() {\r
-        OrderedLayout ol = new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_HORIZONTAL);\r
-        ol.setHeight("300px");\r
-        // ol.setWidth("500px");\r
-        ol.setWidth("");\r
-        ol.setCaption("Dynamic width and fixed height(300px)");\r
-        TextField tf;\r
-\r
-        tf = new TextField("100px high TextField, valign: bottom");\r
-        tf.setHeight("100px");\r
-        tf.setWidth("100%");\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        tf = new TextField("100px high TextField, valign: top");\r
-        tf.setHeight("100px");\r
-        tf.setWidth("100%");\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_TOP);\r
-\r
-        tf = new TextField("100% high, 50px wide TextField, valign: bottom");\r
-        tf.setHeight("100%");\r
-        tf.setWidth("50px");\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        Label l = new Label(\r
-                "100% high, 50px wide Label, valign: bottom, does not fill full height, only needed space");\r
-        tf.setHeight("100%");\r
-        tf.setWidth("50px");\r
-        ol.addComponent(l);\r
-        ol.setComponentAlignment(l, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        Select s = new Select("100% high select, should fit into layout");\r
-        s.setMultiSelect(true);\r
-        s.setHeight("100%");\r
-        s.setWidth("100%");\r
-        for (int i = 0; i < 10; i++) {\r
-            s.addItem(new Object());\r
-        }\r
-\r
-        ol.addComponent(s);\r
-\r
-        s = new Select("200 px high select, should make the layout 200px high");\r
-        s.setMultiSelect(true);\r
-        s.setHeight("200px");\r
-        s.setWidth("100%");\r
-        ol.addComponent(s);\r
-\r
-        return ol;\r
-    }\r
-\r
-    private Layout layout4(OrderedLayout ol) {\r
-        // ol.setHeight("300px");\r
-        // ol.setWidth("500px");\r
-        ol.setMargin(true);\r
-        ol.setSpacing(true);\r
-        ol.setWidth("");\r
-        ol.setCaption("Dynamic width and dynamic height");\r
-        TextField tf;\r
-\r
-        tf = new TextField("100% high TextField");\r
-        tf.setCaption(null);\r
-        tf.setRequired(true);\r
-        tf.setValue("100% high Field");\r
-        tf.setHeight("100%");\r
-        tf.setWidth("100px");\r
-        tf.setRows(2);\r
-        ol.addComponent(tf);\r
-\r
-        tf = new TextField("100% high TextField");\r
-        tf.setCaption("100% high TextField");\r
-        tf.setRequired(true);\r
-        tf.setValue("100% high Field");\r
-        tf.setHeight("100%");\r
-        tf.setWidth("100px");\r
-        tf.setRows(2);\r
-        ol.addComponent(tf);\r
-\r
-        for (int i = 1; i < 4; i++) {\r
-            int w = i * 100;\r
-            tf = new TextField("Field " + i);\r
-            tf.setRows(2);\r
-            tf.setValue(w + "px high, " + w + "px wide TextField, valign: "\r
-                    + valignName[i % 3]);\r
-            tf.setWidth(w + "px");\r
-            tf.setHeight(w + "px");\r
-            ol.addComponent(tf);\r
-            ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                    valign[i % 3]);\r
-\r
-        }\r
-\r
-        tf = new TextField("100% high TextField");\r
-        tf.setValue("100% high 100px wide");\r
-        tf.setRows(2);\r
-        tf.setHeight("100%");\r
-        tf.setWidth("100px");\r
-        ol.addComponent(tf);\r
-        return ol;\r
-    }\r
-\r
-    private Layout layout_field_100pct_button_field(OrderedLayout ol) {\r
-        ol.setHeight("500px");\r
-        ol.setWidth("916px");\r
-        ol.setMargin(false);\r
-        ol.setSpacing(true);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("Fixed width (" + ol.getWidth()\r
-                + "px) and fixed height (" + ol.getHeight()\r
-                + "px) / layout_field_100pct_button_field");\r
-        TextField tf;\r
-\r
-        tf = new TextField("300px x 300px Field");\r
-        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        tf.setValue("300x300 field");\r
-        tf.setRows(2);\r
-        // tf.setSizeFull();\r
-        tf.setHeight("300px");\r
-        tf.setWidth("300px");\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_TOP);\r
-        ol.addComponent(tf);\r
-\r
-        Button b;\r
-        b = new Button("This is a 100%x50% valign middle button");\r
-        b.setSizeFull();\r
-        b.setHeight("50%");\r
-        ol.addComponent(b);\r
-        ol.setExpandRatio(b, 1.0f);\r
-        ol.setComponentAlignment(b, AlignmentHandler.ALIGNMENT_RIGHT,\r
-                AlignmentHandler.ALIGNMENT_VERTICAL_CENTER);\r
-\r
-        tf = new TextField("300px x 300px Field");\r
-        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        tf.setValue("300x300 field");\r
-        tf.setRows(2);\r
-        // tf.setSizeFull();\r
-        tf.setHeight("300px");\r
-        tf.setWidth("300px");\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-        ol.addComponent(tf);\r
-        return ol;\r
-    }\r
-\r
-    private Layout layout_basic_test(OrderedLayout ol) {\r
-        ol.setHeight("700px");\r
-        ol.setWidth("900px");\r
-        ol.setMargin(true);\r
-        ol.setSpacing(true);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("Fixed width (" + ol.getWidth()\r
-                + "px) and fixed height (" + ol.getHeight()\r
-                + "px) / layout_basic_test");\r
-        TextField tf;\r
-\r
-        tf = new TextField("300px x 300px Field");\r
-        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        tf.setValue("300x300 field");\r
-        tf.setRows(2);\r
-        // tf.setSizeFull();\r
-        tf.setHeight("300px");\r
-        tf.setWidth("300px");\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_TOP);\r
-        ol.addComponent(tf);\r
-\r
-        Button b;\r
-        // b = new Button("This is a 100%x50% valign middle button");\r
-        // b.setSizeFull();\r
-        // b.setHeight("50%");\r
-        // ol.addComponent(b, 1.0f);\r
-        // ol.setComponentAlignment(b, AlignmentHandler.ALIGNMENT_RIGHT,\r
-        // AlignmentHandler.ALIGNMENT_VERTICAL_CENTER);\r
-\r
-        tf = new TextField("300px x 300px Field");\r
-        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        tf.setValue("300x300 field");\r
-        tf.setRows(2);\r
-        // tf.setSizeFull();\r
-        tf.setHeight("300px");\r
-        tf.setWidth("300px");\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-        ol.addComponent(tf);\r
-        return ol;\r
-    }\r
-\r
-    private Layout layout_symmetric_fields(OrderedLayout ol) {\r
-        ol.setHeight("900px");\r
-        ol.setWidth("900px");\r
-        ol.setMargin(false);\r
-        ol.setSpacing(false);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("Fixed width (" + ol.getWidth()\r
-                + "px) and fixed height (" + ol.getHeight()\r
-                + "px) / layout_symmetric_fields");\r
-        TextField tf;\r
-\r
-        tf = new TextField("300px x 300px Field");\r
-        tf.setValue("300x300 field");\r
-        tf.setRows(2);\r
-        tf.setHeight("300px");\r
-        tf.setWidth("300px");\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_TOP);\r
-        ol.addComponent(tf);\r
-\r
-        tf = new TextField("300px x 300px Field");\r
-        tf.setValue("300x300 field");\r
-        tf.setRows(2);\r
-        tf.setHeight("300px");\r
-        tf.setWidth("300px");\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_HORIZONTAL_CENTER,\r
-                OrderedLayout.ALIGNMENT_VERTICAL_CENTER);\r
-        ol.addComponent(tf);\r
-\r
-        tf = new TextField("300px x 300px Field");\r
-        tf.setValue("300x300 field");\r
-        tf.setRows(2);\r
-        tf.setHeight("300px");\r
-        tf.setWidth("300px");\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-        ol.addComponent(tf);\r
-\r
-        return ol;\r
-    }\r
-\r
-    private Layout layout_leftAndRight(OrderedLayout ol) {\r
-        ol.setHeight("700px");\r
-        ol.setWidth("700px");\r
-        ol.setMargin(true);\r
-        ol.setSpacing(true);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("Fixed width (" + ol.getWidth()\r
-                + "px) and fixed height (" + ol.getHeight()\r
-                + "px) / layout_leftAndRight");\r
-        TextField tf;\r
-\r
-        // tf = new TextField("100%x100% Field");\r
-        // tf.setCaption(null);\r
-        // tf.setValue("100% x 100% TextField");\r
-        // tf.setSizeFull();\r
-        // tf.setRequired(true);\r
-        // // tf.setComponentError(new UserError("It's broken!"));\r
-        //\r
-        // // tf.setHeight("100%");\r
-        // // tf.setWidth("100px");\r
-        // tf.setRows(2);\r
-        // ol.addComponent(tf);\r
-        //\r
-        // for (int i = 1; i < 5; i++) {\r
-        // int w = i * 100;\r
-        // tf = new TextField("Caption field " + i);\r
-        // tf.setRows(2);\r
-        // tf.setValue(w + "px high, " + w + "px wide TextField, valign: "\r
-        // + valignName[i % 3]);\r
-        // tf.setWidth(w + "px");\r
-        // tf.setHeight(w + "px");\r
-        // ol.addComponent(tf);\r
-        // ol.setComponentAlignment(tf,\r
-        // OrderedLayout.ALIGNMENT_HORIZONTAL_CENTER, valign[i % 3]);\r
-        // }\r
-        //\r
-        // tf.setValue(tf.getValue().toString() + " (100% wide)");\r
-        // tf.setWidth("100%");\r
-\r
-        // tf = new TextField("100%x70px Field");\r
-        // tf.setCaption(null);\r
-        // tf.setRequired(true);\r
-        // // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        // tf.setComponentError(new UserError("abc"));\r
-        // tf.setValue("100% high 70px wide TextField");\r
-        // tf.setRows(2);\r
-        // // tf.setSizeFull();\r
-        // tf.setHeight("100%");\r
-        // tf.setWidth("70px");\r
-        // ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-        // OrderedLayout.ALIGNMENT_TOP);\r
-        // ol.addComponent(tf);\r
-\r
-        tf = new TextField("300px x 300px Field");\r
-        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        tf.setValue("300x300 field");\r
-        tf.setRows(2);\r
-        // tf.setSizeFull();\r
-        tf.setHeight("300px");\r
-        tf.setWidth("300px");\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_TOP);\r
-        ol.addComponent(tf);\r
-\r
-        tf = new TextField("300px x 300px Field");\r
-        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        tf.setValue("300x300 field");\r
-        tf.setRows(2);\r
-        // tf.setSizeFull();\r
-        tf.setHeight("300px");\r
-        tf.setWidth("300px");\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-        ol.addComponent(tf);\r
-        return ol;\r
-    }\r
-\r
-    private Layout layout_fixed_filled(OrderedLayout ol) {\r
-        ol.setHeight("700px");\r
-        ol.setWidth("700px");\r
-        ol.setMargin(true);\r
-        ol.setSpacing(true);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("Filled with fixed width (" + ol.getWidth()\r
-                + "px) and fixed height (" + ol.getHeight() + "px)");\r
-        TextField tf;\r
-\r
-        tf = new TextField("60%x100% Field");\r
-        tf.setCaption("This one has a caption");\r
-        tf.setValue("60% x 100% TextField");\r
-        tf.setWidth("100%");\r
-        tf.setHeight("100%");\r
-        tf.setRequired(true);\r
-        // tf.setComponentError(new UserError("It's broken!"));\r
-\r
-        // tf.setHeight("100%");\r
-        // tf.setWidth("100px");\r
-        tf.setRows(2);\r
-        ol.addComponent(tf);\r
-        ol.setExpandRatio(tf, 1f);\r
-        //\r
-\r
-        tf = new TextField("60%x60% Field");\r
-        tf.setCaption(null);\r
-        tf.setValue("60% x 60% TextField");\r
-        tf.setWidth("100%");\r
-        tf.setHeight("60%");\r
-        tf.setRequired(true);\r
-        ol.addComponent(tf);\r
-        ol.setExpandRatio(tf, 1f);\r
-        ol.setComponentAlignment(tf, AlignmentHandler.ALIGNMENT_LEFT,\r
-                AlignmentHandler.ALIGNMENT_VERTICAL_CENTER);\r
-        // tf.setComponentError(new UserError("It's broken!"));\r
-\r
-        // tf.setHeight("100%");\r
-        // tf.setWidth("100px");\r
-        tf.setRows(2);\r
-        //\r
-        // for (int i = 1; i < 5; i++) {\r
-        // int w = i * 100;\r
-        // tf = new TextField("Caption field " + i);\r
-        // tf.setRows(2);\r
-        // tf.setValue(w + "px high, " + w + "px wide TextField, valign: "\r
-        // + valignName[i % 3]);\r
-        // tf.setWidth(w + "px");\r
-        // tf.setHeight(w + "px");\r
-        // ol.addComponent(tf);\r
-        // ol.setComponentAlignment(tf,\r
-        // OrderedLayout.ALIGNMENT_HORIZONTAL_CENTER, valign[i % 3]);\r
-        // }\r
-        //\r
-        // tf.setValue(tf.getValue().toString() + " (100% wide)");\r
-        // tf.setWidth("100%");\r
-\r
-        // tf = new TextField("100%x70px Field");\r
-        // tf.setCaption(null);\r
-        // tf.setRequired(true);\r
-        // // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        // tf.setComponentError(new UserError("abc"));\r
-        // tf.setValue("100% high 70px wide TextField");\r
-        // tf.setRows(2);\r
-        // // tf.setSizeFull();\r
-        // tf.setHeight("100%");\r
-        // tf.setWidth("70px");\r
-        // ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-        // OrderedLayout.ALIGNMENT_TOP);\r
-        // ol.addComponent(tf);\r
-\r
-        tf = new TextField("200px x 200px Field");\r
-        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        tf.setValue("200x200 field");\r
-        tf.setRows(2);\r
-        // tf.setSizeFull();\r
-        tf.setHeight("200px");\r
-        tf.setWidth("200px");\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_TOP);\r
-        ol.addComponent(tf);\r
-\r
-        tf = new TextField("200px x 200px Field");\r
-        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        tf.setValue("200x200 field");\r
-        tf.setRows(2);\r
-        // tf.setSizeFull();\r
-        tf.setHeight("200px");\r
-        tf.setWidth("200px");\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-        ol.addComponent(tf);\r
-        return ol;\r
-    }\r
-\r
-    private Layout layout_overfilled(OrderedLayout ol) {\r
-        ol.setHeight("300px");\r
-        ol.setWidth("700px");\r
-        ol.setMargin(true);\r
-        ol.setSpacing(true);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("OverFilled with fixed width (" + ol.getWidth()\r
-                + "px) and fixed height (" + ol.getHeight() + "px)");\r
-        TextField tf;\r
-\r
-        for (int i = 0; i < 5; i++) {\r
-            tf = new TextField("200x200px Field");\r
-            tf.setCaption("This one has a caption");\r
-            tf.setValue("200x200 TextField");\r
-            tf.setWidth("200px");\r
-            tf.setHeight("200px");\r
-            tf.setRequired(true);\r
-            // tf.setComponentError(new UserError("It's broken!"));\r
-\r
-            // tf.setHeight("100%");\r
-            // tf.setWidth("100px");\r
-            tf.setRows(2);\r
-            ol.addComponent(tf);\r
-        }\r
-\r
-        return ol;\r
-    }\r
-\r
-    private Layout layout_overfilled_dynamic_height(OrderedLayout ol) {\r
-        ol.setHeight(null);\r
-        ol.setWidth("700px");\r
-        ol.setMargin(true);\r
-        ol.setSpacing(true);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("OverFilled with fixed width (" + ol.getWidth()\r
-                + "px) and dynamic height");\r
-        TextField tf;\r
-\r
-        for (int i = 0; i < 10; i++) {\r
-            tf = new TextField("200x200px Field");\r
-            tf.setCaption("This one has a caption");\r
-            tf.setWidth("200px");\r
-            tf.setHeight(((i + 1) * 50) + "px");\r
-            tf.setValue(tf.getWidth() + "x" + tf.getHeight() + " TextField");\r
-            tf.setRequired(true);\r
-            // tf.setComponentError(new UserError("It's broken!"));\r
-\r
-            // tf.setHeight("100%");\r
-            // tf.setWidth("100px");\r
-            tf.setRows(2);\r
-            ol.addComponent(tf);\r
-        }\r
-\r
-        return ol;\r
-    }\r
-\r
-    // private Layout layout_add_components(OrderedLayout ol) {\r
-    // ol.setHeight("600px");\r
-    // ol.setWidth("600px");\r
-    // ol.setMargin(true);\r
-    // ol.setSpacing(true);\r
-    //\r
-    // // ol.setWidth("");\r
-    // ol.setCaption("Fixed width (" + ol.getWidth()\r
-    // + "px) and fixed height (" + ol.getHeight() + "px)");\r
-    //\r
-    // for (int i = 0; i < 3; i++) {\r
-    // Button b = createAddButton(ol);\r
-    // ol.addComponent(b);\r
-    // }\r
-    //\r
-    // return ol;\r
-    //\r
-    // }\r
-\r
-    private Layout layout_add_remove_components(OrderedLayout ol) {\r
-        ol.setHeight("600px");\r
-        ol.setWidth("600px");\r
-        ol.setMargin(true);\r
-        ol.setSpacing(true);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("Fixed width (" + ol.getWidth()\r
-                + "px) and fixed height (" + ol.getHeight()\r
-                + "px) / layout_add_remove_components");\r
-\r
-        for (int i = 0; i < 2; i++) {\r
-            OrderedLayout inner = createAddRemove(ol, "", "");\r
-            ol.addComponent(inner);\r
-            ol.setComponentAlignment(inner, OrderedLayout.ALIGNMENT_RIGHT,\r
-                    OrderedLayout.ALIGNMENT_BOTTOM);\r
-        }\r
-\r
-        return ol;\r
-\r
-    }\r
-\r
-    private Layout layout_dynamic(OrderedLayout ol) {\r
-        ol.setMargin(true);\r
-        ol.setSpacing(true);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("Dynamic width, dynamic height");\r
-\r
-        for (int i = 0; i < 3; i++) {\r
-            Button b = new Button("Button " + i);\r
-            if (i == 2) {\r
-                b.setHeight("200px");\r
-            } else {\r
-                b.setHeight("100%");\r
-            }\r
-            ol.addComponent(b);\r
-        }\r
-\r
-        return ol;\r
-\r
-    }\r
-\r
-    private Layout layout_captions(OrderedLayout ol) {\r
-        ol.setMargin(true);\r
-        ol.setSpacing(true);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("Caption test with dynamic width");\r
-\r
-        TextField tf;\r
-        tf = new TextField("Short caption");\r
-        ol.addComponent(tf);\r
-\r
-        tf = new TextField(\r
-                "A very long caption which is probably much longer than the field");\r
-        ol.addComponent(tf);\r
-\r
-        tf = new TextField(\r
-                "A very long caption which is probably much longer than the field and includes indicators");\r
-        tf.setRequired(true);\r
-        tf.setComponentError(new UserError("abc123"));\r
-        ol.addComponent(tf);\r
-\r
-        // for (int i = 0; i < 3; i++) {\r
-        // Button b = new Button("Button " + i);\r
-        // if (i == 2) {\r
-        // b.setHeight("200px");\r
-        // } else {\r
-        // b.setHeight("100%");\r
-        // }\r
-        // ol.addComponent(b);\r
-        // }\r
-\r
-        return ol;\r
-\r
-    }\r
-\r
-    private Layout layout_captions_fixed_size(OrderedLayout ol) {\r
-        ol.setWidth("700px");\r
-        ol.setHeight("250px");\r
-\r
-        ol.setMargin(false);\r
-        ol.setSpacing(false);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("Caption test with fixed size");\r
-\r
-        TextField tf;\r
-        tf = new TextField("Short caption");\r
-        tf.setValue("Undefined width");\r
-        tf.setComponentError(new UserError("123"));\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        tf = new TextField(\r
-                "A long caption which is probably much longer than the field");\r
-        tf.setValue("Undefined width");\r
-        tf.setRequired(true);\r
-        tf.setComponentError(new UserError("123"));\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        tf = new TextField(\r
-                "A very long caption which is probably much longer than the field and includes indicators");\r
-        tf.setValue("Undefined width");\r
-        tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        tf.setRequired(true);\r
-        tf.setComponentError(new UserError("abc123"));\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        // for (int i = 0; i < 3; i++) {\r
-        // Button b = new Button("Button " + i);\r
-        // if (i == 2) {\r
-        // b.setHeight("200px");\r
-        // } else {\r
-        // b.setHeight("100%");\r
-        // }\r
-        // ol.addComponent(b);\r
-        // }\r
-\r
-        return ol;\r
-\r
-    }\r
-\r
-    private Layout layout_captions_fixed_size_and_relative_size(OrderedLayout ol) {\r
-        ol.setWidth("700px");\r
-        ol.setHeight("250px");\r
-\r
-        ol.setMargin(false);\r
-        ol.setSpacing(false);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("Caption test with fixed width (700x250)");\r
-\r
-        TextField tf;\r
-        tf = new TextField("Short caption");\r
-        tf.setSizeFull();\r
-        tf.setValue("100% wide field, ratio 1");\r
-\r
-        tf.setComponentError(new UserError("123"));\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-        ol.setExpandRatio(tf, 1);\r
-\r
-        tf = new TextField(\r
-                "A long caption which is probably much longer than the field");\r
-        tf.setValue("100% wide field, ratio 2");\r
-        tf.setSizeFull();\r
-        tf.setRequired(true);\r
-        tf.setComponentError(new UserError("123"));\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-        ol.setExpandRatio(tf, 2);\r
-\r
-        tf = new TextField(\r
-                "A very long caption which is probably much longer than the field and includes indicators");\r
-        tf.setValue("100% wide field, ratio 3");\r
-        tf.setSizeFull();\r
-        tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        tf.setRequired(true);\r
-        tf.setComponentError(new UserError("abc123"));\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-        ol.setExpandRatio(tf, 3);\r
-\r
-        // for (int i = 0; i < 3; i++) {\r
-        // Button b = new Button("Button " + i);\r
-        // if (i == 2) {\r
-        // b.setHeight("200px");\r
-        // } else {\r
-        // b.setHeight("100%");\r
-        // }\r
-        // ol.addComponent(b);\r
-        // }\r
-\r
-        return ol;\r
-\r
-    }\r
-\r
-    private Layout layout_captions_fixed_size_and_fixed_size(OrderedLayout ol) {\r
-        ol.setWidth("700px");\r
-        ol.setHeight("250px");\r
-\r
-        ol.setMargin(false);\r
-        ol.setSpacing(false);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("Caption test with fixed width");\r
-\r
-        TextField tf;\r
-        tf = new TextField("Short caption");\r
-        tf.setValue("250px wide field");\r
-        tf.setWidth("250px");\r
-        tf.setComponentError(new UserError("123"));\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        tf = new TextField(\r
-                "A long caption which is probably much longer than the field");\r
-        tf.setWidth("250px");\r
-        tf.setValue("250px wide field");\r
-        tf.setRequired(true);\r
-        tf.setComponentError(new UserError("123"));\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        tf = new TextField(\r
-                "A very long caption which is probably much longer than the field and includes indicators");\r
-        tf.setValue("200px wide field");\r
-        tf.setWidth("200px");\r
-        tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        tf.setRequired(true);\r
-        tf.setComponentError(new UserError("abc123"));\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        // for (int i = 0; i < 3; i++) {\r
-        // Button b = new Button("Button " + i);\r
-        // if (i == 2) {\r
-        // b.setHeight("200px");\r
-        // } else {\r
-        // b.setHeight("100%");\r
-        // }\r
-        // ol.addComponent(b);\r
-        // }\r
-\r
-        return ol;\r
-\r
-    }\r
-\r
-    private Layout layout_labels(OrderedLayout ol) {\r
-        // ol.setWidth("700px");\r
-        // ol.setHeight("200px");\r
-\r
-        ol.setMargin(true);\r
-        ol.setSpacing(true);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("Caption test with fixed width");\r
-\r
-        Label l;\r
-        l = new Label(\r
-                "This is a long text and should remain on one line as there is nothing forcing line breaks");\r
-        ol.addComponent(l);\r
-        // ol.setComponentAlignment(l, OrderedLayout.ALIGNMENT_RIGHT,\r
-        // OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        l = new Label("WTF OMG LOL");\r
-        ol.addComponent(l);\r
-        // ol.setComponentAlignment(l, OrderedLayout.ALIGNMENT_RIGHT,\r
-        // OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-        return ol;\r
-\r
-    }\r
-\r
-    private OrderedLayout createAddRemove(OrderedLayout ol, String width,\r
-            String buttonSuffix) {\r
-        Button b = createAddButton(ol);\r
-        Button wb = createWideAddButton(ol);\r
-        Button r = createRemoveButton(ol, buttonSuffix);\r
-        OrderedLayout inner = new OrderedLayout(\r
-                OrderedLayout.ORIENTATION_VERTICAL);\r
-        inner.setCaption("Width: " + width);\r
-        inner.setWidth(width);\r
-\r
-        inner.addComponent(b);\r
-        inner.addComponent(wb);\r
-        inner.addComponent(r);\r
-\r
-        // inner.setHeight("132px");\r
-        return inner;\r
-    }\r
-\r
-    private Button createAddButton(OrderedLayout ol) {\r
-        Button b = new Button("Add before", new ClickListener() {\r
-\r
-            public void buttonClick(ClickEvent event) {\r
-                addBefore((OrderedLayout) event.getButton().getData(), event\r
-                        .getButton().getParent(), "");\r
-            }\r
-\r
-        });\r
-        b.setData(ol);\r
-\r
-        return b;\r
-    }\r
-\r
-    private Button createWideAddButton(OrderedLayout ol) {\r
-        Button b = new Button("Add 100% before", new ClickListener() {\r
-\r
-            public void buttonClick(ClickEvent event) {\r
-                addBefore((OrderedLayout) event.getButton().getData(), event\r
-                        .getButton().getParent(), "100%");\r
-            }\r
-\r
-        });\r
-        b.setData(ol);\r
-\r
-        return b;\r
-    }\r
-\r
-    private Button createRemoveButton(OrderedLayout ol, String suffix) {\r
-        Button b = new Button("Remove this " + suffix, new ClickListener() {\r
-\r
-            public void buttonClick(ClickEvent event) {\r
-                remove((OrderedLayout) event.getButton().getData(), event\r
-                        .getButton().getParent());\r
-            }\r
-\r
-        });\r
-        b.setWidth("100%");\r
-        b.setData(ol);\r
-\r
-        return b;\r
-    }\r
-\r
-    protected void remove(OrderedLayout ol, Component c) {\r
-        ol.removeComponent(c);\r
-\r
-    }\r
-\r
-    protected void addBefore(OrderedLayout ol, Component c, String width) {\r
-        int index = 0;\r
-        Iterator iter = ol.getComponentIterator();\r
-        while (iter.hasNext()) {\r
-            if (iter.next() == c) {\r
-                break;\r
-            }\r
-            index++;\r
-        }\r
-        OrderedLayout inner = createAddRemove(ol, width, String\r
-                .valueOf(suffix++));\r
-        ol.addComponent(inner, index);\r
-        if (width.contains("%")) {\r
-            ol.setExpandRatio(inner, 1.0f);\r
-        }\r
-\r
-        ol.setComponentAlignment(inner, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-\r
-    }\r
-\r
-    private Layout layout_pctFilled(OrderedLayout ol) {\r
-        ol.setHeight("600px");\r
-        ol.setWidth("600px");\r
-        ol.setMargin(true);\r
-        ol.setSpacing(true);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("100 % filled with fixed width (" + ol.getWidth()\r
-                + "px) and fixed height (" + ol.getHeight() + "px)");\r
-        TextField tf;\r
-\r
-        tf = new TextField();\r
-        tf.setCaption("This one has a caption");\r
-        tf.setValue("60% expand TextField");\r
-        tf.setWidth("100%");\r
-        tf.setHeight("100%");\r
-        // tf.setRequired(true);\r
-        // tf.setComponentError(new UserError("It's broken!"));\r
-\r
-        // tf.setHeight("100%");\r
-        // tf.setWidth("100px");\r
-        tf.setRows(2);\r
-        ol.addComponent(tf);\r
-        ol.setExpandRatio(tf, 60);\r
-\r
-        tf = new TextField();\r
-        tf.setValue("100px 100px TextField");\r
-        tf.setWidth("100px");\r
-        tf.setHeight("100px");\r
-        tf.setRows(2);\r
-        ol.addComponent(tf);\r
-        ol.setComponentAlignment(tf,\r
-                AlignmentHandler.ALIGNMENT_HORIZONTAL_CENTER,\r
-                AlignmentHandler.ALIGNMENT_VERTICAL_CENTER);\r
-\r
-        //\r
-\r
-        tf = new TextField("40%x40% Field");\r
-        // tf.setCaption(null);\r
-        tf.setValue("40% expand (40% height) TextField");\r
-        tf.setWidth("100%");\r
-        tf.setHeight("40%");\r
-        ol.addComponent(tf);\r
-        ol.setExpandRatio(tf, 40);\r
-        // tf.setRequired(true);\r
-        ol.setComponentAlignment(tf, AlignmentHandler.ALIGNMENT_RIGHT,\r
-                AlignmentHandler.ALIGNMENT_BOTTOM);\r
-\r
-        tf.setRows(2);\r
-\r
-        return ol;\r
-    }\r
-\r
-    private Layout layout_pctFilled2(OrderedLayout ol) {\r
-        ol.setHeight("600px");\r
-        ol.setWidth("600px");\r
-        ol.setMargin(true);\r
-        ol.setSpacing(false);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("100 % filled with fixed width (" + ol.getWidth()\r
-                + "px) and fixed height (" + ol.getHeight() + "px)");\r
-        TextField tf;\r
-\r
-        tf = new TextField();\r
-        // tf.setCaption("This one has a caption");\r
-        tf.setValue("80% x 20% TextField");\r
-        tf.setWidth("80%");\r
-        tf.setHeight("20%");\r
-        // tf.setRequired(true);\r
-        // tf.setComponentError(new UserError("It's broken!"));\r
-\r
-        // tf.setHeight("100%");\r
-        // tf.setWidth("100px");\r
-        tf.setRows(2);\r
-        ol.addComponent(tf);\r
-        //\r
-\r
-        tf = new TextField("20%x60% Field");\r
-        tf.setCaption(null);\r
-        tf.setValue("20% x 60% TextField");\r
-        tf.setWidth("20%");\r
-        tf.setHeight("60%");\r
-        // tf.setRequired(true);\r
-        ol.setComponentAlignment(tf, AlignmentHandler.ALIGNMENT_RIGHT,\r
-                AlignmentHandler.ALIGNMENT_BOTTOM);\r
-\r
-        tf.setRows(2);\r
-        ol.addComponent(tf);\r
-\r
-        return ol;\r
-    }\r
-\r
-    private Layout layout_underFilled(OrderedLayout ol) {\r
-        ol.setHeight("700px");\r
-        ol.setWidth("700px");\r
-        ol.setMargin(true);\r
-        ol.setSpacing(true);\r
-\r
-        // ol.setWidth("");\r
-        ol.setCaption("Underfilled with fixed width (" + ol.getWidth()\r
-                + "px) and fixed height (" + ol.getHeight() + "px)");\r
-        TextField tf;\r
-\r
-        tf = new TextField("60%x100% Field");\r
-        tf.setCaption("Short capt");\r
-        tf.setValue("60% x 100% TextField");\r
-        tf.setWidth("60%");\r
-        tf.setHeight("100%");\r
-        tf.setRequired(true);\r
-        tf.setRows(2);\r
-\r
-        ol.setComponentAlignment(tf,\r
-                AlignmentHandler.ALIGNMENT_HORIZONTAL_CENTER,\r
-                AlignmentHandler.ALIGNMENT_VERTICAL_CENTER);\r
-\r
-        ol.addComponent(tf);\r
-\r
-        tf = new TextField("200px x 200px Field");\r
-        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        tf.setValue("200x200 field");\r
-        tf.setRows(2);\r
-        // tf.setSizeFull();\r
-        tf.setHeight("200px");\r
-        tf.setWidth("200px");\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_LEFT,\r
-                OrderedLayout.ALIGNMENT_TOP);\r
-        ol.addComponent(tf);\r
-\r
-        tf = new TextField("200px x 200px Field");\r
-        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
-        tf.setValue("200x200 field");\r
-        tf.setRows(2);\r
-        // tf.setSizeFull();\r
-        tf.setHeight("200px");\r
-        tf.setWidth("200px");\r
-        ol.setComponentAlignment(tf, OrderedLayout.ALIGNMENT_RIGHT,\r
-                OrderedLayout.ALIGNMENT_BOTTOM);\r
-        ol.addComponent(tf);\r
-        return ol;\r
-    }\r
-}
\ No newline at end of file
diff --git a/src/com/itmill/toolkit/tests/layouts/OrderedLayoutBasics.java b/src/com/itmill/toolkit/tests/layouts/OrderedLayoutBasics.java
new file mode 100644 (file)
index 0000000..3f5b468
--- /dev/null
@@ -0,0 +1,1221 @@
+package com.itmill.toolkit.tests.layouts;\r
+\r
+import java.util.HashSet;\r
+import java.util.Iterator;\r
+import java.util.Set;\r
+\r
+import com.itmill.toolkit.terminal.ThemeResource;\r
+import com.itmill.toolkit.terminal.UserError;\r
+import com.itmill.toolkit.tests.components.TestBase;\r
+import com.itmill.toolkit.ui.AbstractOrderedLayout;\r
+import com.itmill.toolkit.ui.Alignment;\r
+import com.itmill.toolkit.ui.Button;\r
+import com.itmill.toolkit.ui.Component;\r
+import com.itmill.toolkit.ui.HorizontalLayout;\r
+import com.itmill.toolkit.ui.Label;\r
+import com.itmill.toolkit.ui.Layout;\r
+import com.itmill.toolkit.ui.Panel;\r
+import com.itmill.toolkit.ui.Select;\r
+import com.itmill.toolkit.ui.TextField;\r
+import com.itmill.toolkit.ui.VerticalLayout;\r
+import com.itmill.toolkit.ui.Button.ClickEvent;\r
+import com.itmill.toolkit.ui.Button.ClickListener;\r
+import com.itmill.toolkit.ui.Layout.AlignmentHandler;\r
+\r
+public class OrderedLayoutBasics extends TestBase {\r
+\r
+    String valignName[] = new String[] { "top", "middle", "bottom" };\r
+    int valign[] = new int[] { AlignmentHandler.ALIGNMENT_TOP,\r
+            AlignmentHandler.ALIGNMENT_VERTICAL_CENTER,\r
+            AlignmentHandler.ALIGNMENT_BOTTOM };\r
+\r
+    Set<AbstractOrderedLayout> layouts = new HashSet<AbstractOrderedLayout>();\r
+    private AbstractOrderedLayout layoutContainer;\r
+    private int suffix = 0;\r
+\r
+    @Override\r
+    protected String getDescription() {\r
+        return "Various layout tests for VerticalLayout and HorizontalLayout";\r
+    }\r
+\r
+    @Override\r
+    protected Integer getTicketNumber() {\r
+        return null;\r
+    }\r
+\r
+    @Override\r
+    public void setup() {\r
+        getMainWindow().getLayout().setHeight(null);\r
+\r
+        layoutContainer = new VerticalLayout();\r
+        createUI(layoutContainer);\r
+        addComponent(layoutContainer);\r
+    }\r
+\r
+    private void createUI(Layout layout) {\r
+        layout\r
+                .addComponent(wrapLayout(layout_field_100pct_button_field(new HorizontalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_field_100pct_button_field(new VerticalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_overfilled(new HorizontalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_overfilled(new VerticalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_overfilled_dynamic_height(new HorizontalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_overfilled_dynamic_height(new VerticalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_symmetric_fields(new HorizontalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_symmetric_fields(new VerticalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_leftAndRight(new HorizontalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_leftAndRight(new VerticalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_fixed_filled(new HorizontalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_fixed_filled(new VerticalLayout())));\r
+        layout.addComponent(wrapLayout(layout_dynamic(new HorizontalLayout())));\r
+        layout.addComponent(wrapLayout(layout_dynamic(new VerticalLayout())));\r
+        layout.addComponent(wrapLayout(layout_labels(new HorizontalLayout())));\r
+        layout.addComponent(wrapLayout(layout_labels(new VerticalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_captions(new HorizontalLayout())));\r
+        layout.addComponent(wrapLayout(layout_captions(new VerticalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_captions_fixed_size(new HorizontalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_captions_fixed_size(new VerticalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_captions_fixed_size_and_relative_size(new HorizontalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_captions_fixed_size_and_relative_size(new VerticalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_captions_fixed_size_and_fixed_size(new HorizontalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_captions_fixed_size_and_fixed_size(new VerticalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_add_remove_components(new HorizontalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_add_remove_components(new VerticalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_pctFilled(new HorizontalLayout())));\r
+        layout.addComponent(wrapLayout(layout_pctFilled(new VerticalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_underFilled(new HorizontalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_underFilled(new VerticalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_basic_test(new HorizontalLayout())));\r
+        layout\r
+                .addComponent(wrapLayout(layout_basic_test(new VerticalLayout())));\r
+    }\r
+\r
+    private Layout wrapLayout(Layout ol) {\r
+        Panel p = new Panel(ol);\r
+        p.setSizeUndefined();\r
+        p.setCaption(ol.getCaption());\r
+        ol.setCaption(null);\r
+\r
+        VerticalLayout l = new VerticalLayout();\r
+        l.setSizeUndefined();\r
+        l.addComponent(p);\r
+        // p.setWidth("600px");\r
+\r
+        if (ol instanceof AbstractOrderedLayout) {\r
+            layouts.add((AbstractOrderedLayout) ol);\r
+        }\r
+        return l;\r
+    }\r
+\r
+    /* LAYOUTS */\r
+\r
+    private Layout layout1() {\r
+        HorizontalLayout ol = new HorizontalLayout();\r
+        ol.setHeight("200px");\r
+        ol.setWidth("");\r
+        ol.setCaption("Fixed height (200px) and dynamic width");\r
+\r
+        TextField tf = new TextField("100px high TextField, valign: bottom");\r
+        tf.setHeight("100px");\r
+        tf.setWidth("");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_LEFT);\r
+\r
+        Select s = new Select("100% high select");\r
+        s.setMultiSelect(true);\r
+        s.setHeight("100%");\r
+        s.setWidth("");\r
+        ol.addComponent(s);\r
+\r
+        s = new Select("200 px high select");\r
+        s.setMultiSelect(true);\r
+        s.setHeight("200px");\r
+        s.setWidth("");\r
+        ol.addComponent(s);\r
+\r
+        // tf = new TextField("100% high TextField, right/bottom");\r
+        // tf.setHeight("100%");\r
+        // tf.setWidth("");\r
+        // ol.addComponent(tf);\r
+        // ol.setComponentAlignment(tf, AlignmentHandler.ALIGNMENT_RIGHT,\r
+        // AlignmentHandler.ALIGNMENT_BOTTOM);\r
+\r
+        // tf = new TextField("100% high, 200px wide TextField");\r
+        // tf.setHeight("100%");\r
+        // tf.setWidth("200px");\r
+        // ol.addComponent(tf);\r
+\r
+        return ol;\r
+\r
+    }\r
+\r
+    private Layout layout2() {\r
+        HorizontalLayout ol = new HorizontalLayout();\r
+        ol.setHeight("70px");\r
+        ol.setWidth("");\r
+        ol.setCaption("Fixed height (50px) and dynamic width");\r
+\r
+        TextField tf = new TextField(\r
+                "100px high TextField, valign: bottom, should be partly outside");\r
+        tf.setHeight("100px");\r
+        tf.setWidth("");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_LEFT);\r
+\r
+        tf = new TextField(\r
+                "100% high, 50px wide TextField, valign: bottom, should fill full height");\r
+        tf.setHeight("100%");\r
+        tf.setWidth("50px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_LEFT);\r
+\r
+        Label l = new Label(\r
+                "100% high, 50px wide Label, valign: bottom, does not fill full height, only needed space");\r
+        tf.setHeight("100%");\r
+        tf.setWidth("50px");\r
+        ol.addComponent(l);\r
+        ol.setComponentAlignment(l, Alignment.BOTTOM_LEFT);\r
+\r
+        Select s = new Select("100% high select, should fit into layout");\r
+        s.setMultiSelect(true);\r
+        s.setHeight("100%");\r
+        s.setWidth("");\r
+        for (int i = 0; i < 10; i++) {\r
+            s.addItem(new Object());\r
+        }\r
+\r
+        ol.addComponent(s);\r
+\r
+        s = new Select("200 px high select, should be partly outside");\r
+        s.setMultiSelect(true);\r
+        s.setHeight("200px");\r
+        s.setWidth("");\r
+        ol.addComponent(s);\r
+\r
+        return ol;\r
+    }\r
+\r
+    private Layout layout3() {\r
+        HorizontalLayout ol = new HorizontalLayout();\r
+        ol.setHeight("");\r
+        ol.setWidth("500px");\r
+        ol.setCaption("Fixed width (500px) and dynamic height");\r
+        TextField tf;\r
+\r
+        tf = new TextField("100px high TextField, valign: bottom");\r
+        tf.setHeight("100px");\r
+        tf.setWidth("100%");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_LEFT);\r
+\r
+        tf = new TextField("100px high TextField, valign: top");\r
+        tf.setHeight("100px");\r
+        tf.setWidth("100%");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.TOP_LEFT);\r
+\r
+        tf = new TextField("100% high, 50px wide TextField, valign: bottom");\r
+        tf.setHeight("100%");\r
+        tf.setWidth("50px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_LEFT);\r
+\r
+        Label l = new Label(\r
+                "100% high, 50px wide Label, valign: bottom, does not fill full height, only needed space");\r
+        tf.setHeight("100%");\r
+        tf.setWidth("50px");\r
+        ol.addComponent(l);\r
+        ol.setComponentAlignment(l, Alignment.BOTTOM_LEFT);\r
+\r
+        Select s = new Select("100% high select, should fit into layout");\r
+        s.setMultiSelect(true);\r
+        s.setHeight("100%");\r
+        s.setWidth("100%");\r
+        for (int i = 0; i < 10; i++) {\r
+            s.addItem(new Object());\r
+        }\r
+\r
+        ol.addComponent(s);\r
+\r
+        s = new Select("200 px high select, should make the layout 200px high");\r
+        s.setMultiSelect(true);\r
+        s.setHeight("200px");\r
+        s.setWidth("100%");\r
+        ol.addComponent(s);\r
+\r
+        return ol;\r
+    }\r
+\r
+    private Layout layout3New() {\r
+        AbstractOrderedLayout ol = new HorizontalLayout();\r
+        ol.setHeight("300px");\r
+        // ol.setWidth("500px");\r
+        ol.setWidth("");\r
+        ol.setCaption("Dynamic width and fixed height(300px)");\r
+        TextField tf;\r
+\r
+        tf = new TextField("100px high TextField, valign: bottom");\r
+        tf.setHeight("100px");\r
+        tf.setWidth("100%");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_LEFT);\r
+\r
+        tf = new TextField("100px high TextField, valign: top");\r
+        tf.setHeight("100px");\r
+        tf.setWidth("100%");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.TOP_LEFT);\r
+\r
+        tf = new TextField("100% high, 50px wide TextField, valign: bottom");\r
+        tf.setHeight("100%");\r
+        tf.setWidth("50px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_LEFT);\r
+\r
+        Label l = new Label(\r
+                "100% high, 50px wide Label, valign: bottom, does not fill full height, only needed space");\r
+        tf.setHeight("100%");\r
+        tf.setWidth("50px");\r
+        ol.addComponent(l);\r
+        ol.setComponentAlignment(l, Alignment.BOTTOM_LEFT);\r
+\r
+        Select s = new Select("100% high select, should fit into layout");\r
+        s.setMultiSelect(true);\r
+        s.setHeight("100%");\r
+        s.setWidth("100%");\r
+        for (int i = 0; i < 10; i++) {\r
+            s.addItem(new Object());\r
+        }\r
+\r
+        ol.addComponent(s);\r
+\r
+        s = new Select("200 px high select, should make the layout 200px high");\r
+        s.setMultiSelect(true);\r
+        s.setHeight("200px");\r
+        s.setWidth("100%");\r
+        ol.addComponent(s);\r
+\r
+        return ol;\r
+    }\r
+\r
+    private Layout layout4(AbstractOrderedLayout ol) {\r
+        // ol.setHeight("300px");\r
+        // ol.setWidth("500px");\r
+        ol.setMargin(true);\r
+        ol.setSpacing(true);\r
+        ol.setWidth("");\r
+        ol.setCaption("Dynamic width and dynamic height");\r
+        TextField tf;\r
+\r
+        tf = new TextField("100% high TextField");\r
+        tf.setCaption(null);\r
+        tf.setRequired(true);\r
+        tf.setValue("100% high Field");\r
+        tf.setHeight("100%");\r
+        tf.setWidth("100px");\r
+        tf.setRows(2);\r
+        ol.addComponent(tf);\r
+\r
+        tf = new TextField("100% high TextField");\r
+        tf.setCaption("100% high TextField");\r
+        tf.setRequired(true);\r
+        tf.setValue("100% high Field");\r
+        tf.setHeight("100%");\r
+        tf.setWidth("100px");\r
+        tf.setRows(2);\r
+        ol.addComponent(tf);\r
+\r
+        for (int i = 1; i < 4; i++) {\r
+            int w = i * 100;\r
+            tf = new TextField("Field " + i);\r
+            tf.setRows(2);\r
+            tf.setValue(w + "px high, " + w + "px wide TextField, valign: "\r
+                    + valignName[i % 3]);\r
+            tf.setWidth(w + "px");\r
+            tf.setHeight(w + "px");\r
+            ol.addComponent(tf);\r
+            ol.setComponentAlignment(tf, AlignmentHandler.ALIGNMENT_LEFT,\r
+                    valign[i % 3]);\r
+\r
+        }\r
+\r
+        tf = new TextField("100% high TextField");\r
+        tf.setValue("100% high 100px wide");\r
+        tf.setRows(2);\r
+        tf.setHeight("100%");\r
+        tf.setWidth("100px");\r
+        ol.addComponent(tf);\r
+        return ol;\r
+    }\r
+\r
+    private Layout layout_field_100pct_button_field(AbstractOrderedLayout ol) {\r
+        ol.setHeight("500px");\r
+        ol.setWidth("916px");\r
+        ol.setMargin(false);\r
+        ol.setSpacing(true);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("Fixed width (" + ol.getWidth()\r
+                + "px) and fixed height (" + ol.getHeight()\r
+                + "px) / layout_field_100pct_button_field");\r
+        TextField tf;\r
+\r
+        tf = new TextField("300px x 300px Field");\r
+        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        tf.setValue("300x300 field");\r
+        tf.setRows(2);\r
+        // tf.setSizeFull();\r
+        tf.setHeight("300px");\r
+        tf.setWidth("300px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.TOP_LEFT);\r
+\r
+        Button b;\r
+        b = new Button("This is a 100%x50% valign middle button");\r
+        b.setSizeFull();\r
+        b.setHeight("50%");\r
+        ol.addComponent(b);\r
+        ol.setExpandRatio(b, 1.0f);\r
+        ol.setComponentAlignment(b, Alignment.MIDDLE_RIGHT);\r
+\r
+        tf = new TextField("300px x 300px Field");\r
+        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        tf.setValue("300x300 field");\r
+        tf.setRows(2);\r
+        // tf.setSizeFull();\r
+        tf.setHeight("300px");\r
+        tf.setWidth("300px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+        return ol;\r
+    }\r
+\r
+    private Layout layout_basic_test(AbstractOrderedLayout ol) {\r
+        ol.setHeight("700px");\r
+        ol.setWidth("900px");\r
+        ol.setMargin(true);\r
+        ol.setSpacing(true);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("Fixed width (" + ol.getWidth()\r
+                + "px) and fixed height (" + ol.getHeight()\r
+                + "px) / layout_basic_test");\r
+        TextField tf;\r
+\r
+        tf = new TextField("300px x 300px Field");\r
+        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        tf.setValue("300x300 field");\r
+        tf.setRows(2);\r
+        // tf.setSizeFull();\r
+        tf.setHeight("300px");\r
+        tf.setWidth("300px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.TOP_LEFT);\r
+\r
+        Button b;\r
+        // b = new Button("This is a 100%x50% valign middle button");\r
+        // b.setSizeFull();\r
+        // b.setHeight("50%");\r
+        // ol.addComponent(b, 1.0f);\r
+        // ol.setComponentAlignment(b, AlignmentHandler.ALIGNMENT_RIGHT,\r
+        // AlignmentHandler.ALIGNMENT_VERTICAL_CENTER);\r
+\r
+        tf = new TextField("300px x 300px Field");\r
+        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        tf.setValue("300x300 field");\r
+        tf.setRows(2);\r
+        // tf.setSizeFull();\r
+        tf.setHeight("300px");\r
+        tf.setWidth("300px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+        return ol;\r
+    }\r
+\r
+    private Layout layout_symmetric_fields(AbstractOrderedLayout ol) {\r
+        ol.setHeight("900px");\r
+        ol.setWidth("900px");\r
+        ol.setMargin(false);\r
+        ol.setSpacing(false);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("Fixed width (" + ol.getWidth()\r
+                + "px) and fixed height (" + ol.getHeight()\r
+                + "px) / layout_symmetric_fields");\r
+        TextField tf;\r
+\r
+        tf = new TextField("300px x 300px Field");\r
+        tf.setValue("300x300 field");\r
+        tf.setRows(2);\r
+        tf.setHeight("300px");\r
+        tf.setWidth("300px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.TOP_LEFT);\r
+\r
+        tf = new TextField("300px x 300px Field");\r
+        tf.setValue("300x300 field");\r
+        tf.setRows(2);\r
+        tf.setHeight("300px");\r
+        tf.setWidth("300px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.MIDDLE_CENTER);\r
+\r
+        tf = new TextField("300px x 300px Field");\r
+        tf.setValue("300x300 field");\r
+        tf.setRows(2);\r
+        tf.setHeight("300px");\r
+        tf.setWidth("300px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+\r
+        return ol;\r
+    }\r
+\r
+    private Layout layout_leftAndRight(AbstractOrderedLayout ol) {\r
+        ol.setHeight("700px");\r
+        ol.setWidth("700px");\r
+        ol.setMargin(true);\r
+        ol.setSpacing(true);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("Fixed width (" + ol.getWidth()\r
+                + "px) and fixed height (" + ol.getHeight()\r
+                + "px) / layout_leftAndRight");\r
+        TextField tf;\r
+\r
+        // tf = new TextField("100%x100% Field");\r
+        // tf.setCaption(null);\r
+        // tf.setValue("100% x 100% TextField");\r
+        // tf.setSizeFull();\r
+        // tf.setRequired(true);\r
+        // // tf.setComponentError(new UserError("It's broken!"));\r
+        //\r
+        // // tf.setHeight("100%");\r
+        // // tf.setWidth("100px");\r
+        // tf.setRows(2);\r
+        // ol.addComponent(tf);\r
+        //\r
+        // for (int i = 1; i < 5; i++) {\r
+        // int w = i * 100;\r
+        // tf = new TextField("Caption field " + i);\r
+        // tf.setRows(2);\r
+        // tf.setValue(w + "px high, " + w + "px wide TextField, valign: "\r
+        // + valignName[i % 3]);\r
+        // tf.setWidth(w + "px");\r
+        // tf.setHeight(w + "px");\r
+        // ol.addComponent(tf);\r
+        // ol.setComponentAlignment(tf,\r
+        // AlignmentHandler.ALIGNMENT_HORIZONTAL_CENTER, valign[i % 3]);\r
+        // }\r
+        //\r
+        // tf.setValue(tf.getValue().toString() + " (100% wide)");\r
+        // tf.setWidth("100%");\r
+\r
+        // tf = new TextField("100%x70px Field");\r
+        // tf.setCaption(null);\r
+        // tf.setRequired(true);\r
+        // // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        // tf.setComponentError(new UserError("abc"));\r
+        // tf.setValue("100% high 70px wide TextField");\r
+        // tf.setRows(2);\r
+        // // tf.setSizeFull();\r
+        // tf.setHeight("100%");\r
+        // tf.setWidth("70px");\r
+        // ol.setComponentAlignment(tf, AlignmentHandler.ALIGNMENT_RIGHT,\r
+        // AlignmentHandler.ALIGNMENT_TOP);\r
+        // ol.addComponent(tf);\r
+\r
+        tf = new TextField("300px x 300px Field");\r
+        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        tf.setValue("300x300 field");\r
+        tf.setRows(2);\r
+        // tf.setSizeFull();\r
+        tf.setHeight("300px");\r
+        tf.setWidth("300px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.TOP_LEFT);\r
+\r
+        tf = new TextField("300px x 300px Field");\r
+        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        tf.setValue("300x300 field");\r
+        tf.setRows(2);\r
+        // tf.setSizeFull();\r
+        tf.setHeight("300px");\r
+        tf.setWidth("300px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+        return ol;\r
+    }\r
+\r
+    private Layout layout_fixed_filled(AbstractOrderedLayout ol) {\r
+        ol.setHeight("700px");\r
+        ol.setWidth("700px");\r
+        ol.setMargin(true);\r
+        ol.setSpacing(true);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("Filled with fixed width (" + ol.getWidth()\r
+                + "px) and fixed height (" + ol.getHeight() + "px)");\r
+        TextField tf;\r
+\r
+        tf = new TextField("60%x100% Field");\r
+        tf.setCaption("This one has a caption");\r
+        tf.setValue("60% x 100% TextField");\r
+        tf.setWidth("100%");\r
+        tf.setHeight("100%");\r
+        tf.setRequired(true);\r
+        // tf.setComponentError(new UserError("It's broken!"));\r
+\r
+        // tf.setHeight("100%");\r
+        // tf.setWidth("100px");\r
+        tf.setRows(2);\r
+        ol.addComponent(tf);\r
+        ol.setExpandRatio(tf, 1f);\r
+        //\r
+\r
+        tf = new TextField("60%x60% Field");\r
+        tf.setCaption(null);\r
+        tf.setValue("60% x 60% TextField");\r
+        tf.setWidth("100%");\r
+        tf.setHeight("60%");\r
+        tf.setRequired(true);\r
+        ol.addComponent(tf);\r
+        ol.setExpandRatio(tf, 1f);\r
+        ol.setComponentAlignment(tf, AlignmentHandler.ALIGNMENT_LEFT,\r
+                AlignmentHandler.ALIGNMENT_VERTICAL_CENTER);\r
+        // tf.setComponentError(new UserError("It's broken!"));\r
+\r
+        // tf.setHeight("100%");\r
+        // tf.setWidth("100px");\r
+        tf.setRows(2);\r
+        //\r
+        // for (int i = 1; i < 5; i++) {\r
+        // int w = i * 100;\r
+        // tf = new TextField("Caption field " + i);\r
+        // tf.setRows(2);\r
+        // tf.setValue(w + "px high, " + w + "px wide TextField, valign: "\r
+        // + valignName[i % 3]);\r
+        // tf.setWidth(w + "px");\r
+        // tf.setHeight(w + "px");\r
+        // ol.addComponent(tf);\r
+        // ol.setComponentAlignment(tf,\r
+        // AlignmentHandler.ALIGNMENT_HORIZONTAL_CENTER, valign[i % 3]);\r
+        // }\r
+        //\r
+        // tf.setValue(tf.getValue().toString() + " (100% wide)");\r
+        // tf.setWidth("100%");\r
+\r
+        // tf = new TextField("100%x70px Field");\r
+        // tf.setCaption(null);\r
+        // tf.setRequired(true);\r
+        // // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        // tf.setComponentError(new UserError("abc"));\r
+        // tf.setValue("100% high 70px wide TextField");\r
+        // tf.setRows(2);\r
+        // // tf.setSizeFull();\r
+        // tf.setHeight("100%");\r
+        // tf.setWidth("70px");\r
+        // ol.setComponentAlignment(tf, AlignmentHandler.ALIGNMENT_RIGHT,\r
+        // AlignmentHandler.ALIGNMENT_TOP);\r
+        // ol.addComponent(tf);\r
+\r
+        tf = new TextField("200px x 200px Field");\r
+        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        tf.setValue("200x200 field");\r
+        tf.setRows(2);\r
+        // tf.setSizeFull();\r
+        tf.setHeight("200px");\r
+        tf.setWidth("200px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.TOP_LEFT);\r
+\r
+        tf = new TextField("200px x 200px Field");\r
+        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        tf.setValue("200x200 field");\r
+        tf.setRows(2);\r
+        // tf.setSizeFull();\r
+        tf.setHeight("200px");\r
+        tf.setWidth("200px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+        return ol;\r
+    }\r
+\r
+    private Layout layout_overfilled(AbstractOrderedLayout ol) {\r
+        ol.setHeight("300px");\r
+        ol.setWidth("700px");\r
+        ol.setMargin(true);\r
+        ol.setSpacing(true);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("OverFilled with fixed width (" + ol.getWidth()\r
+                + "px) and fixed height (" + ol.getHeight() + "px)");\r
+        TextField tf;\r
+\r
+        for (int i = 0; i < 5; i++) {\r
+            tf = new TextField("200x200px Field");\r
+            tf.setCaption("This one has a caption");\r
+            tf.setValue("200x200 TextField");\r
+            tf.setWidth("200px");\r
+            tf.setHeight("200px");\r
+            tf.setRequired(true);\r
+            // tf.setComponentError(new UserError("It's broken!"));\r
+\r
+            // tf.setHeight("100%");\r
+            // tf.setWidth("100px");\r
+            tf.setRows(2);\r
+            ol.addComponent(tf);\r
+        }\r
+\r
+        return ol;\r
+    }\r
+\r
+    private Layout layout_overfilled_dynamic_height(AbstractOrderedLayout ol) {\r
+        ol.setHeight(null);\r
+        ol.setWidth("700px");\r
+        ol.setMargin(true);\r
+        ol.setSpacing(true);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("OverFilled with fixed width (" + ol.getWidth()\r
+                + "px) and dynamic height");\r
+        TextField tf;\r
+\r
+        for (int i = 0; i < 10; i++) {\r
+            tf = new TextField("200x200px Field");\r
+            tf.setCaption("This one has a caption");\r
+            tf.setWidth("200px");\r
+            tf.setHeight(((i + 1) * 50) + "px");\r
+            tf.setValue(tf.getWidth() + "x" + tf.getHeight() + " TextField");\r
+            tf.setRequired(true);\r
+            // tf.setComponentError(new UserError("It's broken!"));\r
+\r
+            // tf.setHeight("100%");\r
+            // tf.setWidth("100px");\r
+            tf.setRows(2);\r
+            ol.addComponent(tf);\r
+        }\r
+\r
+        return ol;\r
+    }\r
+\r
+    // private Layout layout_add_components(AbstractOrderedLayout ol) {\r
+    // ol.setHeight("600px");\r
+    // ol.setWidth("600px");\r
+    // ol.setMargin(true);\r
+    // ol.setSpacing(true);\r
+    //\r
+    // // ol.setWidth("");\r
+    // ol.setCaption("Fixed width (" + ol.getWidth()\r
+    // + "px) and fixed height (" + ol.getHeight() + "px)");\r
+    //\r
+    // for (int i = 0; i < 3; i++) {\r
+    // Button b = createAddButton(ol);\r
+    // ol.addComponent(b);\r
+    // }\r
+    //\r
+    // return ol;\r
+    //\r
+    // }\r
+\r
+    private Layout layout_add_remove_components(AbstractOrderedLayout ol) {\r
+        ol.setHeight("600px");\r
+        ol.setWidth("600px");\r
+        ol.setMargin(true);\r
+        ol.setSpacing(true);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("Fixed width (" + ol.getWidth()\r
+                + "px) and fixed height (" + ol.getHeight()\r
+                + "px) / layout_add_remove_components");\r
+\r
+        for (int i = 0; i < 2; i++) {\r
+            AbstractOrderedLayout inner = createAddRemove(ol, "", "");\r
+            ol.addComponent(inner);\r
+            ol.setComponentAlignment(inner, Alignment.BOTTOM_RIGHT);\r
+        }\r
+\r
+        return ol;\r
+\r
+    }\r
+\r
+    private Layout layout_dynamic(AbstractOrderedLayout ol) {\r
+        ol.setMargin(true);\r
+        ol.setSpacing(true);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("Dynamic width, dynamic height");\r
+\r
+        for (int i = 0; i < 3; i++) {\r
+            Button b = new Button("Button " + i);\r
+            if (i == 2) {\r
+                b.setHeight("200px");\r
+            } else {\r
+                b.setHeight("100%");\r
+            }\r
+            ol.addComponent(b);\r
+        }\r
+\r
+        return ol;\r
+\r
+    }\r
+\r
+    private Layout layout_captions(AbstractOrderedLayout ol) {\r
+        ol.setMargin(true);\r
+        ol.setSpacing(true);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("Caption test with dynamic width");\r
+\r
+        TextField tf;\r
+        tf = new TextField("Short caption");\r
+        ol.addComponent(tf);\r
+\r
+        tf = new TextField(\r
+                "A very long caption which is probably much longer than the field");\r
+        ol.addComponent(tf);\r
+\r
+        tf = new TextField(\r
+                "A very long caption which is probably much longer than the field and includes indicators");\r
+        tf.setRequired(true);\r
+        tf.setComponentError(new UserError("abc123"));\r
+        ol.addComponent(tf);\r
+\r
+        // for (int i = 0; i < 3; i++) {\r
+        // Button b = new Button("Button " + i);\r
+        // if (i == 2) {\r
+        // b.setHeight("200px");\r
+        // } else {\r
+        // b.setHeight("100%");\r
+        // }\r
+        // ol.addComponent(b);\r
+        // }\r
+\r
+        return ol;\r
+\r
+    }\r
+\r
+    private Layout layout_captions_fixed_size(AbstractOrderedLayout ol) {\r
+        ol.setWidth("700px");\r
+        ol.setHeight("250px");\r
+\r
+        ol.setMargin(false);\r
+        ol.setSpacing(false);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("Caption test with fixed size");\r
+\r
+        TextField tf;\r
+        tf = new TextField("Short caption");\r
+        tf.setValue("Undefined width");\r
+        tf.setComponentError(new UserError("123"));\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+\r
+        tf = new TextField(\r
+                "A long caption which is probably much longer than the field");\r
+        tf.setValue("Undefined width");\r
+        tf.setRequired(true);\r
+        tf.setComponentError(new UserError("123"));\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+\r
+        tf = new TextField(\r
+                "A very long caption which is probably much longer than the field and includes indicators");\r
+        tf.setValue("Undefined width");\r
+        tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        tf.setRequired(true);\r
+        tf.setComponentError(new UserError("abc123"));\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+\r
+        // for (int i = 0; i < 3; i++) {\r
+        // Button b = new Button("Button " + i);\r
+        // if (i == 2) {\r
+        // b.setHeight("200px");\r
+        // } else {\r
+        // b.setHeight("100%");\r
+        // }\r
+        // ol.addComponent(b);\r
+        // }\r
+\r
+        return ol;\r
+\r
+    }\r
+\r
+    private Layout layout_captions_fixed_size_and_relative_size(\r
+            AbstractOrderedLayout ol) {\r
+        ol.setWidth("700px");\r
+        ol.setHeight("250px");\r
+\r
+        ol.setMargin(false);\r
+        ol.setSpacing(false);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("Caption test with fixed width (700x250)");\r
+\r
+        TextField tf;\r
+        tf = new TextField("Short caption");\r
+        tf.setSizeFull();\r
+        tf.setValue("100% wide field, ratio 1");\r
+\r
+        tf.setComponentError(new UserError("123"));\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+        ol.setExpandRatio(tf, 1);\r
+\r
+        tf = new TextField(\r
+                "A long caption which is probably much longer than the field");\r
+        tf.setValue("100% wide field, ratio 2");\r
+        tf.setSizeFull();\r
+        tf.setRequired(true);\r
+        tf.setComponentError(new UserError("123"));\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+        ol.setExpandRatio(tf, 2);\r
+\r
+        tf = new TextField(\r
+                "A very long caption which is probably much longer than the field and includes indicators");\r
+        tf.setValue("100% wide field, ratio 3");\r
+        tf.setSizeFull();\r
+        tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        tf.setRequired(true);\r
+        tf.setComponentError(new UserError("abc123"));\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+        ol.setExpandRatio(tf, 3);\r
+\r
+        // for (int i = 0; i < 3; i++) {\r
+        // Button b = new Button("Button " + i);\r
+        // if (i == 2) {\r
+        // b.setHeight("200px");\r
+        // } else {\r
+        // b.setHeight("100%");\r
+        // }\r
+        // ol.addComponent(b);\r
+        // }\r
+\r
+        return ol;\r
+\r
+    }\r
+\r
+    private Layout layout_captions_fixed_size_and_fixed_size(\r
+            AbstractOrderedLayout ol) {\r
+        ol.setWidth("700px");\r
+        ol.setHeight("250px");\r
+\r
+        ol.setMargin(false);\r
+        ol.setSpacing(false);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("Caption test with fixed width");\r
+\r
+        TextField tf;\r
+        tf = new TextField("Short caption");\r
+        tf.setValue("250px wide field");\r
+        tf.setWidth("250px");\r
+        tf.setComponentError(new UserError("123"));\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+\r
+        tf = new TextField(\r
+                "A long caption which is probably much longer than the field");\r
+        tf.setWidth("250px");\r
+        tf.setValue("250px wide field");\r
+        tf.setRequired(true);\r
+        tf.setComponentError(new UserError("123"));\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+\r
+        tf = new TextField(\r
+                "A very long caption which is probably much longer than the field and includes indicators");\r
+        tf.setValue("200px wide field");\r
+        tf.setWidth("200px");\r
+        tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        tf.setRequired(true);\r
+        tf.setComponentError(new UserError("abc123"));\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+\r
+        // for (int i = 0; i < 3; i++) {\r
+        // Button b = new Button("Button " + i);\r
+        // if (i == 2) {\r
+        // b.setHeight("200px");\r
+        // } else {\r
+        // b.setHeight("100%");\r
+        // }\r
+        // ol.addComponent(b);\r
+        // }\r
+\r
+        return ol;\r
+\r
+    }\r
+\r
+    private Layout layout_labels(AbstractOrderedLayout ol) {\r
+        // ol.setWidth("700px");\r
+        // ol.setHeight("200px");\r
+\r
+        ol.setMargin(true);\r
+        ol.setSpacing(true);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("Caption test with fixed width");\r
+\r
+        Label l;\r
+        l = new Label(\r
+                "This is a long text and should remain on one line as there is nothing forcing line breaks");\r
+        ol.addComponent(l);\r
+        // ol.setComponentAlignment(l, AlignmentHandler.ALIGNMENT_RIGHT,\r
+        // AlignmentHandler.ALIGNMENT_BOTTOM);\r
+\r
+        l = new Label("WTF OMG LOL");\r
+        ol.addComponent(l);\r
+        // ol.setComponentAlignment(l, AlignmentHandler.ALIGNMENT_RIGHT,\r
+        // AlignmentHandler.ALIGNMENT_BOTTOM);\r
+\r
+        return ol;\r
+\r
+    }\r
+\r
+    private AbstractOrderedLayout createAddRemove(AbstractOrderedLayout ol,\r
+            String width, String buttonSuffix) {\r
+        Button b = createAddButton(ol);\r
+        Button wb = createWideAddButton(ol);\r
+        Button r = createRemoveButton(ol, buttonSuffix);\r
+        VerticalLayout inner = new VerticalLayout();\r
+        inner.setCaption("Width: " + width);\r
+        inner.setWidth(width);\r
+\r
+        inner.addComponent(b);\r
+        inner.addComponent(wb);\r
+        inner.addComponent(r);\r
+\r
+        // inner.setHeight("132px");\r
+        return inner;\r
+    }\r
+\r
+    private Button createAddButton(AbstractOrderedLayout ol) {\r
+        Button b = new Button("Add before", new ClickListener() {\r
+\r
+            public void buttonClick(ClickEvent event) {\r
+                addBefore((AbstractOrderedLayout) event.getButton().getData(),\r
+                        event.getButton().getParent(), "");\r
+            }\r
+\r
+        });\r
+        b.setData(ol);\r
+\r
+        return b;\r
+    }\r
+\r
+    private Button createWideAddButton(AbstractOrderedLayout ol) {\r
+        Button b = new Button("Add 100% before", new ClickListener() {\r
+\r
+            public void buttonClick(ClickEvent event) {\r
+                addBefore((AbstractOrderedLayout) event.getButton().getData(),\r
+                        event.getButton().getParent(), "100%");\r
+            }\r
+\r
+        });\r
+        b.setData(ol);\r
+\r
+        return b;\r
+    }\r
+\r
+    private Button createRemoveButton(AbstractOrderedLayout ol, String suffix) {\r
+        Button b = new Button("Remove this " + suffix, new ClickListener() {\r
+\r
+            public void buttonClick(ClickEvent event) {\r
+                remove((AbstractOrderedLayout) event.getButton().getData(),\r
+                        event.getButton().getParent());\r
+            }\r
+\r
+        });\r
+        b.setWidth("100%");\r
+        b.setData(ol);\r
+\r
+        return b;\r
+    }\r
+\r
+    protected void remove(AbstractOrderedLayout ol, Component c) {\r
+        ol.removeComponent(c);\r
+\r
+    }\r
+\r
+    protected void addBefore(AbstractOrderedLayout ol, Component c, String width) {\r
+        int index = 0;\r
+        Iterator iter = ol.getComponentIterator();\r
+        while (iter.hasNext()) {\r
+            if (iter.next() == c) {\r
+                break;\r
+            }\r
+            index++;\r
+        }\r
+        AbstractOrderedLayout inner = createAddRemove(ol, width, String\r
+                .valueOf(suffix++));\r
+        ol.addComponent(inner, index);\r
+        if (width.contains("%")) {\r
+            ol.setExpandRatio(inner, 1.0f);\r
+        }\r
+\r
+        ol.setComponentAlignment(inner, Alignment.BOTTOM_RIGHT);\r
+\r
+    }\r
+\r
+    private Layout layout_pctFilled(AbstractOrderedLayout ol) {\r
+        ol.setHeight("600px");\r
+        ol.setWidth("600px");\r
+        ol.setMargin(true);\r
+        ol.setSpacing(true);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("100 % filled with fixed width (" + ol.getWidth()\r
+                + "px) and fixed height (" + ol.getHeight() + "px)");\r
+        TextField tf;\r
+\r
+        tf = new TextField();\r
+        tf.setCaption("This one has a caption");\r
+        tf.setValue("60% expand TextField");\r
+        tf.setWidth("100%");\r
+        tf.setHeight("100%");\r
+        // tf.setRequired(true);\r
+        // tf.setComponentError(new UserError("It's broken!"));\r
+\r
+        // tf.setHeight("100%");\r
+        // tf.setWidth("100px");\r
+        tf.setRows(2);\r
+        ol.addComponent(tf);\r
+        ol.setExpandRatio(tf, 60);\r
+\r
+        tf = new TextField();\r
+        tf.setValue("100px 100px TextField");\r
+        tf.setWidth("100px");\r
+        tf.setHeight("100px");\r
+        tf.setRows(2);\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.MIDDLE_CENTER);\r
+\r
+        //\r
+\r
+        tf = new TextField("40%x40% Field");\r
+        // tf.setCaption(null);\r
+        tf.setValue("40% expand (40% height) TextField");\r
+        tf.setWidth("100%");\r
+        tf.setHeight("40%");\r
+        ol.addComponent(tf);\r
+        ol.setExpandRatio(tf, 40);\r
+        // tf.setRequired(true);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+\r
+        tf.setRows(2);\r
+\r
+        return ol;\r
+    }\r
+\r
+    private Layout layout_pctFilled2(AbstractOrderedLayout ol) {\r
+        ol.setHeight("600px");\r
+        ol.setWidth("600px");\r
+        ol.setMargin(true);\r
+        ol.setSpacing(false);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("100 % filled with fixed width (" + ol.getWidth()\r
+                + "px) and fixed height (" + ol.getHeight() + "px)");\r
+        TextField tf;\r
+\r
+        tf = new TextField();\r
+        // tf.setCaption("This one has a caption");\r
+        tf.setValue("80% x 20% TextField");\r
+        tf.setWidth("80%");\r
+        tf.setHeight("20%");\r
+        // tf.setRequired(true);\r
+        // tf.setComponentError(new UserError("It's broken!"));\r
+\r
+        // tf.setHeight("100%");\r
+        // tf.setWidth("100px");\r
+        tf.setRows(2);\r
+        ol.addComponent(tf);\r
+        //\r
+\r
+        tf = new TextField("20%x60% Field");\r
+        tf.setCaption(null);\r
+        tf.setValue("20% x 60% TextField");\r
+        tf.setWidth("20%");\r
+        tf.setHeight("60%");\r
+        // tf.setRequired(true);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+\r
+        tf.setRows(2);\r
+        ol.addComponent(tf);\r
+\r
+        return ol;\r
+    }\r
+\r
+    private Layout layout_underFilled(AbstractOrderedLayout ol) {\r
+        ol.setHeight("700px");\r
+        ol.setWidth("700px");\r
+        ol.setMargin(true);\r
+        ol.setSpacing(true);\r
+\r
+        // ol.setWidth("");\r
+        ol.setCaption("Underfilled with fixed width (" + ol.getWidth()\r
+                + "px) and fixed height (" + ol.getHeight() + "px)");\r
+        TextField tf;\r
+\r
+        tf = new TextField("60%x100% Field");\r
+        tf.setCaption("Short capt");\r
+        tf.setValue("60% x 100% TextField");\r
+        tf.setWidth("60%");\r
+        tf.setHeight("100%");\r
+        tf.setRequired(true);\r
+        tf.setRows(2);\r
+\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.MIDDLE_CENTER);\r
+\r
+        tf = new TextField("200px x 200px Field");\r
+        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        tf.setValue("200x200 field");\r
+        tf.setRows(2);\r
+        // tf.setSizeFull();\r
+        tf.setHeight("200px");\r
+        tf.setWidth("200px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.TOP_LEFT);\r
+\r
+        tf = new TextField("200px x 200px Field");\r
+        // tf.setIcon(new ThemeResource("icons/16/document-add.png"));\r
+        tf.setValue("200x200 field");\r
+        tf.setRows(2);\r
+        // tf.setSizeFull();\r
+        tf.setHeight("200px");\r
+        tf.setWidth("200px");\r
+        ol.addComponent(tf);\r
+        ol.setComponentAlignment(tf, Alignment.BOTTOM_RIGHT);\r
+        return ol;\r
+    }\r
+\r
+}
\ No newline at end of file