]> source.dussan.org Git - vaadin-framework.git/commitdiff
Test case for OrderedLayout
authorArtur Signell <artur.signell@itmill.com>
Mon, 27 Oct 2008 13:43:26 +0000 (13:43 +0000)
committerArtur Signell <artur.signell@itmill.com>
Mon, 27 Oct 2008 13:43:26 +0000 (13:43 +0000)
svn changeset:5743/svn branch:trunk

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

diff --git a/src/com/itmill/toolkit/tests/TestOrderedLayout.java b/src/com/itmill/toolkit/tests/TestOrderedLayout.java
new file mode 100644 (file)
index 0000000..8a4b0bf
--- /dev/null
@@ -0,0 +1,1202 @@
+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\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_overFilled(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.setCaption(ol.getCaption());\r
+        ol.setCaption(null);\r
+\r
+        OrderedLayout l = new OrderedLayout();\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_overFilled(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
+        ol.setExpandRatio(tf, 1f);\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("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.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
+        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("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_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
+        if (width.contains("%")) {\r
+            ol.setExpandRatio(inner, 1.0f);\r
+        }\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
+        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.setExpandRatio(tf, 40);\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_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