Added new test app/ui for Valo

New “tests-valo” theme also included multiple variations to test with.

Change-Id: I3dd3b91526b32ae8d080d2fa431d2a64f6f7fef4

23 files changed, 4588 insertions, 1756 deletions

diff --git a/uitest/src/com/vaadin/tests/themes/ValoThemeTest.java b/uitest/src/com/vaadin/tests/themes/ValoThemeTest.java
deleted file mode 100644
index 71c27eca4f..0000000000
--- a/uitest/src/com/vaadin/tests/themes/ValoThemeTest.java
+++ /dev/null
@@ -1,1756 +0,0 @@
-package com.vaadin.tests.themes;
-
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.Collection;
-import java.util.Collections;
-import java.util.Date;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Locale;
-import java.util.Map.Entry;
-
-import com.vaadin.annotations.Theme;
-import com.vaadin.annotations.Title;
-import com.vaadin.data.Container;
-import com.vaadin.data.Container.Hierarchical;
-import com.vaadin.data.Item;
-import com.vaadin.data.Property.ValueChangeEvent;
-import com.vaadin.data.Property.ValueChangeListener;
-import com.vaadin.data.util.HierarchicalContainer;
-import com.vaadin.data.util.IndexedContainer;
-import com.vaadin.event.Action;
-import com.vaadin.event.Action.Handler;
-import com.vaadin.event.dd.DragAndDropEvent;
-import com.vaadin.event.dd.DropHandler;
-import com.vaadin.event.dd.acceptcriteria.AcceptAll;
-import com.vaadin.event.dd.acceptcriteria.AcceptCriterion;
-import com.vaadin.server.AbstractErrorMessage;
-import com.vaadin.server.ErrorMessage.ErrorLevel;
-import com.vaadin.server.ExternalResource;
-import com.vaadin.server.FontAwesome;
-import com.vaadin.server.Page;
-import com.vaadin.server.Resource;
-import com.vaadin.server.ThemeResource;
-import com.vaadin.server.UserError;
-import com.vaadin.server.VaadinRequest;
-import com.vaadin.shared.Position;
-import com.vaadin.shared.ui.datefield.Resolution;
-import com.vaadin.shared.ui.label.ContentMode;
-import com.vaadin.shared.ui.slider.SliderOrientation;
-import com.vaadin.ui.AbstractColorPicker.PopupStyle;
-import com.vaadin.ui.Accordion;
-import com.vaadin.ui.Button;
-import com.vaadin.ui.Button.ClickEvent;
-import com.vaadin.ui.Button.ClickListener;
-import com.vaadin.ui.CheckBox;
-import com.vaadin.ui.ColorPicker;
-import com.vaadin.ui.ComboBox;
-import com.vaadin.ui.Component;
-import com.vaadin.ui.CssLayout;
-import com.vaadin.ui.DateField;
-import com.vaadin.ui.HorizontalLayout;
-import com.vaadin.ui.HorizontalSplitPanel;
-import com.vaadin.ui.Label;
-import com.vaadin.ui.Link;
-import com.vaadin.ui.ListSelect;
-import com.vaadin.ui.MenuBar;
-import com.vaadin.ui.MenuBar.Command;
-import com.vaadin.ui.MenuBar.MenuItem;
-import com.vaadin.ui.NativeButton;
-import com.vaadin.ui.NativeSelect;
-import com.vaadin.ui.Notification;
-import com.vaadin.ui.OptionGroup;
-import com.vaadin.ui.Panel;
-import com.vaadin.ui.Slider;
-import com.vaadin.ui.TabSheet;
-import com.vaadin.ui.TabSheet.Tab;
-import com.vaadin.ui.Table;
-import com.vaadin.ui.Table.Align;
-import com.vaadin.ui.Table.TableDragMode;
-import com.vaadin.ui.TextArea;
-import com.vaadin.ui.TextField;
-import com.vaadin.ui.Tree;
-import com.vaadin.ui.Tree.TreeDragMode;
-import com.vaadin.ui.TreeTable;
-import com.vaadin.ui.TwinColSelect;
-import com.vaadin.ui.UI;
-import com.vaadin.ui.VerticalLayout;
-import com.vaadin.ui.VerticalSplitPanel;
-import com.vaadin.ui.Window;
-
-@Theme("valo")
-@Title("Valo Theme Test")
-public class ValoThemeTest extends UI implements Handler {
-
-    CssLayout root = new CssLayout();
-    CssLayout components = new CssLayout();
-    CssLayout menu = new CssLayout();
-
-    HashMap<Category, ArrayList<Link>> menuItems = new HashMap<Category, ArrayList<Link>>();
-
-    enum Category {
-        Common, Basic_Components, Component_Containers, Selection_Components, Inputs, Feedback, Other
-    }
-
-    Container tableData = generateContainer(200, false);
-
-    static final String CAPTION_PROPERTY = "caption";
-    static final String DESCRIPTION_PROPERTY = "description";
-    static final String ICON_PROPERTY = "icon";
-    static final String INDEX_PROPERTY = "index";
-
-    @SuppressWarnings("unchecked")
-    Container generateContainer(final int size, final boolean hierarchical) {
-        IndexedContainer container = hierarchical ? new HierarchicalContainer()
-                : new IndexedContainer();
-
-        container.addContainerProperty(CAPTION_PROPERTY, String.class, null);
-        container.addContainerProperty(ICON_PROPERTY, Resource.class, null);
-        container.addContainerProperty(INDEX_PROPERTY, Integer.class, null);
-        container
-                .addContainerProperty(DESCRIPTION_PROPERTY, String.class, null);
-        for (int i = 1; i < size + 1; i++) {
-            Item item = container.addItem(i);
-            item.getItemProperty(CAPTION_PROPERTY).setValue(nextString(true));
-            item.getItemProperty(INDEX_PROPERTY).setValue(i);
-            item.getItemProperty(DESCRIPTION_PROPERTY).setValue(
-                    nextString(false));
-            item.getItemProperty(ICON_PROPERTY).setValue(icon(false));
-        }
-        container.getItem(container.getIdByIndex(0))
-                .getItemProperty(ICON_PROPERTY).setValue(icon(false));
-
-        if (hierarchical) {
-            for (int i = 1; i < size + 1; i++) {
-                for (int j = 1; j < 5; j++) {
-                    String id = i + " -> " + j;
-                    Item child = container.addItem(id);
-                    child.getItemProperty(CAPTION_PROPERTY).setValue(
-                            getCaption());
-                    ((Hierarchical) container).setChildrenAllowed(id, true);
-                    ((Hierarchical) container).setParent(id, i);
-                }
-            }
-        }
-        return container;
-    }
-
-    @Override
-    protected void init(VaadinRequest request) {
-        // Show .v-app-loading badge
-        try {
-            Thread.sleep(3000);
-        } catch (InterruptedException e) {
-            e.printStackTrace();
-        }
-
-        container = generateContainer(200, true);
-        Collection<?> itemIds = container.getItemIds();
-        firstItemId = itemIds.iterator().next();
-
-        getPage().setTitle("Valo Theme Test");
-        setContent(root);
-        root.setWidth("100%");
-
-        root.addComponent(commonParts());
-
-        components.setWidth("100%");
-        root.addComponent(components);
-
-        for (int i = 1; i <= 1; i++) {
-            components.addComponent(components(i));
-        }
-        components.addStyleName("components-root");
-
-        // root.addComponentAsFirst(buildMenu());
-
-    }
-
-    CssLayout buildMenu() {
-        menu.setPrimaryStyleName("valo-menu");
-
-        Label title = new Label("Valo Theme");
-        title.setSizeUndefined();
-        title.setPrimaryStyleName("valo-menu-title");
-        menu.addComponent(title);
-
-        final CheckBox enabled = new CheckBox("Enabled", true);
-        enabled.setPrimaryStyleName("valo-menu-enabled");
-        menu.addComponent(enabled);
-        enabled.addValueChangeListener(new ValueChangeListener() {
-            @Override
-            public void valueChange(ValueChangeEvent event) {
-                components.setEnabled(enabled.getValue());
-            }
-        });
-
-        for (Entry<Category, ArrayList<Link>> entry : menuItems.entrySet()) {
-            Label caption = new Label(entry.getKey().toString()
-                    .replaceAll("_", " "));
-            caption.setSizeUndefined();
-            caption.setPrimaryStyleName("valo-menu-category");
-            menu.addComponent(caption);
-
-            for (Link link : entry.getValue()) {
-                menu.addComponent(link);
-                link.setPrimaryStyleName("valo-menu-item");
-            }
-        }
-
-        return menu;
-    }
-
-    VerticalLayout commonParts() {
-        final VerticalLayout root = new VerticalLayout();
-        root.setMargin(true);
-        root.addStyleName("common-parts");
-
-        /**
-         * Loading incidator
-         */
-        HorizontalLayout row = addSection(
-                root,
-                "Loading Indicator",
-                Category.Common,
-                "You can test the loading indicator by pressing the buttons. The theme also provides a mixin that you can use to include a spinner anywhere in your application.");
-
-        Button loading = new Button("Loading (800ms)…");
-        loading.addClickListener(new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                try {
-                    Thread.sleep(800);
-                } catch (InterruptedException e) {
-                }
-            }
-        });
-        row.addComponent(loading);
-
-        Button delay = new Button("Task Delayed (3s)…");
-        delay.addClickListener(new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                try {
-                    Thread.sleep(3000);
-                } catch (InterruptedException e) {
-                }
-            }
-        });
-        row.addComponent(delay);
-
-        Button wait = new Button("Please Wait (15s)…");
-        wait.addClickListener(new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                try {
-                    Thread.sleep(15000);
-                } catch (InterruptedException e) {
-                }
-            }
-        });
-        row.addComponent(wait);
-
-        /**
-         * Notifications
-         */
-
-        row = addSection(root, "Notifications", Category.Common, null);
-
-        final Notification notification = new Notification("Notification Title");
-
-        final Notification notification2 = new Notification(
-                "Notification Title");
-        notification2
-                .setDescription("A more informative message about what has happened. Nihil hic munitissimus habendi senatus locus, nihil horum? Inmensae subtilitatis, obscuris et malesuada fames. Hi omnes lingua, institutis, legibus inter se differunt.");
-
-        CssLayout group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-        Button notify = new Button("Humanized", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification.setPosition(Position.MIDDLE_CENTER);
-                notification.setDelayMsec(-1);
-                notification.setStyleName("humanized");
-                notification.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        notify = new Button("+ description", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification2.setPosition(Position.TOP_LEFT);
-                notification2.setDelayMsec(-1);
-                notification2.setStyleName("humanized closable");
-                notification2.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-        notify = new Button("Tray", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification.setPosition(Position.TOP_RIGHT);
-                notification.setDelayMsec(-1);
-                notification.setStyleName("tray");
-                notification.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        notify = new Button("+ description", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification2.setPosition(Position.BOTTOM_RIGHT);
-                notification2.setDelayMsec(-1);
-                notification2.setStyleName("tray closable");
-                notification2.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-        notify = new Button("Warning", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification.setPosition(Position.MIDDLE_CENTER);
-                notification.setDelayMsec(1500);
-                notification.setStyleName("warning");
-                notification.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        notify = new Button("+ description", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification2.setPosition(Position.TOP_CENTER);
-                notification2.setDelayMsec(-1);
-                notification2.setStyleName("warning closable");
-                notification2.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        notify = new Button("No caption", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                Notification n3 = new Notification(null,
-                        "Just a simple description for this warning message.");
-                n3.setPosition(Position.TOP_CENTER);
-                n3.setDelayMsec(-1);
-                n3.setStyleName("warning closable");
-                n3.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-        notify = new Button("Error", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification.setPosition(Position.MIDDLE_CENTER);
-                notification.setDelayMsec(2000);
-                notification.setStyleName("error");
-                notification.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        notify = new Button("+ description", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification2.setPosition(Position.BOTTOM_CENTER);
-                notification2.setDelayMsec(-1);
-                notification2.setStyleName("error closable");
-                notification2.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        notify = new Button("System Message", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                Notification n = new Notification(
-                        "Session Expired",
-                        "A really long description this time, to test how well this will wrap to new lines. Morbi fringilla convallis sapien, id pulvinar odio volutpat. Sed haec quis possit intrepidus aestimare tellus.");
-                n.setDelayMsec(-1);
-                n.setPosition(Position.TOP_LEFT);
-                n.setStyleName("system closable");
-                n.show(getPage());
-            }
-        });
-        row.addComponent(notify);
-
-        /**
-         * Windows
-         */
-        row = addSection(root, "Windows", Category.Component_Containers, null);
-
-        final Window win = new Window("Window Caption");
-        win.setWidth("320px");
-        win.setContent(windowContents(false));
-
-        group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-
-        Button button = new Button("Fixed footer", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                win.close();
-                win.setContent(windowContents(true));
-                win.setHeight("240px");
-                win.setResizable(true);
-                UI.getCurrent().addWindow(win);
-                win.setPositionX(Page.getCurrent().getBrowserWindowWidth() / 3);
-                win.setPositionY(Page.getCurrent().getBrowserWindowHeight() / 3);
-            }
-        });
-        group.addComponent(button);
-
-        button = new Button("Auto height", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                win.close();
-                win.setContent(windowContents(false));
-                win.setHeight(null);
-                win.setResizable(false);
-                UI.getCurrent().addWindow(win);
-                win.setPositionX(Page.getCurrent().getBrowserWindowWidth() / 3);
-                win.setPositionY(Page.getCurrent().getBrowserWindowHeight() / 3);
-            }
-        });
-        group.addComponent(button);
-
-        group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-
-        button = new Button("Toggle caption", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                if (win.getCaption().equals("")) {
-                    win.setCaption("Window Caption");
-                } else {
-                    win.setCaption("");
-                }
-            }
-        });
-        group.addComponent(button);
-
-        button = new Button("Toggle close", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                win.setClosable(!win.isClosable());
-            }
-        });
-        group.addComponent(button);
-
-        button = new Button("Toggle maximize", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                win.setResizable(!win.isResizable());
-            }
-        });
-        group.addComponent(button);
-
-        /**
-         * Tooltips
-         */
-        row = addSection(root, "Tooltips", Category.Common, null);
-
-        Label label = new Label("Simple");
-        label.setDescription("Simple tooltip message");
-        row.addComponent(label);
-
-        label = new Label("Long");
-        label.setDescription("Long tooltip message. Inmensae subtilitatis, obscuris et malesuada fames. Salutantibus vitae elit libero, a pharetra augue.");
-        row.addComponent(label);
-
-        label = new Label("HTML");
-        label.setDescription("<div><h1>Ut enim ad minim veniam, quis nostrud exercitation</h1><p><span>Morbi fringilla convallis sapien, id pulvinar odio volutpat.</span> <span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</span> <span>Donec sed odio operae, eu vulputate felis rhoncus.</span> <span>At nos hinc posthac, sitientis piros Afros.</span> <span>Tu quoque, Brute, fili mi, nihil timor populi, nihil!</span></p><p><span>Gallia est omnis divisa in partes tres, quarum.</span> <span>Praeterea iter est quasdam res quas ex communi.</span> <span>Cum ceteris in veneratione tui montes, nascetur mus.</span> <span>Quam temere in vitiis, legem sancimus haerentia.</span> <span>Idque Caesaris facere voluntate liceret: sese habere.</span></p></div>");
-        row.addComponent(label);
-
-        label = new Label("w/ Error message");
-        label.setDescription("Simple tooltip message");
-        label.setComponentError(new UserError("Something terrible has happened"));
-        row.addComponent(label);
-
-        label = new Label("w/ Long error message");
-        label.setDescription("Simple tooltip message");
-        label.setComponentError(new UserError(
-                "<h2>Contra legem facit qui id facit quod lex prohibet <span>Tityre, tu patulae recubans sub tegmine fagi  dolor.</span> <span>Tityre, tu patulae recubans sub tegmine fagi  dolor.</span> <span>Prima luce, cum quibus mons aliud  consensu ab eo.</span> <span>Quid securi etiam tamquam eu fugiat nulla pariatur.</span> <span>Fabio vel iudice vincam, sunt in culpa qui officia.</span> <span>Nihil hic munitissimus habendi senatus locus, nihil horum?</span></p><p><span>Plura mihi bona sunt, inclinet, amari petere vellent.</span> <span>Integer legentibus erat a ante historiarum dapibus.</span> <span>Quam diu etiam furor iste tuus nos eludet?</span> <span>Nec dubitamus multa iter quae et nos invenerat.</span> <span>Quisque ut dolor gravida, placerat libero vel, euismod.</span> <span>Quae vero auctorem tractata ab fiducia dicuntur.</span></h2>",
-                AbstractErrorMessage.ContentMode.HTML, ErrorLevel.CRITICAL));
-        row.addComponent(label);
-
-        label = new Label("Error message only");
-        label.setComponentError(new UserError("Something terrible has happened"));
-        row.addComponent(label);
-
-        return root;
-    }
-
-    VerticalLayout components(int num) {
-        menuItems.clear();
-
-        final VerticalLayout root = new VerticalLayout();
-        root.setWidth("33.333%");
-        root.setMargin(true);
-        root.addStyleName("components");
-        root.addStyleName("color-context" + num);
-
-        labels(root);
-        buttonsAndLinks(root);
-        textfields(root);
-        textareas(root);
-        comboboxes(root);
-        menubars(root);
-        checkboxes(root);
-        optiongroups(root);
-        datefields(root);
-        panels(root);
-        trees(root);
-        tables(root);
-        treetables(root);
-        sliders(root);
-        splitpanels(root);
-        tabsheets(root);
-        colorpickers(root);
-        accordions(root);
-        nativeselects(root);
-
-        return root;
-    }
-
-    void nativeselects(VerticalLayout root) {
-        HorizontalLayout row = addSection(root, "Native Selects",
-                Category.Selection_Components, null);
-
-        NativeSelect select = new NativeSelect("Drop Down Select");
-        row.addComponent(select);
-
-        ListSelect list = new ListSelect("List Select");
-        list.setNewItemsAllowed(true);
-        row.addComponent(list);
-
-        TwinColSelect tcs = new TwinColSelect("TwinCol Select");
-        tcs.setLeftColumnCaption("Left Column");
-        tcs.setRightColumnCaption("Right Column");
-        tcs.setNewItemsAllowed(true);
-        row.addComponent(tcs);
-
-        TwinColSelect tcs2 = new TwinColSelect("Sized TwinCol Select");
-        tcs2.setLeftColumnCaption("Left Column");
-        tcs2.setRightColumnCaption("Right Column");
-        tcs2.setNewItemsAllowed(true);
-        tcs2.setWidth("280px");
-        tcs2.setHeight("200px");
-        row.addComponent(tcs2);
-
-        for (int i = 1; i <= 10; i++) {
-            select.addItem("Option " + i);
-            list.addItem("Option " + i);
-            tcs.addItem("Option " + i);
-            tcs2.addItem("Option " + i);
-        }
-    }
-
-    void accordions(VerticalLayout root) {
-        HorizontalLayout row = addSection(root, "Accordions",
-                Category.Component_Containers, null);
-        row.setWidth("100%");
-
-        Accordion ac = new Accordion();
-        row.addComponent(ac);
-        ac.addTab(new VerticalLayout() {
-            {
-                setMargin(true);
-                addComponent(new Label(
-                        "Fabio vel iudice vincam, sunt in culpa qui officia. Ut enim ad minim veniam, quis nostrud exercitation."));
-            }
-        }, "First Caption", icon(false));
-        ac.addTab(new VerticalLayout() {
-            {
-                setMargin(true);
-                addComponent(new Label(
-                        "Gallia est omnis divisa in partes tres, quarum."));
-            }
-        }, "Second Caption", icon(false));
-        ac.addTab(new VerticalLayout() {
-            {
-                setMargin(true);
-                addComponent(new Label(
-                        "Nihil hic munitissimus habendi senatus locus, nihil horum? Sed haec quis possit intrepidus aestimare tellus."));
-            }
-        }, "Third Caption", icon(false));
-        ac.addTab(new VerticalLayout() {
-            {
-                setMargin(true);
-                addComponent(new Label(
-                        "Inmensae subtilitatis, obscuris et malesuada fames. Quisque ut dolor gravida, placerat libero vel, euismod."));
-            }
-        }, "Custom Caption Style", icon(false)).setStyleName("color1");
-    }
-
-    void tabsheets(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Tabs", Category.Component_Containers, null);
-        row.setWidth("100%");
-
-        final VerticalLayout wrap = new VerticalLayout();
-        wrap.setSpacing(true);
-        row.addComponent(wrap);
-
-        final CheckBox closable = new CheckBox("Closable");
-        closable.setImmediate(true);
-        wrap.addComponent(closable);
-
-        final CheckBox overflow = new CheckBox("Overflow");
-        overflow.setImmediate(true);
-        wrap.addComponent(overflow);
-
-        final CheckBox icon = new CheckBox("Icons");
-        icon.setImmediate(true);
-        wrap.addComponent(icon);
-
-        ValueChangeListener update = new ValueChangeListener() {
-            @Override
-            public void valueChange(ValueChangeEvent event) {
-                wrap.removeAllComponents();
-
-                wrap.addComponents(closable, overflow, icon);
-
-                wrap.addComponent(getTabSheet("Normal", null,
-                        closable.getValue(), overflow.getValue(),
-                        icon.getValue()));
-                wrap.addComponent(getTabSheet("Centered tabs", "centered-tabs",
-                        closable.getValue(), overflow.getValue(),
-                        icon.getValue()));
-                wrap.addComponent(getTabSheet("Equal-width tabs",
-                        "equal-width-tabs", closable.getValue(),
-                        overflow.getValue(), icon.getValue()));
-                wrap.addComponent(getTabSheet("Icons on top + padded tabbar",
-                        "icons-on-top padded-tabbar", closable.getValue(),
-                        overflow.getValue(), icon.getValue()));
-                wrap.addComponent(getTabSheet("Only selected tab is closable",
-                        "selected-closable", closable.getValue(),
-                        overflow.getValue(), icon.getValue()));
-            }
-        };
-        closable.addValueChangeListener(update);
-        overflow.addValueChangeListener(update);
-        icon.addValueChangeListener(update);
-
-        // Generate initial view
-        icon.setValue(true);
-    }
-
-    void splitpanels(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Split Panels", Category.Component_Containers,
-                null);
-
-        HorizontalSplitPanel sp = new HorizontalSplitPanel();
-        sp.setWidth("200px");
-        sp.setHeight(null);
-        sp.setFirstComponent(new Label(
-                "Fictum,  deserunt mollit anim laborum astutumque!"));
-        sp.setSecondComponent(new Label(
-                "Non equidem invideo, miror magis posuere velit aliquet."));
-        row.addComponent(sp);
-
-        VerticalSplitPanel sp2 = new VerticalSplitPanel();
-        sp2.setWidth("200px");
-        sp2.setHeight("6em");
-        sp2.setFirstComponent(new Label(
-                "Fictum,  deserunt mollit anim laborum astutumque!"));
-        sp2.setSecondComponent(new Label(
-                "Non equidem invideo, miror magis posuere velit aliquet."));
-        row.addComponent(sp2);
-
-        sp = new HorizontalSplitPanel();
-        sp.setWidth("200px");
-        sp.setHeight("200px");
-        sp.addStyleName("small");
-        sp.setFirstComponent(new Label(
-                "Fictum,  deserunt mollit anim laborum astutumque!"));
-        sp.setSecondComponent(new Label(
-                "Non equidem invideo, miror magis posuere velit aliquet."));
-        row.addComponent(sp);
-
-        sp2 = new VerticalSplitPanel();
-        sp2.setWidth("200px");
-        sp2.setHeight("6em");
-        sp2.addStyleName("small");
-        sp2.setFirstComponent(new Label(
-                "Fictum,  deserunt mollit anim laborum astutumque!"));
-        sp2.setSecondComponent(new Label(
-                "Non equidem invideo, miror magis posuere velit aliquet."));
-        row.addComponent(sp2);
-    }
-
-    void sliders(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Sliders", Category.Basic_Components, null);
-
-        Slider slider = new Slider("Horizontal");
-        slider.setValue(50.0);
-        row.addComponent(slider);
-
-        slider = new Slider("Horizontal, sized");
-        slider.setValue(50.0);
-        slider.setWidth("200px");
-        row.addComponent(slider);
-
-        slider = new Slider("Vertical");
-        slider.setValue(50.0);
-        slider.setOrientation(SliderOrientation.VERTICAL);
-        row.addComponent(slider);
-
-        slider = new Slider("Vertical, sized");
-        slider.setValue(50.0);
-        slider.setOrientation(SliderOrientation.VERTICAL);
-        slider.setHeight("200px");
-        row.addComponent(slider);
-
-        slider = new Slider("Disabled");
-        slider.setValue(50.0);
-        slider.setEnabled(false);
-        row.addComponent(slider);
-    }
-
-    void tables(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Tables", Category.Selection_Components, null);
-        row.setWidth("100%");
-
-        VerticalLayout wrap = new VerticalLayout();
-        wrap.setSpacing(true);
-        row.addComponent(wrap);
-
-        Table table = getTable("Normal");
-        wrap.addComponent(table);
-
-        table = getTable("Sized & Footer");
-        table.setWidth("100%");
-        table.setColumnExpandRatio("Lorem", 1.0f);
-        table.setColumnExpandRatio("Foo", 1.0f);
-        table.setColumnExpandRatio("Bar", 1.0f);
-        table.setFooterVisible(true);
-        table.setColumnFooter("Lorem", "lorem");
-        table.setColumnFooter("Foo", "foo");
-        table.setColumnFooter("Bar", "bar");
-        wrap.addComponent(table);
-    }
-
-    void treetables(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "TreeTables", Category.Selection_Components,
-                null);
-        row.setWidth("100%");
-
-        VerticalLayout wrap = new VerticalLayout();
-        wrap.setSpacing(true);
-        row.addComponent(wrap);
-
-        TreeTable table = getTreeTable("Normal");
-        wrap.addComponent(table);
-    }
-
-    void trees(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Tree", Category.Selection_Components, null);
-        Tree tree = new Tree();
-        tree.setSelectable(true);
-        tree.setMultiSelect(true);
-        tree.setContainerDataSource(generateContainer(10, true));
-        tree.setDragMode(TreeDragMode.NODE);
-        row.addComponent(tree);
-        tree.setItemCaptionPropertyId(CAPTION_PROPERTY);
-        tree.setItemIconPropertyId(ICON_PROPERTY);
-        tree.expandItem(firstItemId);
-        // TODO fix the issue that tree selection focuses the component (and
-        // then scrolls to that component)
-        // tree.select(firstItemId);
-        tree.setItemIcon(firstItemId, icon(false));
-
-        tree.setDropHandler(new DropHandler() {
-            @Override
-            public AcceptCriterion getAcceptCriterion() {
-                return AcceptAll.get();
-            }
-
-            @Override
-            public void drop(DragAndDropEvent event) {
-                Notification.show(event.getTransferable().toString());
-            }
-        });
-
-        // Add actions (context menu)
-        tree.addActionHandler(this);
-    }
-
-    void panels(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Panels & Layout panels",
-                Category.Component_Containers, null);
-
-        Panel panel = new Panel("Normal");
-        panel.setIcon(icon(false));
-        panel.setContent(panelContent());
-        row.addComponent(panel);
-
-        panel = new Panel("Sized");
-        panel.setIcon(icon(false));
-        panel.setWidth("10em");
-        panel.setHeight("250px");
-        panel.setContent(panelContent());
-        row.addComponent(panel);
-
-        panel = new Panel("Custom Caption");
-        panel.setIcon(icon(false));
-        panel.addStyleName("color1");
-        panel.setContent(panelContent());
-        row.addComponent(panel);
-
-        panel = new Panel("Custom Caption");
-        panel.setIcon(icon(false));
-        panel.addStyleName("color2");
-        panel.setContent(panelContent());
-        row.addComponent(panel);
-
-        panel = new Panel("Custom Caption");
-        panel.setIcon(icon(false));
-        panel.addStyleName("color3");
-        panel.setContent(panelContent());
-        row.addComponent(panel);
-
-        panel = new Panel("Borderless style");
-        panel.setIcon(icon(false));
-        panel.addStyleName("borderless");
-        panel.setContent(panelContent());
-        row.addComponent(panel);
-
-        panel = new Panel("Well style");
-        panel.setIcon(icon(false));
-        panel.addStyleName("well");
-        panel.setContent(panelContent());
-        row.addComponent(panel);
-
-        CssLayout layout = new CssLayout();
-        layout.setIcon(icon(false));
-        layout.setCaption("Panel style layout");
-        layout.addStyleName("card");
-        layout.addComponent(panelContent());
-        row.addComponent(layout);
-
-        layout = new CssLayout();
-        layout.setIcon(icon(false));
-        layout.setCaption("Well style layout");
-        layout.addStyleName("well");
-        layout.addComponent(panelContent());
-        row.addComponent(layout);
-    }
-
-    void datefields(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Date Fields", Category.Inputs, null);
-
-        DateField date = new DateField("Default resolution");
-        date.setValue(new Date());
-        row.addComponent(date);
-
-        date = new DateField("Default resolution, explicit size");
-        date.setValue(new Date());
-        row.addComponent(date);
-        date.setWidth("260px");
-        date.setHeight("60px");
-
-        date = new DateField("Second resolution");
-        date.setValue(new Date());
-        date.setResolution(Resolution.SECOND);
-        row.addComponent(date);
-
-        date = new DateField("Minute resolution");
-        date.setValue(new Date());
-        date.setResolution(Resolution.MINUTE);
-        row.addComponent(date);
-
-        date = new DateField("Hour resolution");
-        date.setValue(new Date());
-        date.setResolution(Resolution.HOUR);
-        row.addComponent(date);
-
-        date = new DateField("Disabled");
-        date.setValue(new Date());
-        date.setResolution(Resolution.HOUR);
-        date.setEnabled(false);
-        row.addComponent(date);
-
-        date = new DateField("Day resolution");
-        date.setValue(new Date());
-        date.setResolution(Resolution.DAY);
-        row.addComponent(date);
-
-        date = new DateField("Month resolution");
-        date.setValue(new Date());
-        date.setResolution(Resolution.MONTH);
-        row.addComponent(date);
-
-        date = new DateField("Year resolution");
-        date.setValue(new Date());
-        date.setResolution(Resolution.YEAR);
-        row.addComponent(date);
-
-        date = new DateField("Custom color");
-        date.setValue(new Date());
-        date.setResolution(Resolution.DAY);
-        date.addStyleName("color1");
-        row.addComponent(date);
-
-        date = new DateField("Custom color");
-        date.setValue(new Date());
-        date.setResolution(Resolution.DAY);
-        date.addStyleName("color2");
-        row.addComponent(date);
-
-        date = new DateField("Custom color");
-        date.setValue(new Date());
-        date.setResolution(Resolution.DAY);
-        date.addStyleName("color3");
-        row.addComponent(date);
-
-        date = new DateField("Small");
-        date.setValue(new Date());
-        date.setResolution(Resolution.DAY);
-        date.addStyleName("small");
-        row.addComponent(date);
-
-        date = new DateField("Large");
-        date.setValue(new Date());
-        date.setResolution(Resolution.DAY);
-        date.addStyleName("large");
-        row.addComponent(date);
-
-        date = new DateField("Week numbers");
-        date.setValue(new Date());
-        date.setResolution(Resolution.DAY);
-        date.setLocale(new Locale("fi", "fi"));
-        date.setShowISOWeekNumbers(true);
-        row.addComponent(date);
-
-        date = new DateField("US locale");
-        date.setValue(new Date());
-        date.setResolution(Resolution.SECOND);
-        date.setLocale(new Locale("en", "US"));
-        row.addComponent(date);
-
-        date = new DateField("Custom format");
-        date.setValue(new Date());
-        date.setDateFormat("E dd/MM/yyyy");
-        row.addComponent(date);
-    }
-
-    void optiongroups(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Option Groups", Category.Selection_Components,
-                null);
-
-        OptionGroup options = new OptionGroup("Choose one, explicit width");
-        options.setWidth("200px");
-        options.addItem("Option One");
-        Item two = options
-                .addItem("Option Two, with a longer caption that should wrap when the components width is explicitly set.");
-        options.addItem("Option Three");
-        options.select("Option One");
-        options.setItemIcon("Option One", icon(false));
-        options.setItemIcon(two, icon(false));
-        options.setItemIcon("Option Three", icon(true));
-        row.addComponent(options);
-
-        options = new OptionGroup("Choose many, explicit width");
-        options.setMultiSelect(true);
-        options.setWidth("200px");
-        options.addItem("Option One");
-        two = options
-                .addItem("Option Two, with a longer caption that should wrap when the components width is explicitly set.");
-        options.addItem("Option Three");
-        options.select("Option One");
-        options.setItemIcon("Option One", icon(false));
-        options.setItemIcon(two, icon(false));
-        options.setItemIcon("Option Three", icon(true));
-        row.addComponent(options);
-    }
-
-    void checkboxes(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Check Boxes", Category.Inputs, null);
-
-        CheckBox check = new CheckBox("Checked", true);
-        row.addComponent(check);
-
-        check = new CheckBox(
-                "Checked, explicit width, so that the caption should wrap",
-                true);
-        row.addComponent(check);
-        check.setWidth("150px");
-
-        check = new CheckBox("Not checked");
-        row.addComponent(check);
-
-        check = new CheckBox(null, true);
-        check.setDescription("No caption");
-        row.addComponent(check);
-
-        check = new CheckBox("Custom color", true);
-        check.addStyleName("color1");
-        row.addComponent(check);
-
-        check = new CheckBox("Custom color", true);
-        check.addStyleName("color2");
-        check.setIcon(icon(false));
-        row.addComponent(check);
-
-        check = new CheckBox("With Icon", true);
-        check.setIcon(icon(false));
-        row.addComponent(check);
-
-        check = new CheckBox();
-        check.setIcon(icon(true));
-        row.addComponent(check);
-
-        check = new CheckBox("Small", true);
-        check.addStyleName("small");
-        row.addComponent(check);
-
-        check = new CheckBox("Large", true);
-        check.addStyleName("large");
-        row.addComponent(check);
-    }
-
-    void menubars(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Menu Bars", Category.Basic_Components, null);
-        row.setWidth("100%");
-        row.addComponent(getMenuBar());
-    }
-
-    void comboboxes(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Combo Boxes", Category.Selection_Components,
-                null);
-
-        Container generatedContainer = generateContainer(200, false);
-        ComboBox combo = new ComboBox("Normal");
-        combo.setInputPrompt("You can type here");
-        combo.setContainerDataSource(generatedContainer);
-        combo.setItemCaptionPropertyId(CAPTION_PROPERTY);
-        combo.setItemIconPropertyId(ICON_PROPERTY);
-        row.addComponent(combo);
-
-        combo = new ComboBox("Explicit size");
-        combo.setInputPrompt("You can type here");
-        combo.addItem("Option One");
-        combo.addItem("Option Two");
-        combo.addItem("Option Three");
-        combo.setWidth("260px");
-        combo.setHeight("60px");
-        row.addComponent(combo);
-
-        combo = new ComboBox("Disabled");
-        combo.setInputPrompt("You can type here");
-        combo.addItem("Option One");
-        combo.addItem("Option Two");
-        combo.addItem("Option Three");
-        combo.setEnabled(false);
-        row.addComponent(combo);
-
-        combo = new ComboBox("Custom color");
-        combo.setInputPrompt("You can type here");
-        combo.setContainerDataSource(generatedContainer);
-        combo.setItemCaptionPropertyId(CAPTION_PROPERTY);
-        combo.setItemIconPropertyId(ICON_PROPERTY);
-        combo.addStyleName("color1");
-        row.addComponent(combo);
-
-        combo = new ComboBox("Custom color");
-        combo.setInputPrompt("You can type here");
-        combo.setContainerDataSource(generatedContainer);
-        combo.setItemCaptionPropertyId(CAPTION_PROPERTY);
-        combo.setItemIconPropertyId(ICON_PROPERTY);
-        combo.addStyleName("color2");
-        row.addComponent(combo);
-
-        combo = new ComboBox("Custom color");
-        combo.setInputPrompt("You can type here");
-        combo.setContainerDataSource(generatedContainer);
-        combo.setItemCaptionPropertyId(CAPTION_PROPERTY);
-        combo.setItemIconPropertyId(ICON_PROPERTY);
-        combo.addStyleName("color3");
-        row.addComponent(combo);
-
-        combo = new ComboBox("Small");
-        combo.setInputPrompt("You can type here");
-        combo.addItem("Option One");
-        combo.addItem("Option Two");
-        combo.addItem("Option Three");
-        combo.addStyleName("small");
-        row.addComponent(combo);
-
-        combo = new ComboBox("Large");
-        combo.setInputPrompt("You can type here");
-        combo.addItem("Option One");
-        combo.addItem("Option Two");
-        combo.addItem("Option Three");
-        combo.addStyleName("large");
-        row.addComponent(combo);
-    }
-
-    void textareas(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Text Areas", Category.Inputs, null);
-
-        TextArea ta = new TextArea("Normal");
-        ta.setInputPrompt("Write your comment…");
-        row.addComponent(ta);
-
-        ta = new TextArea("Focused");
-        ta.setInputPrompt("Write your comment…");
-        ta.addStyleName("focused");
-        row.addComponent(ta);
-
-        ta = new TextArea("Custom color");
-        ta.addStyleName("color1");
-        ta.setInputPrompt("Write your comment…");
-        row.addComponent(ta);
-
-        ta = new TextArea("Custom color, read-only");
-        ta.addStyleName("color2");
-        ta.setValue("Field value, spanning multiple lines of text");
-        ta.setReadOnly(true);
-        row.addComponent(ta);
-
-        ta = new TextArea("Custom color, inline icon");
-        ta.addStyleName("color3");
-        ta.setValue("Inline icon not really working…");
-        ta.addStyleName("inline-icon");
-        ta.setIcon(icon(false));
-        row.addComponent(ta);
-
-        ta = new TextArea("Small");
-        ta.addStyleName("small");
-        ta.setInputPrompt("Write your comment…");
-        row.addComponent(ta);
-
-        ta = new TextArea("Large");
-        ta.addStyleName("large");
-        ta.setInputPrompt("Write your comment…");
-        row.addComponent(ta);
-
-        ta = new TextArea("Borderless");
-        ta.addStyleName("borderless");
-        ta.setInputPrompt("Write your comment…");
-        row.addComponent(ta);
-    }
-
-    void textfields(final VerticalLayout root) {
-        HorizontalLayout row = addSection(root, "Text Fields", Category.Inputs,
-                null);
-
-        TextField tf = new TextField("Normal");
-        tf.setInputPrompt("First name");
-        tf.setIcon(icon(false));
-        row.addComponent(tf);
-
-        tf = new TextField("Focused");
-        tf.setInputPrompt("Last name");
-        tf.addStyleName("focused");
-        row.addComponent(tf);
-
-        tf = new TextField("Custom color");
-        tf.setInputPrompt("Email");
-        tf.addStyleName("color1");
-        row.addComponent(tf);
-
-        tf = new TextField("User Color");
-        tf.setInputPrompt("Gender");
-        tf.addStyleName("color2");
-        row.addComponent(tf);
-
-        tf = new TextField("Themed");
-        tf.setInputPrompt("Age");
-        tf.addStyleName("color3");
-        row.addComponent(tf);
-
-        tf = new TextField("Read-only");
-        tf.setInputPrompt("Nationality");
-        tf.setValue("Finnish");
-        tf.setReadOnly(true);
-        row.addComponent(tf);
-
-        tf = new TextField("Small");
-        tf.setValue("Field value");
-        tf.addStyleName("small");
-        row.addComponent(tf);
-
-        tf = new TextField("Large");
-        tf.setValue("Field value");
-        tf.addStyleName("large");
-        tf.setIcon(icon(true));
-        row.addComponent(tf);
-
-        tf = new TextField("Icon inside");
-        tf.setInputPrompt("Ooh, an icon");
-        tf.addStyleName("inline-icon");
-        tf.setIcon(icon(false));
-        row.addComponent(tf);
-
-        tf = new TextField("16px supported by default");
-        tf.setInputPrompt("Image icon");
-        tf.addStyleName("inline-icon");
-        tf.setIcon(icon(true, 16));
-        row.addComponent(tf);
-
-        tf = new TextField();
-        tf.setValue("Font, no caption");
-        tf.addStyleName("inline-icon");
-        tf.setIcon(icon(false));
-        row.addComponent(tf);
-
-        tf = new TextField();
-        tf.setValue("Image, no caption");
-        tf.addStyleName("inline-icon");
-        tf.setIcon(icon(true, 16));
-        row.addComponent(tf);
-
-        CssLayout group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-
-        tf = new TextField();
-        tf.setInputPrompt("Grouped with a button");
-        tf.addStyleName("inline-icon");
-        tf.setIcon(icon(false));
-        tf.setWidth("260px");
-        group.addComponent(tf);
-
-        Button button = new Button("Do It");
-        // button.addStyleName("primary");
-        group.addComponent(button);
-
-        tf = new TextField("Borderless");
-        tf.setInputPrompt("Write here…");
-        tf.addStyleName("inline-icon");
-        tf.addStyleName("borderless");
-        tf.setIcon(icon(false));
-        row.addComponent(tf);
-    }
-
-    void buttonsAndLinks(final VerticalLayout root) {
-        HorizontalLayout row = addSection(root, "Buttons",
-                Category.Basic_Components, null);
-
-        Button button = new Button("Normal");
-        row.addComponent(button);
-
-        button = new Button("Focused");
-        button.addStyleName("focus");
-        row.addComponent(button);
-
-        button = new Button("Pressed");
-        button.addStyleName("active");
-        button.addStyleName("focus");
-        row.addComponent(button);
-
-        button = new Button("Disabled");
-        button.setEnabled(false);
-        row.addComponent(button);
-
-        button = new Button("Primary");
-        button.addStyleName("primary");
-        row.addComponent(button);
-
-        button = new Button("Friendly");
-        button.addStyleName("friendly");
-        row.addComponent(button);
-
-        button = new Button("Danger");
-        button.addStyleName("danger");
-        row.addComponent(button);
-
-        // button = new Button("Custom");
-        // button.addStyleName("color2");
-        // row.addComponent(button);
-        //
-        // button = new Button("User Color");
-        // button.addStyleName("color3");
-        // row.addComponent(button);
-        //
-        // button = new Button("Themed");
-        // button.addStyleName("color4");
-        // row.addComponent(button);
-        //
-        // button = new Button("Alternate");
-        // button.addStyleName("color5");
-        // row.addComponent(button);
-        //
-        // button = new Button("Other");
-        // button.addStyleName("color6");
-        // row.addComponent(button);
-
-        button = new Button("Small");
-        button.addStyleName("small");
-        button.setIcon(icon(false));
-        row.addComponent(button);
-
-        button = new Button("Large");
-        button.addStyleName("large");
-        button.addStyleName("icon-align-right");
-        button.setIcon(icon(false));
-        row.addComponent(button);
-
-        button = new Button("Image icon");
-        button.setIcon(icon(true, 16));
-        row.addComponent(button);
-
-        button = new Button("Image icon");
-        button.addStyleName("icon-align-right");
-        button.setIcon(icon(true));
-        row.addComponent(button);
-
-        button = new Button("Photos");
-        button.setIcon(icon(false));
-        row.addComponent(button);
-
-        button = new Button();
-        button.setIcon(icon(false));
-        button.addStyleName("icon");
-        row.addComponent(button);
-
-        button = new Button("Borderless");
-        button.setIcon(icon(false));
-        button.addStyleName("borderless");
-        row.addComponent(button);
-
-        button = new Button("Link style");
-        button.setIcon(icon(false));
-        button.addStyleName("link");
-        row.addComponent(button);
-
-        button = new Button("Icon on right");
-        button.setIcon(icon(false));
-        button.addStyleName("icon-align-right");
-        row.addComponent(button);
-
-        CssLayout group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-
-        button = new Button("One");
-        group.addComponent(button);
-        button = new Button("Two");
-        group.addComponent(button);
-        button = new Button("Three");
-        group.addComponent(button);
-
-        NativeButton nbutton = new NativeButton("Native");
-        row.addComponent(nbutton);
-
-        Link link = new Link("Link to vaadin.com", new ExternalResource(
-                "https://vaadin.com"));
-        row.addComponent(link);
-
-        link = new Link("Custom color", new ExternalResource(
-                "https://vaadin.com"));
-        link.addStyleName("color3");
-        link.setIcon(icon(false));
-        row.addComponent(link);
-
-        link = new Link("Small", new ExternalResource("https://vaadin.com"));
-        link.addStyleName("small");
-        row.addComponent(link);
-
-        link = new Link("Large", new ExternalResource("https://vaadin.com"));
-        link.addStyleName("large");
-        row.addComponent(link);
-
-        link = new Link(null, new ExternalResource("https://vaadin.com"));
-        link.setIcon(icon(false));
-        row.addComponent(link);
-    }
-
-    void colorpickers(final VerticalLayout root) {
-        HorizontalLayout row = addSection(root, "Color Pickers",
-                Category.Inputs, null);
-
-        ColorPicker cp = new ColorPicker();
-        cp.setDefaultCaptionEnabled(true);
-        cp.setIcon(icon(false));
-        cp.setComponentError(new UserError("Test error"));
-        row.addComponent(cp);
-
-        cp = new ColorPicker();
-        cp.setPopupStyle(PopupStyle.POPUP_SIMPLE);
-        cp.setTextfieldVisibility(true);
-        row.addComponent(cp);
-    }
-
-    void labels(final VerticalLayout root) {
-        addSection(root, "Labels", Category.Basic_Components, null);
-
-        Label large = new Label(
-                "Large type for introductory text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
-        large.addStyleName("large");
-        root.addComponent(large);
-
-        Label h2 = new Label("Subtitle");
-        h2.addStyleName("h2");
-        root.addComponent(h2);
-
-        Label normal = new Label(
-                "Normal type for plain text, with a <a href=\"https://vaadin.com\">regular link</a>. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.",
-                ContentMode.HTML);
-        root.addComponent(normal);
-
-        Label h3 = new Label("Small Title");
-        h3.addStyleName("h3");
-        root.addComponent(h3);
-
-        Label small = new Label(
-                "Small type for additional text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
-        small.addStyleName("small");
-        root.addComponent(small);
-
-        Label h4 = new Label("Section Title");
-        h4.addStyleName("h4");
-        root.addComponent(h4);
-
-        normal = new Label(
-                "Normal type for plain text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
-        root.addComponent(normal);
-
-        h4 = new Label("Spinner");
-        h4.addStyleName("h4");
-        root.addComponent(h4);
-
-        Label spinnerDesc = new Label(
-                "Below is a Label with a custom style name, for which the spinner mixin is added.");
-        spinnerDesc.addStyleName("small");
-        root.addComponent(spinnerDesc);
-
-        Label spinner = new Label();
-        spinner.addStyleName("spinner");
-        root.addComponent(spinner);
-    }
-
-    HorizontalLayout addSection(VerticalLayout root, String title,
-            Category category, String description) {
-        String id = title.toLowerCase().replace(" ", "-");
-
-        Label h1 = new Label(title);
-        h1.addStyleName("h1");
-        h1.setId("" + id);
-        root.addComponent(h1);
-
-        if (description != null) {
-            Label desc = new Label(description + "<br><br>", ContentMode.HTML);
-            root.addComponent(desc);
-        }
-
-        Link link = new Link(title, new ExternalResource("#" + id));
-
-        ArrayList<Link> items = menuItems.get(category);
-        if (items == null) {
-            items = new ArrayList<Link>();
-            menuItems.put(category, items);
-        }
-        items.add(link);
-
-        HorizontalLayout row = new HorizontalLayout();
-        row.addStyleName("wrapping");
-        row.setSpacing(true);
-        root.addComponent(row);
-        return row;
-    }
-
-    private Component windowContents(boolean scrollable) {
-        VerticalLayout root = new VerticalLayout();
-
-        HorizontalLayout footer = new HorizontalLayout();
-        footer.setWidth("100%");
-        footer.setSpacing(true);
-        footer.addStyleName("v-window-bottom-toolbar");
-
-        Label footerText = new Label("Footer text");
-        footerText.setSizeUndefined();
-
-        Button ok = new Button("OK");
-        ok.addStyleName("primary");
-
-        Button cancel = new Button("Cancel");
-
-        footer.addComponents(footerText, ok, cancel);
-        footer.setExpandRatio(footerText, 1);
-
-        Component content = null;
-        if (scrollable) {
-            Panel panel = new Panel();
-            panel.setSizeFull();
-            panel.addStyleName("borderless");
-            VerticalLayout l = new VerticalLayout();
-            l.addComponent(new Label(
-                    "<h2>Subtitle</h2><p>Quam diu etiam furor iste tuus nos eludet? Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ut enim ad minim veniam, quis nostrud exercitation. Quae vero auctorem tractata ab fiducia dicuntur.</p><p>Quisque ut dolor gravida, placerat libero vel, euismod. Etiam habebis sem dicantur magna mollis euismod. Nihil hic munitissimus habendi senatus locus, nihil horum? Curabitur est gravida et libero vitae dictum. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.</p>",
-                    ContentMode.HTML));
-            l.setMargin(true);
-            panel.setContent(l);
-            content = panel;
-        } else {
-            content = new Label(
-                    "<h2>Subtitle</h2><p>Normal type for plain text. Etiam at risus et justo dignissim congue.</p>",
-                    ContentMode.HTML);
-        }
-        root.addComponents(content, footer);
-        if (scrollable) {
-            root.setSizeFull();
-            root.setExpandRatio(content, 1);
-        }
-        root.setMargin(!scrollable);
-
-        return root;
-    }
-
-    Component panelContent() {
-        // return new Button("Panel content");
-        VerticalLayout layout = new VerticalLayout();
-        layout.setSizeFull();
-        layout.setMargin(true);
-        layout.setSpacing(true);
-        Label content = new Label(
-                "Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.");
-        content.setWidth("10em");
-        layout.addComponent(content);
-        Button button = new Button("Button");
-        button.setSizeFull();
-        layout.addComponent(button);
-        return layout;
-    }
-
-    Table getTable(String caption) {
-        Table table = new Table(caption);
-        table.setSelectable(true);
-        table.setMultiSelect(true);
-        table.setSortEnabled(true);
-        table.setColumnCollapsingAllowed(true);
-        table.setColumnReorderingAllowed(true);
-        table.setPageLength(6);
-        table.addActionHandler(this);
-        table.setDragMode(TableDragMode.MULTIROW);
-        table.setDropHandler(new DropHandler() {
-            @Override
-            public AcceptCriterion getAcceptCriterion() {
-                return AcceptAll.get();
-            }
-
-            @Override
-            public void drop(DragAndDropEvent event) {
-                Notification.show(event.getTransferable().toString());
-            }
-        });
-        table.setContainerDataSource(tableData);
-        table.select(tableData.getItemIds().iterator().next());
-        table.setSortContainerPropertyId(CAPTION_PROPERTY);
-        table.setItemIconPropertyId(ICON_PROPERTY);
-        table.setColumnAlignment(DESCRIPTION_PROPERTY, Align.RIGHT);
-
-        return table;
-    }
-
-    TreeTable getTreeTable(String caption) {
-        TreeTable table = new TreeTable(caption);
-        table.setSelectable(true);
-        table.setMultiSelect(true);
-        table.setSortEnabled(true);
-        table.setAnimationsEnabled(true);
-        table.setColumnCollapsingAllowed(true);
-        table.setColumnReorderingAllowed(true);
-        table.setPageLength(6);
-        table.addActionHandler(this);
-        table.setDragMode(TableDragMode.MULTIROW);
-        table.setDropHandler(new DropHandler() {
-
-            @Override
-            public AcceptCriterion getAcceptCriterion() {
-                return AcceptAll.get();
-            }
-
-            @Override
-            public void drop(DragAndDropEvent event) {
-                Notification.show(event.getTransferable().toString());
-            }
-        });
-        table.setContainerDataSource(container);
-        table.select(tableData.getItemIds().iterator().next());
-        table.setItemIconPropertyId(ICON_PROPERTY);
-
-        return table;
-    }
-
-    // Actions for the context menu
-    private static final Action ACTION_ONE = new Action("Action One");
-    private static final Action ACTION_TWO = new Action("Action Two");
-    private static final Action ACTION_THREE = new Action("Action Three");
-    private static final Action[] ACTIONS = new Action[] { ACTION_ONE,
-            ACTION_TWO, ACTION_THREE };
-    private Container container;
-    private Object firstItemId;
-
-    @Override
-    public Action[] getActions(Object target, Object sender) {
-        return ACTIONS;
-    }
-
-    @Override
-    public void handleAction(Action action, Object sender, Object target) {
-        Notification.show(action.getCaption());
-    }
-
-    MenuBar getMenuBar() {
-        MenuBar menubar = new MenuBar();
-        menubar.setWidth("100%");
-        final MenuBar.MenuItem file = menubar.addItem("File", null);
-        final MenuBar.MenuItem newItem = file.addItem("New", null);
-        file.addItem("Open file...", null);
-        file.addSeparator();
-
-        newItem.addItem("File", null);
-        newItem.addItem("Folder", null);
-        newItem.addItem("Project...", null);
-
-        file.addItem("Close", null);
-        file.addItem("Close All", null);
-        file.addSeparator();
-
-        file.addItem("Save", null);
-        file.addItem("Save As...", null);
-        file.addItem("Save All", null);
-
-        final MenuBar.MenuItem edit = menubar.addItem("Edit", null);
-        edit.addItem("Undo", null);
-        edit.addItem("Redo", null).setEnabled(false);
-        edit.addSeparator();
-
-        edit.addItem("Cut", null);
-        edit.addItem("Copy", null);
-        edit.addItem("Paste", null);
-        edit.addSeparator();
-
-        final MenuBar.MenuItem find = edit.addItem("Find/Replace", null);
-
-        find.addItem("Google Search", null);
-        find.addSeparator();
-        find.addItem("Find/Replace...", null);
-        find.addItem("Find Next", null);
-        find.addItem("Find Previous", null);
-
-        Command check = new Command() {
-            @Override
-            public void menuSelected(MenuItem selectedItem) {
-                Notification.show(selectedItem.isChecked() ? "Checked"
-                        : "Unchecked");
-            }
-        };
-
-        final MenuBar.MenuItem view = menubar.addItem("View", null);
-        view.addItem("Show Status Bar", check).setCheckable(true);
-        MenuItem title = view.addItem("Show Title Bar", check);
-        title.setCheckable(true);
-        title.setChecked(true);
-        view.addItem("Customize Toolbar...", null);
-        view.addSeparator();
-
-        view.addItem("Actual Size", null);
-        view.addItem("Zoom In", null);
-        view.addItem("Zoom Out", null);
-
-        MenuItem fav = menubar.addItem("", check);
-        fav.setIcon(icon(false));
-        fav.setStyleName("icon-only");
-        fav.setCheckable(true);
-        fav.setChecked(true);
-
-        fav = menubar.addItem("", check);
-        fav.setIcon(icon(false));
-        fav.setStyleName("icon-only");
-        fav.setCheckable(true);
-        fav.setCheckable(true);
-
-        menubar.addItem("Attach", null).setIcon(FontAwesome.PAPERCLIP);
-        menubar.addItem("Undo", null).setIcon(FontAwesome.UNDO);
-        menubar.addItem("Redo", null).setIcon(FontAwesome.REPEAT);
-        menubar.addItem("Upload", null).setIcon(FontAwesome.UPLOAD);
-
-        return menubar;
-    }
-
-    public static Resource icon(boolean isImage) {
-        return icon(isImage, 32);
-    }
-
-    public static Resource icon(boolean isImage, int imageSize) {
-        if (!isImage) {
-            if (++iconCount >= SIZE) {
-                iconCount = 0;
-            }
-            return ICONS.get(iconCount);
-        }
-        return new ThemeResource("../runo/icons/" + imageSize + "/document.png");
-    }
-
-    static List<FontAwesome> ICONS = Collections.unmodifiableList(Arrays
-            .asList(FontAwesome.values()));
-    static final int SIZE = ICONS.size();
-    static int iconCount = 110;
-
-    TabSheet getTabSheet(String caption, String style, boolean closable,
-            boolean scrolling, boolean icon) {
-        TabSheet ts = new TabSheet();
-        ts.addStyleName(style);
-        ts.setCaption(caption);
-
-        for (int i = 0; i < (scrolling ? 10 : 3); i++) {
-            String tabcaption = nextString(true);
-            if (i == 0 && icon) {
-                tabcaption = null;
-            }
-            Tab t = ts.addTab(new Label(" "), tabcaption);
-            t.setClosable(closable);
-
-            if (icon) {
-                t.setIcon(icon(i == 2));
-            }
-        }
-        return ts;
-    }
-
-    static String[] strings = new String[] { "lorem", "ipsum", "dolor", "sit",
-            "amet", "consectetur" };
-    static int stringCount = -1;
-
-    String nextString(boolean capitalize) {
-        if (++stringCount >= strings.length) {
-            stringCount = 0;
-        }
-        return capitalize ? strings[stringCount].substring(0, 1).toUpperCase()
-                + strings[stringCount].substring(1) : strings[stringCount];
-    }
-}
\ No newline at end of file
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Accordions.java b/uitest/src/com/vaadin/tests/themes/valo/Accordions.java
new file mode 100644
index 0000000000..b401451271
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Accordions.java
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.Accordion;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+
+public class Accordions extends VerticalLayout implements View {
+    public Accordions() {
+        setMargin(true);
+
+        Label h1 = new Label("Accordions");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.setSpacing(true);
+        row.setWidth("100%");
+        addComponent(row);
+
+        row.addComponent(getAccordion("Normal"));
+
+        Accordion ac = getAccordion("Borderless");
+        ac.addStyleName("borderless");
+        row.addComponent(ac);
+
+    }
+
+    Accordion getAccordion(String caption) {
+        Accordion ac = new Accordion();
+        ac.setCaption(caption);
+        ac.addTab(new VerticalLayout() {
+            {
+                setMargin(true);
+                addComponent(new Label(
+                        "Fabio vel iudice vincam, sunt in culpa qui officia. Ut enim ad minim veniam, quis nostrud exercitation."));
+            }
+        }, "First Caption", TestIcon.get());
+        ac.addTab(new VerticalLayout() {
+            {
+                setMargin(true);
+                addComponent(new Label(
+                        "Gallia est omnis divisa in partes tres, quarum."));
+            }
+        }, "Second Caption", TestIcon.get());
+        ac.addTab(new VerticalLayout() {
+            {
+                setMargin(true);
+                addComponent(new Label(
+                        "Nihil hic munitissimus habendi senatus locus, nihil horum? Sed haec quis possit intrepidus aestimare tellus."));
+            }
+        }, "Third Caption", TestIcon.get());
+        ac.addTab(new VerticalLayout() {
+            {
+                setMargin(true);
+                addComponent(new Label(
+                        "Inmensae subtilitatis, obscuris et malesuada fames. Quisque ut dolor gravida, placerat libero vel, euismod."));
+            }
+        }, "Custom Caption Style", TestIcon.get()).setStyleName("color1");
+        return ac;
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java b/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java
new file mode 100644
index 0000000000..8f7b7c6a00
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java
@@ -0,0 +1,186 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.server.ExternalResource;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Link;
+import com.vaadin.ui.NativeButton;
+import com.vaadin.ui.VerticalLayout;
+
+/**
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class ButtonsAndLinks extends VerticalLayout implements View {
+    /**
+ * 
+ */
+    public ButtonsAndLinks() {
+        setMargin(true);
+
+        Label h1 = new Label("Buttons");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        Button button = new Button("Normal");
+        row.addComponent(button);
+
+        button = new Button("Disabled");
+        button.setEnabled(false);
+        row.addComponent(button);
+
+        button = new Button("Primary");
+        button.addStyleName("primary");
+        row.addComponent(button);
+
+        button = new Button("Friendly");
+        button.addStyleName("friendly");
+        row.addComponent(button);
+
+        button = new Button("Danger");
+        button.addStyleName("danger");
+        row.addComponent(button);
+
+        // button = new Button("Custom");
+        // button.addStyleName("color2");
+        // row.addComponent(button);
+        //
+        // button = new Button("User Color");
+        // button.addStyleName("color3");
+        // row.addComponent(button);
+        //
+        // button = new Button("Themed");
+        // button.addStyleName("color4");
+        // row.addComponent(button);
+        //
+        // button = new Button("Alternate");
+        // button.addStyleName("color5");
+        // row.addComponent(button);
+        //
+        // button = new Button("Other");
+        // button.addStyleName("color6");
+        // row.addComponent(button);
+
+        button = new Button("Small");
+        button.addStyleName("small");
+        button.setIcon(TestIcon.get());
+        row.addComponent(button);
+
+        button = new Button("Large");
+        button.addStyleName("large");
+        button.addStyleName("icon-align-right");
+        button.setIcon(TestIcon.get());
+        row.addComponent(button);
+
+        button = new Button("Image icon");
+        button.setIcon(TestIcon.get(true, 16));
+        row.addComponent(button);
+
+        button = new Button("Image icon");
+        button.addStyleName("icon-align-right");
+        button.setIcon(TestIcon.get(true));
+        row.addComponent(button);
+
+        button = new Button("Photos");
+        button.setIcon(TestIcon.get());
+        row.addComponent(button);
+
+        button = new Button();
+        button.setIcon(TestIcon.get());
+        button.addStyleName("icon-only");
+        row.addComponent(button);
+
+        button = new Button("Borderless");
+        button.setIcon(TestIcon.get());
+        button.addStyleName("borderless");
+        row.addComponent(button);
+
+        button = new Button("Link style");
+        button.setIcon(TestIcon.get());
+        button.addStyleName("link");
+        row.addComponent(button);
+
+        button = new Button("Icon on right");
+        button.setIcon(TestIcon.get());
+        button.addStyleName("icon-align-right");
+        row.addComponent(button);
+
+        CssLayout group = new CssLayout();
+        group.addStyleName("v-component-group");
+        row.addComponent(group);
+
+        button = new Button("One");
+        group.addComponent(button);
+        button = new Button("Two");
+        group.addComponent(button);
+        button = new Button("Three");
+        group.addComponent(button);
+
+        NativeButton nbutton = new NativeButton("Native");
+        row.addComponent(nbutton);
+
+        h1 = new Label("Links");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        Link link = new Link("vaadin.com", new ExternalResource(
+                "https://vaadin.com"));
+        row.addComponent(link);
+
+        link = new Link("Link with icon", new ExternalResource(
+                "https://vaadin.com"));
+        link.addStyleName("color3");
+        link.setIcon(TestIcon.get());
+        row.addComponent(link);
+
+        link = new Link("Small", new ExternalResource("https://vaadin.com"));
+        link.addStyleName("small");
+        row.addComponent(link);
+
+        link = new Link("Large", new ExternalResource("https://vaadin.com"));
+        link.addStyleName("large");
+        row.addComponent(link);
+
+        link = new Link(null, new ExternalResource("https://vaadin.com"));
+        link.setIcon(TestIcon.get());
+        link.addStyleName("large");
+        row.addComponent(link);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/CalendarTest.java b/uitest/src/com/vaadin/tests/themes/valo/CalendarTest.java
new file mode 100644
index 0000000000..17dfd6cb67
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/CalendarTest.java
@@ -0,0 +1,1278 @@
+package com.vaadin.tests.themes.valo;
+
+import java.text.DateFormatSymbols;
+import java.util.Date;
+import java.util.GregorianCalendar;
+import java.util.Locale;
+import java.util.Map;
+import java.util.TimeZone;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.data.Item;
+import com.vaadin.data.Property;
+import com.vaadin.data.Property.ValueChangeEvent;
+import com.vaadin.data.Property.ValueChangeListener;
+import com.vaadin.data.fieldgroup.FieldGroup;
+import com.vaadin.data.fieldgroup.FieldGroup.CommitException;
+import com.vaadin.data.util.BeanItem;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.shared.ui.combobox.FilteringMode;
+import com.vaadin.shared.ui.datefield.Resolution;
+import com.vaadin.tests.components.calendar.CalendarTestEvent;
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.Calendar;
+import com.vaadin.ui.Calendar.TimeFormat;
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.DateField;
+import com.vaadin.ui.FormLayout;
+import com.vaadin.ui.GridLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Layout;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.Window;
+import com.vaadin.ui.components.calendar.CalendarComponentEvents.DateClickEvent;
+import com.vaadin.ui.components.calendar.CalendarComponentEvents.EventClick;
+import com.vaadin.ui.components.calendar.CalendarComponentEvents.EventClickHandler;
+import com.vaadin.ui.components.calendar.CalendarComponentEvents.RangeSelectEvent;
+import com.vaadin.ui.components.calendar.CalendarComponentEvents.RangeSelectHandler;
+import com.vaadin.ui.components.calendar.CalendarComponentEvents.WeekClick;
+import com.vaadin.ui.components.calendar.CalendarComponentEvents.WeekClickHandler;
+import com.vaadin.ui.components.calendar.event.BasicEvent;
+import com.vaadin.ui.components.calendar.event.BasicEventProvider;
+import com.vaadin.ui.components.calendar.event.CalendarEvent;
+import com.vaadin.ui.components.calendar.handler.BasicDateClickHandler;
+import com.vaadin.ui.components.calendar.handler.BasicWeekClickHandler;
+
+/** Calendar component test application */
+@Theme("valo-test")
+public class CalendarTest extends GridLayout implements View {
+
+    private static final long serialVersionUID = -5436777475398410597L;
+
+    private static final String DEFAULT_ITEMID = "DEFAULT";
+
+    private enum Mode {
+        MONTH, WEEK, DAY;
+    }
+
+    /**
+     * This Gregorian calendar is used to control dates and time inside of this
+     * test application.
+     */
+    private GregorianCalendar calendar;
+
+    /** Target calendar component that this test application is made for. */
+    private Calendar calendarComponent;
+
+    private Date currentMonthsFirstDate;
+
+    private final Label captionLabel = new Label("");
+
+    private Button monthButton;
+
+    private Button weekButton;
+
+    private Button dayButton;
+
+    private Button nextButton;
+
+    private Button prevButton;
+
+    private ComboBox timeZoneSelect;
+
+    private ComboBox formatSelect;
+
+    private ComboBox localeSelect;
+
+    private CheckBox hideWeekendsButton;
+
+    private CheckBox readOnlyButton;
+
+    private TextField captionField;
+
+    private Window scheduleEventPopup;
+
+    private final FormLayout scheduleEventFieldLayout = new FormLayout();
+    private FieldGroup scheduleEventFieldGroup = new FieldGroup();
+
+    private Button deleteEventButton;
+
+    private Button applyEventButton;
+
+    private Mode viewMode = Mode.MONTH;
+
+    private BasicEventProvider dataSource;
+
+    private Button addNewEvent;
+
+    /*
+     * When testBench is set to true, CalendarTest will have static content that
+     * is more suitable for Vaadin TestBench testing. Calendar will use a static
+     * date Mon 10 Jan 2000. Enable by starting the application with a
+     * "testBench" parameter in the URL.
+     */
+    private boolean testBench = false;
+
+    private String calendarHeight = null;
+
+    private String calendarWidth = null;
+
+    private CheckBox disabledButton;
+
+    private Integer firstHour;
+
+    private Integer lastHour;
+
+    private Integer firstDay;
+
+    private Integer lastDay;
+
+    private Locale defaultLocale = Locale.US;
+
+    private boolean showWeeklyView;
+
+    private boolean useSecondResolution;
+
+    private DateField startDateField;
+    private DateField endDateField;
+
+    public CalendarTest() {
+        setSizeFull();
+        setHeight("1000px");
+        setMargin(true);
+        setSpacing(true);
+
+        // handleURLParams(request.getParameterMap());
+
+        initContent();
+    }
+
+    private void handleURLParams(Map<String, String[]> parameters) {
+        testBench = parameters.containsKey("testBench")
+                || parameters.containsKey("?testBench");
+
+        if (parameters.containsKey("width")) {
+            calendarWidth = parameters.get("width")[0];
+        }
+
+        if (parameters.containsKey("height")) {
+            calendarHeight = parameters.get("height")[0];
+        }
+
+        if (parameters.containsKey("firstDay")) {
+            firstDay = Integer.parseInt(parameters.get("firstDay")[0]);
+        }
+
+        if (parameters.containsKey("lastDay")) {
+            lastDay = Integer.parseInt(parameters.get("lastDay")[0]);
+        }
+
+        if (parameters.containsKey("firstHour")) {
+            firstHour = Integer.parseInt(parameters.get("firstHour")[0]);
+        }
+
+        if (parameters.containsKey("lastHour")) {
+            lastHour = Integer.parseInt(parameters.get("lastHour")[0]);
+        }
+
+        if (parameters.containsKey("locale")) {
+            String localeArray[] = parameters.get("locale")[0].split("_");
+            defaultLocale = new Locale(localeArray[0], localeArray[1]);
+            setLocale(defaultLocale);
+        }
+
+        if (parameters.containsKey(("secondsResolution"))) {
+            useSecondResolution = true;
+        }
+
+        showWeeklyView = parameters.containsKey("weekly");
+
+    }
+
+    public void initContent() {
+        // Set default Locale for this application
+        if (testBench) {
+            setLocale(defaultLocale);
+
+        } else {
+            setLocale(Locale.getDefault());
+        }
+
+        // Initialize locale, timezone and timeformat selects.
+        localeSelect = createLocaleSelect();
+        timeZoneSelect = createTimeZoneSelect();
+        formatSelect = createCalendarFormatSelect();
+
+        initCalendar();
+        initLayoutContent();
+        addInitialEvents();
+    }
+
+    private Date resolveFirstDateOfWeek(Date today,
+            java.util.Calendar currentCalendar) {
+        int firstDayOfWeek = currentCalendar.getFirstDayOfWeek();
+        currentCalendar.setTime(today);
+        while (firstDayOfWeek != currentCalendar
+                .get(java.util.Calendar.DAY_OF_WEEK)) {
+            currentCalendar.add(java.util.Calendar.DATE, -1);
+        }
+        return currentCalendar.getTime();
+    }
+
+    private Date resolveLastDateOfWeek(Date today,
+            java.util.Calendar currentCalendar) {
+        currentCalendar.setTime(today);
+        currentCalendar.add(java.util.Calendar.DATE, 1);
+        int firstDayOfWeek = currentCalendar.getFirstDayOfWeek();
+        // Roll to weeks last day using firstdayofweek. Roll until FDofW is
+        // found and then roll back one day.
+        while (firstDayOfWeek != currentCalendar
+                .get(java.util.Calendar.DAY_OF_WEEK)) {
+            currentCalendar.add(java.util.Calendar.DATE, 1);
+        }
+        currentCalendar.add(java.util.Calendar.DATE, -1);
+        return currentCalendar.getTime();
+    }
+
+    private void addInitialEvents() {
+        Date originalDate = calendar.getTime();
+        Date today = getToday();
+
+        // Add a event that last a whole week
+
+        Date start = resolveFirstDateOfWeek(today, calendar);
+        Date end = resolveLastDateOfWeek(today, calendar);
+        CalendarTestEvent event = getNewEvent("Whole week event", start, end);
+        event.setAllDay(true);
+        event.setStyleName("color4");
+        event.setDescription("Description for the whole week event.");
+        dataSource.addEvent(event);
+
+        // Add a allday event
+        calendar.setTime(start);
+        calendar.add(GregorianCalendar.DATE, 3);
+        start = calendar.getTime();
+        end = start;
+        event = getNewEvent("All-day event", start, end);
+        event.setAllDay(true);
+        event.setDescription("Some description.");
+        event.setStyleName("color3");
+        dataSource.addEvent(event);
+
+        // Add a second allday event
+        calendar.add(GregorianCalendar.DATE, 1);
+        start = calendar.getTime();
+        end = start;
+        event = getNewEvent("Second all-day event", start, end);
+        event.setAllDay(true);
+        event.setDescription("Some description.");
+        event.setStyleName("color2");
+        dataSource.addEvent(event);
+
+        calendar.add(GregorianCalendar.DATE, -3);
+        calendar.set(GregorianCalendar.HOUR_OF_DAY, 9);
+        calendar.set(GregorianCalendar.MINUTE, 30);
+        start = calendar.getTime();
+        calendar.add(GregorianCalendar.HOUR_OF_DAY, 5);
+        calendar.set(GregorianCalendar.MINUTE, 0);
+        end = calendar.getTime();
+        event = getNewEvent("Appointment", start, end);
+        event.setWhere("Office");
+        event.setStyleName("color1");
+        event.setDescription("A longer description, which should display correctly.");
+        dataSource.addEvent(event);
+
+        calendar.add(GregorianCalendar.DATE, 1);
+        calendar.set(GregorianCalendar.HOUR_OF_DAY, 11);
+        calendar.set(GregorianCalendar.MINUTE, 0);
+        start = calendar.getTime();
+        calendar.add(GregorianCalendar.HOUR_OF_DAY, 8);
+        end = calendar.getTime();
+        event = getNewEvent("Training", start, end);
+        event.setStyleName("color2");
+        dataSource.addEvent(event);
+
+        calendar.add(GregorianCalendar.DATE, 4);
+        calendar.set(GregorianCalendar.HOUR_OF_DAY, 9);
+        calendar.set(GregorianCalendar.MINUTE, 0);
+        start = calendar.getTime();
+        calendar.add(GregorianCalendar.HOUR_OF_DAY, 9);
+        end = calendar.getTime();
+        event = getNewEvent("Free time", start, end);
+        dataSource.addEvent(event);
+
+        calendar.setTime(originalDate);
+    }
+
+    private void initLayoutContent() {
+        initNavigationButtons();
+        initHideWeekEndButton();
+        initReadOnlyButton();
+        initDisabledButton();
+        initAddNewEventButton();
+
+        HorizontalLayout hl = new HorizontalLayout();
+        hl.setWidth("100%");
+        hl.setSpacing(true);
+        hl.addComponent(prevButton);
+        hl.addComponent(captionLabel);
+
+        CssLayout group = new CssLayout();
+        group.addStyleName("v-component-group");
+        group.addComponent(dayButton);
+        group.addComponent(weekButton);
+        group.addComponent(monthButton);
+        hl.addComponent(group);
+
+        hl.addComponent(nextButton);
+        hl.setComponentAlignment(prevButton, Alignment.MIDDLE_LEFT);
+        hl.setComponentAlignment(captionLabel, Alignment.MIDDLE_CENTER);
+        hl.setComponentAlignment(group, Alignment.MIDDLE_CENTER);
+        hl.setComponentAlignment(nextButton, Alignment.MIDDLE_RIGHT);
+
+        // monthButton.setVisible(viewMode == Mode.WEEK);
+        // weekButton.setVisible(viewMode == Mode.DAY);
+
+        HorizontalLayout controlPanel = new HorizontalLayout();
+        controlPanel.setSpacing(true);
+        controlPanel.setWidth("100%");
+        controlPanel.addComponent(localeSelect);
+        controlPanel.addComponent(timeZoneSelect);
+        controlPanel.addComponent(formatSelect);
+        controlPanel.addComponent(hideWeekendsButton);
+        controlPanel.addComponent(readOnlyButton);
+        controlPanel.addComponent(disabledButton);
+        controlPanel.addComponent(addNewEvent);
+
+        controlPanel.setComponentAlignment(timeZoneSelect,
+                Alignment.MIDDLE_LEFT);
+        controlPanel.setComponentAlignment(formatSelect, Alignment.MIDDLE_LEFT);
+        controlPanel.setComponentAlignment(localeSelect, Alignment.MIDDLE_LEFT);
+        controlPanel.setComponentAlignment(hideWeekendsButton,
+                Alignment.MIDDLE_LEFT);
+        controlPanel.setComponentAlignment(readOnlyButton,
+                Alignment.MIDDLE_LEFT);
+        controlPanel.setComponentAlignment(disabledButton,
+                Alignment.MIDDLE_LEFT);
+        controlPanel.setComponentAlignment(addNewEvent, Alignment.MIDDLE_LEFT);
+
+        addComponent(controlPanel);
+        addComponent(hl);
+        addComponent(calendarComponent);
+        setRowExpandRatio(getRows() - 1, 1.0f);
+    }
+
+    private void initNavigationButtons() {
+        monthButton = new Button("Month", new ClickListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                switchToMonthView();
+            }
+        });
+
+        weekButton = new Button("Week", new ClickListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                // simulate week click
+                WeekClickHandler handler = (WeekClickHandler) calendarComponent
+                        .getHandler(WeekClick.EVENT_ID);
+                handler.weekClick(new WeekClick(calendarComponent, calendar
+                        .get(GregorianCalendar.WEEK_OF_YEAR), calendar
+                        .get(GregorianCalendar.YEAR)));
+            }
+        });
+
+        dayButton = new Button("Day", new ClickListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                // simulate day click
+                BasicDateClickHandler handler = (BasicDateClickHandler) calendarComponent
+                        .getHandler(DateClickEvent.EVENT_ID);
+                handler.dateClick(new DateClickEvent(calendarComponent,
+                        calendar.getTime()));
+            }
+        });
+
+        nextButton = new Button("Next", new Button.ClickListener() {
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                handleNextButtonClick();
+            }
+        });
+
+        prevButton = new Button("Prev", new Button.ClickListener() {
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                handlePreviousButtonClick();
+            }
+        });
+    }
+
+    private void initHideWeekEndButton() {
+        hideWeekendsButton = new CheckBox("Hide weekends");
+        hideWeekendsButton.setImmediate(true);
+        hideWeekendsButton
+                .addValueChangeListener(new Property.ValueChangeListener() {
+
+                    private static final long serialVersionUID = 1L;
+
+                    @Override
+                    public void valueChange(ValueChangeEvent event) {
+                        setWeekendsHidden(hideWeekendsButton.getValue());
+                    }
+                });
+    }
+
+    private void setWeekendsHidden(boolean weekendsHidden) {
+        if (weekendsHidden) {
+            int firstToShow = (GregorianCalendar.MONDAY - calendar
+                    .getFirstDayOfWeek()) % 7;
+            calendarComponent.setFirstVisibleDayOfWeek(firstToShow + 1);
+            calendarComponent.setLastVisibleDayOfWeek(firstToShow + 5);
+        } else {
+            calendarComponent.setFirstVisibleDayOfWeek(1);
+            calendarComponent.setLastVisibleDayOfWeek(7);
+        }
+
+    }
+
+    private void initReadOnlyButton() {
+        readOnlyButton = new CheckBox("Read-only mode");
+        readOnlyButton.setImmediate(true);
+        readOnlyButton
+                .addValueChangeListener(new Property.ValueChangeListener() {
+
+                    private static final long serialVersionUID = 1L;
+
+                    @Override
+                    public void valueChange(ValueChangeEvent event) {
+                        calendarComponent.setReadOnly(readOnlyButton.getValue());
+                    }
+                });
+    }
+
+    private void initDisabledButton() {
+        disabledButton = new CheckBox("Disabled");
+        disabledButton.setImmediate(true);
+        disabledButton
+                .addValueChangeListener(new Property.ValueChangeListener() {
+
+                    private static final long serialVersionUID = 1L;
+
+                    @Override
+                    public void valueChange(ValueChangeEvent event) {
+                        calendarComponent.setEnabled(!disabledButton.getValue());
+                    }
+                });
+    }
+
+    public void initAddNewEventButton() {
+        addNewEvent = new Button("Add new event");
+        addNewEvent.addClickListener(new Button.ClickListener() {
+
+            private static final long serialVersionUID = -8307244759142541067L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                Date start = getToday();
+                start.setHours(0);
+                start.setMinutes(0);
+                start.setSeconds(0);
+
+                Date end = getEndOfDay(calendar, start);
+
+                showEventPopup(createNewEvent(start, end), true);
+            }
+        });
+    }
+
+    private void initFormFields(Layout formLayout,
+            Class<? extends CalendarEvent> eventClass) {
+
+        startDateField = createDateField("Start date");
+        endDateField = createDateField("End date");
+
+        final CheckBox allDayField = createCheckBox("All-day");
+        allDayField.addValueChangeListener(new Property.ValueChangeListener() {
+
+            private static final long serialVersionUID = -7104996493482558021L;
+
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                Object value = event.getProperty().getValue();
+                if (value instanceof Boolean && Boolean.TRUE.equals(value)) {
+                    setFormDateResolution(Resolution.DAY);
+
+                } else {
+                    setFormDateResolution(Resolution.MINUTE);
+                }
+            }
+
+        });
+
+        captionField = createTextField("Caption");
+        captionField.setInputPrompt("Event name");
+        captionField.setRequired(true);
+        final TextField whereField = createTextField("Where");
+        whereField.setInputPrompt("Address or location");
+        final TextArea descriptionField = createTextArea("Description");
+        descriptionField.setInputPrompt("Describe the event");
+        descriptionField.setRows(3);
+        // descriptionField.setRequired(true);
+
+        final ComboBox styleNameField = createStyleNameComboBox();
+        styleNameField.setInputPrompt("Choose calendar");
+        styleNameField.setTextInputAllowed(false);
+
+        formLayout.addComponent(startDateField);
+        // startDateField.setRequired(true);
+        formLayout.addComponent(endDateField);
+        formLayout.addComponent(allDayField);
+        formLayout.addComponent(captionField);
+        // captionField.setComponentError(new UserError("Testing error"));
+        if (eventClass == CalendarTestEvent.class) {
+            formLayout.addComponent(whereField);
+        }
+        formLayout.addComponent(descriptionField);
+        formLayout.addComponent(styleNameField);
+
+        scheduleEventFieldGroup.bind(startDateField, "start");
+        scheduleEventFieldGroup.bind(endDateField, "end");
+        scheduleEventFieldGroup.bind(captionField, "caption");
+        scheduleEventFieldGroup.bind(descriptionField, "description");
+        if (eventClass == CalendarTestEvent.class) {
+            scheduleEventFieldGroup.bind(whereField, "where");
+        }
+        scheduleEventFieldGroup.bind(styleNameField, "styleName");
+        scheduleEventFieldGroup.bind(allDayField, "allDay");
+    }
+
+    private CheckBox createCheckBox(String caption) {
+        CheckBox cb = new CheckBox(caption);
+        cb.setImmediate(true);
+        return cb;
+    }
+
+    private TextField createTextField(String caption) {
+        TextField f = new TextField(caption);
+        f.setNullRepresentation("");
+        return f;
+    }
+
+    private TextArea createTextArea(String caption) {
+        TextArea f = new TextArea(caption);
+        f.setNullRepresentation("");
+        return f;
+    }
+
+    private DateField createDateField(String caption) {
+        DateField f = new DateField(caption);
+        if (useSecondResolution) {
+            f.setResolution(Resolution.SECOND);
+        } else {
+            f.setResolution(Resolution.MINUTE);
+        }
+        return f;
+    }
+
+    private ComboBox createStyleNameComboBox() {
+        ComboBox s = new ComboBox("Calendar");
+        s.addContainerProperty("c", String.class, "");
+        s.setItemCaptionPropertyId("c");
+        Item i = s.addItem("color1");
+        i.getItemProperty("c").setValue("Work");
+        i = s.addItem("color2");
+        i.getItemProperty("c").setValue("Personal");
+        i = s.addItem("color3");
+        i.getItemProperty("c").setValue("Family");
+        i = s.addItem("color4");
+        i.getItemProperty("c").setValue("Hobbies");
+        return s;
+    }
+
+    private void initCalendar() {
+        dataSource = new BasicEventProvider();
+
+        calendarComponent = new Calendar(dataSource);
+        calendarComponent.setLocale(getLocale());
+        calendarComponent.setImmediate(true);
+
+        if (calendarWidth != null || calendarHeight != null) {
+            if (calendarHeight != null) {
+                calendarComponent.setHeight(calendarHeight);
+            }
+            if (calendarWidth != null) {
+                calendarComponent.setWidth(calendarWidth);
+            }
+        } else {
+            calendarComponent.setSizeFull();
+        }
+
+        if (firstHour != null && lastHour != null) {
+            calendarComponent.setFirstVisibleHourOfDay(firstHour);
+            calendarComponent.setLastVisibleHourOfDay(lastHour);
+        }
+
+        if (firstDay != null && lastDay != null) {
+            calendarComponent.setFirstVisibleDayOfWeek(firstDay);
+            calendarComponent.setLastVisibleDayOfWeek(lastDay);
+        }
+
+        Date today = getToday();
+        calendar = new GregorianCalendar(getLocale());
+        calendar.setTime(today);
+        calendarComponent.getInternalCalendar().setTime(today);
+
+        int rollAmount = calendar.get(GregorianCalendar.DAY_OF_MONTH) - 1;
+        calendar.add(GregorianCalendar.DAY_OF_MONTH, -rollAmount);
+        currentMonthsFirstDate = calendar.getTime();
+
+        updateCaptionLabel();
+
+        if (!showWeeklyView) {
+            // resetTime(false);
+            // currentMonthsFirstDate = calendar.getTime();
+            // calendarComponent.setStartDate(currentMonthsFirstDate);
+            // calendar.add(GregorianCalendar.MONTH, 1);
+            // calendar.add(GregorianCalendar.DATE, -1);
+            // calendarComponent.setEndDate(calendar.getTime());
+        }
+
+        addCalendarEventListeners();
+    }
+
+    private Date getToday() {
+        if (testBench) {
+            GregorianCalendar testDate = new GregorianCalendar();
+            testDate.set(GregorianCalendar.YEAR, 2000);
+            testDate.set(GregorianCalendar.MONTH, 0);
+            testDate.set(GregorianCalendar.DATE, 10);
+            testDate.set(GregorianCalendar.HOUR_OF_DAY, 0);
+            testDate.set(GregorianCalendar.MINUTE, 0);
+            testDate.set(GregorianCalendar.SECOND, 0);
+            testDate.set(GregorianCalendar.MILLISECOND, 0);
+            return testDate.getTime();
+        }
+        return new Date();
+    }
+
+    @SuppressWarnings("serial")
+    private void addCalendarEventListeners() {
+        // Register week clicks by changing the schedules start and end dates.
+        calendarComponent.setHandler(new BasicWeekClickHandler() {
+
+            @Override
+            public void weekClick(WeekClick event) {
+                // let BasicWeekClickHandler handle calendar dates, and update
+                // only the other parts of UI here
+                super.weekClick(event);
+                updateCaptionLabel();
+                switchToWeekView();
+            }
+        });
+
+        calendarComponent.setHandler(new EventClickHandler() {
+
+            @Override
+            public void eventClick(EventClick event) {
+                showEventPopup(event.getCalendarEvent(), false);
+            }
+        });
+
+        calendarComponent.setHandler(new BasicDateClickHandler() {
+
+            @Override
+            public void dateClick(DateClickEvent event) {
+                // let BasicDateClickHandler handle calendar dates, and update
+                // only the other parts of UI here
+                super.dateClick(event);
+                switchToDayView();
+            }
+        });
+
+        calendarComponent.setHandler(new RangeSelectHandler() {
+
+            @Override
+            public void rangeSelect(RangeSelectEvent event) {
+                handleRangeSelect(event);
+            }
+        });
+    }
+
+    private ComboBox createTimeZoneSelect() {
+        ComboBox s = new ComboBox("Timezone");
+        s.addContainerProperty("caption", String.class, "");
+        s.setItemCaptionPropertyId("caption");
+        s.setFilteringMode(FilteringMode.CONTAINS);
+
+        Item i = s.addItem(DEFAULT_ITEMID);
+        i.getItemProperty("caption").setValue(
+                "Default (" + TimeZone.getDefault().getID() + ")");
+        for (String id : TimeZone.getAvailableIDs()) {
+            if (!s.containsId(id)) {
+                i = s.addItem(id);
+                i.getItemProperty("caption").setValue(id);
+            }
+        }
+
+        if (testBench) {
+            s.select("America/New_York");
+        } else {
+            s.select(DEFAULT_ITEMID);
+        }
+        s.setImmediate(true);
+        s.addValueChangeListener(new ValueChangeListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+
+                updateCalendarTimeZone(event.getProperty().getValue());
+            }
+        });
+
+        return s;
+    }
+
+    private ComboBox createCalendarFormatSelect() {
+        ComboBox s = new ComboBox("Calendar format");
+        s.addContainerProperty("caption", String.class, "");
+        s.setItemCaptionPropertyId("caption");
+
+        Item i = s.addItem(DEFAULT_ITEMID);
+        i.getItemProperty("caption").setValue("Default by locale");
+        i = s.addItem(TimeFormat.Format12H);
+        i.getItemProperty("caption").setValue("12H");
+        i = s.addItem(TimeFormat.Format24H);
+        i.getItemProperty("caption").setValue("24H");
+
+        s.select(DEFAULT_ITEMID);
+        s.setImmediate(true);
+        s.addValueChangeListener(new ValueChangeListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                updateCalendarFormat(event.getProperty().getValue());
+            }
+        });
+
+        return s;
+    }
+
+    private ComboBox createLocaleSelect() {
+        ComboBox s = new ComboBox("Locale");
+        s.addContainerProperty("caption", String.class, "");
+        s.setItemCaptionPropertyId("caption");
+        s.setFilteringMode(FilteringMode.CONTAINS);
+
+        for (Locale l : Locale.getAvailableLocales()) {
+            if (!s.containsId(l)) {
+                Item i = s.addItem(l);
+                i.getItemProperty("caption").setValue(getLocaleItemCaption(l));
+            }
+        }
+
+        s.select(getLocale());
+        s.setImmediate(true);
+        s.addValueChangeListener(new ValueChangeListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                updateCalendarLocale((Locale) event.getProperty().getValue());
+            }
+        });
+
+        return s;
+    }
+
+    private void updateCalendarTimeZone(Object timezoneId) {
+        TimeZone tz = null;
+        if (!DEFAULT_ITEMID.equals(timezoneId)) {
+            tz = TimeZone.getTimeZone((String) timezoneId);
+        }
+
+        // remember the week that was showing, so we can re-set it later
+        Date startDate = calendarComponent.getStartDate();
+        calendar.setTime(startDate);
+        int weekNumber = calendar.get(java.util.Calendar.WEEK_OF_YEAR);
+        calendarComponent.setTimeZone(tz);
+        calendar.setTimeZone(calendarComponent.getTimeZone());
+
+        if (viewMode == Mode.WEEK) {
+            calendar.set(java.util.Calendar.WEEK_OF_YEAR, weekNumber);
+            calendar.set(java.util.Calendar.DAY_OF_WEEK,
+                    calendar.getFirstDayOfWeek());
+
+            calendarComponent.setStartDate(calendar.getTime());
+            calendar.add(java.util.Calendar.DATE, 6);
+            calendarComponent.setEndDate(calendar.getTime());
+        }
+    }
+
+    private void updateCalendarFormat(Object format) {
+        TimeFormat calFormat = null;
+        if (format instanceof TimeFormat) {
+            calFormat = (TimeFormat) format;
+        }
+
+        calendarComponent.setTimeFormat(calFormat);
+    }
+
+    private String getLocaleItemCaption(Locale l) {
+        String country = l.getDisplayCountry(getLocale());
+        String language = l.getDisplayLanguage(getLocale());
+        StringBuilder caption = new StringBuilder(country);
+        if (caption.length() != 0) {
+            caption.append(", ");
+        }
+        caption.append(language);
+        return caption.toString();
+    }
+
+    private void updateCalendarLocale(Locale l) {
+        int oldFirstDayOfWeek = calendar.getFirstDayOfWeek();
+        setLocale(l);
+        calendarComponent.setLocale(l);
+        calendar = new GregorianCalendar(l);
+        int newFirstDayOfWeek = calendar.getFirstDayOfWeek();
+
+        // we are showing 1 week, and the first day of the week has changed
+        // update start and end dates so that the same week is showing
+        if (viewMode == Mode.WEEK && oldFirstDayOfWeek != newFirstDayOfWeek) {
+            calendar.setTime(calendarComponent.getStartDate());
+            calendar.add(java.util.Calendar.DAY_OF_WEEK, 2);
+            // starting at the beginning of the week
+            calendar.set(GregorianCalendar.DAY_OF_WEEK, newFirstDayOfWeek);
+            Date start = calendar.getTime();
+
+            // ending at the end of the week
+            calendar.add(GregorianCalendar.DATE, 6);
+            Date end = calendar.getTime();
+
+            calendarComponent.setStartDate(start);
+            calendarComponent.setEndDate(end);
+
+            // Week days depend on locale so this must be refreshed
+            setWeekendsHidden(hideWeekendsButton.getValue());
+        }
+
+    }
+
+    private void handleNextButtonClick() {
+        switch (viewMode) {
+        case MONTH:
+            nextMonth();
+            break;
+        case WEEK:
+            nextWeek();
+            break;
+        case DAY:
+            nextDay();
+            break;
+        }
+    }
+
+    private void handlePreviousButtonClick() {
+        switch (viewMode) {
+        case MONTH:
+            previousMonth();
+            break;
+        case WEEK:
+            previousWeek();
+            break;
+        case DAY:
+            previousDay();
+            break;
+        }
+    }
+
+    private void handleRangeSelect(RangeSelectEvent event) {
+        Date start = event.getStart();
+        Date end = event.getEnd();
+
+        /*
+         * If a range of dates is selected in monthly mode, we want it to end at
+         * the end of the last day.
+         */
+        if (event.isMonthlyMode()) {
+            end = getEndOfDay(calendar, end);
+        }
+
+        showEventPopup(createNewEvent(start, end), true);
+    }
+
+    private void showEventPopup(CalendarEvent event, boolean newEvent) {
+        if (event == null) {
+            return;
+        }
+
+        updateCalendarEventPopup(newEvent);
+        updateCalendarEventForm(event);
+        // TODO this only works the first time
+        captionField.focus();
+
+        if (!getUI().getWindows().contains(scheduleEventPopup)) {
+            getUI().addWindow(scheduleEventPopup);
+        }
+
+    }
+
+    /* Initializes a modal window to edit schedule event. */
+    private void createCalendarEventPopup() {
+        VerticalLayout layout = new VerticalLayout();
+        // layout.setMargin(true);
+        layout.setSpacing(true);
+
+        scheduleEventPopup = new Window(null, layout);
+        scheduleEventPopup.setWidth("300px");
+        scheduleEventPopup.setModal(true);
+        scheduleEventPopup.center();
+
+        scheduleEventFieldLayout.addStyleName("light");
+        scheduleEventFieldLayout.setMargin(false);
+        layout.addComponent(scheduleEventFieldLayout);
+
+        applyEventButton = new Button("Apply", new ClickListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                try {
+                    commitCalendarEvent();
+                } catch (CommitException e) {
+                    e.printStackTrace();
+                }
+            }
+        });
+        applyEventButton.addStyleName("primary");
+        Button cancel = new Button("Cancel", new ClickListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                discardCalendarEvent();
+            }
+        });
+        deleteEventButton = new Button("Delete", new ClickListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                deleteCalendarEvent();
+            }
+        });
+        deleteEventButton.addStyleName("borderless");
+        scheduleEventPopup.addCloseListener(new Window.CloseListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void windowClose(Window.CloseEvent e) {
+                discardCalendarEvent();
+            }
+        });
+
+        HorizontalLayout buttons = new HorizontalLayout();
+        buttons.addStyleName("v-window-bottom-toolbar");
+        buttons.setWidth("100%");
+        buttons.setSpacing(true);
+        buttons.addComponent(deleteEventButton);
+        buttons.addComponent(applyEventButton);
+        buttons.setExpandRatio(applyEventButton, 1);
+        buttons.setComponentAlignment(applyEventButton, Alignment.TOP_RIGHT);
+        buttons.addComponent(cancel);
+        layout.addComponent(buttons);
+
+    }
+
+    private void updateCalendarEventPopup(boolean newEvent) {
+        if (scheduleEventPopup == null) {
+            createCalendarEventPopup();
+        }
+
+        if (newEvent) {
+            scheduleEventPopup.setCaption("New event");
+        } else {
+            scheduleEventPopup.setCaption("Edit event");
+        }
+
+        deleteEventButton.setVisible(!newEvent);
+        deleteEventButton.setEnabled(!calendarComponent.isReadOnly());
+        applyEventButton.setEnabled(!calendarComponent.isReadOnly());
+    }
+
+    private void updateCalendarEventForm(CalendarEvent event) {
+        BeanItem<CalendarEvent> item = new BeanItem<CalendarEvent>(event);
+        scheduleEventFieldLayout.removeAllComponents();
+        scheduleEventFieldGroup = new FieldGroup();
+        initFormFields(scheduleEventFieldLayout, event.getClass());
+        scheduleEventFieldGroup.setBuffered(true);
+        scheduleEventFieldGroup.setItemDataSource(item);
+    }
+
+    private void setFormDateResolution(Resolution resolution) {
+        if (startDateField != null && endDateField != null) {
+            startDateField.setResolution(resolution);
+            endDateField.setResolution(resolution);
+        }
+    }
+
+    private CalendarEvent createNewEvent(Date startDate, Date endDate) {
+        BasicEvent event = new BasicEvent();
+        event.setCaption("");
+        event.setStart(startDate);
+        event.setEnd(endDate);
+        event.setStyleName("color1");
+        return event;
+    }
+
+    /* Removes the event from the data source and fires change event. */
+    private void deleteCalendarEvent() {
+        BasicEvent event = getFormCalendarEvent();
+        if (dataSource.containsEvent(event)) {
+            dataSource.removeEvent(event);
+        }
+        getUI().removeWindow(scheduleEventPopup);
+    }
+
+    /* Adds/updates the event in the data source and fires change event. */
+    private void commitCalendarEvent() throws CommitException {
+        scheduleEventFieldGroup.commit();
+        BasicEvent event = getFormCalendarEvent();
+        if (event.getEnd() == null) {
+            event.setEnd(event.getStart());
+        }
+        if (!dataSource.containsEvent(event)) {
+            dataSource.addEvent(event);
+        }
+
+        getUI().removeWindow(scheduleEventPopup);
+    }
+
+    private void discardCalendarEvent() {
+        scheduleEventFieldGroup.discard();
+        getUI().removeWindow(scheduleEventPopup);
+    }
+
+    @SuppressWarnings("unchecked")
+    private BasicEvent getFormCalendarEvent() {
+        BeanItem<CalendarEvent> item = (BeanItem<CalendarEvent>) scheduleEventFieldGroup
+                .getItemDataSource();
+        CalendarEvent event = item.getBean();
+        return (BasicEvent) event;
+    }
+
+    private void nextMonth() {
+        rollMonth(1);
+    }
+
+    private void previousMonth() {
+        rollMonth(-1);
+    }
+
+    private void nextWeek() {
+        rollWeek(1);
+    }
+
+    private void previousWeek() {
+        rollWeek(-1);
+    }
+
+    private void nextDay() {
+        rollDate(1);
+    }
+
+    private void previousDay() {
+        rollDate(-1);
+    }
+
+    private void rollMonth(int direction) {
+        calendar.setTime(currentMonthsFirstDate);
+        calendar.add(GregorianCalendar.MONTH, direction);
+        resetTime(false);
+        currentMonthsFirstDate = calendar.getTime();
+        calendarComponent.setStartDate(currentMonthsFirstDate);
+
+        updateCaptionLabel();
+
+        calendar.add(GregorianCalendar.MONTH, 1);
+        calendar.add(GregorianCalendar.DATE, -1);
+        resetCalendarTime(true);
+    }
+
+    private void rollWeek(int direction) {
+        calendar.add(GregorianCalendar.WEEK_OF_YEAR, direction);
+        calendar.set(GregorianCalendar.DAY_OF_WEEK,
+                calendar.getFirstDayOfWeek());
+        resetCalendarTime(false);
+        resetTime(true);
+        calendar.add(GregorianCalendar.DATE, 6);
+        calendarComponent.setEndDate(calendar.getTime());
+    }
+
+    private void rollDate(int direction) {
+        calendar.add(GregorianCalendar.DATE, direction);
+        resetCalendarTime(false);
+        resetCalendarTime(true);
+    }
+
+    private void updateCaptionLabel() {
+        DateFormatSymbols s = new DateFormatSymbols(getLocale());
+        String month = s.getShortMonths()[calendar.get(GregorianCalendar.MONTH)];
+        captionLabel.setValue(month + " "
+                + calendar.get(GregorianCalendar.YEAR));
+    }
+
+    private CalendarTestEvent getNewEvent(String caption, Date start, Date end) {
+        CalendarTestEvent event = new CalendarTestEvent();
+        event.setCaption(caption);
+        event.setStart(start);
+        event.setEnd(end);
+
+        return event;
+    }
+
+    /*
+     * Switch the view to week view.
+     */
+    public void switchToWeekView() {
+        viewMode = Mode.WEEK;
+        // weekButton.setVisible(false);
+        // monthButton.setVisible(true);
+    }
+
+    /*
+     * Switch the Calendar component's start and end date range to the target
+     * month only. (sample range: 01.01.2010 00:00.000 - 31.01.2010 23:59.999)
+     */
+    public void switchToMonthView() {
+        viewMode = Mode.MONTH;
+        // monthButton.setVisible(false);
+        // weekButton.setVisible(false);
+
+        int rollAmount = calendar.get(GregorianCalendar.DAY_OF_MONTH) - 1;
+        calendar.add(GregorianCalendar.DAY_OF_MONTH, -rollAmount);
+
+        calendarComponent.setStartDate(calendar.getTime());
+
+        updateCaptionLabel();
+
+        calendar.add(GregorianCalendar.MONTH, 1);
+        calendar.add(GregorianCalendar.DATE, -1);
+
+        calendarComponent.setEndDate(calendar.getTime());
+
+        calendar.setTime(getToday());
+        // resetCalendarTime(true);
+    }
+
+    /*
+     * Switch to day view (week view with a single day visible).
+     */
+    public void switchToDayView() {
+        viewMode = Mode.DAY;
+        // monthButton.setVisible(true);
+        // weekButton.setVisible(true);
+    }
+
+    private void resetCalendarTime(boolean resetEndTime) {
+        resetTime(resetEndTime);
+        if (resetEndTime) {
+            calendarComponent.setEndDate(calendar.getTime());
+        } else {
+            calendarComponent.setStartDate(calendar.getTime());
+            updateCaptionLabel();
+        }
+    }
+
+    /*
+     * Resets the calendar time (hour, minute second and millisecond) either to
+     * zero or maximum value.
+     */
+    private void resetTime(boolean max) {
+        if (max) {
+            calendar.set(GregorianCalendar.HOUR_OF_DAY,
+                    calendar.getMaximum(GregorianCalendar.HOUR_OF_DAY));
+            calendar.set(GregorianCalendar.MINUTE,
+                    calendar.getMaximum(GregorianCalendar.MINUTE));
+            calendar.set(GregorianCalendar.SECOND,
+                    calendar.getMaximum(GregorianCalendar.SECOND));
+            calendar.set(GregorianCalendar.MILLISECOND,
+                    calendar.getMaximum(GregorianCalendar.MILLISECOND));
+        } else {
+            calendar.set(GregorianCalendar.HOUR_OF_DAY, 0);
+            calendar.set(GregorianCalendar.MINUTE, 0);
+            calendar.set(GregorianCalendar.SECOND, 0);
+            calendar.set(GregorianCalendar.MILLISECOND, 0);
+        }
+    }
+
+    private static Date getEndOfDay(java.util.Calendar calendar, Date date) {
+        java.util.Calendar calendarClone = (java.util.Calendar) calendar
+                .clone();
+
+        calendarClone.setTime(date);
+        calendarClone.set(java.util.Calendar.MILLISECOND,
+                calendarClone.getActualMaximum(java.util.Calendar.MILLISECOND));
+        calendarClone.set(java.util.Calendar.SECOND,
+                calendarClone.getActualMaximum(java.util.Calendar.SECOND));
+        calendarClone.set(java.util.Calendar.MINUTE,
+                calendarClone.getActualMaximum(java.util.Calendar.MINUTE));
+        calendarClone.set(java.util.Calendar.HOUR,
+                calendarClone.getActualMaximum(java.util.Calendar.HOUR));
+        calendarClone.set(java.util.Calendar.HOUR_OF_DAY,
+                calendarClone.getActualMaximum(java.util.Calendar.HOUR_OF_DAY));
+
+        return calendarClone.getTime();
+    }
+
+    private static Date getStartOfDay(java.util.Calendar calendar, Date date) {
+        java.util.Calendar calendarClone = (java.util.Calendar) calendar
+                .clone();
+
+        calendarClone.setTime(date);
+        calendarClone.set(java.util.Calendar.MILLISECOND, 0);
+        calendarClone.set(java.util.Calendar.SECOND, 0);
+        calendarClone.set(java.util.Calendar.MINUTE, 0);
+        calendarClone.set(java.util.Calendar.HOUR, 0);
+        calendarClone.set(java.util.Calendar.HOUR_OF_DAY, 0);
+
+        return calendarClone.getTime();
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+}
\ No newline at end of file
diff --git a/uitest/src/com/vaadin/tests/themes/valo/CheckBoxes.java b/uitest/src/com/vaadin/tests/themes/valo/CheckBoxes.java
new file mode 100644
index 0000000000..65575c764b
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/CheckBoxes.java
@@ -0,0 +1,146 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.data.Item;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.OptionGroup;
+import com.vaadin.ui.VerticalLayout;
+
+public class CheckBoxes extends VerticalLayout implements View {
+    public CheckBoxes() {
+        setMargin(true);
+
+        Label h1 = new Label("Check Boxes");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        CheckBox check = new CheckBox("Checked", true);
+        row.addComponent(check);
+
+        check = new CheckBox(
+                "Checked, explicit width, so that the caption should wrap",
+                true);
+        row.addComponent(check);
+        check.setWidth("150px");
+
+        check = new CheckBox("Not checked");
+        row.addComponent(check);
+
+        check = new CheckBox(null, true);
+        check.setDescription("No caption");
+        row.addComponent(check);
+
+        check = new CheckBox("Custom color", true);
+        check.addStyleName("color1");
+        row.addComponent(check);
+
+        check = new CheckBox("Custom color", true);
+        check.addStyleName("color2");
+        check.setIcon(TestIcon.get());
+        row.addComponent(check);
+
+        check = new CheckBox("With Icon", true);
+        check.setIcon(TestIcon.get());
+        row.addComponent(check);
+
+        check = new CheckBox();
+        check.setIcon(TestIcon.get(true));
+        row.addComponent(check);
+
+        check = new CheckBox("Small", true);
+        check.addStyleName("small");
+        row.addComponent(check);
+
+        check = new CheckBox("Large", true);
+        check.addStyleName("large");
+        row.addComponent(check);
+
+        h1 = new Label("Option Groups");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        OptionGroup options = new OptionGroup("Choose one, explicit width");
+        options.setWidth("200px");
+        options.addItem("Option One");
+        Item two = options
+                .addItem("Option Two, with a longer caption that should wrap when the components width is explicitly set.");
+        options.addItem("Option Three");
+        options.select("Option One");
+        options.setItemIcon("Option One", TestIcon.get());
+        options.setItemIcon(two, TestIcon.get());
+        options.setItemIcon("Option Three", TestIcon.get(true));
+        row.addComponent(options);
+
+        options = new OptionGroup("Choose many, explicit width");
+        options.setMultiSelect(true);
+        options.setWidth("200px");
+        options.addItem("Option One");
+        two = options
+                .addItem("Option Two, with a longer caption that should wrap when the components width is explicitly set.");
+        options.addItem("Option Three");
+        options.select("Option One");
+        options.setItemIcon("Option One", TestIcon.get());
+        options.setItemIcon(two, TestIcon.get());
+        options.setItemIcon("Option Three", TestIcon.get(true));
+        row.addComponent(options);
+
+        options = new OptionGroup("Horizontal items");
+        options.addStyleName("horizontal");
+        options.addItem("Option One");
+        two = options.addItem("Option Two, with a longer caption");
+        options.addItem("Option Three");
+        options.select("Option One");
+        options.setItemIcon("Option One", TestIcon.get());
+        options.setItemIcon(two, TestIcon.get());
+        options.setItemIcon("Option Three", TestIcon.get());
+        row.addComponent(options);
+
+        options = new OptionGroup("Horizontal items, explicit width");
+        options.setMultiSelect(true);
+        options.setWidth("500px");
+        options.addStyleName("horizontal");
+        options.addItem("Option One");
+        two = options.addItem("Option Two, with a longer caption");
+        options.addItem("Option Three");
+        options.select("Option One");
+        options.setItemIcon("Option One", TestIcon.get());
+        options.setItemIcon(two, TestIcon.get());
+        options.setItemIcon("Option Three", TestIcon.get());
+        row.addComponent(options);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ColorPickers.java b/uitest/src/com/vaadin/tests/themes/valo/ColorPickers.java
new file mode 100644
index 0000000000..b841b0b116
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/ColorPickers.java
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.shared.ui.colorpicker.Color;
+import com.vaadin.ui.AbstractColorPicker.PopupStyle;
+import com.vaadin.ui.ColorPicker;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+
+public class ColorPickers extends VerticalLayout implements View {
+    public ColorPickers() {
+        setMargin(true);
+
+        Label h1 = new Label("Color Pickers");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        ColorPicker cp = new ColorPicker();
+        cp.setDefaultCaptionEnabled(true);
+        cp.setIcon(TestIcon.get());
+        cp.setColor(new Color(138, 73, 115));
+        row.addComponent(cp);
+
+        cp = new ColorPicker();
+        cp.setPopupStyle(PopupStyle.POPUP_SIMPLE);
+        cp.setTextfieldVisibility(true);
+        row.addComponent(cp);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java b/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java
new file mode 100644
index 0000000000..6c1253c841
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java
@@ -0,0 +1,146 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.data.Container;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.server.ThemeResource;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+
+public class ComboBoxes extends VerticalLayout implements View {
+    public ComboBoxes() {
+        setMargin(true);
+
+        Label h1 = new Label("Combo Boxes");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        Container generatedContainer = ValoThemeTest.generateContainer(200,
+                false);
+        ComboBox combo = new ComboBox("Normal");
+        combo.setInputPrompt("You can type here");
+        combo.setContainerDataSource(generatedContainer);
+        combo.setNullSelectionAllowed(false);
+        combo.select(generatedContainer.getItemIds().iterator().next());
+        combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY);
+        combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY);
+        combo.setItemIcon(combo.getItemIds().iterator().next(),
+                new ThemeResource("../runo/icons/16/document.png"));
+        row.addComponent(combo);
+
+        CssLayout group = new CssLayout();
+        group.setCaption("Grouped with a Button");
+        group.addStyleName("v-component-group");
+        row.addComponent(group);
+
+        combo = new ComboBox();
+        combo.setInputPrompt("You can type here");
+        combo.setContainerDataSource(generatedContainer);
+        combo.setNullSelectionAllowed(false);
+        combo.select(generatedContainer.getItemIds().iterator().next());
+        combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY);
+        combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY);
+        combo.setWidth("240px");
+        group.addComponent(combo);
+        Button today = new Button("Do It");
+        group.addComponent(today);
+
+        combo = new ComboBox("Explicit size");
+        combo.setInputPrompt("You can type here");
+        combo.addItem("Option One");
+        combo.addItem("Option Two");
+        combo.addItem("Option Three");
+        combo.setWidth("260px");
+        combo.setHeight("60px");
+        row.addComponent(combo);
+
+        combo = new ComboBox("No text input allowed");
+        combo.setInputPrompt("You can click here");
+        combo.addItem("Option One");
+        combo.addItem("Option Two");
+        combo.addItem("Option Three");
+        combo.setTextInputAllowed(false);
+        combo.setNullSelectionAllowed(false);
+        combo.select("Option One");
+        row.addComponent(combo);
+
+        combo = new ComboBox("Disabled");
+        combo.setInputPrompt("You can't type here");
+        combo.addItem("Option One");
+        combo.addItem("Option Two");
+        combo.addItem("Option Three");
+        combo.setEnabled(false);
+        row.addComponent(combo);
+
+        combo = new ComboBox("Custom color");
+        combo.setInputPrompt("You can type here");
+        combo.setContainerDataSource(generatedContainer);
+        combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY);
+        combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY);
+        combo.addStyleName("color1");
+        row.addComponent(combo);
+
+        combo = new ComboBox("Custom color");
+        combo.setInputPrompt("You can type here");
+        combo.setContainerDataSource(generatedContainer);
+        combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY);
+        combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY);
+        combo.addStyleName("color2");
+        row.addComponent(combo);
+
+        combo = new ComboBox("Custom color");
+        combo.setInputPrompt("You can type here");
+        combo.setContainerDataSource(generatedContainer);
+        combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY);
+        combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY);
+        combo.addStyleName("color3");
+        row.addComponent(combo);
+
+        combo = new ComboBox("Small");
+        combo.setInputPrompt("You can type here");
+        combo.addItem("Option One");
+        combo.addItem("Option Two");
+        combo.addItem("Option Three");
+        combo.addStyleName("small");
+        row.addComponent(combo);
+
+        combo = new ComboBox("Large");
+        combo.setInputPrompt("You can type here");
+        combo.addItem("Option One");
+        combo.addItem("Option Two");
+        combo.addItem("Option Three");
+        combo.addStyleName("large");
+        row.addComponent(combo);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/CommonParts.java b/uitest/src/com/vaadin/tests/themes/valo/CommonParts.java
new file mode 100644
index 0000000000..59b712d8b2
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/CommonParts.java
@@ -0,0 +1,582 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.data.Property.ValueChangeEvent;
+import com.vaadin.data.Property.ValueChangeListener;
+import com.vaadin.event.ShortcutAction.KeyCode;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.server.AbstractErrorMessage;
+import com.vaadin.server.ErrorMessage.ErrorLevel;
+import com.vaadin.server.Page;
+import com.vaadin.server.UserError;
+import com.vaadin.shared.Position;
+import com.vaadin.shared.ui.label.ContentMode;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.GridLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.MenuBar;
+import com.vaadin.ui.MenuBar.Command;
+import com.vaadin.ui.MenuBar.MenuItem;
+import com.vaadin.ui.Notification;
+import com.vaadin.ui.Panel;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.Window;
+import com.vaadin.ui.Window.CloseEvent;
+import com.vaadin.ui.Window.CloseListener;
+
+public class CommonParts extends VerticalLayout implements View {
+    public CommonParts() {
+        setMargin(true);
+
+        Label h1 = new Label("Common UI Elements");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        GridLayout row = new GridLayout(2, 3);
+        row.setWidth("100%");
+        row.setSpacing(true);
+        addComponent(row);
+
+        row.addComponent(loadingIndicators());
+        row.addComponent(notifications(), 1, 0, 1, 2);
+        row.addComponent(tooltips());
+        row.addComponent(windows());
+
+    }
+
+    Panel loadingIndicators() {
+        Panel p = new Panel("Loading Indicator");
+        VerticalLayout content = new VerticalLayout();
+        p.setContent(content);
+        content.setSpacing(true);
+        content.setMargin(true);
+        content.addComponent(new Label(
+                "You can test the loading indicator by pressing the buttons."));
+
+        CssLayout group = new CssLayout();
+        group.setCaption("Show the loading indicator for…");
+        group.addStyleName("v-component-group");
+        content.addComponent(group);
+        Button loading = new Button("0.8");
+        loading.addClickListener(new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                try {
+                    Thread.sleep(800);
+                } catch (InterruptedException e) {
+                }
+            }
+        });
+        group.addComponent(loading);
+
+        Button delay = new Button("3");
+        delay.addClickListener(new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                try {
+                    Thread.sleep(3000);
+                } catch (InterruptedException e) {
+                }
+            }
+        });
+        group.addComponent(delay);
+
+        Button wait = new Button("15");
+        wait.addClickListener(new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                try {
+                    Thread.sleep(15000);
+                } catch (InterruptedException e) {
+                }
+            }
+        });
+        wait.addStyleName("last");
+        group.addComponent(wait);
+        Label label = new Label("&nbsp;&nbsp; seconds", ContentMode.HTML);
+        label.setSizeUndefined();
+        group.addComponent(label);
+
+        Label spinnerDesc = new Label(
+                "The theme also provides a mixin that you can use to include a spinner anywhere in your application. Below is a Label with a custom style name, for which the spinner mixin is added.");
+        spinnerDesc.addStyleName("small");
+        spinnerDesc.setCaption("Spinner");
+        content.addComponent(spinnerDesc);
+
+        Label spinner = new Label();
+        spinner.addStyleName("spinner");
+        content.addComponent(spinner);
+
+        return p;
+    }
+
+    Panel notifications() {
+        Panel p = new Panel("Notifications");
+        VerticalLayout content = new VerticalLayout() {
+            Notification notification = new Notification("");
+            TextField title = new TextField("Title");
+            TextArea description = new TextArea("Description");
+            MenuBar style = new MenuBar();
+            MenuBar type = new MenuBar();
+            String typeString = "";
+            String styleString = "";
+            TextField delay = new TextField();
+            {
+                setSpacing(true);
+                setMargin(true);
+
+                title.setInputPrompt("Title for the notification");
+                title.addValueChangeListener(new ValueChangeListener() {
+                    @Override
+                    public void valueChange(ValueChangeEvent event) {
+                        if (title.getValue() == null
+                                || title.getValue().length() == 0) {
+                            notification.setCaption(null);
+                        } else {
+                            notification.setCaption(title.getValue());
+                        }
+                    }
+                });
+                title.setValue("Notification Title");
+                title.setWidth("100%");
+                addComponent(title);
+
+                description.setInputPrompt("Description for the notification");
+                description.addStyleName("small");
+                description.addValueChangeListener(new ValueChangeListener() {
+                    @Override
+                    public void valueChange(ValueChangeEvent event) {
+                        if (description.getValue() == null
+                                || description.getValue().length() == 0) {
+                            notification.setDescription(null);
+                        } else {
+                            notification.setDescription(description.getValue());
+                        }
+                    }
+                });
+                description
+                        .setValue("A more informative message about what has happened. Nihil hic munitissimus habendi senatus locus, nihil horum? Inmensae subtilitatis, obscuris et malesuada fames. Hi omnes lingua, institutis, legibus inter se differunt.");
+                description.setWidth("100%");
+                addComponent(description);
+
+                Command typeCommand = new Command() {
+                    @Override
+                    public void menuSelected(MenuItem selectedItem) {
+                        if (selectedItem.getText().equals("Humanized")) {
+                            typeString = "";
+                            notification.setStyleName(styleString.trim());
+                        } else {
+                            typeString = selectedItem.getText().toLowerCase();
+                            notification.setStyleName(typeString + " "
+                                    + styleString.trim());
+                        }
+                        for (MenuItem item : type.getItems()) {
+                            item.setChecked(false);
+                        }
+                        selectedItem.setChecked(true);
+                    }
+                };
+
+                type.setCaption("Type");
+                MenuItem humanized = type.addItem("Humanized", typeCommand);
+                humanized.setCheckable(true);
+                humanized.setChecked(true);
+                type.addItem("Tray", typeCommand).setCheckable(true);
+                type.addItem("Warning", typeCommand).setCheckable(true);
+                type.addItem("Error", typeCommand).setCheckable(true);
+                type.addItem("System", typeCommand).setCheckable(true);
+                addComponent(type);
+                type.addStyleName("small");
+
+                Command styleCommand = new Command() {
+                    @Override
+                    public void menuSelected(MenuItem selectedItem) {
+                        styleString = "";
+                        for (MenuItem item : style.getItems()) {
+                            if (item.isChecked()) {
+                                styleString += " "
+                                        + item.getText().toLowerCase();
+                            }
+                        }
+                        if (styleString.trim().length() > 0) {
+                            notification.setStyleName(typeString + " "
+                                    + styleString.trim());
+                        } else if (typeString.length() > 0) {
+                            notification.setStyleName(typeString);
+                        } else {
+                            notification.setStyleName(null);
+                        }
+                    }
+                };
+
+                style.setCaption("Additional style");
+                style.addItem("Success", styleCommand).setCheckable(true);
+                style.addItem("Failure", styleCommand).setCheckable(true);
+                style.addItem("Bar", styleCommand).setCheckable(true);
+                style.addItem("Closable", styleCommand).setCheckable(true);
+                addComponent(style);
+                style.addStyleName("small");
+
+                CssLayout group = new CssLayout();
+                group.setCaption("Fade delay");
+                group.addStyleName("v-component-group");
+                addComponent(group);
+
+                delay.setInputPrompt("Infinite");
+                delay.addStyleName("align-right");
+                delay.addStyleName("small");
+                delay.setWidth("7em");
+                delay.addValueChangeListener(new ValueChangeListener() {
+                    @Override
+                    public void valueChange(ValueChangeEvent event) {
+                        try {
+                            notification.setDelayMsec(Integer.parseInt(delay
+                                    .getValue()));
+                        } catch (Exception e) {
+                            notification.setDelayMsec(-1);
+                            delay.setValue("");
+                        }
+
+                    }
+                });
+                delay.setValue("1000");
+                group.addComponent(delay);
+
+                Button clear = new Button("×", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        delay.setValue("");
+                    }
+                });
+                clear.addStyleName("last");
+                clear.addStyleName("small");
+                clear.addStyleName("icon-only");
+                group.addComponent(clear);
+                group.addComponent(new Label("&nbsp; msec", ContentMode.HTML));
+
+                GridLayout grid = new GridLayout(3, 3);
+                grid.setCaption("Show in position");
+                addComponent(grid);
+                grid.setSpacing(true);
+
+                Button pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.TOP_LEFT);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.TOP_CENTER);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.TOP_RIGHT);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.MIDDLE_LEFT);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.MIDDLE_CENTER);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.MIDDLE_RIGHT);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.BOTTOM_LEFT);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.BOTTOM_CENTER);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.BOTTOM_RIGHT);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+            }
+        };
+        p.setContent(content);
+
+        return p;
+    }
+
+    Panel tooltips() {
+        Panel p = new Panel("Tooltips");
+        HorizontalLayout content = new HorizontalLayout() {
+            {
+                setSpacing(true);
+                setMargin(true);
+                addStyleName("wrapping");
+
+                addComponent(new Label(
+                        "Try out different tooltips/descriptions by hovering over the labels."));
+
+                Label label = new Label("Simple");
+                label.addStyleName("bold");
+                label.setDescription("Simple tooltip message");
+                addComponent(label);
+
+                label = new Label("Long");
+                label.addStyleName("bold");
+                label.setDescription("Long tooltip message. Inmensae subtilitatis, obscuris et malesuada fames. Salutantibus vitae elit libero, a pharetra augue.");
+                addComponent(label);
+
+                label = new Label("HTML tooltip");
+                label.addStyleName("bold");
+                label.setDescription("<div><h1>Ut enim ad minim veniam, quis nostrud exercitation</h1><p><span>Morbi fringilla convallis sapien, id pulvinar odio volutpat.</span> <span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</span> <span>Donec sed odio operae, eu vulputate felis rhoncus.</span> <span>At nos hinc posthac, sitientis piros Afros.</span> <span>Tu quoque, Brute, fili mi, nihil timor populi, nihil!</span></p><p><span>Gallia est omnis divisa in partes tres, quarum.</span> <span>Praeterea iter est quasdam res quas ex communi.</span> <span>Cum ceteris in veneratione tui montes, nascetur mus.</span> <span>Quam temere in vitiis, legem sancimus haerentia.</span> <span>Idque Caesaris facere voluntate liceret: sese habere.</span></p></div>");
+                addComponent(label);
+
+                label = new Label("With an error message");
+                label.addStyleName("bold");
+                label.setDescription("Simple tooltip message");
+                label.setComponentError(new UserError(
+                        "Something terrible has happened"));
+                addComponent(label);
+
+                label = new Label("With a long error message");
+                label.addStyleName("bold");
+                label.setDescription("Simple tooltip message");
+                label.setComponentError(new UserError(
+                        "<h2>Contra legem facit qui id facit quod lex prohibet <span>Tityre, tu patulae recubans sub tegmine fagi  dolor.</span> <span>Tityre, tu patulae recubans sub tegmine fagi  dolor.</span> <span>Prima luce, cum quibus mons aliud  consensu ab eo.</span> <span>Quid securi etiam tamquam eu fugiat nulla pariatur.</span> <span>Fabio vel iudice vincam, sunt in culpa qui officia.</span> <span>Nihil hic munitissimus habendi senatus locus, nihil horum?</span></p><p><span>Plura mihi bona sunt, inclinet, amari petere vellent.</span> <span>Integer legentibus erat a ante historiarum dapibus.</span> <span>Quam diu etiam furor iste tuus nos eludet?</span> <span>Nec dubitamus multa iter quae et nos invenerat.</span> <span>Quisque ut dolor gravida, placerat libero vel, euismod.</span> <span>Quae vero auctorem tractata ab fiducia dicuntur.</span></h2>",
+                        AbstractErrorMessage.ContentMode.HTML,
+                        ErrorLevel.CRITICAL));
+                addComponent(label);
+
+                label = new Label("Error message only");
+                label.addStyleName("bold");
+                label.setComponentError(new UserError(
+                        "Something terrible has happened"));
+                addComponent(label);
+            }
+        };
+        p.setContent(content);
+        return p;
+
+    }
+
+    Panel windows() {
+        Panel p = new Panel("Dialogs");
+        VerticalLayout content = new VerticalLayout() {
+            final Window win = new Window();
+            MenuBar footer = new MenuBar();
+            String prevHeight = "300px";
+            {
+                setSpacing(true);
+                setMargin(true);
+                win.setWidth("320px");
+                win.setHeight(prevHeight);
+                win.setClosable(false);
+                win.setResizable(false);
+                win.setContent(windowContents(true));
+                win.setCloseShortcut(KeyCode.ESCAPE, null);
+
+                Command footerCommand = new Command() {
+                    @Override
+                    public void menuSelected(MenuItem selectedItem) {
+                        if (selectedItem.getText().equals("Fixed")) {
+                            win.setContent(windowContents(true));
+                            win.setHeight(prevHeight);
+                        } else {
+                            win.setContent(windowContents(false));
+                            prevHeight = win.getHeight()
+                                    + win.getHeightUnits().toString();
+                            win.setHeight(null);
+                        }
+                        for (MenuItem item : footer.getItems()) {
+                            item.setChecked(false);
+                        }
+                        selectedItem.setChecked(true);
+                    }
+                };
+
+                footer.setCaption("Footer type");
+                MenuItem fixed = footer.addItem("Fixed", footerCommand);
+                fixed.setCheckable(true);
+                fixed.setChecked(true);
+                footer.addItem("Scroll", footerCommand).setCheckable(true);
+                footer.addStyleName("small");
+                addComponent(footer);
+
+                Command optionsCommand = new Command() {
+                    @Override
+                    public void menuSelected(MenuItem selectedItem) {
+                        if (selectedItem.getText().equals("Caption")) {
+                            win.setCaption(selectedItem.isChecked() ? "Window caption"
+                                    : null);
+                        } else if (selectedItem.getText().equals("Closable")) {
+                            win.setClosable(selectedItem.isChecked());
+                        } else if (selectedItem.getText().equals("Resizable")) {
+                            win.setResizable(selectedItem.isChecked());
+                        } else if (selectedItem.getText().equals("Modal")) {
+                            win.setModal(selectedItem.isChecked());
+                        }
+                    }
+                };
+
+                MenuBar options = new MenuBar();
+                options.setCaption("Options");
+                options.addItem("Caption", optionsCommand).setCheckable(true);
+                options.addItem("Closable", optionsCommand).setCheckable(true);
+                options.addItem("Resizable", optionsCommand).setCheckable(true);
+                options.addItem("Modal", optionsCommand).setCheckable(true);
+                options.addStyleName("small");
+                addComponent(options);
+
+                final Button show = new Button("Open Window",
+                        new ClickListener() {
+                            @Override
+                            public void buttonClick(ClickEvent event) {
+                                getUI().addWindow(win);
+                                win.center();
+                                win.focus();
+                                event.getButton().setEnabled(false);
+                            }
+                        });
+                show.addStyleName("primary");
+                addComponent(show);
+
+                win.addCloseListener(new CloseListener() {
+                    @Override
+                    public void windowClose(CloseEvent e) {
+                        show.setEnabled(true);
+                    }
+                });
+            }
+        };
+        p.setContent(content);
+        return p;
+
+    }
+
+    VerticalLayout windowContents(boolean scrollable) {
+        VerticalLayout root = new VerticalLayout();
+
+        HorizontalLayout footer = new HorizontalLayout();
+        footer.setWidth("100%");
+        footer.setSpacing(true);
+        footer.addStyleName("v-window-bottom-toolbar");
+
+        Label footerText = new Label("Footer text");
+        footerText.setSizeUndefined();
+
+        Button ok = new Button("OK");
+        ok.addStyleName("primary");
+
+        Button cancel = new Button("Cancel");
+
+        footer.addComponents(footerText, ok, cancel);
+        footer.setExpandRatio(footerText, 1);
+
+        Component content = null;
+        if (scrollable) {
+            Panel panel = new Panel();
+            panel.setSizeFull();
+            panel.addStyleName("borderless");
+            // Adds a border between the caption and the content
+            panel.addStyleName("scroll-divider");
+            VerticalLayout l = new VerticalLayout();
+            l.addComponent(new Label(
+                    "<h2>Subtitle</h2><p>Quam diu etiam furor iste tuus nos eludet? Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ut enim ad minim veniam, quis nostrud exercitation. Quae vero auctorem tractata ab fiducia dicuntur.</p><p>Quisque ut dolor gravida, placerat libero vel, euismod. Etiam habebis sem dicantur magna mollis euismod. Nihil hic munitissimus habendi senatus locus, nihil horum? Curabitur est gravida et libero vitae dictum. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.</p>",
+                    ContentMode.HTML));
+            l.setMargin(true);
+            panel.setContent(l);
+            content = panel;
+        } else {
+            content = new Label(
+                    "<h2>Subtitle</h2><p>Normal type for plain text. Etiam at risus et justo dignissim congue. Phasellus laoreet lorem vel dolor tempus vehicula.</p>",
+                    ContentMode.HTML);
+        }
+        root.addComponents(content, footer);
+        if (scrollable) {
+            root.setSizeFull();
+            root.setExpandRatio(content, 1);
+        }
+        root.setMargin(!scrollable);
+
+        return root;
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/DateFields.java b/uitest/src/com/vaadin/tests/themes/valo/DateFields.java
new file mode 100644
index 0000000000..a9a9018dbb
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/DateFields.java
@@ -0,0 +1,172 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import java.util.Date;
+import java.util.Locale;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.shared.ui.datefield.Resolution;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.DateField;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.InlineDateField;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+
+public class DateFields extends VerticalLayout implements View {
+    public DateFields() {
+        setMargin(true);
+
+        Label h1 = new Label("Date Fields");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        DateField date = new DateField("Default resolution");
+        date.setValue(new Date());
+        row.addComponent(date);
+
+        CssLayout group = new CssLayout();
+        group.setCaption("Grouped with a Button");
+        group.addStyleName("v-component-group");
+        row.addComponent(group);
+
+        final DateField date2 = new DateField();
+        group.addComponent(date2);
+
+        Button today = new Button("Today", new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                date2.setValue(new Date());
+            }
+        });
+        group.addComponent(today);
+
+        date = new DateField("Default resolution, explicit size");
+        date.setValue(new Date());
+        row.addComponent(date);
+        date.setWidth("260px");
+        date.setHeight("60px");
+
+        date = new DateField("Second resolution");
+        date.setValue(new Date());
+        date.setResolution(Resolution.SECOND);
+        row.addComponent(date);
+
+        date = new DateField("Minute resolution");
+        date.setValue(new Date());
+        date.setResolution(Resolution.MINUTE);
+        row.addComponent(date);
+
+        date = new DateField("Hour resolution");
+        date.setValue(new Date());
+        date.setResolution(Resolution.HOUR);
+        row.addComponent(date);
+
+        date = new DateField("Disabled");
+        date.setValue(new Date());
+        date.setResolution(Resolution.HOUR);
+        date.setEnabled(false);
+        row.addComponent(date);
+
+        date = new DateField("Day resolution");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        row.addComponent(date);
+
+        date = new DateField("Month resolution");
+        date.setValue(new Date());
+        date.setResolution(Resolution.MONTH);
+        row.addComponent(date);
+
+        date = new DateField("Year resolution");
+        date.setValue(new Date());
+        date.setResolution(Resolution.YEAR);
+        row.addComponent(date);
+
+        date = new DateField("Custom color");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        date.addStyleName("color1");
+        row.addComponent(date);
+
+        date = new DateField("Custom color");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        date.addStyleName("color2");
+        row.addComponent(date);
+
+        date = new DateField("Custom color");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        date.addStyleName("color3");
+        row.addComponent(date);
+
+        date = new DateField("Small");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        date.addStyleName("small");
+        row.addComponent(date);
+
+        date = new DateField("Large");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        date.addStyleName("large");
+        row.addComponent(date);
+
+        date = new DateField("Week numbers");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        date.setLocale(new Locale("fi", "fi"));
+        date.setShowISOWeekNumbers(true);
+        row.addComponent(date);
+
+        date = new DateField("US locale");
+        date.setValue(new Date());
+        date.setResolution(Resolution.SECOND);
+        date.setLocale(new Locale("en", "US"));
+        row.addComponent(date);
+
+        date = new DateField("Custom format");
+        date.setValue(new Date());
+        date.setDateFormat("E dd/MM/yyyy");
+        row.addComponent(date);
+
+        date = new InlineDateField("Date picker");
+        row.addComponent(date);
+
+        date = new InlineDateField("Date picker with week numbers");
+        date.setLocale(new Locale("fi", "fi"));
+        date.setShowISOWeekNumbers(true);
+        row.addComponent(date);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Forms.java b/uitest/src/com/vaadin/tests/themes/valo/Forms.java
new file mode 100644
index 0000000000..da147cbdc9
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Forms.java
@@ -0,0 +1,174 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import java.util.Date;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.server.UserError;
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.DateField;
+import com.vaadin.ui.FormLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.OptionGroup;
+import com.vaadin.ui.RichTextArea;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.VerticalLayout;
+
+/**
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class Forms extends VerticalLayout implements View {
+    public Forms() {
+        setSpacing(true);
+        setMargin(true);
+
+        Label title = new Label("Form");
+        title.addStyleName("h1");
+        addComponent(title);
+
+        final FormLayout form = new FormLayout();
+        form.setMargin(false);
+        form.setWidth("800px");
+        form.addStyleName("light");
+        addComponent(form);
+
+        Label section = new Label("Personal Info");
+        section.addStyleName("h4");
+        form.addComponent(section);
+
+        TextField name = new TextField("Name");
+        name.setValue(ValoThemeTest.nextString(true) + " "
+                + ValoThemeTest.nextString(true));
+        name.setWidth("50%");
+        form.addComponent(name);
+
+        DateField birthday = new DateField("Birthday");
+        birthday.setValue(new Date(80, 0, 31));
+        form.addComponent(birthday);
+
+        TextField username = new TextField("Username");
+        username.setValue(ValoThemeTest.nextString(false)
+                + ValoThemeTest.nextString(false));
+        username.setRequired(true);
+        form.addComponent(username);
+
+        OptionGroup sex = new OptionGroup("Sex");
+        sex.addItem("Female");
+        sex.addItem("Male");
+        sex.select("Male");
+        sex.addStyleName("horizontal");
+        form.addComponent(sex);
+
+        section = new Label("Contact Info");
+        section.addStyleName("h4");
+        form.addComponent(section);
+
+        TextField email = new TextField("Email");
+        email.setValue(ValoThemeTest.nextString(false) + "@"
+                + ValoThemeTest.nextString(false) + ".com");
+        email.setWidth("50%");
+        email.setRequired(true);
+        form.addComponent(email);
+
+        TextField location = new TextField("Location");
+        location.setValue(ValoThemeTest.nextString(true) + ", "
+                + ValoThemeTest.nextString(true));
+        location.setWidth("50%");
+        location.setComponentError(new UserError("This address doesn't exist"));
+        form.addComponent(location);
+
+        TextField phone = new TextField("Phone");
+        phone.setWidth("50%");
+        form.addComponent(phone);
+
+        HorizontalLayout wrap = new HorizontalLayout();
+        wrap.setSpacing(true);
+        wrap.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT);
+        wrap.setCaption("Newsletter");
+        CheckBox newsletter = new CheckBox("Subscribe to newsletter", true);
+        wrap.addComponent(newsletter);
+
+        ComboBox period = new ComboBox();
+        period.setTextInputAllowed(false);
+        period.addItem("Daily");
+        period.addItem("Weekly");
+        period.addItem("Montly");
+        period.setNullSelectionAllowed(false);
+        period.select("Weekly");
+        period.addStyleName("small");
+        period.setWidth("10em");
+        wrap.addComponent(period);
+        form.addComponent(wrap);
+
+        section = new Label("Additional Info");
+        section.addStyleName("h4");
+        form.addComponent(section);
+
+        TextField website = new TextField("Website");
+        website.setInputPrompt("http://");
+        website.setWidth("100%");
+        form.addComponent(website);
+
+        TextArea shortbio = new TextArea("Short Bio");
+        shortbio.setValue("Quis aute iure reprehenderit in voluptate velit esse. Cras mattis iudicium purus sit amet fermentum.");
+        shortbio.setWidth("100%");
+        shortbio.setRows(2);
+        form.addComponent(shortbio);
+
+        RichTextArea bio = new RichTextArea("Bio");
+        bio.setWidth("100%");
+        form.addComponent(bio);
+
+        form.setReadOnly(true);
+
+        Button edit = new Button("Edit", new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                boolean readOnly = form.isReadOnly();
+                if (readOnly) {
+                    form.setReadOnly(false);
+                    form.removeStyleName("light");
+                    event.getButton().setCaption("Save");
+                    event.getButton().addStyleName("primary");
+                } else {
+                    form.setReadOnly(true);
+                    form.addStyleName("light");
+                    event.getButton().setCaption("Edit");
+                    event.getButton().removeStyleName("primary");
+                }
+            }
+        });
+
+        addComponent(edit);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Labels.java b/uitest/src/com/vaadin/tests/themes/valo/Labels.java
new file mode 100644
index 0000000000..08378ad9e6
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Labels.java
@@ -0,0 +1,112 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.shared.ui.MarginInfo;
+import com.vaadin.shared.ui.label.ContentMode;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Panel;
+import com.vaadin.ui.VerticalLayout;
+
+/**
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class Labels extends VerticalLayout implements View {
+    public Labels() {
+        setMargin(true);
+
+        Label h1 = new Label("Labels");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout split = new HorizontalLayout();
+        split.setWidth("100%");
+        addComponent(split);
+
+        VerticalLayout left = new VerticalLayout();
+        left.setMargin(new MarginInfo(false, true, false, false));
+        split.addComponent(left);
+
+        Label large = new Label(
+                "Large type for introductory text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
+        large.addStyleName("large");
+        left.addComponent(large);
+
+        Label h2 = new Label("Subtitle");
+        h2.addStyleName("h2");
+        left.addComponent(h2);
+
+        Label normal = new Label(
+                "Normal type for plain text, with a <a href=\"https://vaadin.com\">regular link</a>. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.",
+                ContentMode.HTML);
+        left.addComponent(normal);
+
+        Label h3 = new Label("Small Title");
+        h3.addStyleName("h3");
+        left.addComponent(h3);
+
+        Label small = new Label(
+                "Small type for additional text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
+        small.addStyleName("small");
+        left.addComponent(small);
+
+        Label h4 = new Label("Section Title");
+        h4.addStyleName("h4");
+        left.addComponent(h4);
+
+        normal = new Label(
+                "Normal type for plain text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
+        left.addComponent(normal);
+
+        Panel p = new Panel("Additional Label Styles");
+        split.addComponent(p);
+
+        VerticalLayout right = new VerticalLayout();
+        right.setSpacing(true);
+        right.setMargin(true);
+        p.setContent(right);
+
+        Label label = new Label(
+                "Bold type for prominent text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
+        label.addStyleName("bold");
+        right.addComponent(label);
+
+        label = new Label(
+                "Light type for subtle text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
+        label.addStyleName("light");
+        right.addComponent(label);
+
+        label = new Label("A label for success");
+        label.addStyleName("success");
+        right.addComponent(label);
+
+        label = new Label("A label for failure");
+        label.addStyleName("failure");
+        right.addComponent(label);
+
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java b/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java
new file mode 100644
index 0000000000..c75338912a
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java
@@ -0,0 +1,138 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.server.FontAwesome;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.MenuBar;
+import com.vaadin.ui.MenuBar.Command;
+import com.vaadin.ui.MenuBar.MenuItem;
+import com.vaadin.ui.Notification;
+import com.vaadin.ui.VerticalLayout;
+
+public class MenuBars extends VerticalLayout implements View {
+    public MenuBars() {
+        setMargin(true);
+        setSpacing(true);
+
+        Label h1 = new Label("Menu Bars");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        MenuBar menuBar = getMenuBar();
+        menuBar.setCaption("Normal style");
+        addComponent(menuBar);
+
+        menuBar = getMenuBar();
+        menuBar.setCaption("Small style");
+        menuBar.addStyleName("small");
+        addComponent(menuBar);
+
+        menuBar = getMenuBar();
+        menuBar.setCaption("Borderless style");
+        menuBar.addStyleName("borderless");
+        addComponent(menuBar);
+    }
+
+    MenuBar getMenuBar() {
+        MenuBar menubar = new MenuBar();
+        menubar.setWidth("100%");
+        final MenuBar.MenuItem file = menubar.addItem("File", null);
+        final MenuBar.MenuItem newItem = file.addItem("New", null);
+        file.addItem("Open file...", null);
+        file.addSeparator();
+
+        newItem.addItem("File", null);
+        newItem.addItem("Folder", null);
+        newItem.addItem("Project...", null);
+
+        file.addItem("Close", null);
+        file.addItem("Close All", null);
+        file.addSeparator();
+
+        file.addItem("Save", null);
+        file.addItem("Save As...", null);
+        file.addItem("Save All", null);
+
+        final MenuBar.MenuItem edit = menubar.addItem("Edit", null);
+        edit.addItem("Undo", null);
+        edit.addItem("Redo", null).setEnabled(false);
+        edit.addSeparator();
+
+        edit.addItem("Cut", null);
+        edit.addItem("Copy", null);
+        edit.addItem("Paste", null);
+        edit.addSeparator();
+
+        final MenuBar.MenuItem find = edit.addItem("Find/Replace", null);
+
+        find.addItem("Google Search", null);
+        find.addSeparator();
+        find.addItem("Find/Replace...", null);
+        find.addItem("Find Next", null);
+        find.addItem("Find Previous", null);
+
+        Command check = new Command() {
+            @Override
+            public void menuSelected(MenuItem selectedItem) {
+                Notification.show(selectedItem.isChecked() ? "Checked"
+                        : "Unchecked");
+            }
+        };
+
+        final MenuBar.MenuItem view = menubar.addItem("View", null);
+        view.addItem("Show Status Bar", check).setCheckable(true);
+        MenuItem title = view.addItem("Show Title Bar", check);
+        title.setCheckable(true);
+        title.setChecked(true);
+        view.addItem("Customize Toolbar...", null);
+        view.addSeparator();
+
+        view.addItem("Actual Size", null);
+        view.addItem("Zoom In", null);
+        view.addItem("Zoom Out", null);
+
+        MenuItem fav = menubar.addItem("", check);
+        fav.setIcon(TestIcon.get());
+        fav.setStyleName("icon-only");
+        fav.setCheckable(true);
+        fav.setChecked(true);
+
+        fav = menubar.addItem("", check);
+        fav.setIcon(TestIcon.get());
+        fav.setStyleName("icon-only");
+        fav.setCheckable(true);
+        fav.setCheckable(true);
+
+        menubar.addItem("Attach", null).setIcon(FontAwesome.PAPERCLIP);
+        menubar.addItem("Undo", null).setIcon(FontAwesome.UNDO);
+        MenuItem redo = menubar.addItem("Redo", null);
+        redo.setIcon(FontAwesome.REPEAT);
+        redo.setEnabled(false);
+        menubar.addItem("Upload", null).setIcon(FontAwesome.UPLOAD);
+
+        return menubar;
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/NativeSelects.java b/uitest/src/com/vaadin/tests/themes/valo/NativeSelects.java
new file mode 100644
index 0000000000..284f7c8d6e
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/NativeSelects.java
@@ -0,0 +1,75 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.ListSelect;
+import com.vaadin.ui.NativeSelect;
+import com.vaadin.ui.TwinColSelect;
+import com.vaadin.ui.VerticalLayout;
+
+public class NativeSelects extends VerticalLayout implements View {
+    public NativeSelects() {
+        setMargin(true);
+
+        Label h1 = new Label("Selects");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        NativeSelect select = new NativeSelect("Drop Down Select");
+        row.addComponent(select);
+
+        ListSelect list = new ListSelect("List Select");
+        list.setNewItemsAllowed(true);
+        row.addComponent(list);
+
+        TwinColSelect tcs = new TwinColSelect("TwinCol Select");
+        tcs.setLeftColumnCaption("Left Column");
+        tcs.setRightColumnCaption("Right Column");
+        tcs.setNewItemsAllowed(true);
+        row.addComponent(tcs);
+
+        TwinColSelect tcs2 = new TwinColSelect("Sized TwinCol Select");
+        tcs2.setLeftColumnCaption("Left Column");
+        tcs2.setRightColumnCaption("Right Column");
+        tcs2.setNewItemsAllowed(true);
+        tcs2.setWidth("280px");
+        tcs2.setHeight("200px");
+        row.addComponent(tcs2);
+
+        for (int i = 1; i <= 10; i++) {
+            select.addItem("Option " + i);
+            list.addItem("Option " + i);
+            tcs.addItem("Option " + i);
+            tcs2.addItem("Option " + i);
+        }
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Panels.java b/uitest/src/com/vaadin/tests/themes/valo/Panels.java
new file mode 100644
index 0000000000..62bb600bde
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Panels.java
@@ -0,0 +1,175 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.server.FontAwesome;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.MenuBar;
+import com.vaadin.ui.MenuBar.MenuItem;
+import com.vaadin.ui.Panel;
+import com.vaadin.ui.VerticalLayout;
+
+public class Panels extends VerticalLayout implements View {
+    public Panels() {
+        setMargin(true);
+
+        Label h1 = new Label("Panels & Layout panels");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        Panel panel = new Panel("Normal");
+        panel.setIcon(TestIcon.get());
+        panel.setContent(panelContent());
+        row.addComponent(panel);
+
+        panel = new Panel("Sized");
+        panel.setIcon(TestIcon.get());
+        panel.setWidth("10em");
+        panel.setHeight("250px");
+        panel.setContent(panelContent());
+        row.addComponent(panel);
+
+        panel = new Panel("Custom Caption");
+        panel.setIcon(TestIcon.get());
+        panel.addStyleName("color1");
+        panel.setContent(panelContent());
+        row.addComponent(panel);
+
+        panel = new Panel("Custom Caption");
+        panel.setIcon(TestIcon.get());
+        panel.addStyleName("color2");
+        panel.setContent(panelContent());
+        row.addComponent(panel);
+
+        panel = new Panel("Custom Caption");
+        panel.setIcon(TestIcon.get());
+        panel.addStyleName("color3");
+        panel.setContent(panelContent());
+        row.addComponent(panel);
+
+        panel = new Panel("Borderless style");
+        panel.setIcon(TestIcon.get());
+        panel.addStyleName("borderless");
+        panel.setContent(panelContent());
+        row.addComponent(panel);
+
+        panel = new Panel("Borderless + scroll divider");
+        panel.setIcon(TestIcon.get());
+        panel.addStyleName("borderless");
+        panel.addStyleName("scroll-divider");
+        panel.setContent(panelContentScroll());
+        panel.setHeight("17em");
+        row.addComponent(panel);
+
+        panel = new Panel("Well style");
+        panel.setIcon(TestIcon.get());
+        panel.addStyleName("well");
+        panel.setContent(panelContent());
+        row.addComponent(panel);
+
+        CssLayout layout = new CssLayout();
+        layout.setIcon(TestIcon.get());
+        layout.setCaption("Panel style layout");
+        layout.addStyleName("card");
+        layout.addComponent(panelContent());
+        row.addComponent(layout);
+
+        layout = new CssLayout();
+        layout.addStyleName("card");
+        row.addComponent(layout);
+        HorizontalLayout panelCaption = new HorizontalLayout();
+        panelCaption.addStyleName("v-panel-caption");
+        panelCaption.setWidth("100%");
+        // panelCaption.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT);
+        Label label = new Label("Panel style layout");
+        panelCaption.addComponent(label);
+        panelCaption.setExpandRatio(label, 1);
+
+        Button action = new Button();
+        action.setIcon(FontAwesome.PENCIL);
+        action.addStyleName("borderless");
+        action.addStyleName("small");
+        action.addStyleName("icon-only");
+        panelCaption.addComponent(action);
+        MenuBar dropdown = new MenuBar();
+        dropdown.addStyleName("borderless");
+        dropdown.addStyleName("small");
+        MenuItem addItem = dropdown.addItem("", FontAwesome.CHEVRON_DOWN, null);
+        addItem.setStyleName("icon-only");
+        addItem.addItem("Settings", null);
+        addItem.addItem("Preferences", null);
+        addItem.addSeparator();
+        addItem.addItem("Sign Out", null);
+        panelCaption.addComponent(dropdown);
+
+        layout.addComponent(panelCaption);
+        layout.addComponent(panelContent());
+        layout.setWidth("14em");
+
+        layout = new CssLayout();
+        layout.setIcon(TestIcon.get());
+        layout.setCaption("Well style layout");
+        layout.addStyleName("well");
+        layout.addComponent(panelContent());
+        row.addComponent(layout);
+    }
+
+    Component panelContent() {
+        VerticalLayout layout = new VerticalLayout();
+        layout.setSizeFull();
+        layout.setMargin(true);
+        layout.setSpacing(true);
+        Label content = new Label(
+                "Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.");
+        content.setWidth("10em");
+        layout.addComponent(content);
+        Button button = new Button("Button");
+        button.setSizeFull();
+        layout.addComponent(button);
+        return layout;
+    }
+
+    Component panelContentScroll() {
+        VerticalLayout layout = new VerticalLayout();
+        layout.setMargin(true);
+        layout.setSpacing(true);
+        Label content = new Label(
+                "Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.");
+        content.setWidth("10em");
+        layout.addComponent(content);
+        Button button = new Button("Button");
+        layout.addComponent(button);
+        return layout;
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/PopupViews.java b/uitest/src/com/vaadin/tests/themes/valo/PopupViews.java
new file mode 100644
index 0000000000..b13544c26a
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/PopupViews.java
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.PopupView;
+import com.vaadin.ui.PopupView.Content;
+import com.vaadin.ui.VerticalLayout;
+
+public class PopupViews extends VerticalLayout implements View {
+    public PopupViews() {
+        setMargin(true);
+
+        Label h1 = new Label("Popup Views");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        PopupView pv = new PopupView(new Content() {
+            @Override
+            public Component getPopupComponent() {
+                return new VerticalLayout() {
+                    {
+                        setMargin(true);
+                        addComponent(new Label(
+                                "Fictum,  deserunt mollit anim laborum astutumque! Magna pars studiorum, prodita quaerimus."));
+                    }
+                };
+            }
+
+            @Override
+            public String getMinimizedValueAsHTML() {
+                return "Click to view";
+            }
+        });
+
+        row.addComponent(pv);
+        pv.setHideOnMouseOut(false);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Sliders.java b/uitest/src/com/vaadin/tests/themes/valo/Sliders.java
new file mode 100644
index 0000000000..516254cb40
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Sliders.java
@@ -0,0 +1,201 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.shared.ui.slider.SliderOrientation;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.ProgressBar;
+import com.vaadin.ui.Slider;
+import com.vaadin.ui.VerticalLayout;
+
+public class Sliders extends VerticalLayout implements View {
+    public Sliders() {
+        setMargin(true);
+
+        Label h1 = new Label("Sliders");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        Slider slider = new Slider("Horizontal");
+        slider.setValue(50.0);
+        row.addComponent(slider);
+
+        slider = new Slider("Horizontal, sized");
+        slider.setValue(50.0);
+        slider.setWidth("200px");
+        row.addComponent(slider);
+
+        slider = new Slider("Custom handle");
+        slider.setValue(50.0);
+        slider.setWidth("200px");
+        slider.addStyleName("color1");
+        row.addComponent(slider);
+
+        slider = new Slider("Custom track");
+        slider.setValue(50.0);
+        slider.setWidth("200px");
+        slider.addStyleName("color2");
+        row.addComponent(slider);
+
+        slider = new Slider("Custom indicator");
+        slider.setValue(50.0);
+        slider.setWidth("200px");
+        slider.addStyleName("color3");
+        row.addComponent(slider);
+
+        slider = new Slider("No indicator");
+        slider.setValue(50.0);
+        slider.setWidth("200px");
+        slider.addStyleName("no-indicator");
+        row.addComponent(slider);
+
+        slider = new Slider("With ticks (not in IE8 & IE9)");
+        slider.setValue(50.0);
+        slider.setWidth("200px");
+        slider.addStyleName("ticks");
+        row.addComponent(slider);
+
+        slider = new Slider("Vertical");
+        slider.setValue(50.0);
+        slider.setOrientation(SliderOrientation.VERTICAL);
+        row.addComponent(slider);
+
+        slider = new Slider("Vertical, sized");
+        slider.setValue(50.0);
+        slider.setOrientation(SliderOrientation.VERTICAL);
+        slider.setHeight("200px");
+        row.addComponent(slider);
+
+        slider = new Slider("Custom handle");
+        slider.setValue(50.0);
+        slider.setHeight("200px");
+        slider.addStyleName("color1");
+        slider.setOrientation(SliderOrientation.VERTICAL);
+        row.addComponent(slider);
+
+        slider = new Slider("Custom track");
+        slider.setValue(50.0);
+        slider.setHeight("200px");
+        slider.addStyleName("color2");
+        slider.setOrientation(SliderOrientation.VERTICAL);
+        row.addComponent(slider);
+
+        slider = new Slider("Custom indicator");
+        slider.setValue(50.0);
+        slider.setHeight("200px");
+        slider.addStyleName("color3");
+        slider.setOrientation(SliderOrientation.VERTICAL);
+        row.addComponent(slider);
+
+        slider = new Slider("No indicator");
+        slider.setValue(50.0);
+        slider.setHeight("200px");
+        slider.addStyleName("no-indicator");
+        slider.setOrientation(SliderOrientation.VERTICAL);
+        row.addComponent(slider);
+
+        slider = new Slider("With ticks");
+        slider.setValue(50.0);
+        slider.setHeight("200px");
+        slider.addStyleName("ticks");
+        slider.setOrientation(SliderOrientation.VERTICAL);
+        row.addComponent(slider);
+
+        slider = new Slider("Disabled");
+        slider.setValue(50.0);
+        slider.setEnabled(false);
+        row.addComponent(slider);
+
+        h1 = new Label("Progress Bars");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        pb = new ProgressBar();
+        pb.setCaption("Default");
+        pb.setWidth("300px");
+        // pb.setValue(0.6f);
+        row.addComponent(pb);
+
+        pb2 = new ProgressBar();
+        pb2.setCaption("Point style");
+        pb2.setWidth("300px");
+        pb2.addStyleName("point");
+        // pb2.setValue(0.6f);
+        row.addComponent(pb2);
+
+        ProgressBar pb3 = new ProgressBar();
+        pb3.setIndeterminate(true);
+        pb3.setCaption("Indeterminate");
+        row.addComponent(pb3);
+
+    }
+
+    float progress = 0;
+
+    Thread update = new Thread() {
+        @Override
+        public void run() {
+            while (true) {
+                try {
+                    Thread.sleep(1000);
+                    getUI().access(new Runnable() {
+                        @Override
+                        public void run() {
+                            pb.setValue(progress);
+                            pb2.setValue(progress);
+                            if (progress > 1) {
+                                progress = 0;
+                            } else {
+                                progress += 0.2 * Math.random();
+                            }
+                        }
+                    });
+                } catch (InterruptedException e) {
+                    break;
+                }
+            }
+        };
+    };
+    private ProgressBar pb;
+    private ProgressBar pb2;
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        getUI().setPollInterval(1000);
+        update.start();
+    }
+
+    @Override
+    public void detach() {
+        getUI().setPollInterval(-1);
+        update.interrupt();
+        super.detach();
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/SplitPanels.java b/uitest/src/com/vaadin/tests/themes/valo/SplitPanels.java
new file mode 100644
index 0000000000..9a6d86ae04
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/SplitPanels.java
@@ -0,0 +1,95 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.shared.ui.MarginInfo;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.HorizontalSplitPanel;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.VerticalSplitPanel;
+
+public class SplitPanels extends VerticalLayout implements View {
+    public SplitPanels() {
+        setMargin(true);
+
+        Label h1 = new Label("Split Panels");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        addComponent(new Label(
+                "Outlines are just to show the areas of the SplitPanels. They are not part of the actual component style."));
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        row.setMargin(new MarginInfo(true, false, false, false));
+        addComponent(row);
+
+        HorizontalSplitPanel sp = new HorizontalSplitPanel();
+        sp.setCaption("Default style");
+        sp.setWidth("400px");
+        sp.setHeight(null);
+        sp.setFirstComponent(getContent());
+        sp.setSecondComponent(getContent());
+        row.addComponent(sp);
+
+        VerticalSplitPanel sp2 = new VerticalSplitPanel();
+        sp2.setCaption("Default style");
+        sp2.setWidth("300px");
+        sp2.setHeight("200px");
+        sp2.setFirstComponent(getContent());
+        sp2.setSecondComponent(getContent());
+        row.addComponent(sp2);
+
+        sp = new HorizontalSplitPanel();
+        sp.setCaption("Large style");
+        sp.setWidth("300px");
+        sp.setHeight("200px");
+        sp.addStyleName("large");
+        sp.setFirstComponent(getContent());
+        sp.setSecondComponent(getContent());
+        row.addComponent(sp);
+
+        sp2 = new VerticalSplitPanel();
+        sp2.setCaption("Large style");
+        sp2.setWidth("300px");
+        sp2.setHeight("200px");
+        sp2.addStyleName("large");
+        sp2.setFirstComponent(getContent());
+        sp2.setSecondComponent(getContent());
+        row.addComponent(sp2);
+    }
+
+    VerticalLayout getContent() {
+        return new VerticalLayout() {
+            {
+                setMargin(true);
+                addComponent(new Label(
+                        "Fictum,  deserunt mollit anim laborum astutumque!"));
+            }
+        };
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Tables.java b/uitest/src/com/vaadin/tests/themes/valo/Tables.java
new file mode 100644
index 0000000000..d9e4bdd3ab
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Tables.java
@@ -0,0 +1,158 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.data.Container;
+import com.vaadin.event.dd.DragAndDropEvent;
+import com.vaadin.event.dd.DropHandler;
+import com.vaadin.event.dd.acceptcriteria.AcceptAll;
+import com.vaadin.event.dd.acceptcriteria.AcceptCriterion;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Notification;
+import com.vaadin.ui.Table;
+import com.vaadin.ui.Table.Align;
+import com.vaadin.ui.Table.TableDragMode;
+import com.vaadin.ui.TreeTable;
+import com.vaadin.ui.VerticalLayout;
+
+public class Tables extends VerticalLayout implements View {
+
+    static final Container normalContainer = ValoThemeTest.generateContainer(
+            200, false);
+    static final Container hierarchicalContainer = ValoThemeTest
+            .generateContainer(200, true);
+
+    public Tables() {
+        setMargin(true);
+        setSpacing(true);
+
+        Label h1 = new Label("Tables");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        Table table = getTable("Normal");
+        addComponent(table);
+
+        table = getTable("Footer");
+        table.setFooterVisible(true);
+        table.setColumnFooter(ValoThemeTest.CAPTION_PROPERTY, "caption");
+        table.setColumnFooter(ValoThemeTest.DESCRIPTION_PROPERTY, "description");
+        table.setColumnFooter(ValoThemeTest.ICON_PROPERTY, "icon");
+        table.setColumnFooter(ValoThemeTest.INDEX_PROPERTY, "index");
+        addComponent(table);
+
+        table = getTable("Sized ");
+        table.setWidth("300px");
+        addComponent(table);
+
+        table = getTable("Sized w/ expand ratios");
+        table.setWidth("100%");
+        table.setColumnExpandRatio(ValoThemeTest.CAPTION_PROPERTY, 1.0f);
+        table.setColumnExpandRatio(ValoThemeTest.DESCRIPTION_PROPERTY, 1.0f);
+        // table.setColumnExpandRatio(ValoThemeTest.ICON_PROPERTY, 1.0f);
+        // table.setColumnExpandRatio(ValoThemeTest.INDEX_PROPERTY, 1.0f);
+        addComponent(table);
+
+        table = getTable("No stripes");
+        table.addStyleName("no-stripes");
+        addComponent(table);
+
+        table = getTable("No vertical lines");
+        table.addStyleName("no-vertical-lines");
+        addComponent(table);
+
+        table = getTable("No horizontal lines");
+        table.addStyleName("no-horizontal-lines");
+        addComponent(table);
+
+        table = getTable("Borderless");
+        table.addStyleName("borderless");
+        addComponent(table);
+
+        table = getTable("No headers");
+        table.addStyleName("no-header");
+        addComponent(table);
+
+        table = getTable("Compact");
+        table.addStyleName("compact");
+        addComponent(table);
+
+        table = getTable("Small");
+        table.addStyleName("small");
+        addComponent(table);
+
+        h1 = new Label("Tree Tables");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        addComponent(new Label(
+                "TreeTables have all the same features as Tables, but they support hierarchical containers as well."));
+
+        table = getTreeTable(null);
+        addComponent(table);
+    }
+
+    TreeTable getTreeTable(String caption) {
+        TreeTable table = new TreeTable(caption);
+        configure(table, true);
+        return table;
+    }
+
+    Table getTable(String caption) {
+        Table table = new Table(caption);
+        configure(table, false);
+        return table;
+    }
+
+    void configure(Table table, boolean hierarchical) {
+        table.setSelectable(true);
+        table.setMultiSelect(true);
+        table.setSortEnabled(true);
+        table.setColumnCollapsingAllowed(true);
+        table.setColumnReorderingAllowed(true);
+        table.setPageLength(6);
+        table.addActionHandler(ValoThemeTest.getActionHandler());
+        table.setDragMode(TableDragMode.MULTIROW);
+        table.setDropHandler(new DropHandler() {
+            @Override
+            public AcceptCriterion getAcceptCriterion() {
+                return AcceptAll.get();
+            }
+
+            @Override
+            public void drop(DragAndDropEvent event) {
+                Notification.show(event.getTransferable().toString());
+            }
+        });
+        Container tableData = hierarchical ? hierarchicalContainer
+                : normalContainer;
+        table.setContainerDataSource(tableData);
+        table.select(tableData.getItemIds().iterator().next());
+        // table.setSortContainerPropertyId(ValoThemeTest.CAPTION_PROPERTY);
+        // table.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY);
+        table.setColumnAlignment(ValoThemeTest.DESCRIPTION_PROPERTY,
+                Align.RIGHT);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Tabsheets.java b/uitest/src/com/vaadin/tests/themes/valo/Tabsheets.java
new file mode 100644
index 0000000000..079a9c6b95
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Tabsheets.java
@@ -0,0 +1,111 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.data.Property.ValueChangeEvent;
+import com.vaadin.data.Property.ValueChangeListener;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.TabSheet;
+import com.vaadin.ui.TabSheet.Tab;
+import com.vaadin.ui.VerticalLayout;
+
+public class Tabsheets extends VerticalLayout implements View {
+    public Tabsheets() {
+        setMargin(true);
+
+        Label h1 = new Label("Tabs");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        final VerticalLayout wrap = new VerticalLayout();
+        wrap.setSpacing(true);
+        addComponent(wrap);
+
+        final CheckBox closable = new CheckBox("Closable");
+        closable.setImmediate(true);
+        wrap.addComponent(closable);
+
+        final CheckBox overflow = new CheckBox("Overflow");
+        overflow.setImmediate(true);
+        wrap.addComponent(overflow);
+
+        final CheckBox icon = new CheckBox("Icons");
+        icon.setImmediate(true);
+        wrap.addComponent(icon);
+
+        ValueChangeListener update = new ValueChangeListener() {
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                wrap.removeAllComponents();
+
+                wrap.addComponents(closable, overflow, icon);
+
+                wrap.addComponent(getTabSheet("Normal", null,
+                        closable.getValue(), overflow.getValue(),
+                        icon.getValue()));
+                wrap.addComponent(getTabSheet("Centered tabs", "centered-tabs",
+                        closable.getValue(), overflow.getValue(),
+                        icon.getValue()));
+                wrap.addComponent(getTabSheet("Equal-width tabs",
+                        "equal-width-tabs", closable.getValue(),
+                        overflow.getValue(), icon.getValue()));
+                wrap.addComponent(getTabSheet("Icons on top + padded tabbar",
+                        "icons-on-top padded-tabbar", closable.getValue(),
+                        overflow.getValue(), icon.getValue()));
+                wrap.addComponent(getTabSheet("Only selected tab is closable",
+                        "selected-closable", closable.getValue(),
+                        overflow.getValue(), icon.getValue()));
+            }
+        };
+        closable.addValueChangeListener(update);
+        overflow.addValueChangeListener(update);
+        icon.addValueChangeListener(update);
+
+        // Generate initial view
+        icon.setValue(true);
+    }
+
+    TabSheet getTabSheet(String caption, String style, boolean closable,
+            boolean scrolling, boolean icon) {
+        TabSheet ts = new TabSheet();
+        ts.addStyleName(style);
+        ts.setCaption(caption);
+
+        for (int i = 0; i < (scrolling ? 10 : 3); i++) {
+            String tabcaption = ValoThemeTest.nextString(true);
+            if (i == 0 && icon) {
+                tabcaption = null;
+            }
+            Tab t = ts.addTab(new Label(" "), tabcaption);
+            t.setClosable(closable);
+
+            if (icon) {
+                t.setIcon(TestIcon.get(i == 2));
+            }
+        }
+        return ts;
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/TestIcon.java b/uitest/src/com/vaadin/tests/themes/valo/TestIcon.java
new file mode 100644
index 0000000000..18b834f1bf
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/TestIcon.java
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.List;
+
+import com.vaadin.server.FontAwesome;
+import com.vaadin.server.Resource;
+import com.vaadin.server.ThemeResource;
+
+/**
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class TestIcon {
+
+    public static Resource get() {
+        return get(false, 32);
+    }
+
+    public static Resource get(boolean isImage) {
+        return get(isImage, 32);
+    }
+
+    public static Resource get(boolean isImage, int imageSize) {
+        if (!isImage) {
+            if (++iconCount >= ICONS.size()) {
+                iconCount = 0;
+            }
+            return ICONS.get(iconCount);
+        }
+        return new ThemeResource("../runo/icons/" + imageSize + "/document.png");
+    }
+
+    static List<FontAwesome> ICONS = Collections.unmodifiableList(Arrays
+            .asList(FontAwesome.values()));
+
+    static int iconCount = 0;
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/TextFields.java b/uitest/src/com/vaadin/tests/themes/valo/TextFields.java
new file mode 100644
index 0000000000..1201071f84
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/TextFields.java
@@ -0,0 +1,186 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.RichTextArea;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.VerticalLayout;
+
+public class TextFields extends VerticalLayout implements View {
+    public TextFields() {
+        setMargin(true);
+
+        Label h1 = new Label("Text Fields");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        TextField tf = new TextField("Normal");
+        tf.setInputPrompt("First name");
+        tf.setIcon(TestIcon.get());
+        row.addComponent(tf);
+
+        tf = new TextField("Custom color");
+        tf.setInputPrompt("Email");
+        tf.addStyleName("color1");
+        row.addComponent(tf);
+
+        tf = new TextField("User Color");
+        tf.setInputPrompt("Gender");
+        tf.addStyleName("color2");
+        row.addComponent(tf);
+
+        tf = new TextField("Themed");
+        tf.setInputPrompt("Age");
+        tf.addStyleName("color3");
+        row.addComponent(tf);
+
+        tf = new TextField("Read-only");
+        tf.setInputPrompt("Nationality");
+        tf.setValue("Finnish");
+        tf.setReadOnly(true);
+        row.addComponent(tf);
+
+        tf = new TextField("Small");
+        tf.setValue("Field value");
+        tf.addStyleName("small");
+        row.addComponent(tf);
+
+        tf = new TextField("Large");
+        tf.setValue("Field value");
+        tf.addStyleName("large");
+        tf.setIcon(TestIcon.get(true));
+        row.addComponent(tf);
+
+        tf = new TextField("Icon inside");
+        tf.setInputPrompt("Ooh, an icon");
+        tf.addStyleName("inline-icon");
+        tf.setIcon(TestIcon.get());
+        row.addComponent(tf);
+
+        tf = new TextField("16px supported by default");
+        tf.setInputPrompt("Image icon");
+        tf.addStyleName("inline-icon");
+        tf.setIcon(TestIcon.get(true, 16));
+        row.addComponent(tf);
+
+        tf = new TextField();
+        tf.setValue("Font, no caption");
+        tf.addStyleName("inline-icon");
+        tf.setIcon(TestIcon.get());
+        row.addComponent(tf);
+
+        tf = new TextField();
+        tf.setValue("Image, no caption");
+        tf.addStyleName("inline-icon");
+        tf.setIcon(TestIcon.get(true, 16));
+        row.addComponent(tf);
+
+        CssLayout group = new CssLayout();
+        group.addStyleName("v-component-group");
+        row.addComponent(group);
+
+        tf = new TextField();
+        tf.setInputPrompt("Grouped with a button");
+        tf.addStyleName("inline-icon");
+        tf.setIcon(TestIcon.get());
+        tf.setWidth("260px");
+        group.addComponent(tf);
+
+        Button button = new Button("Do It");
+        // button.addStyleName("primary");
+        group.addComponent(button);
+
+        tf = new TextField("Borderless");
+        tf.setInputPrompt("Write here…");
+        tf.addStyleName("inline-icon");
+        tf.addStyleName("borderless");
+        tf.setIcon(TestIcon.get());
+        row.addComponent(tf);
+
+        h1 = new Label("Text Areas");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        TextArea ta = new TextArea("Normal");
+        ta.setInputPrompt("Write your comment…");
+        row.addComponent(ta);
+
+        ta = new TextArea("Inline icon");
+        ta.setInputPrompt("Inline icon not really working");
+        ta.addStyleName("inline-icon");
+        ta.setIcon(TestIcon.get());
+        row.addComponent(ta);
+
+        ta = new TextArea("Custom color");
+        ta.addStyleName("color1");
+        ta.setInputPrompt("Write your comment…");
+        row.addComponent(ta);
+
+        ta = new TextArea("Custom color, read-only");
+        ta.addStyleName("color2");
+        ta.setValue("Field value, spanning multiple lines of text");
+        ta.setReadOnly(true);
+        row.addComponent(ta);
+
+        ta = new TextArea("Custom color");
+        ta.addStyleName("color3");
+        ta.setValue("Field value, spanning multiple lines of text");
+        row.addComponent(ta);
+
+        ta = new TextArea("Small");
+        ta.addStyleName("small");
+        ta.setInputPrompt("Write your comment…");
+        row.addComponent(ta);
+
+        ta = new TextArea("Large");
+        ta.addStyleName("large");
+        ta.setInputPrompt("Write your comment…");
+        row.addComponent(ta);
+
+        ta = new TextArea("Borderless");
+        ta.addStyleName("borderless");
+        ta.setInputPrompt("Write your comment…");
+        row.addComponent(ta);
+
+        RichTextArea rta = new RichTextArea();
+        rta.setValue("<b>Some</b> <i>rich</i> content");
+        row.addComponent(rta);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Trees.java b/uitest/src/com/vaadin/tests/themes/valo/Trees.java
new file mode 100644
index 0000000000..bb406e4f39
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Trees.java
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.data.Container;
+import com.vaadin.event.dd.DragAndDropEvent;
+import com.vaadin.event.dd.DropHandler;
+import com.vaadin.event.dd.acceptcriteria.AcceptAll;
+import com.vaadin.event.dd.acceptcriteria.AcceptCriterion;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Notification;
+import com.vaadin.ui.Tree;
+import com.vaadin.ui.Tree.TreeDragMode;
+import com.vaadin.ui.VerticalLayout;
+
+public class Trees extends VerticalLayout implements View {
+    public Trees() {
+        setMargin(true);
+
+        Label h1 = new Label("Trees");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        Tree tree = new Tree();
+        tree.setSelectable(true);
+        tree.setMultiSelect(true);
+        Container generateContainer = ValoThemeTest.generateContainer(10, true);
+        tree.setContainerDataSource(generateContainer);
+        tree.setDragMode(TreeDragMode.NODE);
+        row.addComponent(tree);
+        tree.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY);
+        tree.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY);
+        tree.expandItem(generateContainer.getItemIds().iterator().next());
+
+        tree.setDropHandler(new DropHandler() {
+            @Override
+            public AcceptCriterion getAcceptCriterion() {
+                return AcceptAll.get();
+            }
+
+            @Override
+            public void drop(DragAndDropEvent event) {
+                Notification.show(event.getTransferable().toString());
+            }
+        });
+
+        // Add actions (context menu)
+        tree.addActionHandler(ValoThemeTest.getActionHandler());
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java
new file mode 100644
index 0000000000..0336be05a2
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java
@@ -0,0 +1,308 @@
+package com.vaadin.tests.themes.valo;
+
+import java.util.Iterator;
+import java.util.LinkedHashMap;
+import java.util.Map.Entry;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.annotations.Title;
+import com.vaadin.data.Container;
+import com.vaadin.data.Container.Hierarchical;
+import com.vaadin.data.Item;
+import com.vaadin.data.Property.ValueChangeEvent;
+import com.vaadin.data.Property.ValueChangeListener;
+import com.vaadin.data.util.HierarchicalContainer;
+import com.vaadin.data.util.IndexedContainer;
+import com.vaadin.event.Action;
+import com.vaadin.event.Action.Handler;
+import com.vaadin.navigator.Navigator;
+import com.vaadin.navigator.ViewChangeListener;
+import com.vaadin.server.FontAwesome;
+import com.vaadin.server.Page;
+import com.vaadin.server.Resource;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.shared.ui.label.ContentMode;
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.MenuBar;
+import com.vaadin.ui.MenuBar.MenuItem;
+import com.vaadin.ui.Notification;
+import com.vaadin.ui.UI;
+
+@Theme("tests-valo")
+@Title("Valo Theme Test")
+public class ValoThemeTest extends UI {
+
+    HorizontalLayout root = new HorizontalLayout();
+    CssLayout viewDisplay = new CssLayout();
+    CssLayout menu = new CssLayout();
+    private Navigator navigator;
+    private LinkedHashMap<String, String> menuItems = new LinkedHashMap<String, String>();
+
+    @Override
+    protected void init(VaadinRequest request) {
+        // Show .v-app-loading badge
+        // try {
+        // Thread.sleep(2000);
+        // } catch (InterruptedException e) {
+        // e.printStackTrace();
+        // }
+
+        getPage().setTitle("Valo Theme Test");
+        setContent(root);
+        root.setWidth("100%");
+
+        root.addComponent(buildMenu());
+
+        viewDisplay.setWidth("100%");
+        viewDisplay.addStyleName("view");
+        root.addComponent(viewDisplay);
+        root.setExpandRatio(viewDisplay, 1);
+
+        navigator = new Navigator(this, viewDisplay);
+
+        navigator.addView("common", CommonParts.class);
+        navigator.addView("labels", Labels.class);
+        navigator.addView("buttons-and-links", ButtonsAndLinks.class);
+        navigator.addView("textfields", TextFields.class);
+        navigator.addView("datefields", DateFields.class);
+        navigator.addView("comboboxes", ComboBoxes.class);
+        navigator.addView("checkboxes", CheckBoxes.class);
+        navigator.addView("sliders", Sliders.class);
+        navigator.addView("menubars", MenuBars.class);
+        navigator.addView("panels", Panels.class);
+        navigator.addView("trees", Trees.class);
+        navigator.addView("tables", Tables.class);
+        navigator.addView("splitpanels", SplitPanels.class);
+        navigator.addView("tabs", Tabsheets.class);
+        navigator.addView("accordions", Accordions.class);
+        navigator.addView("colorpickers", ColorPickers.class);
+        navigator.addView("selects", NativeSelects.class);
+        navigator.addView("calendar", CalendarTest.class);
+        navigator.addView("forms", Forms.class);
+        navigator.addView("popupviews", PopupViews.class);
+
+        String f = Page.getCurrent().getUriFragment();
+        if (f == null || f.equals("")) {
+            navigator.navigateTo("common");
+        }
+
+        navigator.addViewChangeListener(new ViewChangeListener() {
+
+            @Override
+            public boolean beforeViewChange(ViewChangeEvent event) {
+                return true;
+            }
+
+            @Override
+            public void afterViewChange(ViewChangeEvent event) {
+                for (Iterator<Component> it = menu.iterator(); it.hasNext();) {
+                    it.next().removeStyleName("selected");
+                }
+                for (Entry<String, String> item : menuItems.entrySet()) {
+                    if (event.getViewName().equals(item.getKey())) {
+                        for (Iterator<Component> it = menu.iterator(); it
+                                .hasNext();) {
+                            Component c = it.next();
+                            if (item.getValue().equals(c.getCaption())) {
+                                c.addStyleName("selected");
+                                break;
+                            }
+                        }
+                        break;
+                    }
+                }
+            }
+        });
+
+    }
+
+    CssLayout buildMenu() {
+        // Add items
+        menuItems.put("common", "Common UI Elements");
+        menuItems.put("labels", "Labels");
+        menuItems.put("buttons-and-links", "Buttons & Links");
+        menuItems.put("textfields", "Text Fields");
+        menuItems.put("datefields", "Date Fields");
+        menuItems.put("comboboxes", "Combo Boxes");
+        menuItems.put("selects", "Selects");
+        menuItems.put("checkboxes", "Check Boxes & Option Groups");
+        menuItems.put("sliders", "Sliders & Progress Bars");
+        menuItems.put("colorpickers", "Color Pickers");
+        menuItems.put("menubars", "Menu Bars");
+        menuItems.put("trees", "Trees");
+        menuItems.put("tables", "Tables");
+        menuItems.put("panels", "Panels");
+        menuItems.put("splitpanels", "Split Panels");
+        menuItems.put("tabs", "Tabs");
+        menuItems.put("accordions", "Accordions");
+        menuItems.put("popupviews", "Popup Views");
+        menuItems.put("calendar", "Calendar");
+        menuItems.put("forms", "Forms");
+
+        menu.setStyleName("valo-menu");
+
+        HorizontalLayout top = new HorizontalLayout();
+        top.setWidth("100%");
+        top.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT);
+        top.addStyleName("valo-menu-title");
+        menu.addComponent(top);
+
+        Label title = new Label("Vaadin<br><strong>Valo Theme Styles</strong>",
+                ContentMode.HTML);
+        title.setSizeUndefined();
+        top.addComponent(title);
+        top.setExpandRatio(title, 1);
+
+        MenuBar settings = new MenuBar();
+        MenuItem settingsItem = settings.addItem("", FontAwesome.COG, null);
+        settingsItem.setStyleName("icon-only");
+        settingsItem.addItem("Edit Profile", null);
+        settingsItem.addItem("Preferences", null);
+        settingsItem.addSeparator();
+        settingsItem.addItem("Sign Out", null);
+        top.addComponent(settings);
+
+        final CheckBox enabled = new CheckBox("Enabled", true);
+        enabled.setDescription("Enable or disable the components on the right side");
+        menu.addComponent(enabled);
+        enabled.addValueChangeListener(new ValueChangeListener() {
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                viewDisplay.setEnabled(enabled.getValue());
+            }
+        });
+
+        Label label = null;
+        int count = -1;
+        for (final Entry<String, String> item : menuItems.entrySet()) {
+            if (item.getKey().equals("labels")) {
+                label = new Label("Components", ContentMode.HTML);
+                label.setPrimaryStyleName("valo-menu-subtitle");
+                label.addStyleName("h4");
+                label.setSizeUndefined();
+                menu.addComponent(label);
+            }
+            if (item.getKey().equals("panels")) {
+                label.setValue(label.getValue() + " <span class=\"badge\">"
+                        + count + "</span>");
+                count = 0;
+                label = new Label("Containers", ContentMode.HTML);
+                label.setPrimaryStyleName("valo-menu-subtitle");
+                label.addStyleName("h4");
+                label.setSizeUndefined();
+                menu.addComponent(label);
+            }
+            if (item.getKey().equals("calendar")) {
+                label.setValue(label.getValue() + " <span class=\"badge\">"
+                        + count + "</span>");
+                count = 0;
+                label = new Label("Other", ContentMode.HTML);
+                label.setPrimaryStyleName("valo-menu-subtitle");
+                label.addStyleName("h4");
+                label.setSizeUndefined();
+                menu.addComponent(label);
+            }
+            Button b = new Button(item.getValue(), new ClickListener() {
+                @Override
+                public void buttonClick(ClickEvent event) {
+                    navigator.navigateTo(item.getKey());
+                }
+            });
+            b.setPrimaryStyleName("valo-menu-item");
+            menu.addComponent(b);
+            count++;
+        }
+        label.setValue(label.getValue() + " <span class=\"badge\">" + count
+                + "</span>");
+
+        return menu;
+    }
+
+    static String[] strings = new String[] { "lorem", "ipsum", "dolor", "sit",
+            "amet", "consectetur" };
+    static int stringCount = -1;
+
+    static String nextString(boolean capitalize) {
+        if (++stringCount >= strings.length) {
+            stringCount = 0;
+        }
+        return capitalize ? strings[stringCount].substring(0, 1).toUpperCase()
+                + strings[stringCount].substring(1) : strings[stringCount];
+    }
+
+    static Handler actionHandler = new Handler() {
+        private final Action ACTION_ONE = new Action("Action One");
+        private final Action ACTION_TWO = new Action("Action Two");
+        private final Action ACTION_THREE = new Action("Action Three");
+        private final Action[] ACTIONS = new Action[] { ACTION_ONE, ACTION_TWO,
+                ACTION_THREE };
+
+        @Override
+        public void handleAction(Action action, Object sender, Object target) {
+            Notification.show(action.getCaption());
+        }
+
+        @Override
+        public Action[] getActions(Object target, Object sender) {
+            return ACTIONS;
+        }
+    };
+
+    static Handler getActionHandler() {
+        return actionHandler;
+    }
+
+    static final String CAPTION_PROPERTY = "caption";
+    static final String DESCRIPTION_PROPERTY = "description";
+    static final String ICON_PROPERTY = "icon";
+    static final String INDEX_PROPERTY = "index";
+
+    @SuppressWarnings("unchecked")
+    static Container generateContainer(final int size,
+            final boolean hierarchical) {
+        IndexedContainer container = hierarchical ? new HierarchicalContainer()
+                : new IndexedContainer();
+
+        container.addContainerProperty(CAPTION_PROPERTY, String.class, null);
+        container.addContainerProperty(ICON_PROPERTY, Resource.class, null);
+        container.addContainerProperty(INDEX_PROPERTY, Integer.class, null);
+        container
+                .addContainerProperty(DESCRIPTION_PROPERTY, String.class, null);
+        for (int i = 1; i < size + 1; i++) {
+            Item item = container.addItem(i);
+            item.getItemProperty(CAPTION_PROPERTY).setValue(
+                    nextString(true) + " " + nextString(false));
+            item.getItemProperty(INDEX_PROPERTY).setValue(i);
+            item.getItemProperty(DESCRIPTION_PROPERTY).setValue(
+                    nextString(true) + " " + nextString(false) + " "
+                            + nextString(false));
+            item.getItemProperty(ICON_PROPERTY).setValue(TestIcon.get());
+        }
+        container.getItem(container.getIdByIndex(0))
+                .getItemProperty(ICON_PROPERTY).setValue(TestIcon.get());
+
+        if (hierarchical) {
+            for (int i = 1; i < size + 1; i++) {
+                for (int j = 1; j < 5; j++) {
+                    String id = i + " -> " + j;
+                    Item child = container.addItem(id);
+                    child.getItemProperty(CAPTION_PROPERTY).setValue(
+                            nextString(true) + " " + nextString(false));
+                    child.getItemProperty(ICON_PROPERTY).setValue(
+                            TestIcon.get());
+                    ((Hierarchical) container).setChildrenAllowed(id, false);
+                    ((Hierarchical) container).setParent(id, i);
+                }
+            }
+        }
+        return container;
+    }
+}
\ No newline at end of file