Merge "Merge remote-tracking branch 'origin/declarative'"

96 files changed, 8821 insertions, 64 deletions

diff --git a/server/ivy.xml b/server/ivy.xml
index 73384313a1..2901be8090 100644
--- a/server/ivy.xml
+++ b/server/ivy.xml
@@ -60,7 +60,7 @@
         </dependency>
 
         <!-- Jsoup for BootstrapHandler -->
-        <dependency org="org.jsoup" name="jsoup" rev="1.6.3"
+        <dependency org="org.jsoup" name="jsoup" rev="1.8.1"
             conf="build,ide,test -> default" />
 
         <!-- TESTING DEPENDENCIES -->
diff --git a/server/src/com/vaadin/annotations/DesignRoot.java b/server/src/com/vaadin/annotations/DesignRoot.java
new file mode 100644
index 0000000000..a00a00dc0b
--- /dev/null
+++ b/server/src/com/vaadin/annotations/DesignRoot.java
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2000-2014 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.annotations;
+
+import java.lang.annotation.ElementType;
+import java.lang.annotation.Retention;
+import java.lang.annotation.RetentionPolicy;
+import java.lang.annotation.Target;
+
+import com.vaadin.ui.declarative.Design;
+
+/**
+ * Marks the component as the root of a design (html) file.
+ * <p>
+ * Used together with {@link Design#read(com.vaadin.ui.Component)} to be able
+ * the load the design without further configuration. The design is loaded from
+ * the same package as the annotated class and by default the design filename is
+ * derived from the class name. Using the {@link #value()} parameter you can
+ * specify another design file name.
+ * 
+ * @since 7.4
+ * @author Vaadin Ltd
+ */
+@Retention(RetentionPolicy.RUNTIME)
+@Target(ElementType.TYPE)
+public @interface DesignRoot {
+    String value() default "";
+}
diff --git a/server/src/com/vaadin/server/SizeWithUnit.java b/server/src/com/vaadin/server/SizeWithUnit.java
new file mode 100644
index 0000000000..4c3c51eaec
--- /dev/null
+++ b/server/src/com/vaadin/server/SizeWithUnit.java
@@ -0,0 +1,127 @@
+/*
+ * Copyright 2000-2014 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.server;
+
+import java.io.Serializable;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
+import com.vaadin.server.Sizeable.Unit;
+import com.vaadin.shared.util.SharedUtil;
+
+/**
+ * A class for representing a value-unit pair. Also contains utility methods for
+ * parsing such pairs from a string.
+ * 
+ * @since 7.4
+ * @author Vaadin Ltd
+ */
+public class SizeWithUnit implements Serializable {
+    private float size;
+    private Unit unit;
+    private static final Pattern sizePattern = Pattern
+            .compile(SharedUtil.SIZE_PATTERN);
+
+    /**
+     * Constructs a new SizeWithUnit object representing the pair (size, unit).
+     * 
+     * @param size
+     *            a numeric value
+     * @param unit
+     *            a unit
+     */
+    public SizeWithUnit(float size, Unit unit) {
+        this.size = size;
+        this.unit = unit;
+    }
+
+    /**
+     * Returns the numeric value stored in this object.
+     * 
+     * @return the value of this (value, unit) pair
+     */
+    public float getSize() {
+        return size;
+    }
+
+    /**
+     * Returns the unit stored in this object.
+     * 
+     * @return the unit of this (value, unit) pair
+     */
+    public Unit getUnit() {
+        return unit;
+    }
+
+    /**
+     * Returns an object whose numeric value and unit are taken from the string
+     * s. If s does not specify a unit and defaultUnit is not null, defaultUnit
+     * is used as the unit. If defaultUnit is null and s is a nonempty string
+     * representing a unitless number, an exception is thrown. Null or empty
+     * string will produce {-1,Unit#PIXELS}.
+     * 
+     * @param s
+     *            the string to be parsed
+     * @param defaultUnit
+     *            The unit to be used if s does not contain any unit. Use null
+     *            for no default unit.
+     * @return an object containing the parsed value and unit
+     */
+    public static SizeWithUnit parseStringSize(String s, Unit defaultUnit) {
+        if (s == null) {
+            return null;
+        }
+        s = s.trim();
+        if ("".equals(s)) {
+            return null;
+        }
+        float size = 0;
+        Unit unit = null;
+        Matcher matcher = sizePattern.matcher(s);
+        if (matcher.find()) {
+            size = Float.parseFloat(matcher.group(1));
+            if (size < 0) {
+                size = -1;
+                unit = Unit.PIXELS;
+            } else {
+                String symbol = matcher.group(2);
+                if ((symbol != null && symbol.length() > 0)
+                        || defaultUnit == null) {
+                    unit = Unit.getUnitFromSymbol(symbol);
+                } else {
+                    unit = defaultUnit;
+                }
+            }
+        } else {
+            throw new IllegalArgumentException("Invalid size argument: \"" + s
+                    + "\" (should match " + sizePattern.pattern() + ")");
+        }
+        return new SizeWithUnit(size, unit);
+    }
+
+    /**
+     * Returns an object whose numeric value and unit are taken from the string
+     * s. Null or empty string will produce {-1,Unit#PIXELS}. An exception is
+     * thrown if s specifies a number without a unit.
+     * 
+     * @param s
+     *            the string to be parsed
+     * @return an object containing the parsed value and unit
+     */
+    public static SizeWithUnit parseStringSize(String s) {
+        return parseStringSize(s, null);
+    }
+}
\ No newline at end of file
diff --git a/server/src/com/vaadin/ui/AbsoluteLayout.java b/server/src/com/vaadin/ui/AbsoluteLayout.java
index af47981db6..12aa8ea9a6 100644
--- a/server/src/com/vaadin/ui/AbsoluteLayout.java
+++ b/server/src/com/vaadin/ui/AbsoluteLayout.java
@@ -21,6 +21,10 @@ import java.util.Iterator;
 import java.util.LinkedHashMap;
 import java.util.Map;
 
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.nodes.Node;
+
 import com.vaadin.event.LayoutEvents.LayoutClickEvent;
 import com.vaadin.event.LayoutEvents.LayoutClickListener;
 import com.vaadin.event.LayoutEvents.LayoutClickNotifier;
@@ -30,6 +34,8 @@ import com.vaadin.shared.EventId;
 import com.vaadin.shared.MouseEventDetails;
 import com.vaadin.shared.ui.absolutelayout.AbsoluteLayoutServerRpc;
 import com.vaadin.shared.ui.absolutelayout.AbsoluteLayoutState;
+import com.vaadin.ui.declarative.DesignAttributeHandler;
+import com.vaadin.ui.declarative.DesignContext;
 
 /**
  * AbsoluteLayout is a layout implementation that mimics html absolute
@@ -40,6 +46,13 @@ import com.vaadin.shared.ui.absolutelayout.AbsoluteLayoutState;
 public class AbsoluteLayout extends AbstractLayout implements
         LayoutClickNotifier {
 
+    // constants for design attributes
+    private static final String ATTR_TOP = ":top";
+    private static final String ATTR_RIGHT = ":right";
+    private static final String ATTR_BOTTOM = ":bottom";
+    private static final String ATTR_LEFT = ":left";
+    private static final String ATTR_Z_INDEX = ":z-index";
+
     private AbsoluteLayoutServerRpc rpc = new AbsoluteLayoutServerRpc() {
 
         @Override
@@ -658,4 +671,98 @@ public class AbsoluteLayout extends AbstractLayout implements
     public void removeListener(LayoutClickListener listener) {
         removeLayoutClickListener(listener);
     }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#readDesign(org.jsoup.nodes .Node,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        // process default attributes
+        super.readDesign(design, designContext);
+        // handle children
+        for (Element childComponent : design.children()) {
+            Attributes attr = childComponent.attributes();
+            Component newChild = designContext.readDesign(childComponent);
+            StringBuilder css = new StringBuilder();
+            if (attr.hasKey(ATTR_TOP)) {
+                css.append("top:").append(attr.get(ATTR_TOP)).append(";");
+            }
+            if (attr.hasKey(ATTR_RIGHT)) {
+                css.append("right:").append(attr.get(ATTR_RIGHT)).append(";");
+            }
+            if (attr.hasKey(ATTR_BOTTOM)) {
+                css.append("bottom:").append(attr.get(ATTR_BOTTOM)).append(";");
+            }
+            if (attr.hasKey(ATTR_LEFT)) {
+                css.append("left:").append(attr.get(ATTR_LEFT)).append(";");
+            }
+            if (attr.hasKey(ATTR_Z_INDEX)) {
+                css.append("z-index:").append(attr.get(ATTR_Z_INDEX))
+                        .append(";");
+            }
+            addComponent(newChild, css.toString());
+        }
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#writeDesign(org.jsoup.nodes.Node,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        super.writeDesign(design, designContext);
+        AbsoluteLayout def = designContext.getDefaultInstance(this);
+        if (!designContext.shouldWriteChildren(this, def)) {
+            return;
+        }
+        // handle children
+        for (Component child : this) {
+            Element childElement = designContext.createElement(child);
+            design.appendChild(childElement);
+            child.writeDesign(childElement, designContext);
+            // handle position
+            ComponentPosition position = getPosition(child);
+            writePositionAttribute(childElement, ATTR_TOP, position
+                    .getTopUnits().getSymbol(), position.getTopValue());
+            writePositionAttribute(childElement, ATTR_RIGHT, position
+                    .getRightUnits().getSymbol(), position.getRightValue());
+            writePositionAttribute(childElement, ATTR_BOTTOM, position
+                    .getBottomUnits().getSymbol(), position.getBottomValue());
+            writePositionAttribute(childElement, ATTR_LEFT, position
+                    .getLeftUnits().getSymbol(), position.getLeftValue());
+            // handle z-index
+            if (position.getZIndex() >= 0) {
+                childElement
+                        .attr(ATTR_Z_INDEX, String.valueOf(position.zIndex));
+            }
+        }
+    }
+
+    /**
+     * Private method for writing position attributes
+     * 
+     * @since
+     * @param node
+     *            target node
+     * @param key
+     *            attribute key
+     * @param symbol
+     *            value symbol
+     * @param value
+     *            the value
+     */
+    private void writePositionAttribute(Node node, String key, String symbol,
+            Float value) {
+        if (value != null) {
+            String valueString = DesignAttributeHandler.formatFloat(value
+                    .floatValue());
+            node.attr(key, valueString + symbol);
+        }
+    }
+
 }
diff --git a/server/src/com/vaadin/ui/AbstractComponent.java b/server/src/com/vaadin/ui/AbstractComponent.java
index 5c4fba739d..a41d1b4056 100644
--- a/server/src/com/vaadin/ui/AbstractComponent.java
+++ b/server/src/com/vaadin/ui/AbstractComponent.java
@@ -16,29 +16,44 @@
 
 package com.vaadin.ui;
 
-import java.io.Serializable;
 import java.lang.reflect.Method;
 import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collection;
+import java.util.HashSet;
 import java.util.Iterator;
 import java.util.List;
 import java.util.Locale;
+import java.util.Set;
 import java.util.StringTokenizer;
-import java.util.regex.Matcher;
-import java.util.regex.Pattern;
+import java.util.logging.Logger;
+
+import org.jsoup.nodes.Attribute;
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
 
 import com.vaadin.event.ActionManager;
 import com.vaadin.event.ConnectorActionManager;
 import com.vaadin.event.ShortcutListener;
 import com.vaadin.server.AbstractClientConnector;
+import com.vaadin.server.AbstractErrorMessage.ContentMode;
 import com.vaadin.server.ComponentSizeValidator;
 import com.vaadin.server.ErrorMessage;
+import com.vaadin.server.ErrorMessage.ErrorLevel;
+import com.vaadin.server.Extension;
 import com.vaadin.server.Resource;
+import com.vaadin.server.Responsive;
+import com.vaadin.server.SizeWithUnit;
+import com.vaadin.server.Sizeable;
+import com.vaadin.server.UserError;
 import com.vaadin.server.VaadinSession;
 import com.vaadin.shared.AbstractComponentState;
 import com.vaadin.shared.ComponentConstants;
 import com.vaadin.shared.ui.ComponentStateUtil;
 import com.vaadin.shared.util.SharedUtil;
 import com.vaadin.ui.Field.ValueChangeEvent;
+import com.vaadin.ui.declarative.DesignAttributeHandler;
+import com.vaadin.ui.declarative.DesignContext;
 import com.vaadin.util.ReflectTools;
 
 /**
@@ -46,7 +61,7 @@ import com.vaadin.util.ReflectTools;
  * {@link Component} interface. Basic UI components that are not derived from an
  * external component can inherit this class to easily qualify as Vaadin
  * components. Most components in Vaadin do just that.
- *
+ * 
  * @author Vaadin Ltd.
  * @since 3.0
  */
@@ -83,8 +98,6 @@ public abstract class AbstractComponent extends AbstractClientConnector
     private float height = SIZE_UNDEFINED;
     private Unit widthUnit = Unit.PIXELS;
     private Unit heightUnit = Unit.PIXELS;
-    private static final Pattern sizePattern = Pattern
-            .compile(SharedUtil.SIZE_PATTERN);
 
     /**
      * Keeps track of the Actions added to this component; the actual
@@ -98,6 +111,8 @@ public abstract class AbstractComponent extends AbstractClientConnector
 
     private Boolean explicitImmediateValue;
 
+    protected static final String DESIGN_ATTR_PLAIN_TEXT = "plain-text";
+
     /* Constructor */
 
     /**
@@ -241,7 +256,7 @@ public abstract class AbstractComponent extends AbstractClientConnector
      * Sets the component's caption <code>String</code>. Caption is the visible
      * name of the component. This method will trigger a
      * {@link RepaintRequestEvent}.
-     *
+     * 
      * @param caption
      *            the new caption <code>String</code> for the component.
      */
@@ -272,7 +287,7 @@ public abstract class AbstractComponent extends AbstractClientConnector
 
     /**
      * Sets the locale of this component.
-     *
+     * 
      * <pre>
      * // Component for which the locale is meaningful
      * InlineDateField date = new InlineDateField(&quot;Datum&quot;);
@@ -284,8 +299,8 @@ public abstract class AbstractComponent extends AbstractClientConnector
      * date.setResolution(DateField.RESOLUTION_DAY);
      * layout.addComponent(date);
      * </pre>
-     *
-     *
+     * 
+     * 
      * @param locale
      *            the locale to become this component's locale.
      */
@@ -311,7 +326,7 @@ public abstract class AbstractComponent extends AbstractClientConnector
     /**
      * Sets the component's icon. This method will trigger a
      * {@link RepaintRequestEvent}.
-     *
+     * 
      * @param icon
      *            the icon to be shown with the component's caption.
      */
@@ -377,7 +392,7 @@ public abstract class AbstractComponent extends AbstractClientConnector
 
     /**
      * Sets the component's immediate mode to the specified status.
-     *
+     * 
      * @param immediate
      *            the boolean value specifying if the component should be in the
      *            immediate mode after the call.
@@ -438,11 +453,11 @@ public abstract class AbstractComponent extends AbstractClientConnector
      * Sets the component's description. See {@link #getDescription()} for more
      * information on what the description is. This method will trigger a
      * {@link RepaintRequestEvent}.
-     *
+     * 
      * The description is displayed as HTML in tooltips or directly in certain
      * components so care should be taken to avoid creating the possibility for
      * HTML injection and possibly XSS vulnerabilities.
-     *
+     * 
      * @param description
      *            the new description string for the component.
      */
@@ -491,7 +506,7 @@ public abstract class AbstractComponent extends AbstractClientConnector
      * To find the Window that contains the component, use {@code Window w =
      * getParent(Window.class);}
      * </p>
-     *
+     * 
      * @param <T>
      *            The type of the ancestor
      * @param parentType
@@ -512,7 +527,7 @@ public abstract class AbstractComponent extends AbstractClientConnector
 
     /**
      * Gets the error message for this component.
-     *
+     * 
      * @return ErrorMessage containing the description of the error state of the
      *         component or null, if the component contains no errors. Extending
      *         classes should override this method if they support other error
@@ -525,9 +540,9 @@ public abstract class AbstractComponent extends AbstractClientConnector
 
     /**
      * Gets the component's error message.
-     *
+     * 
      * @link Terminal.ErrorMessage#ErrorMessage(String, int)
-     *
+     * 
      * @return the component's error message.
      */
     public ErrorMessage getComponentError() {
@@ -537,9 +552,9 @@ public abstract class AbstractComponent extends AbstractClientConnector
     /**
      * Sets the component's error message. The message may contain certain XML
      * tags, for more information see
-     *
+     * 
      * @link Component.ErrorMessage#ErrorMessage(String, int)
-     *
+     * 
      * @param componentError
      *            the new <code>ErrorMessage</code> of the component.
      */
@@ -616,7 +631,7 @@ public abstract class AbstractComponent extends AbstractClientConnector
 
     /**
      * Build CSS compatible string representation of height.
-     *
+     * 
      * @return CSS height
      */
     private String getCSSHeight() {
@@ -625,7 +640,7 @@ public abstract class AbstractComponent extends AbstractClientConnector
 
     /**
      * Build CSS compatible string representation of width.
-     *
+     * 
      * @return CSS width
      */
     private String getCSSWidth() {
@@ -635,12 +650,12 @@ public abstract class AbstractComponent extends AbstractClientConnector
     /**
      * Returns the shared state bean with information to be sent from the server
      * to the client.
-     *
+     * 
      * Subclasses should override this method and set any relevant fields of the
      * state returned by super.getState().
-     *
+     * 
      * @since 7.0
-     *
+     * 
      * @return updated component shared state
      */
     @Override
@@ -731,7 +746,7 @@ public abstract class AbstractComponent extends AbstractClientConnector
     /**
      * Sets the data object, that can be used for any application specific data.
      * The component does not use or modify this data.
-     *
+     * 
      * @param data
      *            the Application specific data.
      * @since 3.1
@@ -742,7 +757,7 @@ public abstract class AbstractComponent extends AbstractClientConnector
 
     /**
      * Gets the application specific data. See {@link #setData(Object)}.
-     *
+     * 
      * @return the Application specific data set with setData function.
      * @since 3.1
      */
@@ -873,7 +888,7 @@ public abstract class AbstractComponent extends AbstractClientConnector
      */
     @Override
     public void setWidth(String width) {
-        Size size = parseStringSize(width);
+        SizeWithUnit size = SizeWithUnit.parseStringSize(width);
         if (size != null) {
             setWidth(size.getSize(), size.getUnit());
         } else {
@@ -888,7 +903,7 @@ public abstract class AbstractComponent extends AbstractClientConnector
      */
     @Override
     public void setHeight(String height) {
-        Size size = parseStringSize(height);
+        SizeWithUnit size = SizeWithUnit.parseStringSize(height);
         if (size != null) {
             setHeight(size.getSize(), size.getUnit());
         } else {
@@ -897,51 +912,348 @@ public abstract class AbstractComponent extends AbstractClientConnector
     }
 
     /*
-     * Returns array with size in index 0 unit in index 1. Null or empty string
-     * will produce {-1,Unit#PIXELS}
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.Component#readDesign(org.jsoup.nodes.Element,
+     * com.vaadin.ui.declarative.DesignContext)
      */
-    private static Size parseStringSize(String s) {
-        if (s == null) {
-            return null;
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        Attributes attr = design.attributes();
+        // handle default attributes
+        for (String attribute : getDefaultAttributes()) {
+            if (!design.hasAttr(attribute)) {
+                continue;
+            }
+
+            DesignAttributeHandler.readAttribute(this, attribute, attr);
+        }
+        // handle immediate
+        if (attr.hasKey("immediate")) {
+            setImmediate(DesignAttributeHandler.parseBoolean(attr
+                    .get("immediate")));
         }
-        s = s.trim();
-        if ("".equals(s)) {
+
+        // handle locale
+        if (attr.hasKey("locale")) {
+            setLocale(getLocaleFromString(attr.get("locale")));
+        }
+        // handle width and height
+        readSize(attr);
+        // handle component error
+        if (attr.hasKey("error")) {
+            UserError error = new UserError(attr.get("error"),
+                    ContentMode.HTML, ErrorLevel.ERROR);
+            setComponentError(error);
+        }
+        // Tab index when applicable
+        if (design.hasAttr("tabindex") && this instanceof Focusable) {
+            ((Focusable) this).setTabIndex(DesignAttributeHandler
+                    .readAttribute("tabindex", design.attributes(),
+                            Integer.class));
+        }
+
+        // handle responsive
+        if (attr.hasKey("responsive")) {
+            setResponsive(DesignAttributeHandler.parseBoolean(attr
+                    .get("responsive")));
+        }
+        // check for unsupported attributes
+        Set<String> supported = new HashSet<String>();
+        supported.addAll(getDefaultAttributes());
+        supported.addAll(getCustomAttributes());
+        for (Attribute a : attr) {
+            if (!a.getKey().startsWith(":") && !supported.contains(a.getKey())) {
+                getLogger().info(
+                        "Unsupported attribute found when reading from design : "
+                                + a.getKey());
+            }
+        }
+    }
+
+    /**
+     * Constructs a Locale corresponding to the given string. The string should
+     * consist of one, two or three parts with '_' between the different parts
+     * if there is more than one part. The first part specifies the language,
+     * the second part the country and the third part the variant of the locale.
+     * 
+     * @param localeString
+     *            the locale specified as a string
+     * @return the Locale object corresponding to localeString
+     */
+    private Locale getLocaleFromString(String localeString) {
+        if (localeString == null) {
             return null;
         }
-        float size = 0;
-        Unit unit = null;
-        Matcher matcher = sizePattern.matcher(s);
-        if (matcher.find()) {
-            size = Float.parseFloat(matcher.group(1));
-            if (size < 0) {
-                size = -1;
-                unit = Unit.PIXELS;
-            } else {
-                String symbol = matcher.group(2);
-                unit = Unit.getUnitFromSymbol(symbol);
+        String[] parts = localeString.split("_");
+        if (parts.length > 3) {
+            throw new RuntimeException("Cannot parse the locale string: "
+                    + localeString);
+        }
+        switch (parts.length) {
+        case 1:
+            return new Locale(parts[0]);
+        case 2:
+            return new Locale(parts[0], parts[1]);
+        default:
+            return new Locale(parts[0], parts[1], parts[2]);
+        }
+    }
+
+    /**
+     * Toggles responsiveness of this component.
+     * 
+     * @since 7.4
+     * @param responsive
+     *            boolean enables responsiveness, false disables
+     */
+    private void setResponsive(boolean responsive) {
+        if (responsive) {
+            // make responsive if necessary
+            if (!isResponsive()) {
+                Responsive.makeResponsive(this);
+            }
+        } else {
+            // remove responsive extensions
+            List<Extension> extensions = new ArrayList<Extension>(
+                    getExtensions());
+            for (Extension e : extensions) {
+                if (e instanceof Responsive) {
+                    removeExtension(e);
+                }
+            }
+        }
+    }
+
+    /**
+     * Returns true if the component is responsive
+     * 
+     * @since 7.4
+     * @return true if the component is responsive
+     */
+    private boolean isResponsive() {
+        for (Extension e : getExtensions()) {
+            if (e instanceof Responsive) {
+                return true;
             }
+        }
+        return false;
+    }
+
+    /**
+     * Reads the size of this component from the given design attributes. If the
+     * attributes do not contain relevant size information, defaults is
+     * consulted.
+     * 
+     * @param attributes
+     *            the design attributes
+     * @param defaultInstance
+     *            instance of the class that has default sizing.
+     */
+    private void readSize(Attributes attributes) {
+        // read width
+        if (attributes.hasKey("width-auto") || attributes.hasKey("size-auto")) {
+            this.setWidth(null);
+        } else if (attributes.hasKey("width-full")
+                || attributes.hasKey("size-full")) {
+            this.setWidth("100%");
+        } else if (attributes.hasKey("width")) {
+            this.setWidth(attributes.get("width"));
+        }
+
+        // read height
+        if (attributes.hasKey("height-auto") || attributes.hasKey("size-auto")) {
+            this.setHeight(null);
+        } else if (attributes.hasKey("height-full")
+                || attributes.hasKey("size-full")) {
+            this.setHeight("100%");
+        } else if (attributes.hasKey("height")) {
+            this.setHeight(attributes.get("height"));
+        }
+    }
+
+    /**
+     * Writes the size related attributes for the component if they differ from
+     * the defaults
+     * 
+     * @param component
+     *            the component
+     * @param attributes
+     *            the attribute map where the attribute are written
+     * @param defaultInstance
+     *            the default instance of the class for fetching the default
+     *            values
+     */
+    private void writeSize(Attributes attributes, Component defaultInstance) {
+        if (hasEqualSize(defaultInstance)) {
+            // we have default values -> ignore
+            return;
+        }
+        boolean widthFull = getWidth() == 100f
+                && getWidthUnits().equals(Sizeable.Unit.PERCENTAGE);
+        boolean heightFull = getHeight() == 100f
+                && getHeightUnits().equals(Sizeable.Unit.PERCENTAGE);
+        boolean widthAuto = getWidth() == -1;
+        boolean heightAuto = getHeight() == -1;
+
+        // first try the full shorthands
+        if (widthFull && heightFull) {
+            attributes.put("size-full", "true");
+        } else if (widthAuto && heightAuto) {
+            attributes.put("size-auto", "true");
         } else {
-            throw new IllegalArgumentException("Invalid size argument: \"" + s
-                    + "\" (should match " + sizePattern.pattern() + ")");
+            // handle width
+            if (!hasEqualWidth(defaultInstance)) {
+                if (widthFull) {
+                    attributes.put("width-full", "true");
+                } else if (widthAuto) {
+                    attributes.put("width-auto", "true");
+                } else {
+                    String widthString = DesignAttributeHandler
+                            .formatFloat(getWidth())
+                            + getWidthUnits().getSymbol();
+                    attributes.put("width", widthString);
+
+                }
+            }
+            if (!hasEqualHeight(defaultInstance)) {
+                // handle height
+                if (heightFull) {
+                    attributes.put("height-full", "true");
+                } else if (heightAuto) {
+                    attributes.put("height-auto", "true");
+                } else {
+                    String heightString = DesignAttributeHandler
+                            .formatFloat(getHeight())
+                            + getHeightUnits().getSymbol();
+                    attributes.put("height", heightString);
+                }
+            }
         }
-        return new Size(size, unit);
     }
 
-    private static class Size implements Serializable {
-        float size;
-        Unit unit;
+    /**
+     * Test if the given component has equal width with this instance
+     * 
+     * @param component
+     *            the component for the width comparison
+     * @return true if the widths are equal
+     */
+    private boolean hasEqualWidth(Component component) {
+        return getWidth() == component.getWidth()
+                && getWidthUnits().equals(component.getWidthUnits());
+    }
+
+    /**
+     * Test if the given component has equal height with this instance
+     * 
+     * @param component
+     *            the component for the height comparison
+     * @return true if the heights are equal
+     */
+    private boolean hasEqualHeight(Component component) {
+        return getHeight() == component.getHeight()
+                && getHeightUnits().equals(component.getHeightUnits());
+    }
+
+    /**
+     * Test if the given components has equal size with this instance
+     * 
+     * @param component
+     *            the component for the size comparison
+     * @return true if the sizes are equal
+     */
+    private boolean hasEqualSize(Component component) {
+        return hasEqualWidth(component) && hasEqualHeight(component);
+    }
+
+    /**
+     * Returns a collection of attributes that do not require custom handling
+     * when reading or writing design. These are typically attributes of some
+     * primitive type. The default implementation searches setters with
+     * primitive values
+     * 
+     * @return a collection of attributes that can be read and written using the
+     *         default approach.
+     */
+    private Collection<String> getDefaultAttributes() {
+        Collection<String> attributes = DesignAttributeHandler
+                .getSupportedAttributes(this.getClass());
+        attributes.removeAll(getCustomAttributes());
+        return attributes;
+    }
 
-        public Size(float size, Unit unit) {
-            this.size = size;
-            this.unit = unit;
+    /**
+     * Returns a collection of attributes that should not be handled by the
+     * basic implementation of the {@link readDesign} and {@link writeDesign}
+     * methods. Typically these are handled in a custom way in the overridden
+     * versions of the above methods
+     * 
+     * @return the collection of attributes that are not handled by the basic
+     *         implementation
+     */
+    protected Collection<String> getCustomAttributes() {
+        ArrayList<String> l = new ArrayList<String>(
+                Arrays.asList(customAttributes));
+        if (this instanceof Focusable) {
+            l.add("tab-index");
+            l.add("tabindex");
         }
+        return l;
+    }
+
+    private static final String[] customAttributes = new String[] { "width",
+            "height", "debug-id", "error", "width-auto", "height-auto",
+            "width-full", "height-full", "size-auto", "size-full",
+            "responsive", "immediate", "locale", "read-only", "_id" };
 
-        public float getSize() {
-            return size;
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.Component#writeDesign(org.jsoup.nodes.Element,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        // clear element contents
+        DesignAttributeHandler.clearElement(design);
+        AbstractComponent def = designContext.getDefaultInstance(this);
+        Attributes attr = design.attributes();
+        // handle default attributes
+        for (String attribute : getDefaultAttributes()) {
+            DesignAttributeHandler.writeAttribute(this, attribute, attr, def);
+        }
+        // handle immediate
+        if (explicitImmediateValue != null) {
+            DesignAttributeHandler.writeAttribute("immediate", attr,
+                    explicitImmediateValue, def.isImmediate(), Boolean.class);
+        }
+        // handle locale
+        if (getLocale() != null
+                && (getParent() == null || !getLocale().equals(
+                        getParent().getLocale()))) {
+            design.attr("locale", getLocale().toString());
+        }
+        // handle size
+        writeSize(attr, def);
+        // handle component error
+        String errorMsg = getComponentError() != null ? getComponentError()
+                .getFormattedHtmlMessage() : null;
+        String defErrorMsg = def.getComponentError() != null ? def
+                .getComponentError().getFormattedHtmlMessage() : null;
+        if (!SharedUtil.equals(errorMsg, defErrorMsg)) {
+            attr.put("error", errorMsg);
+        }
+        // handle tab index
+        if (this instanceof Focusable) {
+            DesignAttributeHandler.writeAttribute("tabindex", attr,
+                    ((Focusable) this).getTabIndex(),
+                    ((Focusable) def).getTabIndex(), Integer.class);
         }
 
-        public Unit getUnit() {
-            return unit;
+        // handle responsive
+        if (isResponsive()) {
+            attr.put("responsive", "");
         }
     }
 
@@ -952,7 +1264,7 @@ public abstract class AbstractComponent extends AbstractClientConnector
     /**
      * Gets the {@link ActionManager} used to manage the
      * {@link ShortcutListener}s added to this {@link Field}.
-     *
+     * 
      * @return the ActionManager in use
      */
     protected ActionManager getActionManager() {
@@ -996,7 +1308,7 @@ public abstract class AbstractComponent extends AbstractClientConnector
     /**
      * Determine whether a <code>content</code> component is equal to, or the
      * ancestor of this component.
-     *
+     * 
      * @param content
      *            the potential ancestor element
      * @return <code>true</code> if the relationship holds
@@ -1012,4 +1324,8 @@ public abstract class AbstractComponent extends AbstractClientConnector
         }
         return false;
     }
+
+    private static final Logger getLogger() {
+        return Logger.getLogger(AbstractComponent.class.getName());
+    }
 }
diff --git a/server/src/com/vaadin/ui/AbstractField.java b/server/src/com/vaadin/ui/AbstractField.java
index df7bbb68a2..9b9c7efd86 100644
--- a/server/src/com/vaadin/ui/AbstractField.java
+++ b/server/src/com/vaadin/ui/AbstractField.java
@@ -25,6 +25,10 @@ import java.util.Iterator;
 import java.util.LinkedList;
 import java.util.List;
 import java.util.Locale;
+import java.util.logging.Logger;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
 
 import com.vaadin.data.Buffered;
 import com.vaadin.data.Property;
@@ -43,6 +47,8 @@ import com.vaadin.server.CompositeErrorMessage;
 import com.vaadin.server.ErrorMessage;
 import com.vaadin.shared.AbstractFieldState;
 import com.vaadin.shared.util.SharedUtil;
+import com.vaadin.ui.declarative.DesignAttributeHandler;
+import com.vaadin.ui.declarative.DesignContext;
 
 /**
  * <p>
@@ -1738,4 +1744,55 @@ public abstract class AbstractField<T> extends AbstractComponent implements
             isListeningToPropertyEvents = false;
         }
     }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#readDesign(org.jsoup.nodes .Element,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        super.readDesign(design, designContext);
+        Attributes attr = design.attributes();
+        if (design.hasAttr("readonly")) {
+            setReadOnly(DesignAttributeHandler.readAttribute("readonly", attr,
+                    Boolean.class));
+        }
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#getCustomAttributes()
+     */
+    @Override
+    protected Collection<String> getCustomAttributes() {
+        Collection<String> attributes = super.getCustomAttributes();
+        attributes.add("readonly");
+        // must be handled by subclasses
+        attributes.add("value");
+        return attributes;
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#writeDesign(org.jsoup.nodes.Element
+     * , com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        super.writeDesign(design, designContext);
+        AbstractField def = (AbstractField) designContext
+                .getDefaultInstance(this);
+        Attributes attr = design.attributes();
+        // handle readonly
+        DesignAttributeHandler.writeAttribute("readonly", attr,
+                super.isReadOnly(), def.isReadOnly(), Boolean.class);
+    }
+
+    private static final Logger getLogger() {
+        return Logger.getLogger(AbstractField.class.getName());
+    }
 }
diff --git a/server/src/com/vaadin/ui/AbstractOrderedLayout.java b/server/src/com/vaadin/ui/AbstractOrderedLayout.java
index 638f6bc3f9..67bcfc904c 100644
--- a/server/src/com/vaadin/ui/AbstractOrderedLayout.java
+++ b/server/src/com/vaadin/ui/AbstractOrderedLayout.java
@@ -16,8 +16,13 @@
 
 package com.vaadin.ui;
 
+import java.util.Collection;
 import java.util.Iterator;
 import java.util.LinkedList;
+import java.util.logging.Logger;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
 
 import com.vaadin.event.LayoutEvents.LayoutClickEvent;
 import com.vaadin.event.LayoutEvents.LayoutClickListener;
@@ -26,10 +31,13 @@ import com.vaadin.server.Sizeable;
 import com.vaadin.shared.Connector;
 import com.vaadin.shared.EventId;
 import com.vaadin.shared.MouseEventDetails;
+import com.vaadin.shared.ui.AlignmentInfo;
 import com.vaadin.shared.ui.MarginInfo;
 import com.vaadin.shared.ui.orderedlayout.AbstractOrderedLayoutServerRpc;
 import com.vaadin.shared.ui.orderedlayout.AbstractOrderedLayoutState;
 import com.vaadin.shared.ui.orderedlayout.AbstractOrderedLayoutState.ChildComponentData;
+import com.vaadin.ui.declarative.DesignAttributeHandler;
+import com.vaadin.ui.declarative.DesignContext;
 
 @SuppressWarnings("serial")
 public abstract class AbstractOrderedLayout extends AbstractLayout implements
@@ -459,4 +467,121 @@ public abstract class AbstractOrderedLayout extends AbstractLayout implements
         setExpandRatio(target, expandRatio);
     }
 
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#readDesign(org.jsoup.nodes .Element,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        // process default attributes
+        super.readDesign(design, designContext);
+        // handle margin
+        if (design.hasAttr("margin")) {
+            setMargin(DesignAttributeHandler.readAttribute("margin",
+                    design.attributes(), Boolean.class));
+        }
+        // handle children
+        for (Element childComponent : design.children()) {
+            Attributes attr = childComponent.attributes();
+            Component newChild = designContext.readDesign(childComponent);
+            addComponent(newChild);
+            // handle alignment
+            int bitMask = 0;
+            if (attr.hasKey(":middle")) {
+                bitMask += AlignmentInfo.Bits.ALIGNMENT_VERTICAL_CENTER;
+            } else if (attr.hasKey(":bottom")) {
+                bitMask += AlignmentInfo.Bits.ALIGNMENT_BOTTOM;
+            } else {
+                bitMask += AlignmentInfo.Bits.ALIGNMENT_TOP;
+            }
+            if (attr.hasKey(":center")) {
+                bitMask += AlignmentInfo.Bits.ALIGNMENT_HORIZONTAL_CENTER;
+            } else if (attr.hasKey(":right")) {
+                bitMask += AlignmentInfo.Bits.ALIGNMENT_RIGHT;
+            } else {
+                bitMask += AlignmentInfo.Bits.ALIGNMENT_LEFT;
+            }
+            setComponentAlignment(newChild, new Alignment(bitMask));
+            // handle expand ratio
+            if (attr.hasKey(":expand")) {
+                String value = attr.get(":expand");
+                if (value.length() > 0) {
+                    try {
+                        float ratio = Float.valueOf(value);
+                        setExpandRatio(newChild, ratio);
+                    } catch (NumberFormatException nfe) {
+                        getLogger().info(
+                                "Failed to parse expand ratio " + value);
+                    }
+                } else {
+                    setExpandRatio(newChild, 1.0f);
+                }
+            }
+        }
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#writeDesign(org.jsoup.nodes.Element
+     * , com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        // write default attributes
+        super.writeDesign(design, designContext);
+        // handle margin
+        AbstractOrderedLayout def = (AbstractOrderedLayout) designContext
+                .getDefaultInstance(this);
+        if (getMargin().getBitMask() != def.getMargin().getBitMask()) {
+            design.attr("margin", "");
+        }
+        // handle children
+        if (!designContext.shouldWriteChildren(this, def)) {
+            return;
+        }
+
+        for (Component child : this) {
+            Element childElement = designContext.createElement(child);
+            design.appendChild(childElement);
+            // handle alignment
+            Alignment alignment = getComponentAlignment(child);
+            if (alignment.isMiddle()) {
+                childElement.attr(":middle", "");
+            } else if (alignment.isBottom()) {
+                childElement.attr(":bottom", "");
+            }
+            if (alignment.isCenter()) {
+                childElement.attr(":center", "");
+            } else if (alignment.isRight()) {
+                childElement.attr(":right", "");
+            }
+            // handle expand ratio
+            float expandRatio = getExpandRatio(child);
+            if (expandRatio == 1.0f) {
+                childElement.attr(":expand", "");
+            } else if (expandRatio > 0) {
+                childElement.attr(":expand",
+                        DesignAttributeHandler.formatFloat(expandRatio));
+            }
+        }
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#getCustomAttributes()
+     */
+    @Override
+    protected Collection<String> getCustomAttributes() {
+        Collection<String> customAttributes = super.getCustomAttributes();
+        customAttributes.add("margin");
+        return customAttributes;
+    }
+
+    private static Logger getLogger() {
+        return Logger.getLogger(AbstractOrderedLayout.class.getName());
+    }
 }
diff --git a/server/src/com/vaadin/ui/AbstractSingleComponentContainer.java b/server/src/com/vaadin/ui/AbstractSingleComponentContainer.java
index e7b5205f2d..244feb3bb9 100644
--- a/server/src/com/vaadin/ui/AbstractSingleComponentContainer.java
+++ b/server/src/com/vaadin/ui/AbstractSingleComponentContainer.java
@@ -18,9 +18,13 @@ package com.vaadin.ui;
 import java.util.Collections;
 import java.util.Iterator;
 
+import org.jsoup.nodes.Element;
+
 import com.vaadin.server.ComponentSizeValidator;
 import com.vaadin.server.VaadinService;
 import com.vaadin.server.VaadinSession;
+import com.vaadin.ui.declarative.DesignContext;
+import com.vaadin.ui.declarative.DesignException;
 
 /**
  * Abstract base class for component containers that have only one child
@@ -274,4 +278,50 @@ public abstract class AbstractSingleComponentContainer extends
         repaintChangedChildTree(dirtyChild, childrenMayBecomeUndefined, true);
     }
 
-}
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#readDesign(org.jsoup.nodes .Element,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        // process default attributes
+        super.readDesign(design, designContext);
+        // handle child element, checking that the design specifies at most one
+        // child
+        int childCount = design.children().size();
+        if (childCount > 1) {
+            throw new DesignException("The container of type "
+                    + getClass().toString()
+                    + " can have only one child component.");
+        } else if (childCount == 1) {
+            Element childElement = design.children().get(0);
+            Component newChild = designContext.readDesign(childElement);
+            setContent(newChild);
+        }
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#writeDesign(org.jsoup.nodes.Element
+     * , com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        // write default attributes (also clears children and attributes)
+        super.writeDesign(design, designContext);
+        AbstractSingleComponentContainer def = designContext
+                .getDefaultInstance(this);
+        if (!designContext.shouldWriteChildren(this, def)) {
+            return;
+        }
+        // handle child component
+        Component child = getContent();
+        if (child != null) {
+            Element childNode = designContext.createElement(child);
+            design.appendChild(childNode);
+        }
+    }
+}
\ No newline at end of file
diff --git a/server/src/com/vaadin/ui/AbstractSplitPanel.java b/server/src/com/vaadin/ui/AbstractSplitPanel.java
index 3d47ca256c..414681f5dd 100644
--- a/server/src/com/vaadin/ui/AbstractSplitPanel.java
+++ b/server/src/com/vaadin/ui/AbstractSplitPanel.java
@@ -18,16 +18,23 @@ package com.vaadin.ui;
 
 import java.io.Serializable;
 import java.lang.reflect.Method;
+import java.util.Collection;
 import java.util.Iterator;
 
+import org.jsoup.nodes.Element;
+
 import com.vaadin.event.ConnectorEventListener;
 import com.vaadin.event.MouseEvents.ClickEvent;
+import com.vaadin.server.SizeWithUnit;
 import com.vaadin.server.Sizeable;
 import com.vaadin.shared.EventId;
 import com.vaadin.shared.MouseEventDetails;
 import com.vaadin.shared.ui.splitpanel.AbstractSplitPanelRpc;
 import com.vaadin.shared.ui.splitpanel.AbstractSplitPanelState;
 import com.vaadin.shared.ui.splitpanel.AbstractSplitPanelState.SplitterState;
+import com.vaadin.ui.declarative.DesignAttributeHandler;
+import com.vaadin.ui.declarative.DesignContext;
+import com.vaadin.ui.declarative.DesignException;
 import com.vaadin.util.ReflectTools;
 
 /**
@@ -558,4 +565,125 @@ public abstract class AbstractSplitPanel extends AbstractComponentContainer {
     private SplitterState getSplitterState(boolean markAsDirty) {
         return ((AbstractSplitPanelState) super.getState(markAsDirty)).splitterState;
     }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#readDesign(org.jsoup.nodes .Element,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        // handle default attributes
+        super.readDesign(design, designContext);
+        // handle custom attributes, use default values if no explicit value
+        // set
+        // There is no setter for reversed, so it will be handled using
+        // setSplitPosition.
+        boolean reversed = false;
+        if (design.hasAttr("reversed")) {
+            reversed = DesignAttributeHandler.readAttribute("reversed",
+                    design.attributes(), Boolean.class);
+            setSplitPosition(getSplitPosition(), reversed);
+        }
+        if (design.hasAttr("split-position")) {
+            SizeWithUnit splitPosition = SizeWithUnit.parseStringSize(
+                    design.attr("split-position"), Unit.PERCENTAGE);
+            setSplitPosition(splitPosition.getSize(), splitPosition.getUnit(),
+                    reversed);
+        }
+        if (design.hasAttr("min-split-position")) {
+            SizeWithUnit minSplitPosition = SizeWithUnit.parseStringSize(
+                    design.attr("min-split-position"), Unit.PERCENTAGE);
+            setMinSplitPosition(minSplitPosition.getSize(),
+                    minSplitPosition.getUnit());
+        }
+        if (design.hasAttr("max-split-position")) {
+            SizeWithUnit maxSplitPosition = SizeWithUnit.parseStringSize(
+                    design.attr("max-split-position"), Unit.PERCENTAGE);
+            setMaxSplitPosition(maxSplitPosition.getSize(),
+                    maxSplitPosition.getUnit());
+        }
+        // handle children
+        if (design.children().size() > 2) {
+            throw new DesignException(
+                    "A split panel can contain at most two components.");
+        }
+        for (Element childElement : design.children()) {
+            Component childComponent = designContext.readDesign(childElement);
+            if (childElement.hasAttr(":second")) {
+                setSecondComponent(childComponent);
+            } else {
+                addComponent(childComponent);
+            }
+        }
+    }
+
+    @Override
+    protected Collection<String> getCustomAttributes() {
+        Collection<String> attributes = super.getCustomAttributes();
+        // the setters of the properties do not accept strings such as "20px"
+        attributes.add("split-position");
+        attributes.add("min-split-position");
+        attributes.add("max-split-position");
+        // no explicit setter for reversed
+        attributes.add("reversed");
+        return attributes;
+    }
+
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        // handle default attributes (also clears children and attributes)
+        super.writeDesign(design, designContext);
+        // handle custom attributes (write only if a value is not the
+        // default value)
+        AbstractSplitPanel def = (AbstractSplitPanel) designContext
+                .getDefaultInstance(this);
+        if (getSplitPosition() != def.getSplitPosition()
+                || !def.getSplitPositionUnit().equals(getSplitPositionUnit())) {
+            String splitPositionString = asString(getSplitPosition())
+                    + getSplitPositionUnit();
+            design.attr("split-position", splitPositionString);
+        }
+        if (getMinSplitPosition() != def.getMinSplitPosition()
+                || !def.getMinSplitPositionUnit().equals(
+                        getMinSplitPositionUnit())) {
+            design.attr("min-split-position", asString(getMinSplitPosition())
+                    + getMinSplitPositionUnit());
+        }
+        if (getMaxSplitPosition() != def.getMaxSplitPosition()
+                || !def.getMaxSplitPositionUnit().equals(
+                        getMaxSplitPositionUnit())) {
+            design.attr("max-split-position", asString(getMaxSplitPosition())
+                    + getMaxSplitPositionUnit());
+        }
+        if (getSplitterState().positionReversed) {
+            design.attr("reversed", "");
+        }
+        // handle child components
+        if (!designContext.shouldWriteChildren(this, def)) {
+            return;
+        }
+        Component firstComponent = getFirstComponent();
+        Component secondComponent = getSecondComponent();
+        if (firstComponent != null) {
+            Element childElement = designContext.createElement(firstComponent);
+            design.appendChild(childElement);
+        }
+        if (secondComponent != null) {
+            Element childElement = designContext.createElement(secondComponent);
+            if (firstComponent == null) {
+                childElement.attr(":second", "");
+            }
+            design.appendChild(childElement);
+        }
+    }
+
+    private String asString(float number) {
+        int truncated = (int) number;
+        if (truncated == number) {
+            return "" + truncated;
+        }
+        return "" + number;
+    }
 }
diff --git a/server/src/com/vaadin/ui/AbstractTextField.java b/server/src/com/vaadin/ui/AbstractTextField.java
index ea0372bc8c..93025ac0fd 100644
--- a/server/src/com/vaadin/ui/AbstractTextField.java
+++ b/server/src/com/vaadin/ui/AbstractTextField.java
@@ -16,8 +16,12 @@
 
 package com.vaadin.ui;
 
+import java.util.Collection;
 import java.util.Map;
 
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+
 import com.vaadin.event.FieldEvents.BlurEvent;
 import com.vaadin.event.FieldEvents.BlurListener;
 import com.vaadin.event.FieldEvents.BlurNotifier;
@@ -31,6 +35,8 @@ import com.vaadin.server.PaintException;
 import com.vaadin.server.PaintTarget;
 import com.vaadin.shared.ui.textfield.AbstractTextFieldState;
 import com.vaadin.shared.ui.textfield.TextFieldConstants;
+import com.vaadin.ui.declarative.DesignAttributeHandler;
+import com.vaadin.ui.declarative.DesignContext;
 
 public abstract class AbstractTextField extends AbstractField<String> implements
         BlurNotifier, FocusNotifier, TextChangeNotifier, LegacyComponent {
@@ -757,4 +763,51 @@ public abstract class AbstractTextField extends AbstractField<String> implements
         removeBlurListener(listener);
     }
 
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractField#readDesign(org.jsoup.nodes.Element ,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        super.readDesign(design, designContext);
+        Attributes attr = design.attributes();
+        if (attr.hasKey("maxlength")) {
+            setMaxLength(DesignAttributeHandler.readAttribute("maxlength",
+                    attr, Integer.class));
+        }
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractField#getCustomAttributes()
+     */
+    @Override
+    protected Collection<String> getCustomAttributes() {
+        Collection<String> customAttributes = super.getCustomAttributes();
+        customAttributes.add("maxlength");
+        customAttributes.add("max-length"); // to prevent this appearing in
+                                            // output
+        customAttributes.add("cursor-position");
+        return customAttributes;
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractField#writeDesign(org.jsoup.nodes.Element,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        super.writeDesign(design, designContext);
+        AbstractTextField def = (AbstractTextField) designContext
+                .getDefaultInstance(this);
+        Attributes attr = design.attributes();
+        DesignAttributeHandler.writeAttribute("maxlength", attr,
+                getMaxLength(), def.getMaxLength(), Integer.class);
+    }
+
 }
diff --git a/server/src/com/vaadin/ui/Button.java b/server/src/com/vaadin/ui/Button.java
index e58ad7bee5..c102157bf1 100644
--- a/server/src/com/vaadin/ui/Button.java
+++ b/server/src/com/vaadin/ui/Button.java
@@ -18,6 +18,10 @@ package com.vaadin.ui;
 
 import java.io.Serializable;
 import java.lang.reflect.Method;
+import java.util.Collection;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
 
 import com.vaadin.event.Action;
 import com.vaadin.event.FieldEvents;
@@ -35,6 +39,8 @@ import com.vaadin.shared.MouseEventDetails;
 import com.vaadin.shared.ui.button.ButtonServerRpc;
 import com.vaadin.shared.ui.button.ButtonState;
 import com.vaadin.ui.Component.Focusable;
+import com.vaadin.ui.declarative.DesignAttributeHandler;
+import com.vaadin.ui.declarative.DesignContext;
 import com.vaadin.util.ReflectTools;
 
 /**
@@ -660,4 +666,81 @@ public class Button extends AbstractComponent implements
         return getState(false).htmlContentAllowed;
     }
 
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#readDesign(org.jsoup.nodes .Element,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        super.readDesign(design, designContext);
+        Attributes attr = design.attributes();
+        String content = design.html();
+        setCaption(content);
+        // plain-text (default is html)
+        Boolean plain = DesignAttributeHandler.readAttribute(
+                DESIGN_ATTR_PLAIN_TEXT, attr, Boolean.class);
+        if (plain == null || !plain) {
+            setHtmlContentAllowed(true);
+        }
+        if (attr.hasKey("icon-alt")) {
+            setIconAlternateText(DesignAttributeHandler.readAttribute(
+                    "icon-alt", attr, String.class));
+        }
+        // click-shortcut
+        removeClickShortcut();
+        ShortcutAction action = DesignAttributeHandler.readAttribute(
+                "click-shortcut", attr, ShortcutAction.class);
+        if (action != null) {
+            setClickShortcut(action.getKeyCode(), action.getModifiers());
+        }
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#getCustomAttributes()
+     */
+    @Override
+    protected Collection<String> getCustomAttributes() {
+        Collection<String> result = super.getCustomAttributes();
+        result.add(DESIGN_ATTR_PLAIN_TEXT);
+        result.add("caption");
+        result.add("icon-alt");
+        result.add("icon-alternate-text");
+        result.add("click-shortcut");
+        result.add("html-content-allowed");
+        return result;
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#writeDesign(org.jsoup.nodes.Element
+     * , com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        super.writeDesign(design, designContext);
+        Attributes attr = design.attributes();
+        Button def = (Button) designContext.getDefaultInstance(this);
+        String content = getCaption();
+        if (content != null) {
+            design.html(content);
+        }
+        // plain-text (default is html)
+        if (!isHtmlContentAllowed()) {
+            design.attr(DESIGN_ATTR_PLAIN_TEXT, "");
+        }
+        // icon-alt
+        DesignAttributeHandler.writeAttribute("icon-alt", attr,
+                getIconAlternateText(), def.getIconAlternateText(),
+                String.class);
+        // click-shortcut
+        if (clickShortcut != null) {
+            DesignAttributeHandler.writeAttribute("click-shortcut", attr,
+                    clickShortcut, null, ShortcutAction.class);
+        }
+    }
 }
diff --git a/server/src/com/vaadin/ui/CheckBox.java b/server/src/com/vaadin/ui/CheckBox.java
index 7d9da30f29..e26e5c4750 100644
--- a/server/src/com/vaadin/ui/CheckBox.java
+++ b/server/src/com/vaadin/ui/CheckBox.java
@@ -16,6 +16,11 @@
 
 package com.vaadin.ui;
 
+import java.util.Collection;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+
 import com.vaadin.data.Property;
 import com.vaadin.event.FieldEvents.BlurEvent;
 import com.vaadin.event.FieldEvents.BlurListener;
@@ -25,6 +30,8 @@ import com.vaadin.event.FieldEvents.FocusListener;
 import com.vaadin.shared.MouseEventDetails;
 import com.vaadin.shared.ui.checkbox.CheckBoxServerRpc;
 import com.vaadin.shared.ui.checkbox.CheckBoxState;
+import com.vaadin.ui.declarative.DesignAttributeHandler;
+import com.vaadin.ui.declarative.DesignContext;
 
 public class CheckBox extends AbstractField<Boolean> {
 
@@ -203,4 +210,47 @@ public class CheckBox extends AbstractField<Boolean> {
         Boolean value = getValue();
         return (null == value) ? false : value.booleanValue();
     }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractField#readDesign(org.jsoup.nodes.Element,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        super.readDesign(design, designContext);
+        if (design.hasAttr("checked")) {
+            this.setValue(DesignAttributeHandler.readAttribute("checked",
+                    design.attributes(), Boolean.class));
+        }
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractField#getCustomAttributes()
+     */
+    @Override
+    protected Collection<String> getCustomAttributes() {
+        Collection<String> attributes = super.getCustomAttributes();
+        attributes.add("checked");
+        return attributes;
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractField#writeDesign(org.jsoup.nodes.Element,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        super.writeDesign(design, designContext);
+        CheckBox def = (CheckBox) designContext.getDefaultInstance(this);
+        Attributes attr = design.attributes();
+        DesignAttributeHandler.writeAttribute("checked", attr, getValue(),
+                def.getValue(), Boolean.class);
+    }
+
 }
diff --git a/server/src/com/vaadin/ui/Component.java b/server/src/com/vaadin/ui/Component.java
index e10b5e1cd9..9e0816a398 100644
--- a/server/src/com/vaadin/ui/Component.java
+++ b/server/src/com/vaadin/ui/Component.java
@@ -19,6 +19,8 @@ package com.vaadin.ui;
 import java.io.Serializable;
 import java.util.Locale;
 
+import org.jsoup.nodes.Element;
+
 import com.vaadin.event.ConnectorEvent;
 import com.vaadin.event.ConnectorEventListener;
 import com.vaadin.event.FieldEvents;
@@ -27,6 +29,7 @@ import com.vaadin.server.ErrorMessage;
 import com.vaadin.server.Resource;
 import com.vaadin.server.Sizeable;
 import com.vaadin.server.VariableOwner;
+import com.vaadin.ui.declarative.DesignContext;
 
 /**
  * {@code Component} is the top-level interface that is and must be implemented
@@ -726,6 +729,44 @@ public interface Component extends ClientConnector, Sizeable, Serializable {
      */
     public String getDescription();
 
+    /* Declarative support */
+
+    /**
+     * Reads the component state from the given design.
+     * <p>
+     * The component is responsible not only for updating its own state but also
+     * for ensuring that its children update their state based on the design.
+     * <p>
+     * It is assumed that the component is in its default state when this method
+     * is called. Reading should only take into consideration attributes
+     * specified in the design and not reset any unspecified attributes to their
+     * defaults.
+     * <p>
+     * This method must not modify the design.
+     * 
+     * @since 7.4
+     * @param design
+     *            The design as HTML to obtain the state from
+     * @param designContext
+     *            The DesignContext instance used for parsing the design
+     */
+    public void readDesign(Element design, DesignContext designContext);
+
+    /**
+     * Writes the component state to the given design.
+     * <p>
+     * The component is responsible not only for writing its own state but also
+     * for ensuring that its children write their state to the design.
+     * <p>
+     * This method must not modify the component state.
+     * 
+     * @since 7.4
+     * @param design
+     *            The design as HTML to update with the current state
+     * @param designContext
+     */
+    public void writeDesign(Element design, DesignContext designContext);
+
     /* Component event framework */
 
     /**
diff --git a/server/src/com/vaadin/ui/CssLayout.java b/server/src/com/vaadin/ui/CssLayout.java
index 350423576f..dbedfa53ff 100644
--- a/server/src/com/vaadin/ui/CssLayout.java
+++ b/server/src/com/vaadin/ui/CssLayout.java
@@ -18,6 +18,8 @@ package com.vaadin.ui;
 import java.util.Iterator;
 import java.util.LinkedList;
 
+import org.jsoup.nodes.Element;
+
 import com.vaadin.event.LayoutEvents.LayoutClickEvent;
 import com.vaadin.event.LayoutEvents.LayoutClickListener;
 import com.vaadin.event.LayoutEvents.LayoutClickNotifier;
@@ -26,6 +28,7 @@ import com.vaadin.shared.EventId;
 import com.vaadin.shared.MouseEventDetails;
 import com.vaadin.shared.ui.csslayout.CssLayoutServerRpc;
 import com.vaadin.shared.ui.csslayout.CssLayoutState;
+import com.vaadin.ui.declarative.DesignContext;
 
 /**
  * CssLayout is a layout component that can be used in browser environment only.
@@ -354,4 +357,43 @@ public class CssLayout extends AbstractLayout implements LayoutClickNotifier {
         return components.get(index);
     }
 
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#readDesign(org.jsoup.nodes .Element,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        // process default attributes
+        super.readDesign(design, designContext);
+        // handle children
+        for (Element childComponent : design.children()) {
+            Component newChild = designContext.readDesign(childComponent);
+            addComponent(newChild);
+        }
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#writeDesign(org.jsoup.nodes.Element
+     * , com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        // write default attributes
+        super.writeDesign(design, designContext);
+        CssLayout def = designContext.getDefaultInstance(this);
+        // handle children
+        if (!designContext.shouldWriteChildren(this, def)) {
+            return;
+        }
+        Element designElement = design;
+        for (Component child : this) {
+            Element childNode = designContext.createElement(child);
+            designElement.appendChild(childNode);
+        }
+    }
+
 }
diff --git a/server/src/com/vaadin/ui/Label.java b/server/src/com/vaadin/ui/Label.java
index c73840e6e9..a6ee11bdd5 100644
--- a/server/src/com/vaadin/ui/Label.java
+++ b/server/src/com/vaadin/ui/Label.java
@@ -17,8 +17,11 @@
 package com.vaadin.ui;
 
 import java.lang.reflect.Method;
+import java.util.Collection;
 import java.util.Locale;
 
+import org.jsoup.nodes.Element;
+
 import com.vaadin.data.Property;
 import com.vaadin.data.util.AbstractProperty;
 import com.vaadin.data.util.LegacyPropertyHelper;
@@ -27,6 +30,7 @@ import com.vaadin.data.util.converter.ConverterUtil;
 import com.vaadin.shared.ui.label.ContentMode;
 import com.vaadin.shared.ui.label.LabelState;
 import com.vaadin.shared.util.SharedUtil;
+import com.vaadin.ui.declarative.DesignContext;
 
 /**
  * Label component for showing non-editable short texts.
@@ -570,4 +574,57 @@ public class Label extends AbstractComponent implements Property<String>,
             return LegacyPropertyHelper.legacyPropertyToString(this);
         }
     }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#readDesign(org.jsoup.nodes .Element,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        super.readDesign(design, designContext);
+        String innerHtml = design.html();
+        if (innerHtml != null && !"".equals(innerHtml)) {
+            setValue(innerHtml);
+        }
+        if (design.hasAttr(DESIGN_ATTR_PLAIN_TEXT)) {
+            setContentMode(ContentMode.TEXT);
+        } else {
+            setContentMode(ContentMode.HTML);
+        }
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#getCustomAttributes()
+     */
+    @Override
+    protected Collection<String> getCustomAttributes() {
+        Collection<String> result = super.getCustomAttributes();
+        result.add("value");
+        result.add("content-mode");
+        result.add("plain-text");
+        return result;
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#writeDesign(org.jsoup.nodes.Element
+     * , com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        super.writeDesign(design, designContext);
+        String content = getValue();
+        if (content != null) {
+            design.html(getValue());
+        }
+        // plain-text (default is html)
+        if (getContentMode() == ContentMode.TEXT) {
+            design.attr(DESIGN_ATTR_PLAIN_TEXT, "");
+        }
+    }
 }
diff --git a/server/src/com/vaadin/ui/Panel.java b/server/src/com/vaadin/ui/Panel.java
index 9b1d8fd5fa..6458d5f57d 100644
--- a/server/src/com/vaadin/ui/Panel.java
+++ b/server/src/com/vaadin/ui/Panel.java
@@ -16,8 +16,11 @@
 
 package com.vaadin.ui;
 
+import java.util.Collection;
 import java.util.Map;
 
+import org.jsoup.nodes.Element;
+
 import com.vaadin.event.Action;
 import com.vaadin.event.Action.Handler;
 import com.vaadin.event.ActionManager;
@@ -31,6 +34,7 @@ import com.vaadin.shared.MouseEventDetails;
 import com.vaadin.shared.ui.panel.PanelServerRpc;
 import com.vaadin.shared.ui.panel.PanelState;
 import com.vaadin.ui.Component.Focusable;
+import com.vaadin.ui.declarative.DesignContext;
 
 /**
  * Panel - a simple single component container.
@@ -339,4 +343,22 @@ public class Panel extends AbstractSingleComponentContainer implements
         return (PanelState) super.getState(markAsDirty);
     }
 
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        super.readDesign(design, designContext);
+    }
+
+    @Override
+    protected Collection<String> getCustomAttributes() {
+        Collection<String> attributes = super.getCustomAttributes();
+        return attributes;
+    }
+
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        super.writeDesign(design, designContext);
+        // handle tabindex
+        Panel def = (Panel) designContext.getDefaultInstance(this);
+    }
+
 }
diff --git a/server/src/com/vaadin/ui/PasswordField.java b/server/src/com/vaadin/ui/PasswordField.java
index 107e40c149..1894804775 100644
--- a/server/src/com/vaadin/ui/PasswordField.java
+++ b/server/src/com/vaadin/ui/PasswordField.java
@@ -15,7 +15,12 @@
  */
 package com.vaadin.ui;
 
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+
 import com.vaadin.data.Property;
+import com.vaadin.ui.declarative.DesignAttributeHandler;
+import com.vaadin.ui.declarative.DesignContext;
 
 /**
  * A field that is used to enter secret text information like passwords. The
@@ -76,4 +81,36 @@ public class PasswordField extends AbstractTextField {
         this();
         setCaption(caption);
     }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractField#readDesign(org.jsoup.nodes.Element ,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        super.readDesign(design, designContext);
+        Attributes attr = design.attributes();
+        if (attr.hasKey("value")) {
+            setValue(DesignAttributeHandler.readAttribute("value", attr,
+                    String.class));
+        }
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractTextField#writeDesign(org.jsoup.nodes.Element
+     * , com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        super.writeDesign(design, designContext);
+        AbstractTextField def = (AbstractTextField) designContext
+                .getDefaultInstance(this);
+        Attributes attr = design.attributes();
+        DesignAttributeHandler.writeAttribute("value", attr, getValue(),
+                def.getValue(), String.class);
+    }
 }
diff --git a/server/src/com/vaadin/ui/TabSheet.java b/server/src/com/vaadin/ui/TabSheet.java
index ac00a28b2f..266c93e81f 100644
--- a/server/src/com/vaadin/ui/TabSheet.java
+++ b/server/src/com/vaadin/ui/TabSheet.java
@@ -19,11 +19,15 @@ package com.vaadin.ui;
 import java.io.Serializable;
 import java.lang.reflect.Method;
 import java.util.ArrayList;
+import java.util.Collection;
 import java.util.Collections;
 import java.util.HashMap;
 import java.util.Iterator;
 import java.util.Map;
 
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+
 import com.vaadin.event.FieldEvents.BlurEvent;
 import com.vaadin.event.FieldEvents.BlurListener;
 import com.vaadin.event.FieldEvents.BlurNotifier;
@@ -40,6 +44,9 @@ import com.vaadin.shared.ui.tabsheet.TabsheetClientRpc;
 import com.vaadin.shared.ui.tabsheet.TabsheetServerRpc;
 import com.vaadin.shared.ui.tabsheet.TabsheetState;
 import com.vaadin.ui.Component.Focusable;
+import com.vaadin.ui.declarative.DesignAttributeHandler;
+import com.vaadin.ui.declarative.DesignContext;
+import com.vaadin.ui.declarative.DesignException;
 import com.vaadin.ui.themes.Reindeer;
 import com.vaadin.ui.themes.Runo;
 
@@ -1446,4 +1453,172 @@ public class TabSheet extends AbstractComponentContainer implements Focusable,
     protected TabsheetState getState() {
         return (TabsheetState) super.getState();
     }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#readDesign(org.jsoup.nodes .Element,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        super.readDesign(design, designContext);
+        // create new tabs
+        for (Element tab : design.children()) {
+            if (!tab.tagName().equals("tab")) {
+                throw new DesignException("Invalid tag name for tabsheet tab "
+                        + tab.tagName());
+            }
+            readTabFromDesign(tab, designContext);
+        }
+    }
+
+    /**
+     * Reads the given tab element from design
+     * 
+     * @since 7.4
+     * 
+     * @param tabElement
+     *            the element to be read
+     * @param designContext
+     *            the design context
+     */
+    private void readTabFromDesign(Element tabElement,
+            DesignContext designContext) {
+        Attributes attr = tabElement.attributes();
+        if (tabElement.children().size() != 1) {
+            throw new DesignException(
+                    "A tab must have exactly one child element");
+        }
+        // create the component that is in tab content
+        Element content = tabElement.child(0);
+        Component child = designContext.readDesign(content);
+        Tab tab = this.addTab(child);
+        if (attr.hasKey("visible")) {
+            tab.setVisible(DesignAttributeHandler.readAttribute("visible",
+                    attr, Boolean.class));
+        }
+        if (attr.hasKey("closable")) {
+            tab.setClosable(DesignAttributeHandler.readAttribute("closable",
+                    attr, Boolean.class));
+        }
+        if (attr.hasKey("caption")) {
+            tab.setCaption(DesignAttributeHandler.readAttribute("caption",
+                    attr, String.class));
+        }
+        if (attr.hasKey("enabled")) {
+            tab.setEnabled(DesignAttributeHandler.readAttribute("enabled",
+                    attr, Boolean.class));
+        }
+        if (attr.hasKey("icon")) {
+            tab.setIcon(DesignAttributeHandler.readAttribute("icon", attr,
+                    Resource.class));
+        }
+        if (attr.hasKey("icon-alt")) {
+            tab.setIconAlternateText(DesignAttributeHandler.readAttribute(
+                    "icon-alt", attr, String.class));
+        }
+        if (attr.hasKey("description")) {
+            tab.setDescription(DesignAttributeHandler.readAttribute(
+                    "description", attr, String.class));
+        }
+        if (attr.hasKey("style-name")) {
+            tab.setStyleName(DesignAttributeHandler.readAttribute("style-name",
+                    attr, String.class));
+        }
+        if (attr.hasKey("id")) {
+            tab.setId(DesignAttributeHandler.readAttribute("id", attr,
+                    String.class));
+        }
+        if (attr.hasKey("selected")) {
+            boolean selected = DesignAttributeHandler.readAttribute("selected",
+                    attr, Boolean.class);
+            if (selected) {
+                this.setSelectedTab(tab.getComponent());
+            }
+        }
+    }
+
+    /**
+     * Writes the given tab to design
+     * 
+     * @since 7.4
+     * @param design
+     *            the design node for tabsheet
+     * @param designContext
+     *            the design context
+     * @param tab
+     *            the tab to be written
+     */
+    private void writeTabToDesign(Element design, DesignContext designContext,
+            Tab tab) {
+        // get default tab instance
+        Tab def = new TabSheetTabImpl(null, null, null);
+        // create element for tab
+        Element tabElement = design.appendElement("tab");
+        // add tab content
+        tabElement.appendChild(designContext.createElement(tab.getComponent()));
+        Attributes attr = tabElement.attributes();
+        // write attributes
+        DesignAttributeHandler.writeAttribute("visible", attr, tab.isVisible(),
+                def.isVisible(), Boolean.class);
+        DesignAttributeHandler.writeAttribute("closable", attr,
+                tab.isClosable(), def.isClosable(), Boolean.class);
+        DesignAttributeHandler.writeAttribute("caption", attr,
+                tab.getCaption(), def.getCaption(), String.class);
+        DesignAttributeHandler.writeAttribute("enabled", attr, tab.isEnabled(),
+                def.isEnabled(), Boolean.class);
+        DesignAttributeHandler.writeAttribute("icon", attr, tab.getIcon(),
+                def.getIcon(), Resource.class);
+        DesignAttributeHandler.writeAttribute("icon-alt", attr,
+                tab.getIconAlternateText(), def.getIconAlternateText(),
+                String.class);
+        DesignAttributeHandler.writeAttribute("description", attr,
+                tab.getDescription(), def.getDescription(), String.class);
+        DesignAttributeHandler.writeAttribute("style-name", attr,
+                tab.getStyleName(), def.getStyleName(), String.class);
+        DesignAttributeHandler.writeAttribute("id", attr, tab.getId(),
+                def.getId(), String.class);
+        if (getSelectedTab() != null
+                && getSelectedTab().equals(tab.getComponent())) {
+            // use write attribute to get consistent handling for boolean
+            DesignAttributeHandler.writeAttribute("selected", attr, true,
+                    false, boolean.class);
+        }
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#getCustomAttributes()
+     */
+    @Override
+    protected Collection<String> getCustomAttributes() {
+        Collection<String> attributes = super.getCustomAttributes();
+        // no need to list tab attributes since they are considered internal
+        return attributes;
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractComponent#writeDesign(org.jsoup.nodes.Element
+     * , com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        super.writeDesign(design, designContext);
+        TabSheet def = (TabSheet) designContext.getDefaultInstance(this);
+        Attributes attr = design.attributes();
+
+        // write tabs
+        if (!designContext.shouldWriteChildren(this, def)) {
+            return;
+        }
+        for (Component component : this) {
+            Tab tab = this.getTab(component);
+            writeTabToDesign(design, designContext, tab);
+        }
+    }
+
 }
diff --git a/server/src/com/vaadin/ui/TextArea.java b/server/src/com/vaadin/ui/TextArea.java
index e38be8ad3c..c8103f9c5b 100644
--- a/server/src/com/vaadin/ui/TextArea.java
+++ b/server/src/com/vaadin/ui/TextArea.java
@@ -16,8 +16,11 @@
 
 package com.vaadin.ui;
 
+import org.jsoup.nodes.Element;
+
 import com.vaadin.data.Property;
 import com.vaadin.shared.ui.textarea.TextAreaState;
+import com.vaadin.ui.declarative.DesignContext;
 
 /**
  * A text field that supports multi line editing.
@@ -133,4 +136,27 @@ public class TextArea extends AbstractTextField {
         return getState(false).wordwrap;
     }
 
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractField#readDesign(org.jsoup.nodes.Element ,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        super.readDesign(design, designContext);
+        setValue(design.html());
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractTextField#writeDesign(org.jsoup.nodes.Element
+     * , com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        super.writeDesign(design, designContext);
+        design.html(getValue());
+    }
 }
diff --git a/server/src/com/vaadin/ui/TextField.java b/server/src/com/vaadin/ui/TextField.java
index 1fc10c6ced..2a61e93211 100644
--- a/server/src/com/vaadin/ui/TextField.java
+++ b/server/src/com/vaadin/ui/TextField.java
@@ -16,7 +16,12 @@
 
 package com.vaadin.ui;
 
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+
 import com.vaadin.data.Property;
+import com.vaadin.ui.declarative.DesignAttributeHandler;
+import com.vaadin.ui.declarative.DesignContext;
 
 /**
  * <p>
@@ -102,6 +107,38 @@ public class TextField extends AbstractTextField {
     /*
      * (non-Javadoc)
      * 
+     * @see com.vaadin.ui.AbstractTextField#readDesign(org.jsoup.nodes.Element,
+     * com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        super.readDesign(design, designContext);
+        Attributes attr = design.attributes();
+        if (attr.hasKey("value")) {
+            setValue(DesignAttributeHandler.readAttribute("value", attr,
+                    String.class));
+        }
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.vaadin.ui.AbstractTextField#writeDesign(org.jsoup.nodes.Element
+     * , com.vaadin.ui.declarative.DesignContext)
+     */
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        super.writeDesign(design, designContext);
+        AbstractTextField def = (AbstractTextField) designContext
+                .getDefaultInstance(this);
+        Attributes attr = design.attributes();
+        DesignAttributeHandler.writeAttribute("value", attr, getValue(),
+                def.getValue(), String.class);
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
      * @see com.vaadin.ui.AbstractField#clear()
      */
     @Override
diff --git a/server/src/com/vaadin/ui/declarative/Design.java b/server/src/com/vaadin/ui/declarative/Design.java
new file mode 100644
index 0000000000..59393a7815
--- /dev/null
+++ b/server/src/com/vaadin/ui/declarative/Design.java
@@ -0,0 +1,481 @@
+/*
+ * Copyright 2000-2014 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.ui.declarative;
+
+import java.beans.IntrospectionException;
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.OutputStream;
+import java.io.Serializable;
+import java.lang.annotation.Annotation;
+import java.util.Collection;
+
+import org.jsoup.Jsoup;
+import org.jsoup.nodes.Document;
+import org.jsoup.nodes.Document.OutputSettings.Syntax;
+import org.jsoup.nodes.DocumentType;
+import org.jsoup.nodes.Element;
+import org.jsoup.nodes.Node;
+import org.jsoup.parser.Parser;
+import org.jsoup.select.Elements;
+
+import com.vaadin.annotations.DesignRoot;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.declarative.DesignContext.ComponentCreatedEvent;
+import com.vaadin.ui.declarative.DesignContext.ComponentCreationListener;
+
+/**
+ * Design is used for reading a component hierarchy from an html string or input
+ * stream and, conversely, for writing an html representation corresponding to a
+ * given component hierarchy.
+ * 
+ * <p>
+ * In html form a valid nonempty component hierarchy contains a single root
+ * element located under the &lt;body&gt; tag. A hierarchy of components is
+ * achieved by nesting other elements under the root element. An empty component
+ * hierarchy is represented as no elements under the &lt;body&gt; tag.
+ * 
+ * <p>
+ * For writing a component hierarchy the root element is specified as a
+ * Component parameter or as a DesignContext object containing the root
+ * Component. An empty hierarchy can be written by giving a null root Component.
+ * 
+ * @since 7.4
+ * @author Vaadin Ltd
+ */
+public class Design implements Serializable {
+    /**
+     * Parses the given input stream into a jsoup document
+     * 
+     * @param html
+     *            the stream containing the design
+     * @return the parsed jsoup document
+     * @throws IOException
+     */
+    private static Document parse(InputStream html) {
+        try {
+            Document doc = Jsoup.parse(html, "UTF-8", "", Parser.htmlParser());
+            return doc;
+        } catch (IOException e) {
+            throw new DesignException("The html document cannot be parsed.");
+        }
+
+    }
+
+    /**
+     * Constructs a component hierarchy from the design specified as an html
+     * document. The hierarchy must contain at most one top-level component,
+     * which should be located under &lt;body&gt;. Also invalid html containing
+     * the hierarchy without &lt;html&gt;, &lt;head&gt; and &lt;body&gt; tags is
+     * accepted. You can optionally pass an instance for the root component with
+     * some uninitialized instance fields. The fields will be automatically
+     * populated when parsing the design based on the component ids, local ids,
+     * and captions of the components in the design.
+     * 
+     * @param html
+     *            the html document describing the component design
+     * @param rootInstance
+     *            the root instance with fields to be mapped to components in
+     *            the design
+     * @return the DesignContext created while traversing the tree. The
+     *         top-level component of the created component hierarchy can be
+     *         accessed using result.getRootComponent(), where result is the
+     *         object returned by this method.
+     * @throws IOException
+     */
+    private static DesignContext parse(InputStream html, Component rootInstance) {
+        Document doc = parse(html);
+        return designToComponentTree(doc, rootInstance);
+    }
+
+    /**
+     * Constructs a component hierarchy from the design specified as an html
+     * document given as a string. The hierarchy must contain at most one
+     * top-level component, which should be located under &lt;body&gt;. Also
+     * invalid html containing the hierarchy without &lt;html&gt;, &lt;head&gt;
+     * and &lt;body&gt; tags is accepted. You can optionally pass an instance
+     * for the root component with some uninitialized instance fields. The
+     * fields will be automatically populated when parsing the design based on
+     * the component ids, local ids, and captions of the components in the
+     * design.
+     * 
+     * @param html
+     *            the html document describing the component design
+     * @param rootInstance
+     *            the root instance with fields to be mapped to components in
+     *            the design
+     * @return the DesignContext created while traversing the tree. The
+     *         top-level component of the created component hierarchy can be
+     *         accessed using result.getRootComponent(), where result is the
+     *         object returned by this method.
+     * @throws IOException
+     */
+    private static DesignContext parse(String html, Component rootInstance) {
+        Document doc = Jsoup.parse(html);
+        return designToComponentTree(doc, rootInstance);
+    }
+
+    /**
+     * Constructs a component hierarchy from the design specified as an html
+     * tree.
+     * 
+     * <p>
+     * If a component root is given, the component instances created during
+     * reading the design are assigned to its member fields based on their id,
+     * local id, and caption
+     * 
+     * @param doc
+     *            the html tree
+     * @param componentRoot
+     *            optional component root instance. The type must match the type
+     *            of the root element in the design. Any member fields whose
+     *            type is assignable from {@link Component} are bound to fields
+     *            in the design based on id/local id/caption
+     */
+    private static DesignContext designToComponentTree(Document doc,
+            Component componentRoot) {
+        if (componentRoot == null) {
+            return designToComponentTree(doc, null, null);
+        } else {
+            return designToComponentTree(doc, componentRoot,
+                    componentRoot.getClass());
+        }
+
+    }
+
+    /**
+     * Constructs a component hierarchy from the design specified as an html
+     * tree.
+     * 
+     * <p>
+     * If a component root is given, the component instances created during
+     * reading the design are assigned to its member fields based on their id,
+     * local id, and caption
+     * 
+     * @param doc
+     *            the html tree
+     * @param componentRoot
+     *            optional component root instance. The type must match the type
+     *            of the root element in the design.
+     * @param classWithFields
+     *            a class (componentRoot class or a super class) with some
+     *            member fields. The member fields whose type is assignable from
+     *            {@link Component} are bound to fields in the design based on
+     *            id/local id/caption
+     */
+    private static DesignContext designToComponentTree(Document doc,
+            Component componentRoot, Class<?> classWithFields) {
+        DesignContext designContext = new DesignContext(doc);
+        designContext.readPackageMappings(doc);
+        // No special handling for a document without a body element - should be
+        // taken care of by jsoup.
+        Element root = doc.body();
+        Elements children = root.children();
+        if (children.size() != 1) {
+            throw new DesignException(
+                    "The first level of a component hierarchy should contain exactly one root component, but found "
+                            + children.size());
+        }
+        Element element = children.first();
+        if (componentRoot != null) {
+            // user has specified root instance that may have member fields that
+            // should be bound
+            final FieldBinder binder;
+            try {
+                binder = new FieldBinder(componentRoot, classWithFields);
+            } catch (IntrospectionException e) {
+                throw new DesignException(
+                        "Could not bind fields of the root component", e);
+            }
+            // create listener for component creations that binds the created
+            // components to the componentRoot instance fields
+            ComponentCreationListener creationListener = new ComponentCreationListener() {
+                @Override
+                public void componentCreated(ComponentCreatedEvent event) {
+                    binder.bindField(event.getComponent(), event.getLocalId());
+                }
+            };
+            designContext.addComponentCreationListener(creationListener);
+            // create subtree
+            designContext.readDesign(element, componentRoot);
+            // make sure that all the member fields are bound
+            Collection<String> unboundFields = binder.getUnboundFields();
+            if (!unboundFields.isEmpty()) {
+                throw new DesignException(
+                        "Found unbound fields from component root "
+                                + unboundFields);
+            }
+            // no need to listen anymore
+            designContext.removeComponentCreationListener(creationListener);
+        } else {
+            // createChild creates the entire component hierarchy
+            componentRoot = designContext.readDesign(element);
+        }
+        designContext.setRootComponent(componentRoot);
+        return designContext;
+    }
+
+    /**
+     * Generates an html tree representation of the component hierarchy having
+     * the root designContext.getRootComponent(). The hierarchy is stored under
+     * &lt;body&gt; in the tree. The generated tree represents a valid html
+     * document.
+     * 
+     * 
+     * @param designContext
+     *            a DesignContext object specifying the root component
+     *            (designContext.getRootComponent()) of the hierarchy
+     * @return an html tree representation of the component hierarchy
+     */
+    private static Document createHtml(DesignContext designContext) {
+        // Create the html tree skeleton.
+        Document doc = new Document("");
+        DocumentType docType = new DocumentType("html", "", "", "");
+        doc.appendChild(docType);
+        Element html = doc.createElement("html");
+        doc.appendChild(html);
+        html.appendChild(doc.createElement("head"));
+        Element body = doc.createElement("body");
+        html.appendChild(body);
+
+        // Append the design under <body> in the html tree. createNode
+        // creates the entire component hierarchy rooted at the
+        // given root node.
+        Component root = designContext.getRootComponent();
+        Node rootNode = designContext.createElement(root);
+        body.appendChild(rootNode);
+        designContext.writePackageMappings(doc);
+        return doc;
+    }
+
+    /**
+     * Loads a design for the given root component.
+     * <p>
+     * This methods assumes that the component class (or a super class) has been
+     * marked with an {@link DesignRoot} annotation and will either use the
+     * value from the annotation to locate the design file, or will fall back to
+     * using a design with the same same as the annotated class file (with an
+     * .html extension)
+     * <p>
+     * Any {@link Component} type fields in the root component which are not
+     * assigned (i.e. are null) are mapped to corresponding components in the
+     * design. Matching is done based on field name in the component class and
+     * id/local id/caption in the design file.
+     * <p>
+     * The type of the root component must match the root element in the design
+     * 
+     * @param rootComponent
+     *            The root component of the layout
+     * @return The design context used in the load operation
+     * @throws DesignException
+     *             If the design could not be loaded
+     */
+    public static DesignContext read(Component rootComponent)
+            throws DesignException {
+        // Try to find an @DesignRoot annotation on the class or any parent
+        // class
+        Class<? extends Component> annotatedClass = findClassWithAnnotation(
+                rootComponent.getClass(), DesignRoot.class);
+        if (annotatedClass == null) {
+            throw new IllegalArgumentException(
+                    "The class "
+                            + rootComponent.getClass().getName()
+                            + " or any of its superclasses do not have an @DesignRoot annotation");
+        }
+
+        DesignRoot designAnnotation = annotatedClass
+                .getAnnotation(DesignRoot.class);
+        String filename = designAnnotation.value();
+        if (filename.equals("")) {
+            // No value, assume the html file is named as the class
+            filename = annotatedClass.getSimpleName() + ".html";
+        }
+
+        InputStream stream = annotatedClass.getResourceAsStream(filename);
+        if (stream == null) {
+            throw new DesignException("Unable to find design file " + filename
+                    + " in " + annotatedClass.getPackage().getName());
+        }
+
+        Document doc = parse(stream);
+        DesignContext context = designToComponentTree(doc, rootComponent,
+                annotatedClass);
+
+        return context;
+
+    }
+
+    /**
+     * Find the first class with the given annotation, starting the search from
+     * the given class and moving upwards in the class hierarchy.
+     * 
+     * @param componentClass
+     *            the class to check
+     * @param annotationClass
+     *            the annotation to look for
+     * @return the first class with the given annotation or null if no class
+     *         with the annotation was found
+     */
+    private static Class<? extends Component> findClassWithAnnotation(
+            Class<? extends Component> componentClass,
+            Class<? extends Annotation> annotationClass) {
+        if (componentClass == null) {
+            return null;
+        }
+
+        if (componentClass.isAnnotationPresent(annotationClass)) {
+            return componentClass;
+        }
+
+        Class<?> superClass = componentClass.getSuperclass();
+        if (!Component.class.isAssignableFrom(superClass)) {
+            return null;
+        }
+
+        return findClassWithAnnotation((Class<? extends Component>) superClass,
+                annotationClass);
+    }
+
+    /**
+     * Loads a design from the given file name using the given root component.
+     * <p>
+     * Any {@link Component} type fields in the root component which are not
+     * assigned (i.e. are null) are mapped to corresponding components in the
+     * design. Matching is done based on field name in the component class and
+     * id/local id/caption in the design file.
+     * <p>
+     * The type of the root component must match the root element in the design.
+     * 
+     * @param filename
+     *            The file name to load. Loaded from the same package as the
+     *            root component
+     * @param rootComponent
+     *            The root component of the layout
+     * @return The design context used in the load operation
+     * @throws DesignException
+     *             If the design could not be loaded
+     */
+    public static DesignContext read(String filename, Component rootComponent)
+            throws DesignException {
+        InputStream stream = rootComponent.getClass().getResourceAsStream(
+                filename);
+        if (stream == null) {
+            throw new DesignException("File " + filename
+                    + " was not found in the package "
+                    + rootComponent.getClass().getPackage().getName());
+        }
+        return read(stream, rootComponent);
+    }
+
+    /**
+     * Loads a design from the given stream using the given root component. If
+     * rootComponent is null, the type of the root node is read from the design.
+     * <p>
+     * Any {@link Component} type fields in the root component which are not
+     * assigned (i.e. are null) are mapped to corresponding components in the
+     * design. Matching is done based on field name in the component class and
+     * id/local id/caption in the design file.
+     * <p>
+     * If rootComponent is not null, its type must match the type of the root
+     * element in the design
+     * 
+     * @param stream
+     *            The stream to read the design from
+     * @param rootComponent
+     *            The root component of the layout
+     * @return The design context used in the load operation
+     * @throws DesignException
+     *             If the design could not be loaded
+     */
+    public static DesignContext read(InputStream design, Component rootComponent) {
+        if (design == null) {
+            throw new DesignException("Stream cannot be null");
+        }
+        Document doc = parse(design);
+        DesignContext context = designToComponentTree(doc, rootComponent);
+
+        return context;
+    }
+
+    /**
+     * Loads a design from the given input stream
+     * 
+     * @param design
+     *            The stream to read the design from
+     * @return The root component of the design
+     */
+    public static Component read(InputStream design) {
+        DesignContext context = read(design, null);
+        return context.getRootComponent();
+    }
+
+    /**
+     * Writes the given component tree in design format to the given output
+     * stream
+     * 
+     * @param component
+     *            the root component of the component tree
+     * @param outputStream
+     *            the output stream to write the design to. The design is always
+     *            written as UTF-8
+     * @throws IOException
+     */
+    public static void write(Component component, OutputStream outputStream)
+            throws IOException {
+        DesignContext dc = new DesignContext();
+        dc.setRootComponent(component);
+        write(dc, outputStream);
+    }
+
+    /**
+     * Writes the component, given in the design context, in design format to
+     * the given output stream. The design context is used for writing local ids
+     * and other information not available in the component tree.
+     * 
+     * @param designContext
+     *            the DesignContext object specifying the component hierarchy
+     *            and the local id values of the objects
+     * @param outputStream
+     *            the output stream to write the design to. The design is always
+     *            written as UTF-8
+     * @throws IOException
+     *             if writing fails
+     */
+    public static void write(DesignContext designContext,
+            OutputStream outputStream) throws IOException {
+        Document doc = createHtml(designContext);
+        write(doc, outputStream);
+    }
+
+    /**
+     * Writes the given jsoup document to the output stream (in UTF-8)
+     * 
+     * @param doc
+     *            the document to write
+     * @param outputStream
+     *            the stream to write to
+     * @throws IOException
+     *             if writing fails
+     */
+    private static void write(Document doc, OutputStream outputStream)
+            throws IOException {
+        doc.outputSettings().indentAmount(4);
+        doc.outputSettings().syntax(Syntax.html);
+        doc.outputSettings().prettyPrint(true);
+        outputStream.write(doc.html().getBytes());
+    }
+
+}
diff --git a/server/src/com/vaadin/ui/declarative/DesignAttributeHandler.java b/server/src/com/vaadin/ui/declarative/DesignAttributeHandler.java
new file mode 100644
index 0000000000..1fc89c965d
--- /dev/null
+++ b/server/src/com/vaadin/ui/declarative/DesignAttributeHandler.java
@@ -0,0 +1,729 @@
+/*
+ * Copyright 2000-2014 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.ui.declarative;
+
+import java.beans.BeanInfo;
+import java.beans.IntrospectionException;
+import java.beans.Introspector;
+import java.beans.PropertyDescriptor;
+import java.io.File;
+import java.io.Serializable;
+import java.lang.reflect.Method;
+import java.text.DecimalFormat;
+import java.text.DecimalFormatSymbols;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collection;
+import java.util.Collections;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+import java.util.logging.Level;
+import java.util.logging.Logger;
+
+import org.jsoup.nodes.Attribute;
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.nodes.Node;
+
+import com.vaadin.event.ShortcutAction;
+import com.vaadin.event.ShortcutAction.KeyCode;
+import com.vaadin.event.ShortcutAction.ModifierKey;
+import com.vaadin.server.ExternalResource;
+import com.vaadin.server.FileResource;
+import com.vaadin.server.FontAwesome;
+import com.vaadin.server.Resource;
+import com.vaadin.server.ThemeResource;
+import com.vaadin.shared.util.SharedUtil;
+import com.vaadin.ui.Component;
+
+/**
+ * Default attribute handler implementation used when parsing designs to
+ * component trees. Handles all the component attributes that do not require
+ * custom handling.
+ * 
+ * @since 7.4
+ * @author Vaadin Ltd
+ */
+public class DesignAttributeHandler implements Serializable {
+
+    private static Logger getLogger() {
+        return Logger.getLogger(DesignAttributeHandler.class.getName());
+    }
+
+    private static Map<Class, AttributeCacheEntry> cache = Collections
+            .synchronizedMap(new HashMap<Class, AttributeCacheEntry>());
+
+    /**
+     * Clears the children and attributes of the given element
+     * 
+     * @param design
+     *            the element to be cleared
+     */
+    public static void clearElement(Element design) {
+        Attributes attr = design.attributes();
+        for (Attribute a : attr.asList()) {
+            attr.remove(a.getKey());
+        }
+        List<Node> children = new ArrayList<Node>();
+        children.addAll(design.childNodes());
+        for (Node node : children) {
+            node.remove();
+        }
+    }
+
+    /**
+     * Assigns the specified design attribute to the given component. If the
+     * attribute is not present, (value is null) the corresponding property is
+     * got from the <code>defaultInstance</code>
+     * 
+     * @param component
+     *            the component to which the attribute should be set
+     * @param attribute
+     *            the attribute to be set
+     * @param attributes
+     *            the attribute map. If the attributes does not contain the
+     *            requested attribute, the value is retrieved from the
+     *            <code> defaultInstance</code>
+     * @return true on success
+     */
+    public static boolean readAttribute(Component component, String attribute,
+            Attributes attributes) {
+        String value = null;
+        if (component == null || attribute == null || attributes == null) {
+            throw new IllegalArgumentException(
+                    "Parameters with null value not allowed");
+        }
+        if (attributes.hasKey(attribute)) {
+            value = attributes.get(attribute);
+        }
+        boolean success = false;
+        try {
+            Method setter = findSetterForAttribute(component.getClass(),
+                    attribute);
+            if (setter == null) {
+                // if we don't have the setter, there is no point in continuing
+                success = false;
+            } else if (value != null) {
+                // we have a value from design attributes, let's use that
+                Object param = fromAttributeValue(
+                        setter.getParameterTypes()[0], value);
+                setter.invoke(component, param);
+                success = true;
+            } else {
+                getLogger().log(
+                        Level.WARNING,
+                        "Attribute value for " + attribute
+                                + " is null, this should not happen");
+            }
+        } catch (Exception e) {
+            getLogger().log(Level.WARNING,
+                    "Failed to set attribute " + attribute, e);
+        }
+        if (!success) {
+            getLogger().info(
+                    "property " + attribute
+                            + " ignored by default attribute handler");
+        }
+        return success;
+    }
+
+    /**
+     * Searches for supported setter and getter types from the specified class
+     * and returns the list of corresponding design attributes
+     * 
+     * @param clazz
+     *            the class scanned for setters
+     * @return the list of supported design attributes
+     */
+    public static Collection<String> getSupportedAttributes(Class<?> clazz) {
+        resolveSupportedAttributes(clazz);
+        return cache.get(clazz).getAttributes();
+    }
+
+    /**
+     * Resolves the supported attributes and corresponding getters and setters
+     * for the class using introspection. After resolving, the information is
+     * cached internally by this class
+     * 
+     * @param clazz
+     *            the class to resolve the supported attributes for
+     */
+    private static void resolveSupportedAttributes(Class<?> clazz) {
+        if (clazz == null) {
+            throw new IllegalArgumentException("The clazz can not be null");
+        }
+        if (cache.containsKey(clazz.getCanonicalName())) {
+            // NO-OP
+            return;
+        }
+        BeanInfo beanInfo;
+        try {
+            beanInfo = Introspector.getBeanInfo(clazz);
+        } catch (IntrospectionException e) {
+            throw new RuntimeException(
+                    "Could not get supported attributes for class "
+                            + clazz.getName());
+        }
+        AttributeCacheEntry entry = new AttributeCacheEntry();
+        for (PropertyDescriptor descriptor : beanInfo.getPropertyDescriptors()) {
+            Method getter = descriptor.getReadMethod();
+            Method setter = descriptor.getWriteMethod();
+            if (getter != null && setter != null
+                    && isSupported(descriptor.getPropertyType())) {
+                String attribute = toAttributeName(descriptor.getName());
+                entry.addAttribute(attribute, getter, setter);
+            }
+        }
+        cache.put(clazz, entry);
+    }
+
+    /**
+     * Writes the specified attribute to the design if it differs from the
+     * default value got from the <code> defaultInstance <code>
+     * 
+     * @param component
+     *            the component used to get the attribute value
+     * @param attribute
+     *            the key for the attribute
+     * @param attr
+     *            the attribute list where the attribute will be written
+     * @param defaultInstance
+     *            the default instance for comparing default values
+     */
+    public static void writeAttribute(Component component, String attribute,
+            Attributes attr, Component defaultInstance) {
+        Method getter = findGetterForAttribute(component.getClass(), attribute);
+        if (getter == null) {
+            getLogger().warning(
+                    "Could not find getter for attribute " + attribute);
+        } else {
+            try {
+                // compare the value with default value
+                Object value = getter.invoke(component);
+                Object defaultValue = getter.invoke(defaultInstance);
+                // if the values are not equal, write the data
+                if (!SharedUtil.equals(value, defaultValue)) {
+                    String attributeValue = toAttributeValue(
+                            getter.getReturnType(), value);
+                    attr.put(attribute, attributeValue);
+                }
+            } catch (Exception e) {
+                getLogger()
+                        .log(Level.SEVERE,
+                                "Failed to invoke getter for attribute "
+                                        + attribute, e);
+            }
+        }
+    }
+
+    /**
+     * Reads the given attribute from a set of attributes.
+     * 
+     * @param attribute
+     *            the attribute key
+     * @param attributes
+     *            the set of attributes to read from
+     * @param outputType
+     *            the output type for the attribute
+     * @return the attribute value or the default value if the attribute is not
+     *         found
+     */
+    @SuppressWarnings("unchecked")
+    public static <T> T readAttribute(String attribute, Attributes attributes,
+            Class<T> outputType) {
+        if (!isSupported(outputType)) {
+            throw new IllegalArgumentException("output type: "
+                    + outputType.getName() + " not supported");
+        }
+        if (!attributes.hasKey(attribute)) {
+            return null;
+        } else {
+            try {
+                String value = attributes.get(attribute);
+                return (T) fromAttributeValue(outputType, value);
+            } catch (Exception e) {
+                throw new DesignException("Failed to read attribute "
+                        + attribute, e);
+            }
+        }
+    }
+
+    /**
+     * Writes the given attribute value to a set of attributes if it differs
+     * from the default attribute value.
+     * 
+     * @param attribute
+     *            the attribute key
+     * @param attributes
+     *            the set of attributes where the new attribute is written
+     * @param value
+     *            the attribute value
+     * @param defaultValue
+     *            the default attribute value
+     * @param inputType
+     *            the type of the input value
+     */
+    public static <T> void writeAttribute(String attribute,
+            Attributes attributes, T value, T defaultValue, Class<T> inputType) {
+        if (!isSupported(inputType)) {
+            throw new IllegalArgumentException("input type: "
+                    + inputType.getName() + " not supported");
+        }
+        if (!SharedUtil.equals(value, defaultValue)) {
+            String attributeValue = toAttributeValue(inputType, value);
+            attributes.put(attribute, attributeValue);
+        }
+    }
+
+    /**
+     * Formats the given design attribute value. The method is provided to
+     * ensure consistent number formatting for design attribute values
+     * 
+     * @param number
+     *            the number to be formatted
+     * @return the formatted number
+     */
+    public static String formatFloat(float number) {
+        return getDecimalFormat().format(number);
+    }
+
+    /**
+     * Formats the given design attribute value. The method is provided to
+     * ensure consistent number formatting for design attribute values
+     * 
+     * @param number
+     *            the number to be formatted
+     * @return the formatted number
+     */
+    public static String formatDouble(double number) {
+        return getDecimalFormat().format(number);
+    }
+
+    /**
+     * Convert ShortcutAction to attribute string presentation
+     * 
+     * @param shortcut
+     *            the shortcut action
+     * @return the action as attribute string presentation
+     */
+    private static String formatShortcutAction(ShortcutAction shortcut) {
+        StringBuilder sb = new StringBuilder();
+        // handle modifiers
+        if (shortcut.getModifiers() != null) {
+            for (int modifier : shortcut.getModifiers()) {
+                sb.append(ShortcutKeyMapper.getStringForKeycode(modifier))
+                        .append("-");
+            }
+        }
+        // handle keycode
+        sb.append(ShortcutKeyMapper.getStringForKeycode(shortcut.getKeyCode()));
+        return sb.toString();
+    }
+
+    /**
+     * Reads shortcut action from attribute presentation
+     * 
+     * @param attributeValue
+     *            attribute presentation of shortcut action
+     * @return shortcut action with keycode and modifier keys from attribute
+     *         value
+     */
+    private static ShortcutAction readShortcutAction(String attributeValue) {
+        if (attributeValue.length() == 0) {
+            return null;
+        }
+        String[] parts = attributeValue.split("-");
+        // handle keycode
+        String keyCodePart = parts[parts.length - 1];
+        int keyCode = ShortcutKeyMapper.getKeycodeForString(keyCodePart);
+        if (keyCode < 0) {
+            throw new IllegalArgumentException("Invalid shortcut definition "
+                    + attributeValue);
+        }
+        // handle modifiers
+        int[] modifiers = null;
+        if (parts.length > 1) {
+            modifiers = new int[parts.length - 1];
+        }
+        for (int i = 0; i < parts.length - 1; i++) {
+            int modifier = ShortcutKeyMapper.getKeycodeForString(parts[i]);
+            if (modifier > 0) {
+                modifiers[i] = modifier;
+            } else {
+                throw new IllegalArgumentException(
+                        "Invalid shortcut definition " + attributeValue);
+            }
+        }
+        return new ShortcutAction(null, keyCode, modifiers);
+    }
+
+    /**
+     * Creates the decimal format used when writing attributes to the design.
+     * 
+     * @return the decimal format
+     */
+    private static DecimalFormat getDecimalFormat() {
+        DecimalFormatSymbols symbols = new DecimalFormatSymbols(new Locale(
+                "en_US"));
+        DecimalFormat fmt = new DecimalFormat("0.###", symbols);
+        fmt.setGroupingUsed(false);
+        return fmt;
+    }
+
+    /**
+     * Returns the design attribute name corresponding the given method name.
+     * For example given a method name <code>setPrimaryStyleName</code> the
+     * return value would be <code>primary-style-name</code>
+     * 
+     * @param propertyName
+     *            the property name returned by {@link IntroSpector}
+     * @return the design attribute name corresponding the given method name
+     */
+    private static String toAttributeName(String propertyName) {
+        String[] words = propertyName.split("(?<!^)(?=[A-Z])");
+        StringBuilder builder = new StringBuilder();
+        for (int i = 0; i < words.length; i++) {
+            if (builder.length() > 0) {
+                builder.append("-");
+            }
+            builder.append(words[i].toLowerCase());
+        }
+        return builder.toString();
+    }
+
+    /**
+     * Parses the given attribute value to specified target type
+     * 
+     * @param targetType
+     *            the target type for the value
+     * @param value
+     *            the parsed value
+     * @return the object of specified target type
+     */
+    private static Object fromAttributeValue(Class<?> targetType, String value) {
+        if (targetType == String.class) {
+            return value;
+        }
+        // special handling for boolean type. The attribute evaluates to true if
+        // it is present and the value is not "false" or "FALSE". Thus empty
+        // value evaluates to true.
+        if (targetType == Boolean.TYPE || targetType == Boolean.class) {
+            return parseBoolean(value);
+        }
+        if (targetType == Integer.TYPE || targetType == Integer.class) {
+            return Integer.valueOf(value);
+        }
+        if (targetType == Byte.TYPE || targetType == Byte.class) {
+            return Byte.valueOf(value);
+        }
+        if (targetType == Short.TYPE || targetType == Short.class) {
+            return Short.valueOf(value);
+        }
+        if (targetType == Long.TYPE || targetType == Long.class) {
+            return Long.valueOf(value);
+        }
+        if (targetType == Character.TYPE || targetType == Character.class) {
+            return value.charAt(0);
+        }
+        if (targetType == Float.TYPE || targetType == Float.class) {
+            return Float.valueOf(value);
+        }
+        if (targetType == Double.TYPE || targetType == Double.class) {
+            return Double.valueOf(value);
+        }
+        if (targetType == Resource.class) {
+            return parseResource(value);
+        }
+        if (Enum.class.isAssignableFrom(targetType)) {
+            return Enum.valueOf((Class<? extends Enum>) targetType,
+                    value.toUpperCase());
+        }
+        if (targetType == ShortcutAction.class) {
+            return readShortcutAction(value);
+        }
+        return null;
+    }
+
+    /**
+     * Serializes the given value to valid design attribute representation
+     * 
+     * @param sourceType
+     *            the type of the value
+     * @param value
+     *            the value to be serialized
+     * @return the given value as design attribute representation
+     */
+    private static String toAttributeValue(Class<?> sourceType, Object value) {
+        if (value == null) {
+            // TODO: Handle corner case where sourceType is String and default
+            // value is not null. How to represent null value in attributes?
+            return "";
+        }
+        if (sourceType == Resource.class) {
+            if (value instanceof ExternalResource) {
+                return ((ExternalResource) value).getURL();
+            } else if (value instanceof ThemeResource) {
+                return "theme://" + ((ThemeResource) value).getResourceId();
+            } else if (value instanceof FontAwesome) {
+                return "font://" + ((FontAwesome) value).name();
+            } else if (value instanceof FileResource) {
+                String path = ((FileResource) value).getSourceFile().getPath();
+                if (File.separatorChar != '/') {
+                    // make sure we use '/' as file separator in templates
+                    return path.replace(File.separatorChar, '/');
+                } else {
+                    return path;
+                }
+            } else {
+                getLogger().warning(
+                        "Unknown resource type " + value.getClass().getName());
+                return null;
+            }
+        } else if (sourceType == Float.class || sourceType == Float.TYPE) {
+            return formatFloat(((Float) value).floatValue());
+        } else if (sourceType == Double.class || sourceType == Double.TYPE) {
+            return formatDouble(((Double) value).doubleValue());
+        } else if (sourceType == ShortcutAction.class) {
+            return formatShortcutAction((ShortcutAction) value);
+        } else {
+            return value.toString();
+        }
+    }
+
+    /**
+     * Parses the given attribute value as resource
+     * 
+     * @param value
+     *            the attribute value to be parsed
+     * @return resource instance based on the attribute value
+     */
+    private static Resource parseResource(String value) {
+        if (value.startsWith("http://")) {
+            return new ExternalResource(value);
+        } else if (value.startsWith("theme://")) {
+            return new ThemeResource(value.substring(8));
+        } else if (value.startsWith("font://")) {
+            return FontAwesome.valueOf(value.substring(7));
+        } else {
+            return new FileResource(new File(value));
+        }
+    }
+
+    /**
+     * Returns a setter that can be used for assigning the given design
+     * attribute to the class
+     * 
+     * @param clazz
+     *            the class that is scanned for setters
+     * @param attribute
+     *            the design attribute to find setter for
+     * @return the setter method or null if not found
+     */
+    private static Method findSetterForAttribute(Class<?> clazz,
+            String attribute) {
+        resolveSupportedAttributes(clazz);
+        return cache.get(clazz).getSetter(attribute);
+    }
+
+    /**
+     * Returns a getter that can be used for reading the given design attribute
+     * value from the class
+     * 
+     * @param clazz
+     *            the class that is scanned for getters
+     * @param attribute
+     *            the design attribute to find getter for
+     * @return the getter method or null if not found
+     */
+    private static Method findGetterForAttribute(Class<?> clazz,
+            String attribute) {
+        resolveSupportedAttributes(clazz);
+        return cache.get(clazz).getGetter(attribute);
+    }
+
+    // supported property types
+    private static final List<Class<?>> supportedClasses = Arrays
+            .asList(new Class<?>[] { String.class, Boolean.class,
+                    Integer.class, Byte.class, Short.class, Long.class,
+                    Character.class, Float.class, Double.class, Resource.class,
+                    ShortcutAction.class });
+
+    /**
+     * Returns true if the specified value type is supported by this class.
+     * Currently the handler supports primitives, {@link Locale.class} and
+     * {@link Resource.class}.
+     * 
+     * @param valueType
+     *            the value type to be tested
+     * @return true if the value type is supported, otherwise false
+     */
+    private static boolean isSupported(Class<?> valueType) {
+        return valueType != null
+                && (valueType.isPrimitive()
+                        || supportedClasses.contains(valueType) || Enum.class
+                            .isAssignableFrom(valueType));
+    }
+
+    /**
+     * Cache object for caching supported attributes and their getters and
+     * setters
+     * 
+     * @author Vaadin Ltd
+     */
+    private static class AttributeCacheEntry implements Serializable {
+        private Map<String, Method[]> accessMethods = Collections
+                .synchronizedMap(new HashMap<String, Method[]>());
+
+        private void addAttribute(String attribute, Method getter, Method setter) {
+            Method[] methods = new Method[2];
+            methods[0] = getter;
+            methods[1] = setter;
+            accessMethods.put(attribute, methods);
+        }
+
+        private Collection<String> getAttributes() {
+            ArrayList<String> attributes = new ArrayList<String>();
+            attributes.addAll(accessMethods.keySet());
+            return attributes;
+        }
+
+        private Method getGetter(String attribute) {
+            Method[] methods = accessMethods.get(attribute);
+            return (methods != null && methods.length > 0) ? methods[0] : null;
+        }
+
+        private Method getSetter(String attribute) {
+            Method[] methods = accessMethods.get(attribute);
+            return (methods != null && methods.length > 1) ? methods[1] : null;
+        }
+    }
+
+    /**
+     * Provides mappings between shortcut keycodes and their representation in
+     * design attributes
+     * 
+     * @author Vaadin Ltd
+     */
+    private static class ShortcutKeyMapper implements Serializable {
+
+        private static Map<Integer, String> keyCodeMap = Collections
+                .synchronizedMap(new HashMap<Integer, String>());
+        private static Map<String, Integer> presentationMap = Collections
+                .synchronizedMap(new HashMap<String, Integer>());
+
+        static {
+            // map modifiers
+            mapKey(ModifierKey.ALT, "alt");
+            mapKey(ModifierKey.CTRL, "ctrl");
+            mapKey(ModifierKey.META, "meta");
+            mapKey(ModifierKey.SHIFT, "shift");
+            // map keys
+            mapKey(KeyCode.ENTER, "enter");
+            mapKey(KeyCode.ESCAPE, "escape");
+            mapKey(KeyCode.PAGE_UP, "pageup");
+            mapKey(KeyCode.PAGE_DOWN, "pagedown");
+            mapKey(KeyCode.TAB, "tab");
+            mapKey(KeyCode.ARROW_LEFT, "left");
+            mapKey(KeyCode.ARROW_UP, "up");
+            mapKey(KeyCode.ARROW_RIGHT, "right");
+            mapKey(KeyCode.ARROW_DOWN, "down");
+            mapKey(KeyCode.BACKSPACE, "backspace");
+            mapKey(KeyCode.DELETE, "delete");
+            mapKey(KeyCode.INSERT, "insert");
+            mapKey(KeyCode.END, "end");
+            mapKey(KeyCode.HOME, "home");
+            mapKey(KeyCode.F1, "f1");
+            mapKey(KeyCode.F2, "f2");
+            mapKey(KeyCode.F3, "f3");
+            mapKey(KeyCode.F4, "f4");
+            mapKey(KeyCode.F5, "f5");
+            mapKey(KeyCode.F6, "f6");
+            mapKey(KeyCode.F7, "f7");
+            mapKey(KeyCode.F8, "f8");
+            mapKey(KeyCode.F9, "f9");
+            mapKey(KeyCode.F10, "f10");
+            mapKey(KeyCode.F11, "f11");
+            mapKey(KeyCode.F12, "f12");
+            mapKey(KeyCode.NUM0, "0");
+            mapKey(KeyCode.NUM1, "1");
+            mapKey(KeyCode.NUM2, "2");
+            mapKey(KeyCode.NUM3, "3");
+            mapKey(KeyCode.NUM4, "4");
+            mapKey(KeyCode.NUM5, "5");
+            mapKey(KeyCode.NUM6, "6");
+            mapKey(KeyCode.NUM7, "7");
+            mapKey(KeyCode.NUM8, "8");
+            mapKey(KeyCode.NUM9, "9");
+            mapKey(KeyCode.SPACEBAR, "spacebar");
+            mapKey(KeyCode.A, "a");
+            mapKey(KeyCode.B, "b");
+            mapKey(KeyCode.C, "c");
+            mapKey(KeyCode.D, "d");
+            mapKey(KeyCode.E, "e");
+            mapKey(KeyCode.F, "f");
+            mapKey(KeyCode.G, "g");
+            mapKey(KeyCode.H, "h");
+            mapKey(KeyCode.I, "i");
+            mapKey(KeyCode.J, "j");
+            mapKey(KeyCode.K, "k");
+            mapKey(KeyCode.L, "l");
+            mapKey(KeyCode.M, "m");
+            mapKey(KeyCode.N, "n");
+            mapKey(KeyCode.O, "o");
+            mapKey(KeyCode.P, "p");
+            mapKey(KeyCode.Q, "q");
+            mapKey(KeyCode.R, "r");
+            mapKey(KeyCode.S, "s");
+            mapKey(KeyCode.T, "t");
+            mapKey(KeyCode.U, "u");
+            mapKey(KeyCode.V, "v");
+            mapKey(KeyCode.X, "x");
+            mapKey(KeyCode.Y, "y");
+            mapKey(KeyCode.Z, "z");
+        }
+
+        private static void mapKey(int keyCode, String presentation) {
+            keyCodeMap.put(keyCode, presentation);
+            presentationMap.put(presentation, keyCode);
+        }
+
+        private static int getKeycodeForString(String attributePresentation) {
+            Integer code = presentationMap.get(attributePresentation);
+            return code != null ? code.intValue() : -1;
+        }
+
+        private static String getStringForKeycode(int keyCode) {
+            return keyCodeMap.get(keyCode);
+        }
+    }
+
+    /**
+     * Converts the given string attribute value to its corresponding boolean.
+     * 
+     * An empty string and "true" are considered to represent a true value and
+     * "false" to represent a false value.
+     * 
+     * @param booleanValue
+     *            the boolean value from an attribute
+     * @return the parsed boolean
+     */
+    public static boolean parseBoolean(String booleanValue) {
+        return !booleanValue.equalsIgnoreCase("false");
+    }
+
+}
\ No newline at end of file
diff --git a/server/src/com/vaadin/ui/declarative/DesignContext.java b/server/src/com/vaadin/ui/declarative/DesignContext.java
new file mode 100644
index 0000000000..ade2494638
--- /dev/null
+++ b/server/src/com/vaadin/ui/declarative/DesignContext.java
@@ -0,0 +1,719 @@
+/*
+ * Copyright 2000-2014 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.ui.declarative;
+
+import java.io.Serializable;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Document;
+import org.jsoup.nodes.Element;
+import org.jsoup.nodes.Node;
+
+import com.vaadin.annotations.DesignRoot;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.HasComponents;
+
+/**
+ * This class contains contextual information that is collected when a component
+ * tree is constructed based on HTML design template. This information includes
+ * mappings from local ids, global ids and captions to components , as well as a
+ * mapping between prefixes and package names (such as "v" -> "com.vaadin.ui").
+ * 
+ * @since 7.4
+ * @author Vaadin Ltd
+ */
+public class DesignContext implements Serializable {
+
+    // cache for object instances
+    private static Map<Class<?>, Component> instanceCache = Collections
+            .synchronizedMap(new HashMap<Class<?>, Component>());
+
+    // The root component of the component hierarchy
+    private Component rootComponent = null;
+    // Attribute names for global id and caption and the prefix name for a local
+    // id
+    public static final String ID_ATTRIBUTE = "id";
+    public static final String CAPTION_ATTRIBUTE = "caption";
+    public static final String LOCAL_ID_ATTRIBUTE = "_id";
+    // Mappings from ids to components. Modified when reading from design.
+    private Map<String, Component> idToComponent = new HashMap<String, Component>();
+    private Map<String, Component> localIdToComponent = new HashMap<String, Component>();
+    private Map<String, Component> captionToComponent = new HashMap<String, Component>();
+    // Mapping from components to local ids. Accessed when writing to
+    // design. Modified when reading from design.
+    private Map<Component, String> componentToLocalId = new HashMap<Component, String>();
+    private Document doc; // required for calling createElement(String)
+    // namespace mappings
+    private Map<String, String> packageToPrefix = new HashMap<String, String>();
+    private Map<String, String> prefixToPackage = new HashMap<String, String>();
+    // prefix names for which no package-mapping element will be created in the
+    // html tree (this includes at least "v" which is always taken to refer
+    // to "com.vaadin.ui".
+    private Map<String, String> defaultPrefixes = new HashMap<String, String>();
+
+    // component creation listeners
+    private List<ComponentCreationListener> listeners = new ArrayList<ComponentCreationListener>();
+
+    public DesignContext(Document doc) {
+        this.doc = doc;
+        // Initialize the mapping between prefixes and package names.
+        defaultPrefixes.put("v", "com.vaadin.ui");
+        for (String prefix : defaultPrefixes.keySet()) {
+            String packageName = defaultPrefixes.get(prefix);
+            mapPrefixToPackage(prefix, packageName);
+        }
+    }
+
+    public DesignContext() {
+        this(new Document(""));
+    }
+
+    /**
+     * Returns a component having the specified local id. If no component is
+     * found, returns null.
+     * 
+     * @param localId
+     *            The local id of the component
+     * @return a component whose local id equals localId
+     */
+    public Component getComponentByLocalId(String localId) {
+        return localIdToComponent.get(localId);
+    }
+
+    /**
+     * Returns a component having the specified global id. If no component is
+     * found, returns null.
+     * 
+     * @param globalId
+     *            The global id of the component
+     * @return a component whose global id equals globalId
+     */
+    public Component getComponentById(String globalId) {
+        return idToComponent.get(globalId);
+    }
+
+    /**
+     * Returns a component having the specified caption. If no component is
+     * found, returns null.
+     * 
+     * @param caption
+     *            The caption of the component
+     * @return a component whose caption equals the caption given as a parameter
+     */
+    public Component getComponentByCaption(String caption) {
+        return captionToComponent.get(caption);
+    }
+
+    /**
+     * Creates a mapping between the given global id and the component. Returns
+     * true if globalId was already mapped to some component. Otherwise returns
+     * false. Also sets the id of the component to globalId.
+     * 
+     * If there is a mapping from the component to a global id (gid) different
+     * from globalId, the mapping from gid to component is removed.
+     * 
+     * If the string was mapped to a component c different from the given
+     * component, the mapping from c to the string is removed. Similarly, if
+     * component was mapped to some string s different from globalId, the
+     * mapping from s to component is removed.
+     * 
+     * @param globalId
+     *            The new global id of the component.
+     * @param component
+     *            The component whose global id is to be set.
+     * @return true, if there already was a global id mapping from the string to
+     *         some component.
+     */
+    private boolean mapId(String globalId, Component component) {
+        Component oldComponent = idToComponent.get(globalId);
+        if (oldComponent != null && !oldComponent.equals(component)) {
+            oldComponent.setId(null);
+        }
+        String oldGID = component.getId();
+        if (oldGID != null && !oldGID.equals(globalId)) {
+            idToComponent.remove(oldGID);
+        }
+        component.setId(globalId);
+        idToComponent.put(globalId, component);
+        return oldComponent != null && !oldComponent.equals(component);
+    }
+
+    /**
+     * Creates a mapping between the given local id and the component. Returns
+     * true if localId was already mapped to some component or if component was
+     * mapped to some string. Otherwise returns false.
+     * 
+     * If the string was mapped to a component c different from the given
+     * component, the mapping from c to the string is removed. Similarly, if
+     * component was mapped to some string s different from localId, the mapping
+     * from s to component is removed.
+     * 
+     * @param localId
+     *            The new local id of the component.
+     * @param component
+     *            The component whose local id is to be set.
+     * @return true, if there already was a local id mapping from the string to
+     *         some component or from the component to some string. Otherwise
+     *         returns false.
+     */
+    private boolean mapLocalId(String localId, Component component) {
+        return twoWayMap(localId, component, localIdToComponent,
+                componentToLocalId);
+    }
+
+    /**
+     * Creates a mapping between the given caption and the component. Returns
+     * true if caption was already mapped to some component.
+     * 
+     * Note that unlike mapGlobalId, if some component already has the given
+     * caption, the caption is not cleared from the component. This allows
+     * non-unique captions. However, only one of the components corresponding to
+     * a given caption can be found using the map captionToComponent. Hence, any
+     * captions that are used to identify an object should be unique.
+     * 
+     * @param caption
+     *            The new caption of the component.
+     * @param component
+     *            The component whose caption is to be set.
+     * @return true, if there already was a caption mapping from the string to
+     *         some component.
+     */
+    private boolean mapCaption(String caption, Component component) {
+        return captionToComponent.put(caption, component) != null;
+    }
+
+    /**
+     * Creates a two-way mapping between key and value, i.e. adds key -> value
+     * to keyToValue and value -> key to valueToKey. If key was mapped to a
+     * value v different from the given value, the mapping from v to key is
+     * removed. Similarly, if value was mapped to some key k different from key,
+     * the mapping from k to value is removed.
+     * 
+     * Returns true if there already was a mapping from key to some value v or
+     * if there was a mapping from value to some key k. Otherwise returns false.
+     * 
+     * @param key
+     *            The new key in keyToValue.
+     * @param value
+     *            The new value in keyToValue.
+     * @param keyToValue
+     *            A map from keys to values.
+     * @param valueToKey
+     *            A map from values to keys.
+     * @return whether there already was some mapping from key to a value or
+     *         from value to a key.
+     */
+    private <S, T> boolean twoWayMap(S key, T value, Map<S, T> keyToValue,
+            Map<T, S> valueToKey) {
+        T oldValue = keyToValue.put(key, value);
+        if (oldValue != null && !oldValue.equals(value)) {
+            valueToKey.remove(oldValue);
+        }
+        S oldKey = valueToKey.put(value, key);
+        if (oldKey != null && !oldKey.equals(key)) {
+            keyToValue.remove(oldKey);
+        }
+        return oldValue != null || oldKey != null;
+    }
+
+    /**
+     * Creates a two-way mapping between a prefix and a package name. Return
+     * true if prefix was already mapped to some package name or packageName to
+     * some prefix.
+     * 
+     * @param prefix
+     *            the prefix name without an ending dash (for instance, "v" is
+     *            always used for "com.vaadin.ui")
+     * @param packageName
+     *            the name of the package corresponding to prefix
+     * @return whether there was a mapping from prefix to some package name or
+     *         from packageName to some prefix.
+     */
+    private boolean mapPrefixToPackage(String prefix, String packageName) {
+        return twoWayMap(prefix, packageName, prefixToPackage, packageToPrefix);
+    }
+
+    /**
+     * Returns the default instance for the given class. The instance must not
+     * be modified by the caller.
+     * 
+     * @param abstractComponent
+     * @return the default instance for the given class. The return value must
+     *         not be modified by the caller
+     */
+    public <T> T getDefaultInstance(Component component) {
+        // If the root is a @DesignRoot component, it can't use itself as a
+        // reference or the written design will be empty
+
+        // If the root component in some other way initializes itself in the
+        // constructor
+        if (getRootComponent() == component
+                && component.getClass().isAnnotationPresent(DesignRoot.class)) {
+            return (T) getDefaultInstance((Class<? extends Component>) component
+                    .getClass().getSuperclass());
+        }
+        return (T) getDefaultInstance(component.getClass());
+    }
+
+    private Component getDefaultInstance(
+            Class<? extends Component> componentClass) {
+        Component instance = instanceCache.get(componentClass);
+        if (instance == null) {
+            try {
+                instance = componentClass.newInstance();
+                instanceCache.put(componentClass, instance);
+            } catch (InstantiationException e) {
+                throw new RuntimeException("Could not instantiate "
+                        + componentClass.getName());
+            } catch (IllegalAccessException e) {
+                throw new RuntimeException("Could not instantiate "
+                        + componentClass.getName());
+            }
+        }
+        return instance;
+    }
+
+    /**
+     * Reads and stores the mappings from prefixes to package names from meta
+     * tags located under <head> in the html document.
+     */
+    protected void readPackageMappings(Document doc) {
+        Element head = doc.head();
+        if (head == null) {
+            return;
+        }
+        for (Node child : head.childNodes()) {
+            if (child instanceof Element) {
+                Element childElement = (Element) child;
+                if ("meta".equals(childElement.tagName())) {
+                    Attributes attributes = childElement.attributes();
+                    if (attributes.hasKey("name")
+                            && attributes.hasKey("content")
+                            && "package-mapping".equals(attributes.get("name"))) {
+                        String contentString = attributes.get("content");
+                        String[] parts = contentString.split(":");
+                        if (parts.length != 2) {
+                            throw new DesignException("The meta tag '"
+                                    + child.toString() + "' cannot be parsed.");
+                        }
+                        String prefixName = parts[0];
+                        String packageName = parts[1];
+                        twoWayMap(prefixName, packageName, prefixToPackage,
+                                packageToPrefix);
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Writes the package mappings (prefix -> package name) of this object to
+     * the specified document.
+     * <p>
+     * The prefixes are stored as <meta> tags under <head> in the document.
+     * 
+     * @param doc
+     *            the Jsoup document tree where the package mappings are written
+     */
+    public void writePackageMappings(Document doc) {
+        Element head = doc.head();
+        for (String prefix : prefixToPackage.keySet()) {
+            // Only store the prefix-name mapping if it is not a default mapping
+            // (such as "v" -> "com.vaadin.ui")
+            if (defaultPrefixes.get(prefix) == null) {
+                Node newNode = doc.createElement("meta");
+                newNode.attr("name", "package-mapping");
+                String prefixToPackageName = prefix + ":"
+                        + prefixToPackage.get(prefix);
+                newNode.attr("content", prefixToPackageName);
+                head.appendChild(newNode);
+            }
+        }
+    }
+
+    /**
+     * Creates an html tree node corresponding to the given element. Also
+     * initializes its attributes by calling writeDesign. As a result of the
+     * writeDesign() call, this method creates the entire subtree rooted at the
+     * returned Node.
+     * 
+     * @param childComponent
+     *            The component with state that is written in to the node
+     * @return An html tree node corresponding to the given component. The tag
+     *         name of the created node is derived from the class name of
+     *         childComponent.
+     */
+    public Element createElement(Component childComponent) {
+        Class<?> componentClass = childComponent.getClass();
+        String packageName = componentClass.getPackage().getName();
+        String prefix = packageToPrefix.get(packageName);
+        if (prefix == null) {
+            prefix = packageName.replace('.', '_');
+            twoWayMap(prefix, packageName, prefixToPackage, packageToPrefix);
+        }
+        prefix = prefix + "-";
+        String className = classNameToElementName(componentClass
+                .getSimpleName());
+        Element newElement = doc.createElement(prefix + className);
+        childComponent.writeDesign(newElement, this);
+        // Handle the local id. Global id and caption should have been taken
+        // care of by writeDesign.
+        String localId = componentToLocalId.get(childComponent);
+        if (localId != null) {
+            newElement.attr(LOCAL_ID_ATTRIBUTE, localId);
+        }
+        return newElement;
+    }
+
+    /**
+     * Creates the name of the html tag corresponding to the given class name.
+     * The name is derived by converting each uppercase letter to lowercase and
+     * inserting a dash before the letter. No dash is inserted before the first
+     * letter of the class name.
+     * 
+     * @param className
+     *            the name of the class without a package name
+     * @return the html tag name corresponding to className
+     */
+    private String classNameToElementName(String className) {
+        StringBuilder result = new StringBuilder();
+        for (int i = 0; i < className.length(); i++) {
+            Character c = className.charAt(i);
+            if (Character.isUpperCase(c)) {
+                if (i > 0) {
+                    result.append("-");
+                }
+                result.append(Character.toLowerCase(c));
+            } else {
+                result.append(c);
+            }
+        }
+        return result.toString();
+    }
+
+    /**
+     * Reads the given design node and creates the corresponding component tree
+     * 
+     * @param componentDesign
+     *            The design element containing the description of the component
+     *            to be created
+     * @return the root component of component tree
+     */
+    public Component readDesign(Element componentDesign) {
+        // Create the component.
+        Component component = instantiateComponent(componentDesign);
+        readDesign(componentDesign, component);
+        fireComponentCreatedEvent(componentToLocalId.get(component), component);
+        return component;
+    }
+
+    /**
+     * 
+     * Reads the given design node and populates the given component with the
+     * corresponding component tree
+     * <p>
+     * Additionally registers the component id, local id and caption of the
+     * given component and all its children in the context
+     * 
+     * @param componentDesign
+     *            The design element containing the description of the component
+     *            to be created
+     * @param component
+     *            The component which corresponds to the design element
+     */
+    public void readDesign(Element componentDesign, Component component) {
+        component.readDesign(componentDesign, this);
+        // Get the ids and the caption of the component and store them in the
+        // maps of this design context.
+        org.jsoup.nodes.Attributes attributes = componentDesign.attributes();
+        // global id: only update the mapping, the id has already been set for
+        // the component
+        String id = component.getId();
+        if (id != null && id.length() > 0) {
+            boolean mappingExists = mapId(id, component);
+            if (mappingExists) {
+                throw new DesignException(
+                        "The following global id is not unique: " + id);
+            }
+        }
+        // local id: this is not a property of a component, so need to fetch it
+        // from the attributes of componentDesign
+        if (attributes.hasKey(LOCAL_ID_ATTRIBUTE)) {
+            String localId = attributes.get(LOCAL_ID_ATTRIBUTE);
+            boolean mappingExists = mapLocalId(localId, component);
+            if (mappingExists) {
+                throw new DesignException(
+                        "the following local id is not unique: " + localId);
+            }
+        }
+        // caption: a property of a component, possibly not unique
+        String caption = component.getCaption();
+        if (caption != null) {
+            mapCaption(caption, component);
+        }
+    }
+
+    /**
+     * Creates a Component corresponding to the given node. Does not set the
+     * attributes for the created object.
+     * 
+     * @param node
+     *            a node of an html tree
+     * @return a Component corresponding to node, with no attributes set.
+     */
+    private Component instantiateComponent(Node node) {
+        // Extract the package and class names.
+        String qualifiedClassName = tagNameToClassName(node);
+        try {
+            Class<? extends Component> componentClass = resolveComponentClass(qualifiedClassName);
+            Component newComponent = componentClass.newInstance();
+            return newComponent;
+        } catch (Exception e) {
+            throw new DesignException("No component class could be found for "
+                    + node.nodeName() + ".", e);
+        }
+    }
+
+    /**
+     * Returns the qualified class name corresponding to the given html tree
+     * node. The class name is extracted from the tag name of node.
+     * 
+     * @param node
+     *            an html tree node
+     * @return The qualified class name corresponding to the given node.
+     */
+    private String tagNameToClassName(Node node) {
+        String tagName = node.nodeName();
+        if (tagName.equals("v-addon")) {
+            return node.attr("class");
+        }
+        // Otherwise, get the full class name using the prefix to package
+        // mapping. Example: "v-vertical-layout" ->
+        // "com.vaadin.ui.VerticalLayout"
+        String[] parts = tagName.split("-");
+        if (parts.length < 2) {
+            throw new DesignException("The tagname '" + tagName
+                    + "' is invalid: missing prefix.");
+        }
+        String prefixName = parts[0];
+        String packageName = prefixToPackage.get(prefixName);
+        if (packageName == null) {
+            throw new DesignException("Unknown tag: " + tagName);
+        }
+        int firstCharacterIndex = prefixName.length() + 1; // +1 is for '-'
+        tagName = tagName.substring(firstCharacterIndex,
+                firstCharacterIndex + 1).toUpperCase(Locale.ENGLISH)
+                + tagName.substring(firstCharacterIndex + 1);
+        int i;
+        while ((i = tagName.indexOf("-")) != -1) {
+            int length = tagName.length();
+            if (i != length - 1) {
+                tagName = tagName.substring(0, i)
+                        + tagName.substring(i + 1, i + 2).toUpperCase(
+                                Locale.ENGLISH) + tagName.substring(i + 2);
+
+            } else {
+                // Ends with "-"
+                System.out.println("A tag name should not end with '-'.");
+            }
+        }
+        return packageName + "." + tagName;
+    }
+
+    @SuppressWarnings("unchecked")
+    private Class<? extends Component> resolveComponentClass(
+            String qualifiedClassName) throws ClassNotFoundException {
+        Class<?> componentClass = null;
+        componentClass = Class.forName(qualifiedClassName);
+
+        // Check that we're dealing with a Component.
+        if (isComponent(componentClass)) {
+            return (Class<? extends Component>) componentClass;
+        } else {
+            throw new IllegalArgumentException(String.format(
+                    "Resolved class %s is not a %s.", componentClass.getName(),
+                    Component.class.getName()));
+        }
+    }
+
+    /**
+     * Returns {@code true} if the given {@link Class} implements the
+     * {@link Component} interface of Vaadin Framework otherwise {@code false}.
+     * 
+     * @param componentClass
+     *            {@link Class} to check against {@link Component} interface.
+     * @return {@code true} if the given {@link Class} is a {@link Component},
+     *         {@code false} otherwise.
+     */
+    private static boolean isComponent(Class<?> componentClass) {
+        if (componentClass != null) {
+            return Component.class.isAssignableFrom(componentClass);
+        } else {
+            return false;
+        }
+    }
+
+    /**
+     * Returns the root component of a created component hierarchy.
+     * 
+     * @return the root component of the hierarchy
+     */
+    public Component getRootComponent() {
+        return rootComponent;
+    }
+
+    /**
+     * Sets the root component of a created component hierarchy.
+     * 
+     * @param rootComponent
+     *            the root component of the hierarchy
+     */
+    public void setRootComponent(Component rootComponent) {
+        this.rootComponent = rootComponent;
+    }
+
+    /**
+     * Adds a component creation listener. The listener will be notified when
+     * components are created while parsing a design template
+     * 
+     * @param listener
+     *            the component creation listener to be added
+     */
+    public void addComponentCreationListener(ComponentCreationListener listener) {
+        listeners.add(listener);
+    }
+
+    /**
+     * Removes a component creation listener.
+     * 
+     * @param listener
+     *            the component creation listener to be removed
+     */
+    public void removeComponentCreationListener(
+            ComponentCreationListener listener) {
+        listeners.remove(listener);
+    }
+
+    /**
+     * Fires component creation event
+     * 
+     * @param localId
+     *            localId of the component
+     * @param component
+     *            the component that was created
+     */
+    private void fireComponentCreatedEvent(String localId, Component component) {
+        ComponentCreatedEvent event = new ComponentCreatedEvent(localId,
+                component);
+        for (ComponentCreationListener listener : listeners) {
+            listener.componentCreated(event);
+        }
+    }
+
+    /**
+     * Interface to be implemented by component creation listeners
+     * 
+     * @author Vaadin Ltd
+     */
+    public interface ComponentCreationListener extends Serializable {
+
+        /**
+         * Called when component has been created in the design context
+         * 
+         * @param event
+         *            the component creation event containing information on the
+         *            created component
+         */
+        public void componentCreated(ComponentCreatedEvent event);
+    }
+
+    /**
+     * Component creation event that is fired when a component is created in the
+     * context
+     * 
+     * @author Vaadin Ltd
+     */
+    public class ComponentCreatedEvent implements Serializable {
+        private String localId;
+        private Component component;
+        private DesignContext context;
+
+        /**
+         * Creates a new instance of ComponentCreatedEvent
+         * 
+         * @param localId
+         *            the local id of the created component
+         * @param component
+         *            the created component
+         */
+        private ComponentCreatedEvent(String localId, Component component) {
+            this.localId = localId;
+            this.component = component;
+            context = DesignContext.this;
+        }
+
+        /**
+         * Returns the local id of the created component or null if not exist
+         * 
+         * @return the localId
+         */
+        public String getLocalId() {
+            return localId;
+        }
+
+        /**
+         * Returns the created component
+         * 
+         * @return the component
+         */
+        public Component getComponent() {
+            return component;
+        }
+    }
+
+    /**
+     * Helper method for component write implementors to determine whether their
+     * children should be written out or not
+     * 
+     * @param c
+     *            The component being written
+     * @param defaultC
+     *            The default instance for the component
+     * @return whether the children of c should be written
+     */
+    public boolean shouldWriteChildren(Component c, Component defaultC) {
+        if (c == getRootComponent()) {
+            // The root component should always write its children - otherwise
+            // the result is empty
+            return true;
+        }
+
+        if (defaultC instanceof HasComponents
+                && ((HasComponents) defaultC).iterator().hasNext()) {
+            // Easy version which assumes that this is a custom component if the
+            // constructor adds children
+            return false;
+        }
+
+        return true;
+    }
+}
diff --git a/server/src/com/vaadin/ui/declarative/DesignException.java b/server/src/com/vaadin/ui/declarative/DesignException.java
new file mode 100644
index 0000000000..01482f84b0
--- /dev/null
+++ b/server/src/com/vaadin/ui/declarative/DesignException.java
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2000-2014 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.ui.declarative;
+
+@SuppressWarnings("serial")
+/**
+ * An exception that is used when reading or writing a design fails.
+ * 
+ * @since 7.4 
+ * @author Vaadin Ltd
+ */
+public class DesignException extends RuntimeException {
+
+    public DesignException() {
+        super();
+    }
+
+    public DesignException(String message) {
+        super(message);
+    }
+
+    public DesignException(String message, Throwable e) {
+        super(message, e);
+    }
+
+}
\ No newline at end of file
diff --git a/server/src/com/vaadin/ui/declarative/FieldBinder.java b/server/src/com/vaadin/ui/declarative/FieldBinder.java
new file mode 100644
index 0000000000..bd906682fa
--- /dev/null
+++ b/server/src/com/vaadin/ui/declarative/FieldBinder.java
@@ -0,0 +1,265 @@
+/*
+ * Copyright 2000-2014 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.ui.declarative;
+
+import java.beans.IntrospectionException;
+import java.io.Serializable;
+import java.lang.reflect.Field;
+import java.lang.reflect.InvocationTargetException;
+import java.util.ArrayList;
+import java.util.Collection;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+import java.util.logging.Logger;
+
+import com.vaadin.ui.Component;
+import com.vaadin.util.ReflectTools;
+
+/**
+ * Binder utility that binds member fields of a design class instance to given
+ * component instances. Only fields of type {@link Component} are bound
+ * 
+ * @since 7.4
+ * @author Vaadin Ltd
+ */
+public class FieldBinder implements Serializable {
+
+    // the instance containing the bound fields
+    private Object bindTarget;
+    // mapping between field names and Fields
+    private Map<String, Field> fieldMap = new HashMap<String, Field>();
+
+    /**
+     * Creates a new instance of LayoutFieldBinder.
+     * 
+     * @param design
+     *            the design class instance containing the fields to bind
+     * @throws IntrospectionException
+     *             if the given design class can not be introspected
+     */
+    public FieldBinder(Object design) throws IntrospectionException {
+        this(design, design.getClass());
+    }
+
+    /**
+     * Creates a new instance of LayoutFieldBinder.
+     * 
+     * @param design
+     *            the instance containing the fields
+     * @param classWithFields
+     *            the class which defines the fields to bind
+     * @throws IntrospectionException
+     *             if the given design class can not be introspected
+     */
+    public FieldBinder(Object design, Class<?> classWithFields)
+            throws IntrospectionException {
+        if (design == null) {
+            throw new IllegalArgumentException("The design must not be null");
+        }
+        bindTarget = design;
+        resolveFields(classWithFields);
+    }
+
+    /**
+     * Returns a collection of field names that are not bound.
+     * 
+     * @return a collection of fields assignable to Component that are not bound
+     */
+    public Collection<String> getUnboundFields() throws FieldBindingException {
+        List<String> unboundFields = new ArrayList<String>();
+        for (Field f : fieldMap.values()) {
+            try {
+                Object value = ReflectTools.getJavaFieldValue(bindTarget, f);
+                if (value == null) {
+                    unboundFields.add(f.getName());
+                }
+            } catch (IllegalArgumentException e) {
+                throw new FieldBindingException("Could not get field value", e);
+            } catch (IllegalAccessException e) {
+                throw new FieldBindingException("Could not get field value", e);
+            } catch (InvocationTargetException e) {
+                throw new FieldBindingException("Could not get field value", e);
+            }
+        }
+        if (unboundFields.size() > 0) {
+            getLogger().severe(
+                    "Found unbound fields in component root :" + unboundFields);
+        }
+        return unboundFields;
+    }
+
+    /**
+     * Resolves the fields of the design class instance.
+     */
+    private void resolveFields(Class<?> classWithFields) {
+        for (Field memberField : getFields(classWithFields)) {
+            if (Component.class.isAssignableFrom(memberField.getType())) {
+                fieldMap.put(memberField.getName().toLowerCase(Locale.ENGLISH),
+                        memberField);
+            }
+        }
+    }
+
+    /**
+     * Tries to bind the given {@link Component} instance to a member field of
+     * the bind target. The name of the bound field is constructed based on the
+     * id or caption of the instance, depending on which one is defined. If a
+     * field is already bound (not null), {@link FieldBindingException} is
+     * thrown.
+     * 
+     * @param instance
+     *            the instance to be bound to a field
+     * @return true on success, otherwise false
+     * @throws FieldBindingException
+     *             if error occurs when trying to bind the instance to a field
+     */
+    public boolean bindField(Component instance) {
+        return bindField(instance, null);
+    }
+
+    /**
+     * Tries to bind the given {@link Component} instance to a member field of
+     * the bind target. The fields are matched based on localId, id and caption.
+     * 
+     * @param instance
+     *            the instance to be bound to a field
+     * @param localId
+     *            the localId used for mapping the field to an instance field
+     * @return true on success
+     * @throws FieldBindingException
+     *             if error occurs when trying to bind the instance to a field
+     */
+    public boolean bindField(Component instance, String localId) {
+        // check that the field exists, is correct type and is null
+        boolean success = bindFieldByIdentifier(localId, instance);
+        if (!success) {
+            success = bindFieldByIdentifier(instance.getId(), instance);
+        }
+        if (!success) {
+            success = bindFieldByIdentifier(instance.getCaption(), instance);
+        }
+        if (!success) {
+            String idInfo = "localId: " + localId + " id: " + instance.getId()
+                    + " caption: " + instance.getCaption();
+            getLogger().finest(
+                    "Could not bind component to a field "
+                            + instance.getClass().getName() + " " + idInfo);
+        }
+        return success;
+    }
+
+    /**
+     * Tries to bind the given {@link Component} instance to a member field of
+     * the bind target. The field is matched based on the given identifier. If a
+     * field is already bound (not null), {@link FieldBindingException} is
+     * thrown.
+     * 
+     * @param identifier
+     *            the identifier for the field.
+     * @param instance
+     *            the instance to be bound to a field
+     * @return true on success
+     * @throws FieldBindingException
+     *             if error occurs when trying to bind the instance to a field
+     */
+    private boolean bindFieldByIdentifier(String identifier, Component instance) {
+        try {
+            // create and validate field name
+            String fieldName = asFieldName(identifier);
+            if (fieldName.length() == 0) {
+                return false;
+            }
+            // validate that the field can be found
+            Field field = fieldMap.get(fieldName.toLowerCase(Locale.ENGLISH));
+            if (field == null) {
+                getLogger().fine(
+                        "No field was found by identifier " + identifier);
+                return false;
+            }
+            // validate that the field is not set
+            Object fieldValue = ReflectTools.getJavaFieldValue(bindTarget,
+                    field);
+            if (fieldValue != null) {
+                getLogger().fine(
+                        "The field \"" + fieldName
+                                + "\" was already mapped. Ignoring.");
+            } else {
+                // set the field value
+                ReflectTools.setJavaFieldValue(bindTarget, field, instance);
+            }
+            return true;
+        } catch (IllegalAccessException e) {
+            throw new FieldBindingException("Field binding failed", e);
+        } catch (IllegalArgumentException e) {
+            throw new FieldBindingException("Field binding failed", e);
+        } catch (InvocationTargetException e) {
+            throw new FieldBindingException("Field binding failed", e);
+        }
+    }
+
+    /**
+     * Converts the given identifier to a valid field name by stripping away
+     * illegal character and setting the first letter of the name to lower case.
+     * 
+     * @param identifier
+     *            the identifier to be converted to field name
+     * @return the field name corresponding the identifier
+     */
+    private static String asFieldName(String identifier) {
+        if (identifier == null) {
+            return "";
+        }
+        StringBuilder result = new StringBuilder();
+        for (int i = 0; i < identifier.length(); i++) {
+            char character = identifier.charAt(i);
+            if (Character.isJavaIdentifierPart(character)) {
+                result.append(character);
+            }
+        }
+        // lowercase first letter
+        if (result.length() > 0 && Character.isLetter(result.charAt(0))) {
+            result.setCharAt(0, Character.toLowerCase(result.charAt(0)));
+        }
+        return result.toString();
+    }
+
+    /**
+     * Returns a list containing Field objects reflecting all the fields of the
+     * class or interface represented by this Class object. The fields in
+     * superclasses are excluded.
+     * 
+     * @param searchClass
+     *            the class to be scanned for fields
+     * @return the list of fields in this class
+     */
+    protected static List<java.lang.reflect.Field> getFields(
+            Class<?> searchClass) {
+        ArrayList<java.lang.reflect.Field> memberFields = new ArrayList<java.lang.reflect.Field>();
+
+        for (java.lang.reflect.Field memberField : searchClass
+                .getDeclaredFields()) {
+            memberFields.add(memberField);
+        }
+        return memberFields;
+    }
+
+    private static Logger getLogger() {
+        return Logger.getLogger(FieldBinder.class.getName());
+    }
+
+}
diff --git a/server/src/com/vaadin/ui/declarative/FieldBindingException.java b/server/src/com/vaadin/ui/declarative/FieldBindingException.java
new file mode 100644
index 0000000000..d8b587a14c
--- /dev/null
+++ b/server/src/com/vaadin/ui/declarative/FieldBindingException.java
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2000-2014 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.ui.declarative;
+
+/**
+ * Exception that is thrown when an error occurs during field binding when
+ * reading a design template
+ * 
+ * @since 7.4
+ * @author Vaadin Ltd
+ */
+public class FieldBindingException extends RuntimeException {
+
+    public FieldBindingException(String message) {
+        super(message);
+    }
+
+    public FieldBindingException(String message, Throwable cause) {
+        super(message, cause);
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/DesignReadInConstructor.html b/server/tests/src/com/vaadin/tests/design/DesignReadInConstructor.html
new file mode 100644
index 0000000000..86c9c2a2da
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/DesignReadInConstructor.html
@@ -0,0 +1,5 @@
+<v-vertical-layout>
+    <v-text-field caption="First name" />
+    <v-text-field caption="Last name" />
+    <v-button>OK!</v-button>
+</v-vertical-layout>
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/design/DesignReadInConstructor.java b/server/tests/src/com/vaadin/tests/design/DesignReadInConstructor.java
new file mode 100644
index 0000000000..ce80d98324
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/DesignReadInConstructor.java
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2000-2014 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.design;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.declarative.Design;
+
+@Ignore
+public class DesignReadInConstructor extends CssLayout {
+
+    public DesignReadInConstructor() {
+        Design.read(
+                getClass().getResourceAsStream("DesignReadInConstructor.html"),
+                this);
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/DesignReadInConstructorTest.java b/server/tests/src/com/vaadin/tests/design/DesignReadInConstructorTest.java
new file mode 100644
index 0000000000..539595762d
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/DesignReadInConstructorTest.java
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2000-2014 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.design;
+
+import java.io.ByteArrayOutputStream;
+import java.io.IOException;
+import java.util.HashSet;
+import java.util.Set;
+
+import org.jsoup.Jsoup;
+import org.jsoup.nodes.Attribute;
+import org.jsoup.nodes.Document;
+import org.jsoup.nodes.Element;
+import org.junit.Assert;
+import org.junit.Ignore;
+import org.junit.Test;
+
+import com.vaadin.ui.declarative.Design;
+
+public class DesignReadInConstructorTest {
+
+    @Test
+    public void useDesignReadInConstructor() {
+        DesignReadInConstructor dric = new DesignReadInConstructor();
+        Assert.assertEquals(3, dric.getComponentCount());
+    }
+
+    @Test
+    @Ignore("Can't currently work. There is no way to write a custom component which manually reads its design in the constructor")
+    public void readAndWriteDesignReadInConstructor() throws IOException {
+        DesignReadInConstructor dric = new DesignReadInConstructor();
+        ByteArrayOutputStream baos = new ByteArrayOutputStream();
+        Design.write(dric, baos);
+        Document doc = Jsoup.parse(baos.toString("UTF-8"));
+
+        Document d = Jsoup.parse(
+                getClass().getResourceAsStream("DesignReadInConstructor.html"),
+                "UTF-8", "");
+        assertJsoupTreeEquals(d.body().child(0), doc.body().child(0));
+    }
+
+    private void assertJsoupTreeEquals(Element expected, Element actual) {
+        Assert.assertEquals(expected.tagName(), actual.tagName());
+
+        Set<String> keys = new HashSet<String>();
+
+        for (Attribute attr : expected.attributes().asList()) {
+            keys.add(attr.getKey());
+        }
+        for (Attribute attr : actual.attributes().asList()) {
+            keys.add(attr.getKey());
+        }
+        for (String attributeKey : keys) {
+            Assert.assertEquals(expected.attr(attributeKey),
+                    actual.attr(attributeKey));
+        }
+
+        Assert.assertEquals(expected.children().size(), actual.children()
+                .size());
+        for (int i = 0; i < expected.children().size(); i++) {
+            assertJsoupTreeEquals(expected.child(i), actual.child(i));
+        }
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/DesignTest.java b/server/tests/src/com/vaadin/tests/design/DesignTest.java
new file mode 100644
index 0000000000..a5ccef0d2c
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/DesignTest.java
@@ -0,0 +1,135 @@
+/*
+ * Copyright 2000-2014 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.design;
+
+import java.io.ByteArrayInputStream;
+import java.io.ByteArrayOutputStream;
+import java.io.FileInputStream;
+import java.io.FileNotFoundException;
+import java.io.IOException;
+import java.util.Iterator;
+
+import org.junit.Assert;
+import org.junit.Ignore;
+import org.junit.Test;
+
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.HasComponents;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Panel;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.declarative.Design;
+import com.vaadin.ui.declarative.DesignContext;
+import com.vaadin.ui.declarative.DesignException;
+
+public class DesignTest {
+
+    @Test
+    public void readStream() throws FileNotFoundException {
+        Component root = Design
+                .read(new FileInputStream(
+                        "server/tests/src/com/vaadin/tests/design/verticallayout-two-children.html"));
+        VerticalLayout rootLayout = (VerticalLayout) root;
+        Assert.assertEquals(VerticalLayout.class, root.getClass());
+
+        Assert.assertEquals(2, rootLayout.getComponentCount());
+        Assert.assertEquals(TextField.class, rootLayout.getComponent(0)
+                .getClass());
+        Assert.assertEquals(Button.class, rootLayout.getComponent(1).getClass());
+    }
+
+    @Test(expected = DesignException.class)
+    @Ignore("Feature needs to be fixed")
+    public void readWithIncorrectRoot() throws FileNotFoundException {
+        Design.read(
+                new FileInputStream(
+                        "server/tests/src/com/vaadin/tests/design/verticallayout-one-child.html"),
+                new Panel());
+    }
+
+    public static class MyVerticalLayout extends VerticalLayout {
+
+    }
+
+    @Test
+    public void readWithSubClassRoot() throws FileNotFoundException {
+        Design.read(
+                new FileInputStream(
+                        "server/tests/src/com/vaadin/tests/design/verticallayout-one-child.html"),
+                new MyVerticalLayout());
+    }
+
+    @Test
+    public void writeComponentToStream() throws IOException {
+        HorizontalLayout root = new HorizontalLayout(new Button("OK"),
+                new Button("Cancel"));
+        ByteArrayOutputStream baos = new ByteArrayOutputStream();
+        Design.write(root, baos);
+        Component newRoot = Design.read(new ByteArrayInputStream(baos
+                .toByteArray()));
+
+        assertHierarchyEquals(root, newRoot);
+    }
+
+    @Test
+    public void writeDesignContextToStream() throws IOException {
+        DesignContext dc = Design
+                .read(new FileInputStream(
+                        "server/tests/src/com/vaadin/tests/design/verticallayout-two-children.html"),
+                        null);
+
+        ByteArrayOutputStream baos = new ByteArrayOutputStream();
+        Design.write(dc, baos);
+        Component newRoot = Design.read(new ByteArrayInputStream(baos
+                .toByteArray()));
+
+        assertHierarchyEquals(dc.getRootComponent(), newRoot);
+    }
+
+    @Test(expected = DesignException.class)
+    public void testDuplicateIds() throws FileNotFoundException {
+        Design.read(new FileInputStream(
+                "server/tests/src/com/vaadin/tests/design/duplicate-ids.html"));
+    }
+
+    @Test(expected = DesignException.class)
+    public void testDuplicateLocalIds() throws FileNotFoundException {
+        Design.read(new FileInputStream(
+                "server/tests/src/com/vaadin/tests/design/duplicate-local-ids.html"));
+    }
+
+    private void assertHierarchyEquals(Component expected, Component actual) {
+        if (expected.getClass() != actual.getClass()) {
+            throw new AssertionError(
+                    "Component classes do not match. Expected: "
+                            + expected.getClass().getName() + ", was: "
+                            + actual.getClass().getName());
+        }
+
+        if (expected instanceof HasComponents) {
+            HasComponents expectedHC = (HasComponents) expected;
+            HasComponents actualHC = (HasComponents) actual;
+            Iterator<Component> eI = expectedHC.iterator();
+            Iterator<Component> aI = actualHC.iterator();
+
+            while (eI.hasNext()) {
+                assertHierarchyEquals(eI.next(), aI.next());
+            }
+        }
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/InvalidLayoutTemplate.java b/server/tests/src/com/vaadin/tests/design/InvalidLayoutTemplate.java
new file mode 100644
index 0000000000..bdfa4b47cc
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/InvalidLayoutTemplate.java
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2000-2014 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.design;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.Button;
+import com.vaadin.ui.NativeButton;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.VerticalLayout;
+
+/**
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+@Ignore
+public class InvalidLayoutTemplate extends VerticalLayout {
+    private NativeButton firstButton;
+    private NativeButton secondButton;
+    private NativeButton yetanotherbutton; // generated based on caption
+    private Button clickme; // generated based on caption
+    private TextField shouldNotBeMapped;
+
+    public NativeButton getFirstButton() {
+        return firstButton;
+    }
+
+    public NativeButton getSecondButton() {
+        return secondButton;
+    }
+
+    public NativeButton getYetanotherbutton() {
+        return yetanotherbutton;
+    }
+
+    public Button getClickme() {
+        return clickme;
+    }
+
+    public TextField getShouldNotBeMapped() {
+        return shouldNotBeMapped;
+    }
+
+}
diff --git a/server/tests/src/com/vaadin/tests/design/LayoutTemplate.java b/server/tests/src/com/vaadin/tests/design/LayoutTemplate.java
new file mode 100644
index 0000000000..95f30fb728
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/LayoutTemplate.java
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2000-2014 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.design;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.Button;
+import com.vaadin.ui.NativeButton;
+import com.vaadin.ui.VerticalLayout;
+
+/**
+ * Template to be populated in the tests
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+@Ignore
+public class LayoutTemplate extends VerticalLayout {
+    private NativeButton firstButton; // assigned based on local id
+    private NativeButton secondButton; // assigned based on id
+    private NativeButton yetanotherbutton; // assigned based on caption
+    private Button clickme; // assigned based on caption
+
+    public NativeButton getFirstButton() {
+        return firstButton;
+    }
+
+    public NativeButton getSecondButton() {
+        return secondButton;
+    }
+
+    public NativeButton getYetanotherbutton() {
+        return yetanotherbutton;
+    }
+
+    public Button getClickme() {
+        return clickme;
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/ParseAllSupportedComponentsTest.java b/server/tests/src/com/vaadin/tests/design/ParseAllSupportedComponentsTest.java
new file mode 100644
index 0000000000..4f3f205631
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/ParseAllSupportedComponentsTest.java
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2000-2014 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.design;
+
+import java.io.FileInputStream;
+import java.io.FileNotFoundException;
+
+import junit.framework.TestCase;
+
+import com.vaadin.ui.declarative.Design;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Just top level test case that contains all synchronizable components
+ * 
+ * @author Vaadin Ltd
+ */
+public class ParseAllSupportedComponentsTest extends TestCase {
+
+    public void testParsing() {
+        try {
+            DesignContext ctx = Design
+                    .read(new FileInputStream(
+                            "server/tests/src/com/vaadin/tests/design/all-components.html"),
+                            null);
+            assertNotNull("The returned design context can not be null", ctx);
+            assertNotNull("the component root can not be null",
+                    ctx.getRootComponent());
+        } catch (FileNotFoundException e) {
+            e.printStackTrace();
+            fail("Template parsing threw exception");
+        }
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/ParseLayoutTest.java b/server/tests/src/com/vaadin/tests/design/ParseLayoutTest.java
new file mode 100644
index 0000000000..c517b0e5e2
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/ParseLayoutTest.java
@@ -0,0 +1,223 @@
+/*
+ * Copyright 2000-2014 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.design;
+
+import java.io.ByteArrayInputStream;
+import java.io.ByteArrayOutputStream;
+import java.io.FileInputStream;
+import java.io.FileNotFoundException;
+import java.io.IOException;
+import java.io.InputStream;
+
+import junit.framework.TestCase;
+
+import org.jsoup.Jsoup;
+import org.jsoup.nodes.Document;
+import org.jsoup.nodes.Element;
+import org.jsoup.nodes.Node;
+import org.junit.Test;
+
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.NativeButton;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.declarative.Design;
+import com.vaadin.ui.declarative.DesignContext;
+import com.vaadin.ui.declarative.DesignException;
+
+/**
+ * A test for checking that parsing a layout preserves the IDs and the mapping
+ * from prefixes to package names (for example <meta name=”package-mapping”
+ * content=”my:com.addon.mypackage” />)
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class ParseLayoutTest extends TestCase {
+    // The context is used for accessing the created component hierarchy.
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = Design
+                .read(new FileInputStream(
+                        "server/tests/src/com/vaadin/tests/design/testFile.html"),
+                        null);
+    }
+
+    /*
+     * Checks the component hierarchy created by parsing a design. Also checks
+     * that components can be found by id and caption.
+     */
+    @Test
+    public void testGettingByIDAndCaption() throws FileNotFoundException {
+        findElements(ctx);
+        checkHierarchy(ctx);
+    }
+
+    /*
+     * Check that captions, ids and package mappings are preserved when an html
+     * tree is generated from a DesignContext containing the component root of
+     * the component hierarchy. Done by writing the design to a string and then
+     * reading it back, not using the original context information after reading
+     * the written design. The mapping from prefixes to package names is checked
+     * directly from the html tree.
+     */
+    @Test
+    public void testThatSerializationPreservesProperties() throws IOException {
+        ByteArrayOutputStream out = new ByteArrayOutputStream();
+        Design.write(ctx, out);
+        ByteArrayInputStream in = new ByteArrayInputStream(out.toByteArray());
+        DesignContext newContext = Design.read(in, null);
+        findElements(newContext);
+        checkHierarchy(newContext);
+        // Check the mapping from prefixes to package names using the html tree
+        String[] expectedPrefixes = { "my" };
+        String[] expectedPackageNames = { "com.addon.mypackage" };
+        int index = 0;
+
+        Document doc = Jsoup.parse(out.toString("UTF-8"));
+        Element head = doc.head();
+        for (Node child : head.childNodes()) {
+            if ("meta".equals(child.nodeName())) {
+                String name = child.attributes().get("name");
+                if ("package-mapping".equals(name)) {
+                    String content = child.attributes().get("content");
+                    String[] parts = content.split(":");
+                    assertEquals("Unexpected prefix.", expectedPrefixes[index],
+                            parts[0]);
+                    assertEquals("Unexpected package name.",
+                            expectedPackageNames[index], parts[1]);
+                    index++;
+                }
+            }
+        }
+        assertEquals("Unexpected number of prefix - package name pairs.", 1,
+                index);
+    }
+
+    /*
+     * Check that the field binding works if root instance with member fields is
+     * passed to the LayoutHandler
+     * 
+     * @throws IOException
+     */
+    public void testFieldBinding() throws IOException {
+        LayoutTemplate template = new LayoutTemplate();
+        InputStream htmlFile = new FileInputStream(
+                "server/tests/src/com/vaadin/tests/design/testFile.html");
+        Design.read(htmlFile, template);
+        assertNotNull(template.getFirstButton());
+        assertNotNull(template.getSecondButton());
+        assertNotNull(template.getYetanotherbutton());
+        assertNotNull(template.getClickme());
+        assertEquals("Native click me", template.getFirstButton().getCaption());
+    }
+
+    /*
+     * Check that the field binding fails if some of the fields in the root
+     * instance were not bound
+     * 
+     * @throws IOException
+     */
+    public void testUnboundFields() throws IOException {
+        InvalidLayoutTemplate template = new InvalidLayoutTemplate();
+        InputStream htmlFile = new FileInputStream(
+                "server/tests/src/com/vaadin/tests/design/testFile.html");
+        try {
+            Design.read(htmlFile, template);
+            // we are expecting an exception
+            fail();
+        } catch (DesignException e) {
+            // expected
+        }
+    }
+
+    /*
+     * Checks that the correct components occur in the correct order in the
+     * component hierarchy rooted at context.getComponentRoot().
+     */
+    private void checkHierarchy(DesignContext context) {
+        Component root = context.getRootComponent();
+        VerticalLayout vlayout = (VerticalLayout) root;
+        int numComponents = vlayout.getComponentCount();
+        assertEquals("Wrong number of child components", 3, numComponents);
+
+        // Check the contents of the horizontal layout
+        HorizontalLayout hlayout = (HorizontalLayout) vlayout.getComponent(0);
+        int numHLComponents = hlayout.getComponentCount();
+        assertEquals(5, numHLComponents);
+        Label label = (Label) hlayout.getComponent(0);
+        assertEquals("Wrong caption.", "FooBar", label.getCaption());
+        NativeButton nb = (NativeButton) hlayout.getComponent(1);
+        assertEquals("Wrong caption.", "Native click me", nb.getCaption());
+        nb = (NativeButton) hlayout.getComponent(2);
+        assertEquals("Wrong caption.", "Another button", nb.getCaption());
+        nb = (NativeButton) hlayout.getComponent(3);
+        assertEquals("Wrong caption.", "Yet another button", nb.getCaption());
+        Button b = (Button) hlayout.getComponent(4);
+        assertEquals("Wrong caption.", "Click me", b.getCaption());
+        assertEquals("Wrong width.", 150f, b.getWidth());
+
+        // Check the remaining two components of the vertical layout
+        TextField tf = (TextField) vlayout.getComponent(1);
+        assertEquals("Wrong caption.", "Text input", tf.getCaption());
+        TextArea ta = (TextArea) vlayout.getComponent(2);
+        assertEquals("Wrong caption.", "Text area", ta.getCaption());
+        assertEquals("Wrong width.", 300f, ta.getWidth());
+        assertEquals("Wrong height.", 200f, ta.getHeight());
+    }
+
+    /*
+     * Checks that the correct elements are found using a local id, a global id
+     * or a caption.
+     */
+    private void findElements(DesignContext designContext) {
+        NativeButton firstButton = (NativeButton) designContext
+                .getComponentByLocalId("firstButton");
+        NativeButton firstButton_2 = (NativeButton) designContext
+                .getComponentByCaption("Native click me");
+        NativeButton secondButton = (NativeButton) designContext
+                .getComponentById("secondButton");
+        NativeButton secondButton_2 = (NativeButton) designContext
+                .getComponentByLocalId("localID");
+        NativeButton secondButton_3 = (NativeButton) designContext
+                .getComponentByCaption("Another button");
+        NativeButton thirdButton = (NativeButton) designContext
+                .getComponentByCaption("Yet another button");
+        // Check that the first button was found using both identifiers.
+        assertEquals("The found buttons should be identical but they are not.",
+                firstButton, firstButton_2);
+        assertTrue("The found button element is incorrect.", firstButton
+                .getCaption().equals("Native click me"));
+        // Check that the second button was found using all three identifiers.
+        assertEquals("The found buttons should be identical but they are not.",
+                secondButton, secondButton_2);
+        assertEquals("The found buttons should be identical but they are not.",
+                secondButton_2, secondButton_3);
+        assertTrue("The found button is incorrect.", secondButton.getCaption()
+                .equals("Another button"));
+        // Check that the third button was found by caption.
+        assertTrue("The found button is incorrect.", thirdButton.getCaption()
+                .equals("Yet another button"));
+    }
+
+}
diff --git a/server/tests/src/com/vaadin/tests/design/TestLocale.java b/server/tests/src/com/vaadin/tests/design/TestLocale.java
new file mode 100644
index 0000000000..a4100f7d71
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/TestLocale.java
@@ -0,0 +1,176 @@
+/*
+ * Copyright 2000-2014 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.design;
+
+import java.io.ByteArrayInputStream;
+import java.util.Locale;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Document;
+import org.jsoup.nodes.DocumentType;
+import org.jsoup.nodes.Element;
+import org.jsoup.nodes.Node;
+
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.declarative.Design;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Tests the handling of the locale property in parsing and html generation.
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class TestLocale extends TestCase {
+    DesignContext ctx;
+
+    @Override
+    public void setUp() {
+        ctx = new DesignContext();
+    }
+
+    /*
+     * Checks that when the html corresponding to a component hierarchy is
+     * constructed, the result only contains locale attributes for a component
+     * if its locale differs from that of its parent.
+     */
+    public void testHtmlGeneration() {
+        // create a component hierarchy
+        VerticalLayout vLayout = new VerticalLayout();
+        vLayout.setLocale(Locale.US);
+        HorizontalLayout hLayout = new HorizontalLayout();
+        hLayout.setLocale(Locale.ITALY);
+        vLayout.addComponent(hLayout);
+        Button b1 = new Button();
+        b1.setLocale(Locale.ITALY);
+        Button b2 = new Button();
+        b2.setLocale(Locale.US);
+        hLayout.addComponent(b1);
+        hLayout.addComponent(b2);
+        HorizontalLayout hlayout2 = new HorizontalLayout();
+        hlayout2.setLocale(Locale.US);
+        vLayout.addComponent(hlayout2);
+        Label l = new Label();
+        l.setLocale(Locale.US);
+        hlayout2.addComponent(l);
+        Label l2 = new Label();
+        l2.setLocale(Locale.CANADA);
+        hlayout2.addComponent(l2);
+        ctx.setRootComponent(vLayout);
+        // create the html tree corresponding to the component hierarchy
+        Document doc = componentToDoc(ctx);
+        // check the created html
+        Element body = doc.body();
+        Element evLayout = body.child(0);
+        assertEquals("Wrong locale information.", "en_US",
+                evLayout.attr("locale"));
+        Element ehLayout = evLayout.child(0);
+        assertEquals("Wrong locale information.", "it_IT",
+                ehLayout.attr("locale"));
+        Element eb1 = ehLayout.child(0);
+        assertTrue(
+                "The element should not have a locale specification, found locale "
+                        + eb1.attr("locale"), "".equals(eb1.attr("locale")));
+        Element eb2 = ehLayout.child(1);
+        assertEquals("Wrong locale information.", "en_US", eb2.attr("locale"));
+        Element ehLayout2 = evLayout.child(1);
+        assertTrue(
+                "The element should not have a locale specification, found locale "
+                        + ehLayout2.attr("locale"),
+                "".equals(ehLayout2.attr("locale")));
+        Element el1 = ehLayout2.child(0);
+        assertTrue(
+                "The element should not have a locale specification, found locale "
+                        + el1.attr("locale"), "".equals(el1.attr("locale")));
+        Element el2 = ehLayout2.child(1);
+        assertEquals("Wrong locale information.", "en_CA", el2.attr("locale"));
+    }
+
+    private Document componentToDoc(DesignContext dc) {
+        // Create the html tree skeleton.
+        Document doc = new Document("");
+        DocumentType docType = new DocumentType("html", "", "", "");
+        doc.appendChild(docType);
+        Element html = doc.createElement("html");
+        doc.appendChild(html);
+        html.appendChild(doc.createElement("head"));
+        Element body = doc.createElement("body");
+        html.appendChild(body);
+        dc.writePackageMappings(doc);
+
+        // Append the design under <body> in the html tree. createNode
+        // creates the entire component hierarchy rooted at the
+        // given root node.
+        Component root = dc.getRootComponent();
+        Node rootNode = dc.createElement(root);
+        body.appendChild(rootNode);
+        return doc;
+
+    }
+
+    /*
+     * Checks that the locale of a component is set when the html element
+     * corresponding to the component specifies a locale.
+     */
+    public void testParsing() {
+        // create an html document
+        Document doc = new Document("");
+        DocumentType docType = new DocumentType("html", "", "", "");
+        doc.appendChild(docType);
+        Element html = doc.createElement("html");
+        doc.appendChild(html);
+        html.appendChild(doc.createElement("head"));
+        Element body = doc.createElement("body");
+        html.appendChild(body);
+        Element evLayout = doc.createElement("v-vertical-layout");
+        evLayout.attr("locale", "en_US");
+        body.appendChild(evLayout);
+        Element ehLayout = doc.createElement("v-horizontal-layout");
+        evLayout.appendChild(ehLayout);
+        Element eb1 = doc.createElement("v-button");
+        eb1.attr("locale", "en_US");
+        ehLayout.appendChild(eb1);
+        Element eb2 = doc.createElement("v-button");
+        eb2.attr("locale", "en_GB");
+        ehLayout.appendChild(eb2);
+        Element eb3 = doc.createElement("v-button");
+        ehLayout.appendChild(eb3);
+
+        // parse the created document and check the constructed component
+        // hierarchy
+        String string = doc.html();
+        VerticalLayout vLayout = (VerticalLayout) Design
+                .read(new ByteArrayInputStream(string.getBytes()));
+        assertEquals("Wrong locale.", new Locale("en", "US"),
+                vLayout.getLocale());
+        HorizontalLayout hLayout = (HorizontalLayout) vLayout.getComponent(0);
+        assertEquals("The element should have the same locale as its parent.",
+                vLayout.getLocale(), hLayout.getLocale());
+        Button b1 = (Button) hLayout.getComponent(0);
+        assertEquals("Wrong locale.", new Locale("en", "US"), b1.getLocale());
+        Button b2 = (Button) hLayout.getComponent(1);
+        assertEquals("Wrong locale.", new Locale("en", "GB"), b2.getLocale());
+        Button b3 = (Button) hLayout.getComponent(2);
+        assertEquals(
+                "The component should have the same locale as its parent.",
+                hLayout.getLocale(), b3.getLocale());
+    }
+}
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/design/all-components.html b/server/tests/src/com/vaadin/tests/design/all-components.html
new file mode 100644
index 0000000000..0f16ea9363
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/all-components.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <meta name="package-mapping" content="my:com.addon.mypackage"/>
+ </head>
+ <body>
+  <v-vertical-layout>
+      <!-- abstract component -->
+  	  <v-button primary-style-name="button" id="foo" style-name="red" caption="Some caption" icon="vaadin://themes/runo/icons/16/ok.png" description="My tooltip" error="Something went wrong" locale="en_US"></v-button>
+
+      <!-- absolute layout -->
+      <v-absolute-layout>
+		<v-button :top="100px" :left="0px" :z-index=21>OK</v-button>
+		<v-button :bottom="0px" :right="0px">Cancel</v-button>
+	  </v-absolute-layout>
+	  
+	  <!--  vertical layout -->
+      <v-vertical-layout spacing margin>
+		<v-button :top>OK</v-button>
+		<v-table size-full :expand=1 />      
+      </v-vertical-layout>
+      
+	  <!--  horizontal layout -->
+      <v-horizontal-layout spacing margin>
+		<v-button :top>OK</v-button>
+		<v-table size-full :expand=1 />      
+      </v-horizontal-layout>
+      
+	  <!--  form layout -->
+      <v-form-layout spacing margin>
+		<v-button :top>OK</v-button>
+		<v-table size-full :expand=1 />      
+      </v-form-layout>
+
+	  <!--  css layout -->
+      <v-css-layout>
+		<v-button>OK</v-button>
+		<v-table size-full />
+      </v-css-layout>
+      
+      <!--  panel  -->
+      <v-panel caption="Hello world" tabindex=2 scroll-left="10" scroll-top="10">
+        <v-table size-full />
+      </v-panel>
+      
+      <!--  abstract field -->
+	  <v-text-field buffered validation-visible=false invalid-committed invalid-allowed=false required required-error="This is a required field" conversion-error="Input {0} cannot be parsed" tabindex=3 readonly />
+      <!--  abstract text field, text field -->
+      <v-text-field null-representation="" null-setting-allowed maxlength=10 columns=5 input-prompt="Please enter a value" text-change-event-mode="eager" text-change-timeout=2 value="foo" />
+	  <!--  password field -->      
+      <v-password-field null-representation="" null-setting-allowed maxlength=10 columns=5 input-prompt="Please enter a value" text-change-event-mode="eager" text-change-timeout=2 value="foo" />
+      <!--  text area -->
+      <v-text-area rows=5 wordwrap=false >test value</v-text-area>
+      <!--  button -->
+      <v-button click-shortcut="ctrl-shift-o" disable-on-click tabindex=1 icon="http://vaadin.com/image.png" icon-alt="ok" plain-text>OK</v-button>
+      <!--  native button -->
+      <v-button click-shortcut="ctrl-shift-o" disable-on-click tabindex=1 icon="http://vaadin.com/image.png" icon-alt="ok" plain-text>OK</v-button>
+      
+      <!-- tabsheet -->
+	  <v-tab-sheet tabindex=5>
+		  <tab visible=false closable caption="My first tab">
+			<v-vertical-layout>
+				<v-text-field/>
+		    </v-vertical-layout>
+		  </tab>
+		  <tab enabled=false caption="Disabled second tab">
+			<v-button>In disabled tab - can’t be shown by default</v-button>
+	      </tab>
+		  <tab icon="theme://../runo/icons/16/ok.png" icon-alt="Ok png from Runo - very helpful" description="Click to show a text field" style-name="red" id="uniqueDomId">
+			<v-text-field input-prompt="Icon only in tab" />
+	      </tab>
+	   </v-tab-sheet>
+
+      <!-- accordion -->
+	  <v-accordion tabindex=5>
+		  <tab visible=false closable caption="My first tab">
+			<v-vertical-layout>
+				<v-text-field/>
+		    </v-vertical-layout>
+		  </tab>
+		  <tab enabled=false caption="Disabled second tab">
+			<v-button>In disabled tab - can’t be shown by default</v-button>
+	      </tab>
+		  <tab icon="theme://../runo/icons/16/ok.png" icon-alt="Ok png from Runo - very helpful" description="Click to show a text field" style-name="red" id="uniqueDomId">
+			<v-text-field input-prompt="Icon only in tab" />
+	      </tab>
+	   </v-accordion>
+
+      <!--  abstract split panel -->
+      <v-horizontal-split-panel split-position="20px" min-split-position="0px" max-split-position="50px" locked>
+        <v-button>First slot</v-button>
+      </v-horizontal-split-panel>      
+      <v-vertical-split-panel split-position="25%" reversed>
+        <v-button :second>Second slot</v-button>
+      </v-vertical-split-panel>
+      <v-horizontal-split-panel split-position="25%" reversed>
+        <v-button>First slot</v-button>
+        <v-button>Second slot</v-button>
+      </v-horizontal-split-panel>
+     
+     <!--  label -->
+     <v-label>Hello world!</v-label>
+	 <v-label>This is <b><u>Rich</u></b> content!</v-label>
+	 <v-label plain-text>This is only <b>text</b> and will contain visible tags</v-label>
+	 
+	 <!-- checkbox -->
+	 <v-check-box checked/>	 
+  </v-vertical-layout>
+ </body>
+</html>
diff --git a/server/tests/src/com/vaadin/tests/design/designroot/DesignRootTest.java b/server/tests/src/com/vaadin/tests/design/designroot/DesignRootTest.java
new file mode 100644
index 0000000000..682da30344
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/designroot/DesignRootTest.java
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2000-2014 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.design.designroot;
+
+import org.junit.Assert;
+import org.junit.Test;
+
+public class DesignRootTest {
+    @Test
+    public void designAnnotationWithoutFilename() {
+        DesignWithEmptyAnnotation d = new DesignWithEmptyAnnotation();
+        Assert.assertNotNull(d.ok);
+        Assert.assertNotNull(d.CaNCEL);
+        Assert.assertEquals("original", d.preInitializedField.getValue());
+    }
+
+    @Test
+    public void designAnnotationWithFilename() {
+        DesignWithAnnotation d = new DesignWithAnnotation();
+        Assert.assertNotNull(d.ok);
+        Assert.assertNotNull(d.cancel);
+        Assert.assertEquals("original", d.preInitializedField.getValue());
+    }
+
+    @Test
+    public void extendedDesignAnnotationWithoutFilename() {
+        DesignWithEmptyAnnotation d = new ExtendedDesignWithEmptyAnnotation();
+        Assert.assertNotNull(d.ok);
+        Assert.assertNotNull(d.CaNCEL);
+        Assert.assertEquals("original", d.preInitializedField.getValue());
+    }
+
+    @Test
+    public void extendedDesignAnnotationWithFilename() {
+        DesignWithAnnotation d = new ExtendedDesignWithAnnotation();
+        Assert.assertNotNull(d.ok);
+        Assert.assertNotNull(d.cancel);
+        Assert.assertEquals("original", d.preInitializedField.getValue());
+    }
+
+}
diff --git a/server/tests/src/com/vaadin/tests/design/designroot/DesignWithAnnotation.java b/server/tests/src/com/vaadin/tests/design/designroot/DesignWithAnnotation.java
new file mode 100644
index 0000000000..70809cb694
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/designroot/DesignWithAnnotation.java
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2000-2014 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.design.designroot;
+
+import org.junit.Ignore;
+
+import com.vaadin.annotations.DesignRoot;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.declarative.Design;
+
+@DesignRoot("DesignWithEmptyAnnotation.html")
+@Ignore
+public class DesignWithAnnotation extends VerticalLayout {
+
+    public Button ok;
+    public Button cancel;
+    public Label preInitializedField = new Label("original");
+
+    public DesignWithAnnotation() {
+        Design.read(this);
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/designroot/DesignWithEmptyAnnotation.html b/server/tests/src/com/vaadin/tests/design/designroot/DesignWithEmptyAnnotation.html
new file mode 100644
index 0000000000..66e9202ca7
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/designroot/DesignWithEmptyAnnotation.html
@@ -0,0 +1,5 @@
+<v-vertical-layout>
+    <v-button>OK</v-button>
+    <v-button>Cancel</v-button>
+    <v-label caption="preInitializedField">a Label that should not override pre initalized field<v-label/>
+</v-vertical-layout>
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/design/designroot/DesignWithEmptyAnnotation.java b/server/tests/src/com/vaadin/tests/design/designroot/DesignWithEmptyAnnotation.java
new file mode 100644
index 0000000000..f6fb928e75
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/designroot/DesignWithEmptyAnnotation.java
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2000-2014 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.design.designroot;
+
+import org.junit.Ignore;
+
+import com.vaadin.annotations.DesignRoot;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.declarative.Design;
+
+@DesignRoot
+@Ignore
+public class DesignWithEmptyAnnotation extends VerticalLayout {
+
+    protected Button ok;
+    protected Button CaNCEL;
+    protected Label preInitializedField = new Label("original");
+
+    public DesignWithEmptyAnnotation() {
+        Design.read(this);
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/designroot/ExtendedDesignWithAnnotation.java b/server/tests/src/com/vaadin/tests/design/designroot/ExtendedDesignWithAnnotation.java
new file mode 100644
index 0000000000..14e4269e80
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/designroot/ExtendedDesignWithAnnotation.java
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2000-2014 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.design.designroot;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.TextField;
+
+@Ignore
+public class ExtendedDesignWithAnnotation extends DesignWithAnnotation {
+    private TextField customField = new TextField();
+
+    public ExtendedDesignWithAnnotation() {
+        customField.setInputPrompt("Something");
+        addComponent(customField);
+
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/designroot/ExtendedDesignWithEmptyAnnotation.java b/server/tests/src/com/vaadin/tests/design/designroot/ExtendedDesignWithEmptyAnnotation.java
new file mode 100644
index 0000000000..22865b098c
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/designroot/ExtendedDesignWithEmptyAnnotation.java
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2000-2014 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.design.designroot;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.Notification;
+import com.vaadin.ui.TextField;
+
+@Ignore
+public class ExtendedDesignWithEmptyAnnotation extends
+        DesignWithEmptyAnnotation {
+
+    private TextField customField = new TextField();
+
+    public ExtendedDesignWithEmptyAnnotation() {
+        super();
+        customField.setInputPrompt("Something");
+        addComponent(customField);
+
+        ok.addClickListener(new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                Notification.show("OK");
+            }
+        });
+
+        CaNCEL.addClickListener(new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                Notification.show("cancel");
+            }
+        });
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/designroot/ExtendedDesignWithEmptyAnnotationUI.java b/server/tests/src/com/vaadin/tests/design/designroot/ExtendedDesignWithEmptyAnnotationUI.java
new file mode 100644
index 0000000000..34f517d25d
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/designroot/ExtendedDesignWithEmptyAnnotationUI.java
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2000-2014 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.design.designroot;
+
+import org.junit.Ignore;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.ui.UI;
+
+@Ignore
+public class ExtendedDesignWithEmptyAnnotationUI extends UI {
+
+    @Override
+    protected void init(VaadinRequest request) {
+        setContent(new ExtendedDesignWithEmptyAnnotation());
+
+    }
+
+}
diff --git a/server/tests/src/com/vaadin/tests/design/duplicate-ids.html b/server/tests/src/com/vaadin/tests/design/duplicate-ids.html
new file mode 100644
index 0000000000..ef845d46d5
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/duplicate-ids.html
@@ -0,0 +1,4 @@
+<v-vertical-layout>
+	<v-label id="foo"/>
+	<v-label id="foo"/>
+</v-vertical-layout>
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/design/duplicate-local-ids.html b/server/tests/src/com/vaadin/tests/design/duplicate-local-ids.html
new file mode 100644
index 0000000000..5a506ad00c
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/duplicate-local-ids.html
@@ -0,0 +1,4 @@
+<v-vertical-layout>
+	<v-label _id="foo"/>
+	<v-label _id="foo"/>
+</v-vertical-layout>
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/design/nested/MyChildDesign.java b/server/tests/src/com/vaadin/tests/design/nested/MyChildDesign.java
new file mode 100644
index 0000000000..e85c0aca5f
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/MyChildDesign.java
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2000-2014 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.design.nested;
+
+import org.junit.Ignore;
+
+import com.vaadin.annotations.DesignRoot;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.declarative.Design;
+
+/**
+ * Child design component
+ * 
+ * @author Vaadin Ltd
+ */
+@Ignore
+@DesignRoot("mychilddesign.html")
+public class MyChildDesign extends HorizontalLayout {
+    public Label childLabel;
+    public MyChildDesignCustomComponent childCustomComponent;
+
+    public MyChildDesign() {
+        Design.read(this);
+        childLabel.setDescription("added in constructor");
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/MyChildDesignCustomComponent.java b/server/tests/src/com/vaadin/tests/design/nested/MyChildDesignCustomComponent.java
new file mode 100644
index 0000000000..94e34baea2
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/MyChildDesignCustomComponent.java
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2000-2014 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.design.nested;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.Button;
+
+@Ignore
+public class MyChildDesignCustomComponent extends Button {
+
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/MyDesignRoot.java b/server/tests/src/com/vaadin/tests/design/nested/MyDesignRoot.java
new file mode 100644
index 0000000000..5727322ce3
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/MyDesignRoot.java
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2000-2014 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.design.nested;
+
+import org.junit.Ignore;
+
+import com.vaadin.annotations.DesignRoot;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.declarative.Design;
+
+/**
+ * Root design component
+ * 
+ * @author Vaadin Ltd
+ */
+@Ignore
+@DesignRoot("mydesignroot.html")
+public class MyDesignRoot extends VerticalLayout {
+    // should be assigned automatically
+    public MyExtendedChildDesign childDesign;
+
+    public MyDesignRoot() {
+        Design.read(this);
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/MyExtendedChildDesign.java b/server/tests/src/com/vaadin/tests/design/nested/MyExtendedChildDesign.java
new file mode 100644
index 0000000000..2012e4ec14
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/MyExtendedChildDesign.java
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2000-2014 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.design.nested;
+
+import org.junit.Ignore;
+
+@Ignore
+public class MyExtendedChildDesign extends MyChildDesign {
+    public MyExtendedChildDesign() {
+        super();
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/TestNestedCustomLayouts.java b/server/tests/src/com/vaadin/tests/design/nested/TestNestedCustomLayouts.java
new file mode 100644
index 0000000000..c71ccca85b
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/TestNestedCustomLayouts.java
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2000-2014 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.design.nested;
+
+import java.io.ByteArrayOutputStream;
+import java.io.IOException;
+
+import junit.framework.TestCase;
+
+import org.jsoup.Jsoup;
+import org.jsoup.nodes.Document;
+import org.jsoup.nodes.Element;
+import org.junit.Test;
+
+import com.vaadin.tests.design.nested.customlayouts.CustomAbsoluteLayout;
+import com.vaadin.tests.design.nested.customlayouts.CustomAccordion;
+import com.vaadin.tests.design.nested.customlayouts.CustomCssLayout;
+import com.vaadin.tests.design.nested.customlayouts.CustomFormLayout;
+import com.vaadin.tests.design.nested.customlayouts.CustomGridLayout;
+import com.vaadin.tests.design.nested.customlayouts.CustomHorizontalLayout;
+import com.vaadin.tests.design.nested.customlayouts.CustomHorizontalSplitPanel;
+import com.vaadin.tests.design.nested.customlayouts.CustomPanel;
+import com.vaadin.tests.design.nested.customlayouts.CustomTabSheet;
+import com.vaadin.tests.design.nested.customlayouts.CustomVerticalLayout;
+import com.vaadin.tests.design.nested.customlayouts.CustomVerticalSplitPanel;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.declarative.Design;
+
+/**
+ * Test case for nested custom layouts. The children of the custom layouts must
+ * not be rendered.
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestNestedCustomLayouts extends TestCase {
+
+    private static String PACKAGE_MAPPING = "com_vaadin_tests_design_nested_customlayouts:com.vaadin.tests.design.nested.customlayouts";
+
+    @Test
+    public void testNestedLayouts() throws IOException {
+        VerticalLayout rootLayout = new VerticalLayout();
+        rootLayout.addComponent(new CustomAbsoluteLayout());
+        rootLayout.addComponent(new CustomAccordion());
+        rootLayout.addComponent(new CustomCssLayout());
+        rootLayout.addComponent(new CustomFormLayout());
+        rootLayout.addComponent(new CustomGridLayout());
+        rootLayout.addComponent(new CustomHorizontalLayout());
+        rootLayout.addComponent(new CustomHorizontalSplitPanel());
+        rootLayout.addComponent(new CustomPanel());
+        rootLayout.addComponent(new CustomTabSheet());
+        rootLayout.addComponent(new CustomVerticalLayout());
+        rootLayout.addComponent(new CustomVerticalSplitPanel());
+        ByteArrayOutputStream out = new ByteArrayOutputStream();
+        Design.write(rootLayout, out);
+        Document doc = Jsoup.parse(out.toString("UTF-8"));
+        assertEquals("package-mapping", doc.head().child(0).attr("name"));
+        assertEquals(PACKAGE_MAPPING, doc.head().child(0).attr("content"));
+        Element rootNode = doc.body().child(0);
+        assertTrue("Root node must have children",
+                rootNode.children().size() > 0);
+        for (Element child : rootNode.children()) {
+            // make sure that the nested custom layouts do not render children
+            assertEquals("Child nodes must not have children", 0, child
+                    .children().size());
+        }
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/TestReadNestedTemplates.java b/server/tests/src/com/vaadin/tests/design/nested/TestReadNestedTemplates.java
new file mode 100644
index 0000000000..c1483adc8a
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/TestReadNestedTemplates.java
@@ -0,0 +1,62 @@
+/*
+ * Copyright 2000-2014 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.design.nested;
+
+import junit.framework.TestCase;
+
+/**
+ * Test case for reading nested templates
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class TestReadNestedTemplates extends TestCase {
+
+    private MyDesignRoot root;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        root = new MyDesignRoot();
+    }
+
+    public void testChildren() {
+        assertEquals("The root layout must contain one child", 1,
+                root.getComponentCount());
+        assertTrue(root.iterator().next() instanceof MyExtendedChildDesign);
+    }
+
+    public void testGrandChildren() {
+        assertEquals("The root layout must have two grandchildren", 2,
+                root.childDesign.getComponentCount());
+    }
+
+    public void testRootComponentFields() {
+        assertNotNull("The child component must not be null", root.childDesign);
+    }
+
+    public void testChildComponentFields() {
+        assertNotNull("Grandchildren must not be null",
+                root.childDesign.childLabel);
+        assertNotNull("Grandchildren must not be null",
+                root.childDesign.childCustomComponent);
+        assertEquals("child label caption must be read", "test content",
+                root.childDesign.childLabel.getValue());
+        assertEquals("child custom component caption must be read",
+                "custom content",
+                root.childDesign.childCustomComponent.getCaption());
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/TestWriteNestedTemplates.java b/server/tests/src/com/vaadin/tests/design/nested/TestWriteNestedTemplates.java
new file mode 100644
index 0000000000..7fe63baa73
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/TestWriteNestedTemplates.java
@@ -0,0 +1,89 @@
+/*
+ * Copyright 2000-2014 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.design.nested;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * 
+ * Test case for writing nested templates
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestWriteNestedTemplates extends TestCase {
+
+    private MyDesignRoot root;
+    private Element design;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        root = new MyDesignRoot();
+        design = createDesign();
+        DesignContext designContext = new DesignContext();
+        designContext.setRootComponent(root);
+        root.writeDesign(design, designContext);
+    }
+
+    public void testChildRendered() {
+        assertEquals("Root layout must have one child", 1, design.children()
+                .size());
+        assertEquals("com_vaadin_tests_design_nested-my-extended-child-design",
+                design.child(0).tagName());
+    }
+
+    public void testRootCaptionWritten() {
+        assertTrue("Root layout caption must be written",
+                design.hasAttr("caption"));
+        assertEquals("Root layout caption must be written", "root caption",
+                design.attr("caption"));
+    }
+
+    public void testChildCaptionWritten() {
+        assertTrue("Child design caption must be written", design.child(0)
+                .hasAttr("caption"));
+        assertEquals("Child design caption must be written", "child caption",
+                design.child(0).attr("caption"));
+    }
+
+    // The default caption is read from child template
+    public void testDefaultCaptionShouldNotBeWritten() {
+        design = createDesign();
+        root.childDesign.setCaption("Default caption for child design");
+        DesignContext designContext = new DesignContext();
+        designContext.setRootComponent(root);
+        root.writeDesign(design, designContext);
+        assertFalse("Default caption must not be written", design.child(0)
+                .hasAttr("caption"));
+    }
+
+    public void testChildDesignChildrenNotWrittenInRootTemplate() {
+        assertEquals(
+                "Children of the child template must not be written to root template",
+                0, design.child(0).children().size());
+    }
+
+    private Element createDesign() {
+        return new Element(Tag.valueOf("v-vertical-layout"), "",
+                new Attributes());
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomAbsoluteLayout.java b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomAbsoluteLayout.java
new file mode 100644
index 0000000000..ed2b27215e
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomAbsoluteLayout.java
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2000-2014 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.design.nested.customlayouts;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.AbsoluteLayout;
+import com.vaadin.ui.Label;
+
+/**
+ * @author Vaadin Ltd
+ */
+@Ignore
+public class CustomAbsoluteLayout extends AbsoluteLayout {
+    public CustomAbsoluteLayout() {
+        this.addComponent(new Label());
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomAccordion.java b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomAccordion.java
new file mode 100644
index 0000000000..7d45917520
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomAccordion.java
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2000-2014 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.design.nested.customlayouts;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.Accordion;
+import com.vaadin.ui.Label;
+
+/**
+ * @author Vaadin Ltd
+ */
+@Ignore
+public class CustomAccordion extends Accordion {
+    public CustomAccordion() {
+        addComponent(new Label());
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomCssLayout.java b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomCssLayout.java
new file mode 100644
index 0000000000..328a025e01
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomCssLayout.java
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2000-2014 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.design.nested.customlayouts;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.Label;
+
+/**
+ * @author Vaadin Ltd
+ */
+@Ignore
+public class CustomCssLayout extends CssLayout {
+    public CustomCssLayout() {
+        this.addComponent(new Label());
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomFormLayout.java b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomFormLayout.java
new file mode 100644
index 0000000000..179b195926
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomFormLayout.java
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2000-2014 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.design.nested.customlayouts;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.FormLayout;
+import com.vaadin.ui.Label;
+
+/**
+ * @author Vaadin Ltd
+ */
+@Ignore
+public class CustomFormLayout extends FormLayout {
+    public CustomFormLayout() {
+        this.addComponent(new Label());
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomGridLayout.java b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomGridLayout.java
new file mode 100644
index 0000000000..0b3b90ca1f
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomGridLayout.java
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2000-2014 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.design.nested.customlayouts;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.GridLayout;
+import com.vaadin.ui.Label;
+
+/**
+ * @author Vaadin Ltd
+ */
+@Ignore
+public class CustomGridLayout extends GridLayout {
+    public CustomGridLayout() {
+        this.addComponent(new Label());
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomHorizontalLayout.java b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomHorizontalLayout.java
new file mode 100644
index 0000000000..b742f7c629
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomHorizontalLayout.java
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2000-2014 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.design.nested.customlayouts;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+
+/**
+ * @author Vaadin Ltd
+ */
+@Ignore
+public class CustomHorizontalLayout extends HorizontalLayout {
+    public CustomHorizontalLayout() {
+        this.addComponent(new Label());
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomHorizontalSplitPanel.java b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomHorizontalSplitPanel.java
new file mode 100644
index 0000000000..deeb311858
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomHorizontalSplitPanel.java
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2000-2014 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.design.nested.customlayouts;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.HorizontalSplitPanel;
+import com.vaadin.ui.Label;
+
+/**
+ * @author Vaadin Ltd
+ */
+@Ignore
+public class CustomHorizontalSplitPanel extends HorizontalSplitPanel {
+    public CustomHorizontalSplitPanel() {
+        addComponent(new Label());
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomPanel.java b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomPanel.java
new file mode 100644
index 0000000000..fa7827bdfd
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomPanel.java
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2000-2014 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.design.nested.customlayouts;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Panel;
+
+/**
+ * @author Vaadin Ltd
+ */
+@Ignore
+public class CustomPanel extends Panel {
+    public CustomPanel() {
+        setContent(new Label());
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomTabSheet.java b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomTabSheet.java
new file mode 100644
index 0000000000..6298b67727
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomTabSheet.java
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2000-2014 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.design.nested.customlayouts;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.Label;
+import com.vaadin.ui.TabSheet;
+
+/**
+ * @author Vaadin Ltd
+ */
+@Ignore
+public class CustomTabSheet extends TabSheet {
+    public CustomTabSheet() {
+        addComponent(new Label());
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomVerticalLayout.java b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomVerticalLayout.java
new file mode 100644
index 0000000000..7859ae0227
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomVerticalLayout.java
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2000-2014 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.design.nested.customlayouts;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+
+/**
+ * @author Vaadin Ltd
+ */
+@Ignore
+public class CustomVerticalLayout extends VerticalLayout {
+    public CustomVerticalLayout() {
+        this.addComponent(new Label());
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomVerticalSplitPanel.java b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomVerticalSplitPanel.java
new file mode 100644
index 0000000000..f6eb460c1b
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/customlayouts/CustomVerticalSplitPanel.java
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2000-2014 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.design.nested.customlayouts;
+
+import org.junit.Ignore;
+
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalSplitPanel;
+
+/**
+ * @author Vaadin Ltd
+ */
+@Ignore
+public class CustomVerticalSplitPanel extends VerticalSplitPanel {
+    public CustomVerticalSplitPanel() {
+        addComponent(new Label());
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/design/nested/mychilddesign.html b/server/tests/src/com/vaadin/tests/design/nested/mychilddesign.html
new file mode 100644
index 0000000000..c636033d2d
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/mychilddesign.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <meta name="package-mapping" content="x:com.vaadin.tests.design.nested"/>
+ </head>
+ <body>
+	<v-horizontal-layout caption="Default caption for child design">
+		<v-label _id="childLabel">test content</v-label>
+		<!--  Test some custom component in child template -->
+		<x-my-child-design-custom-component _id="childCustomComponent">custom content</x-my-child-design-custom-component>
+	</v-horizontal-layout>
+</body>
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/design/nested/mydesignroot.html b/server/tests/src/com/vaadin/tests/design/nested/mydesignroot.html
new file mode 100644
index 0000000000..55ac27c194
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/nested/mydesignroot.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <meta name="package-mapping" content="x:com.vaadin.tests.design.nested"/>
+ </head>
+ <body>
+ 	<v-vertical-layout caption="root caption">
+ 		<x-my-extended-child-design _id="childDesign" caption="child caption"/>
+ 	</v-vertical-layout>
+ </body>
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/design/testFile.html b/server/tests/src/com/vaadin/tests/design/testFile.html
new file mode 100644
index 0000000000..79ae1e9eaf
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/testFile.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <meta name="package-mapping" content="my:com.addon.mypackage"/>
+ </head>
+ <body>
+  <v-vertical-layout width="500px">
+   <v-horizontal-layout>
+    <v-label plain-text caption="FooBar"></v-label>
+    <v-native-button _id=firstButton>Native click me</v-native-button>
+	<v-native-button id = secondButton _id="localID">Another button</v-native-button>
+	<v-native-button>Yet another button</v-native-button>
+    <v-button plain-text width = "150px">Click me</v-button>
+   </v-horizontal-layout>
+   <v-text-field caption = "Text input"/>
+   <v-text-area caption = "Text area" height="200px" width="300px"/>
+  </v-vertical-layout>
+ </body>
+</html>
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/design/verticallayout-one-child.html b/server/tests/src/com/vaadin/tests/design/verticallayout-one-child.html
new file mode 100644
index 0000000000..4b0123b9ed
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/verticallayout-one-child.html
@@ -0,0 +1,3 @@
+<v-vertical-layout>
+    <v-button>OK</v-button>
+</v-vertical-layout>
diff --git a/server/tests/src/com/vaadin/tests/design/verticallayout-two-children.html b/server/tests/src/com/vaadin/tests/design/verticallayout-two-children.html
new file mode 100644
index 0000000000..87ae9eee8e
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/design/verticallayout-two-children.html
@@ -0,0 +1,4 @@
+<v-vertical-layout>
+    <v-text-field caption="Enter your name" />
+    <v-button>Say hello</v-button>
+</v-vertical-layout>
diff --git a/server/tests/src/com/vaadin/tests/server/component/absolutelayout/TestReadDesign.java b/server/tests/src/com/vaadin/tests/server/component/absolutelayout/TestReadDesign.java
new file mode 100644
index 0000000000..f8af0a992e
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/absolutelayout/TestReadDesign.java
@@ -0,0 +1,110 @@
+/*
+ * Copyright 2000-2014 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.server.component.absolutelayout;
+
+import java.util.Iterator;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.server.Sizeable;
+import com.vaadin.ui.AbsoluteLayout;
+import com.vaadin.ui.AbsoluteLayout.ComponentPosition;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for reading AbsoluteLayout from design
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class TestReadDesign extends TestCase {
+
+    private AbsoluteLayout root;
+
+    @Override
+    public void setUp() throws Exception {
+        super.setUp();
+        root = createLayout();
+    }
+
+    public void testAttributes() {
+        assertEquals("test-layout", root.getCaption());
+        Iterator<Component> children = root.iterator();
+        assertEquals("test-label", children.next().getCaption());
+        assertEquals("test-button", children.next().getCaption());
+    }
+
+    public void testTopLeftPosition() {
+        ComponentPosition position = root.getPosition(root.iterator().next());
+        assertEquals(Sizeable.Unit.PIXELS, position.getTopUnits());
+        assertEquals(100.0f, position.getTopValue());
+        assertEquals(Sizeable.Unit.PERCENTAGE, position.getLeftUnits());
+        assertEquals(50.0f, position.getLeftValue());
+    }
+
+    public void testBottomRightPosition() {
+        Iterator<Component> children = root.iterator();
+        children.next();
+        ComponentPosition position = root.getPosition(children.next());
+        assertEquals(Sizeable.Unit.PIXELS, position.getBottomUnits());
+        assertEquals(100.0f, position.getBottomValue());
+        assertEquals(Sizeable.Unit.PERCENTAGE, position.getRightUnits());
+        assertEquals(50.0f, position.getRightValue());
+    }
+
+    public void testZIndex() {
+        ComponentPosition position = root.getPosition(root.iterator().next());
+        assertEquals(2, position.getZIndex());
+    }
+
+    private AbsoluteLayout createLayout() {
+        DesignContext ctx = new DesignContext();
+        Element design = createDesign();
+        Component child = ctx.readDesign(design);
+        return (AbsoluteLayout) child;
+    }
+
+    private Element createDesign() {
+
+        Attributes rootAttributes = new Attributes();
+        rootAttributes.put("caption", "test-layout");
+        Element node = new Element(Tag.valueOf("v-absolute-layout"), "",
+                rootAttributes);
+
+        Attributes firstChildAttributes = new Attributes();
+        firstChildAttributes.put("caption", "test-label");
+        firstChildAttributes.put(":top", "100px");
+        firstChildAttributes.put(":left", "50%");
+        firstChildAttributes.put(":z-index", "2");
+        Element firstChild = new Element(Tag.valueOf("v-label"), "",
+                firstChildAttributes);
+        node.appendChild(firstChild);
+
+        Attributes secondChildAttributes = new Attributes();
+        secondChildAttributes.put(":bottom", "100px");
+        secondChildAttributes.put(":right", "50%");
+        Element secondChild = new Element(Tag.valueOf("v-button"), "",
+                secondChildAttributes);
+        secondChild.html("test-button");
+        node.appendChild(secondChild);
+        return node;
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/absolutelayout/TestWriteDesign.java b/server/tests/src/com/vaadin/tests/server/component/absolutelayout/TestWriteDesign.java
new file mode 100644
index 0000000000..5f42b1fa81
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/absolutelayout/TestWriteDesign.java
@@ -0,0 +1,100 @@
+/*
+ * Copyright 2000-2014 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.server.component.absolutelayout;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.AbsoluteLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for writing AbsoluteLayout to design
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class TestWriteDesign extends TestCase {
+
+    public void testSynchronizeEmptyLayout() {
+        AbsoluteLayout layout = createTestLayout();
+        layout.removeAllComponents();
+        Element design = createDesign();
+        layout.writeDesign(design, createDesignContext());
+        assertEquals(0, design.childNodes().size());
+        assertEquals("changed-caption", design.attr("caption"));
+    }
+
+    public void testSynchronizeLayoutWithChildren() {
+        AbsoluteLayout layout = createTestLayout();
+        Element design = createDesign();
+        layout.writeDesign(design, createDesignContext());
+        assertEquals(2, design.childNodes().size());
+        assertEquals("v-label", ((Element) design.childNode(0)).tagName());
+        assertEquals("v-label", ((Element) design.childNode(1)).tagName());
+    }
+
+    public void testSynchronizePosition() {
+        AbsoluteLayout layout = createTestLayout();
+        Element design = createDesign();
+        layout.writeDesign(design, createDesignContext());
+        Attributes attributes = design.childNode(0).attributes();
+        assertEquals("50px", attributes.get(":top"));
+        assertEquals("50%", attributes.get(":left"));
+        assertEquals("2", attributes.get(":z-index"));
+        attributes = design.childNode(1).attributes();
+        assertEquals("50px", attributes.get(":bottom"));
+        assertEquals("50%", attributes.get(":right"));
+    }
+
+    private AbsoluteLayout createTestLayout() {
+        AbsoluteLayout layout = new AbsoluteLayout();
+        layout.setCaption("changed-caption");
+        layout.addComponent(new Label("test-label"),
+                "top:50px;left:50%;z-index:2");
+        layout.addComponent(new Label("test-label-2"),
+                "bottom:50px;right:50%;z-index:3");
+        return layout;
+    }
+
+    private Element createDesign() {
+        // make sure that the design node has old content that should be removed
+        Attributes rootAttributes = new Attributes();
+        rootAttributes.put("caption", "test-layout");
+        Element node = new Element(Tag.valueOf("v-absolute-layout"), "",
+                rootAttributes);
+        Attributes firstChildAttributes = new Attributes();
+        firstChildAttributes.put("caption", "test-label");
+        Element firstChild = new Element(Tag.valueOf("v-label"), "",
+                firstChildAttributes);
+        node.appendChild(firstChild);
+
+        Attributes secondChildAttributes = new Attributes();
+        secondChildAttributes.put("caption", "test-button");
+        Element secondChild = new Element(Tag.valueOf("v-button"), "",
+                secondChildAttributes);
+        node.appendChild(secondChild);
+        return node;
+    }
+
+    private DesignContext createDesignContext() {
+        return new DesignContext();
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/abstractcomponent/TestReadDesign.java b/server/tests/src/com/vaadin/tests/server/component/abstractcomponent/TestReadDesign.java
new file mode 100644
index 0000000000..43a050ba80
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/abstractcomponent/TestReadDesign.java
@@ -0,0 +1,256 @@
+/*
+ * Copyright 2000-2014 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.server.component.abstractcomponent;
+
+import java.lang.reflect.Field;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.server.ExternalResource;
+import com.vaadin.server.FileResource;
+import com.vaadin.server.Responsive;
+import com.vaadin.server.ThemeResource;
+import com.vaadin.ui.AbstractComponent;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for reading the attributes of the AbstractComponent from design
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestReadDesign extends TestCase {
+
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    public void testSynchronizeId() {
+        Element design = createDesign("id", "testId");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals("testId", component.getId());
+    }
+
+    public void testSynchronizePrimaryStyleName() {
+        Element design = createDesign("primary-style-name", "test-style");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals("test-style", component.getPrimaryStyleName());
+    }
+
+    public void testSynchronizeCaption() {
+        Element design = createDesign("caption", "test-caption");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals("test-caption", component.getCaption());
+    }
+
+    public void testSynchronizeLocale() {
+        Element design = createDesign("locale", "fi_FI");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals("fi", component.getLocale().getLanguage());
+        assertEquals("FI", component.getLocale().getCountry());
+    }
+
+    public void testSynchronizeExternalIcon() {
+        Element design = createDesign("icon", "http://example.com/example.gif");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertTrue("Incorrect resource type returned", component.getIcon()
+                .getClass().isAssignableFrom(ExternalResource.class));
+        assertEquals("http://example.com/example.gif",
+                ((ExternalResource) component.getIcon()).getURL());
+    }
+
+    public void testSynchronizeThemeIcon() {
+        Element design = createDesign("icon", "theme://example.gif");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertTrue("Incorrect resource type returned", component.getIcon()
+                .getClass().isAssignableFrom(ThemeResource.class));
+    }
+
+    public void testSynchronizeFileResource() {
+        Element design = createDesign("icon", "img/example.gif");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertTrue("Incorrect resource type returned", component.getIcon()
+                .getClass().isAssignableFrom(FileResource.class));
+    }
+
+    public void testSynchronizeImmediate() {
+        Element design = createDesign("immediate", "true");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals(true, component.isImmediate());
+        assertEquals(Boolean.TRUE, getExplicitImmediate(component));
+        // Synchronize with a design having no immediate attribute -
+        // explicitImmediate should then be null.
+        design = createDesign("description", "test-description");
+        component = getComponent();
+        component.readDesign(design, ctx);
+        // Synchronize with a design having immediate = false
+        design = createDesign("immediate", "false");
+        component.readDesign(design, ctx);
+        assertEquals(false, component.isImmediate());
+        assertEquals(Boolean.FALSE, getExplicitImmediate(component));
+        // Synchronize with a design having immediate = "" - should correspond
+        // to
+        // true.
+        design = createDesign("immediate", "");
+        component.readDesign(design, ctx);
+        assertEquals(true, component.isImmediate());
+        assertEquals(Boolean.TRUE, getExplicitImmediate(component));
+    }
+
+    public void testSynchronizeDescription() {
+        Element design = createDesign("description", "test-description");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals("test-description", component.getDescription());
+    }
+
+    public void testSynchronizeComponentError() {
+        Element design = createDesign("error", "<div>test-error</div>");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals("<div>test-error</div>", component.getComponentError()
+                .getFormattedHtmlMessage());
+    }
+
+    public void testSynchronizeSizeFull() {
+        Element design = createDesign("size-full", "");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals(100, component.getWidth(), 0.1f);
+        assertEquals(100, component.getHeight(), 0.1f);
+    }
+
+    public void testSynchronizeSizeAuto() {
+        Element design = createDesign("size-auto", "");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals(-1, component.getWidth(), 0.1f);
+        assertEquals(-1, component.getHeight(), 0.1f);
+    }
+
+    public void testSynchronizeHeightFull() {
+        Element design = createDesign("height-full", "");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals(100, component.getHeight(), 0.1f);
+    }
+
+    public void testSynchronizeHeightAuto() {
+        Element design = createDesign("height-auto", "");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals(-1, component.getHeight(), 0.1f);
+    }
+
+    public void testSynchronizeWidthFull() {
+        Element design = createDesign("width-full", "");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals(100, component.getWidth(), 0.1f);
+    }
+
+    public void testSynchronizeWidthAuto() {
+        Element design = createDesign("width-auto", "");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals(-1, component.getWidth(), 0.1f);
+    }
+
+    public void testSynchronizeWidth() {
+        Element design = createDesign("width", "12px");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals(12, component.getWidth(), 0.1f);
+        assertEquals(com.vaadin.server.Sizeable.Unit.PIXELS,
+                component.getWidthUnits());
+    }
+
+    public void testSynchronizeHeight() {
+        Element design = createDesign("height", "12px");
+        AbstractComponent component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals(12, component.getHeight(), 0.1f);
+        assertEquals(com.vaadin.server.Sizeable.Unit.PIXELS,
+                component.getHeightUnits());
+    }
+
+    public void testSynchronizeNotResponsive() {
+        AbstractComponent component = getComponent();
+        Responsive.makeResponsive(component);
+        Element design = createDesign("responsive", "false");
+        component.readDesign(design, ctx);
+        assertEquals("Component should not have extensions", 0, component
+                .getExtensions().size());
+    }
+
+    public void testSynchronizeResponsive() {
+        AbstractComponent component = getComponent();
+        Element design = createDesign("responsive", "");
+        component.readDesign(design, ctx);
+        assertEquals("Component should have one extension", 1, component
+                .getExtensions().size());
+        assertTrue("Extension should be responsive", component.getExtensions()
+                .iterator().next() instanceof Responsive);
+    }
+
+    public void testSynchronizeAlreadyResponsive() {
+        AbstractComponent component = getComponent();
+        Responsive.makeResponsive(component);
+        Element design = createDesign("responsive", "");
+        component.readDesign(design, ctx);
+        assertEquals("Component should have only one extension", 1, component
+                .getExtensions().size());
+    }
+
+    private AbstractComponent getComponent() {
+        return new Label();
+    }
+
+    private Element createDesign(String key, String value) {
+        Attributes attributes = new Attributes();
+        attributes.put(key, value);
+        Element node = new Element(Tag.valueOf("v-label"), "", attributes);
+        return node;
+    }
+
+    private Boolean getExplicitImmediate(AbstractComponent component) {
+        try {
+            Field immediate = AbstractComponent.class
+                    .getDeclaredField("explicitImmediateValue");
+            immediate.setAccessible(true);
+            return (Boolean) immediate.get(component);
+        } catch (Exception e) {
+            throw new RuntimeException(
+                    "Getting the field explicitImmediateValue failed.");
+        }
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/abstractcomponent/TestWriteDesign.java b/server/tests/src/com/vaadin/tests/server/component/abstractcomponent/TestWriteDesign.java
new file mode 100644
index 0000000000..7f207a25ae
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/abstractcomponent/TestWriteDesign.java
@@ -0,0 +1,281 @@
+/*
+ * Copyright 2000-2014 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.server.component.abstractcomponent;
+
+import java.io.File;
+import java.util.Locale;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.server.AbstractErrorMessage.ContentMode;
+import com.vaadin.server.ErrorMessage.ErrorLevel;
+import com.vaadin.server.ExternalResource;
+import com.vaadin.server.FileResource;
+import com.vaadin.server.Responsive;
+import com.vaadin.server.ThemeResource;
+import com.vaadin.server.UserError;
+import com.vaadin.ui.AbstractComponent;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.HorizontalSplitPanel;
+import com.vaadin.ui.TabSheet;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for writing the attributes of the AbstractComponent to design
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestWriteDesign extends TestCase {
+
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    public void testSynchronizeId() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        component.setId("testId");
+        component.writeDesign(design, ctx);
+        // we only changed one of the attributes, others are at default values
+        assertEquals(1, design.attributes().size());
+        assertEquals("testId", design.attr("id"));
+    }
+
+    public void testSynchronizePrimaryStyleName() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        component.setPrimaryStyleName("test-style");
+        component.writeDesign(design, ctx);
+        // we only changed one of the attributes, others are at default values
+        assertEquals(1, design.attributes().size());
+        assertEquals("test-style", design.attr("primary-style-name"));
+    }
+
+    public void testSynchronizeCaption() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        component.setCaption("test-caption");
+        component.writeDesign(design, ctx);
+        // We only changed the caption, which is not
+        // an attribute.
+        assertEquals(0, design.attributes().size());
+        assertEquals("test-caption", design.html());
+    }
+
+    public void testSynchronizeLocale() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        component.setLocale(new Locale("fi", "FI"));
+        component.writeDesign(design, ctx);
+        // we only changed one of the attributes, others are at default values
+        assertEquals(1, design.attributes().size());
+        assertEquals("fi_FI", design.attr("locale"));
+    }
+
+    public void testSynchronizeExternalIcon() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        component
+                .setIcon(new ExternalResource("http://example.com/example.gif"));
+        component.writeDesign(design, ctx);
+        // we only changed one of the attributes, others are at default values
+        assertEquals(1, design.attributes().size());
+        assertEquals("http://example.com/example.gif", design.attr("icon"));
+    }
+
+    public void testSynchronizeThemeIcon() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        component.setIcon(new ThemeResource("example.gif"));
+        component.writeDesign(design, ctx);
+        // we only changed one of the attributes, others are at default values
+        assertEquals(1, design.attributes().size());
+        assertEquals("theme://example.gif", design.attr("icon"));
+    }
+
+    public void testSynchronizeFileResource() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        component.setIcon(new FileResource(new File("img/example.gif")));
+        component.writeDesign(design, ctx);
+        // we only changed one of the attributes, others are at default values
+        assertEquals(1, design.attributes().size());
+        assertEquals("img/example.gif", design.attr("icon"));
+    }
+
+    public void testSynchronizeImmediate() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        // no immediate attribute should be written before setting immediate to
+        // some value
+        component.writeDesign(design, ctx);
+        assertFalse(design.hasAttr("immediate"));
+        component.setImmediate(true);
+        component.writeDesign(design, ctx);
+        // we only changed one of the attributes, others are at default values
+        assertEquals(1, design.attributes().size());
+        assertEquals("true", design.attr("immediate"));
+    }
+
+    public void testSynchronizeImmediateByDefault() {
+        Element design = createDesign();
+        TabSheet byDefaultImmediate = new TabSheet();
+        // no immediate attribute should be written before setting immediate to
+        // false
+        byDefaultImmediate.writeDesign(design, ctx);
+        assertFalse(design.hasAttr("immediate"));
+        byDefaultImmediate.setImmediate(false);
+        byDefaultImmediate.writeDesign(design, ctx);
+        // we only changed one of the attributes, others are at default values
+        assertEquals(1, design.attributes().size());
+        assertEquals("false", design.attr("immediate"));
+    }
+
+    public void testSynchronizeDescription() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        component.setDescription("test-description");
+        component.writeDesign(design, ctx);
+        // we only changed one of the attributes, others are at default values
+        assertEquals(1, design.attributes().size());
+        assertEquals("test-description", design.attr("description"));
+    }
+
+    public void testSynchronizeComponentError() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        component.setComponentError(new UserError("<div>test-error</div>",
+                ContentMode.HTML, ErrorLevel.ERROR));
+        component.writeDesign(design, ctx);
+        // we only changed one of the attributes, others are at default values
+        assertEquals(1, design.attributes().size());
+        assertEquals("<div>test-error</div>", design.attr("error"));
+    }
+
+    public void testSynchronizeSizeFull() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        component.setSizeFull();
+        component.writeDesign(design, ctx);
+        // there should be only size full
+        assertEquals(1, design.attributes().size());
+        assertEquals("true", design.attr("size-full"));
+    }
+
+    public void testSynchronizeSizeAuto() {
+        Element design = createDesign();
+        AbstractComponent component = getPanel();
+        component.setSizeUndefined();
+        component.writeDesign(design, ctx);
+        // there should be only size auto
+        assertEquals(1, design.attributes().size());
+        assertEquals("true", design.attr("size-auto"));
+    }
+
+    public void testSynchronizeHeightFull() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        component.setHeight("100%");
+        component.setWidth("20px");
+        component.writeDesign(design, ctx);
+        assertEquals("true", design.attr("height-full"));
+    }
+
+    public void testSynchronizeHeightAuto() {
+        Element design = createDesign();
+        // we need to have default height of 100% -> use split panel
+        AbstractComponent component = getPanel();
+        component.setHeight(null);
+        component.setWidth("20px");
+        component.writeDesign(design, ctx);
+        assertEquals("true", design.attr("height-auto"));
+    }
+
+    public void testSynchronizeWidthFull() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        component.setHeight("20px");
+        component.setWidth("100%");
+        component.writeDesign(design, ctx);
+        assertEquals("true", design.attr("width-full"));
+    }
+
+    public void testSynchronizeWidthAuto() {
+        Element design = createDesign();
+        // need to get label, otherwise the default would be auto
+        AbstractComponent component = getPanel();
+        component.setHeight("20px");
+        component.setWidth(null);
+        component.writeDesign(design, ctx);
+        assertEquals("true", design.attr("width-auto"));
+    }
+
+    public void testSynchronizeWidth() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        component.setHeight("20px");
+        component.setWidth("70%");
+        component.writeDesign(design, ctx);
+        assertEquals("70%", design.attr("width"));
+    }
+
+    public void testSynchronizeHeight() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        component.setHeight("20px");
+        component.setWidth("70%");
+        component.writeDesign(design, ctx);
+        assertEquals("20px", design.attr("height"));
+    }
+
+    public void testSynchronizeResponsive() {
+        Element design = createDesign();
+        AbstractComponent component = getComponent();
+        Responsive.makeResponsive(component);
+        component.writeDesign(design, ctx);
+        assertTrue("Design attributes should have key 'responsive'", design
+                .attributes().hasKey("responsive"));
+        assertFalse("Responsive attribute should not be 'false'",
+                design.attr("responsive").equalsIgnoreCase("false"));
+    }
+
+    private AbstractComponent getComponent() {
+        Button button = new Button();
+        button.setHtmlContentAllowed(true);
+        return button;
+    }
+
+    private AbstractComponent getPanel() {
+        return new HorizontalSplitPanel();
+    }
+
+    private Element createDesign() {
+        Attributes attr = new Attributes();
+        attr.put("should_be_removed", "foo");
+        Element node = new Element(Tag.valueOf("v-button"), "", attr);
+        Element child = new Element(Tag.valueOf("to-be-removed"), "foo", attr);
+        node.appendChild(child);
+        return node;
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/abstractfield/TestReadDesign.java b/server/tests/src/com/vaadin/tests/server/component/abstractfield/TestReadDesign.java
new file mode 100644
index 0000000000..dd0e629199
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/abstractfield/TestReadDesign.java
@@ -0,0 +1,71 @@
+/*
+ * Copyright 2000-2014 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.server.component.abstractfield;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.AbstractField;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * 
+ * Test case for reading the attributes of the AbstractField from design
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestReadDesign extends TestCase {
+
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    public void testSynchronizeReadOnly() {
+        Element design = createDesign("readonly", "");
+        AbstractField component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals(true, component.isReadOnly());
+        design = createDesign("readonly", "false");
+        component.readDesign(design, ctx);
+        assertEquals(false, component.isReadOnly());
+    }
+
+    public void testSynchronizeTabIndex() {
+        Element design = createDesign("tabindex", "2");
+        AbstractField component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals("Tab index must be 2", 2, component.getTabIndex());
+    }
+
+    private AbstractField getComponent() {
+        return new TextField();
+    }
+
+    private Element createDesign(String key, String value) {
+        Attributes attributes = new Attributes();
+        attributes.put(key, value);
+        Element node = new Element(Tag.valueOf("v-text-field"), "", attributes);
+        return node;
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/abstractfield/TestWriteDesign.java b/server/tests/src/com/vaadin/tests/server/component/abstractfield/TestWriteDesign.java
new file mode 100644
index 0000000000..969713abe6
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/abstractfield/TestWriteDesign.java
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2000-2014 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.server.component.abstractfield;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.data.util.ObjectProperty;
+import com.vaadin.ui.AbstractField;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for writing the attributes of the AbstractField to design
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestWriteDesign extends TestCase {
+
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    public void testSynchronizeReadOnly() {
+        Element design = createDesign();
+        AbstractField component = getComponent();
+        component.setReadOnly(true);
+        component.writeDesign(design, ctx);
+        // we only changed one of the attributes, others are at default values
+        assertEquals(1, design.attributes().size());
+        assertTrue("Design must contain readonly", design.hasAttr("readonly"));
+        assertTrue("Readonly must be true", design.attr("readonly").equals("")
+                || design.attr("readonly").equals("true"));
+    }
+
+    public void testSynchronizeModelReadOnly() {
+        Element design = createDesign();
+        AbstractField component = getComponent();
+        ObjectProperty property = new ObjectProperty<String>("test");
+        property.setReadOnly(true);
+        component.setPropertyDataSource(property);
+        component.writeDesign(design, ctx);
+        // make sure that property readonly is not written to design
+        assertFalse("Design must not contain readonly",
+                design.hasAttr("readonly"));
+    }
+
+    private AbstractField getComponent() {
+        return new TextField();
+    }
+
+    private Element createDesign() {
+        Attributes attr = new Attributes();
+        attr.put("should_be_removed", "foo");
+        return new Element(Tag.valueOf("v-text-field"), "", attr);
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/abstractorderedlayout/TestReadDesign.java b/server/tests/src/com/vaadin/tests/server/component/abstractorderedlayout/TestReadDesign.java
new file mode 100644
index 0000000000..874fbd83b2
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/abstractorderedlayout/TestReadDesign.java
@@ -0,0 +1,119 @@
+/*
+ * Copyright 2000-2014 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.server.component.abstractorderedlayout;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case from reading AbstractOrdered layouts from design
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class TestReadDesign extends TestCase {
+
+    public void testChildCount() {
+        VerticalLayout root = createLayout(0f, false);
+        assertEquals(2, root.getComponentCount());
+    }
+
+    public void testMargin() {
+        VerticalLayout root = createLayout(0f, true);
+        assertTrue(root.getMargin().getBitMask() != 0);
+        root = createLayout(0f, false);
+        assertTrue(root.getMargin().getBitMask() == 0);
+    }
+
+    public void testAttributes() {
+        VerticalLayout root = createLayout(0f, false);
+        assertEquals("test-layout", root.getCaption());
+        assertEquals("test-label", root.getComponent(0).getCaption());
+        assertEquals("test-button", root.getComponent(1).getCaption());
+    }
+
+    public void testExpandRatio() {
+        VerticalLayout root = createLayout(1f, false);
+        assertEquals(1f, root.getExpandRatio(root.getComponent(0)));
+        assertEquals(1f, root.getExpandRatio(root.getComponent(1)));
+
+        root = createLayout(0f, false);
+        assertEquals(0f, root.getExpandRatio(root.getComponent(0)));
+        assertEquals(0f, root.getExpandRatio(root.getComponent(1)));
+    }
+
+    public void testAlignment() {
+        VerticalLayout root = createLayout(0f, false, ":top", ":left");
+        assertEquals(Alignment.TOP_LEFT,
+                root.getComponentAlignment(root.getComponent(0)));
+        root = createLayout(0f, false, ":middle", ":center");
+        assertEquals(Alignment.MIDDLE_CENTER,
+                root.getComponentAlignment(root.getComponent(0)));
+        root = createLayout(0f, false, ":bottom", ":right");
+        assertEquals(Alignment.BOTTOM_RIGHT,
+                root.getComponentAlignment(root.getComponent(0)));
+
+    }
+
+    private VerticalLayout createLayout(float expandRatio, boolean margin,
+            String... alignments) {
+        DesignContext ctx = new DesignContext();
+        Element design = createDesign(expandRatio, margin, alignments);
+        Component child = ctx.readDesign(design);
+        return (VerticalLayout) child;
+    }
+
+    private Element createDesign(float expandRatio, boolean margin,
+            String... alignments) {
+
+        Attributes rootAttributes = new Attributes();
+        rootAttributes.put("caption", "test-layout");
+        if (margin) {
+            rootAttributes.put("margin", "");
+        }
+        Element node = new Element(Tag.valueOf("v-vertical-layout"), "",
+                rootAttributes);
+
+        Attributes firstChildAttributes = new Attributes();
+        firstChildAttributes.put("caption", "test-label");
+        firstChildAttributes.put(":expand", String.valueOf(expandRatio));
+        for (String alignment : alignments) {
+            firstChildAttributes.put(alignment, "");
+        }
+        Element firstChild = new Element(Tag.valueOf("v-label"), "",
+                firstChildAttributes);
+        node.appendChild(firstChild);
+
+        Attributes secondChildAttributes = new Attributes();
+        secondChildAttributes.put(":expand", String.valueOf(expandRatio));
+        for (String alignment : alignments) {
+            secondChildAttributes.put(alignment, "");
+        }
+        Element secondChild = new Element(Tag.valueOf("v-button"), "",
+                secondChildAttributes);
+        secondChild.html("test-button");
+        node.appendChild(secondChild);
+        return node;
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/abstractorderedlayout/TestWriteDesign.java b/server/tests/src/com/vaadin/tests/server/component/abstractorderedlayout/TestWriteDesign.java
new file mode 100644
index 0000000000..302cf985bd
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/abstractorderedlayout/TestWriteDesign.java
@@ -0,0 +1,148 @@
+/*
+ * Copyright 2000-2014 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.server.component.abstractorderedlayout;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for writing abstract ordered layout to design
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class TestWriteDesign extends TestCase {
+
+    public void testSynchronizeMargin() {
+        VerticalLayout layout = new VerticalLayout();
+        layout.setMargin(true);
+        Element design = createDesign();
+        layout.writeDesign(design, createDesignContext());
+        assertTrue("The margin must be written", design.hasAttr("margin"));
+        assertTrue("The margin must be empty or true", design.attr("margin")
+                .equals("") || design.attr("margin").equalsIgnoreCase("true"));
+    }
+
+    public void testSynchronizeEmptyLayout() {
+        VerticalLayout layout = new VerticalLayout();
+        layout.setCaption("changed-caption");
+        Element design = createDesign();
+        layout.writeDesign(design, createDesignContext());
+        assertEquals(0, design.childNodes().size());
+        assertEquals("changed-caption", design.attr("caption"));
+    }
+
+    public void testSynchronizeLayoutWithChildren() {
+        VerticalLayout layout = new VerticalLayout();
+        layout.addComponent(new Label("test-label"));
+        layout.getComponent(0).setCaption("test-caption");
+        layout.addComponent(new Label("test-label-2"));
+        Element design = createDesign();
+        layout.writeDesign(design, createDesignContext());
+        assertEquals(2, design.childNodes().size());
+        assertEquals("v-label", ((Element) design.childNode(0)).tagName());
+        assertEquals("test-caption", design.childNode(0).attr("caption"));
+    }
+
+    public void testSynchronizeUnitExpandRatio() {
+        VerticalLayout layout = new VerticalLayout();
+        layout.addComponent(new Label("test-label"));
+        layout.setExpandRatio(layout.getComponent(0), 1.0f);
+        Element design = createDesign();
+        layout.writeDesign(design, createDesignContext());
+        assertTrue(design.childNode(0).hasAttr(":expand"));
+        assertEquals("", design.childNode(0).attr(":expand"));
+    }
+
+    public void testSynchronizeArbitraryExpandRatio() {
+        VerticalLayout layout = new VerticalLayout();
+        layout.addComponent(new Label("test-label"));
+        layout.setExpandRatio(layout.getComponent(0), 2.40f);
+        Element design = createDesign();
+        layout.writeDesign(design, createDesignContext());
+        assertTrue(design.childNode(0).hasAttr(":expand"));
+        assertEquals("2.4", design.childNode(0).attr(":expand"));
+    }
+
+    public void testSynchronizeDefaultAlignment() {
+        Element design = createDesign();
+        VerticalLayout layout = createLayoutWithAlignment(design, null);
+        layout.writeDesign(design, createDesignContext());
+        assertFalse(design.childNode(0).hasAttr(":top"));
+        assertFalse(design.childNode(0).hasAttr(":left"));
+    }
+
+    public void testSynchronizeMiddleCenter() {
+        Element design = createDesign();
+        VerticalLayout layout = createLayoutWithAlignment(design,
+                Alignment.MIDDLE_CENTER);
+        layout.writeDesign(design, createDesignContext());
+        assertTrue(design.childNode(0).hasAttr(":middle"));
+        assertTrue(design.childNode(0).hasAttr(":center"));
+    }
+
+    public void testSynchronizeBottomRight() {
+        Element design = createDesign();
+        VerticalLayout layout = createLayoutWithAlignment(design,
+                Alignment.BOTTOM_RIGHT);
+        layout.writeDesign(design, createDesignContext());
+        assertTrue(design.childNode(0).hasAttr(":bottom"));
+        assertTrue(design.childNode(0).hasAttr(":right"));
+    }
+
+    private VerticalLayout createLayoutWithAlignment(Element design,
+            Alignment alignment) {
+        VerticalLayout layout = new VerticalLayout();
+        layout.addComponent(new Label("test-label"));
+        if (alignment != null) {
+            layout.setComponentAlignment(layout.getComponent(0), alignment);
+        }
+        layout.writeDesign(design, createDesignContext());
+        return layout;
+    }
+
+    private Element createDesign() {
+        // make sure that the design node has old content that should be removed
+        Attributes rootAttributes = new Attributes();
+        rootAttributes.put("caption", "test-layout");
+        Element node = new Element(Tag.valueOf("v-vertical-layout"), "",
+                rootAttributes);
+        Attributes firstChildAttributes = new Attributes();
+        firstChildAttributes.put("caption", "test-label");
+        Element firstChild = new Element(Tag.valueOf("v-label"), "",
+                firstChildAttributes);
+        node.appendChild(firstChild);
+
+        Attributes secondChildAttributes = new Attributes();
+        secondChildAttributes.put("caption", "test-button");
+        Element secondChild = new Element(Tag.valueOf("v-button"), "",
+                secondChildAttributes);
+        node.appendChild(secondChild);
+        return node;
+    }
+
+    private DesignContext createDesignContext() {
+        return new DesignContext();
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/abstractsplitpanel/TestReadDesign.java b/server/tests/src/com/vaadin/tests/server/component/abstractsplitpanel/TestReadDesign.java
new file mode 100644
index 0000000000..db30f05c5f
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/abstractsplitpanel/TestReadDesign.java
@@ -0,0 +1,158 @@
+/*
+ * Copyright 2000-2014 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.server.component.abstractsplitpanel;
+
+import java.lang.reflect.Method;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.server.Sizeable.Unit;
+import com.vaadin.shared.ui.splitpanel.AbstractSplitPanelState.SplitterState;
+import com.vaadin.ui.AbstractSplitPanel;
+import com.vaadin.ui.HorizontalSplitPanel;
+import com.vaadin.ui.Table;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.VerticalSplitPanel;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Tests synchronizing the attributes and children of horizontal and vertical
+ * split panels from a design.
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestReadDesign extends TestCase {
+    DesignContext ctx;
+
+    @Override
+    protected void setUp() {
+        ctx = new DesignContext();
+    }
+
+    public void testAttributes() throws Exception {
+        // Create a design with non-default attributes values.
+        Element design = createDesign(true, false, true, true);
+        HorizontalSplitPanel sp = new HorizontalSplitPanel();
+        sp.readDesign(design, ctx);
+        // Check that the attributes are correctly parsed.
+        assertEquals(20.5f, sp.getSplitPosition());
+        assertEquals(Unit.PERCENTAGE, sp.getSplitPositionUnit());
+        assertEquals(20f, sp.getMinSplitPosition());
+        assertEquals(Unit.PERCENTAGE, sp.getMinSplitPositionUnit());
+        assertEquals(50f, sp.getMaxSplitPosition());
+        assertEquals(Unit.PIXELS, sp.getMaxSplitPositionUnit());
+        assertEquals(true, sp.isLocked());
+        checkReversed(sp, true);
+    }
+
+    public void testWithNoChildren() {
+        Element design = createDesign(true, false, false, false);
+        HorizontalSplitPanel sp = new HorizontalSplitPanel();
+        sp.readDesign(design, ctx);
+        assertEquals("Unexpected child count for the split panel.", 0,
+                sp.getComponentCount());
+    }
+
+    public void testWithFirstChild() {
+        Element design = createDesign(false, false, true, false);
+        VerticalSplitPanel sp = new VerticalSplitPanel();
+        sp.readDesign(design, ctx);
+        assertEquals("Unexpected child count for the split panel.", 1,
+                sp.getComponentCount());
+        Object obj = sp.getFirstComponent();
+        assertEquals("Wrong component in split panel.", Table.class,
+                obj.getClass());
+    }
+
+    public void testWithSecondChild() {
+        Element design = createDesign(true, false, false, true);
+        HorizontalSplitPanel sp = new HorizontalSplitPanel();
+        sp.readDesign(design, ctx);
+        assertEquals("Unexpected child count for the split panel.", 1,
+                sp.getComponentCount());
+        Object obj = sp.getSecondComponent();
+        assertEquals("Wrong component in split panel.", VerticalLayout.class,
+                obj.getClass());
+    }
+
+    public void testWithBothChildren() {
+        Element design = createDesign(false, false, true, true);
+        VerticalSplitPanel sp = new VerticalSplitPanel();
+        sp.readDesign(design, ctx);
+        assertEquals("Unexpected child count for the split panel.", 2,
+                sp.getComponentCount());
+        Object first = sp.getFirstComponent();
+        Object second = sp.getSecondComponent();
+        assertEquals("Wrong first component in split panel.", Table.class,
+                first.getClass());
+        assertEquals("Wrong second component in split panel.",
+                VerticalLayout.class, second.getClass());
+    }
+
+    /*
+     * Creates an html tree node structure representing a split panel and its
+     * contents. The parameters are used for controlling whether the split panel
+     * is horizontal or vertical, whether attributes are set for the design and
+     * whether the split panel should have the first and the second child
+     * component.
+     */
+    private Element createDesign(boolean horizontal,
+            boolean useDefaultAttributes, boolean hasFirstChild,
+            boolean hasSecondChild) {
+        Attributes attributes = new Attributes();
+        if (!useDefaultAttributes) {
+            attributes.put("split-position", "20.5%");
+            // The unitless number should correspond to 20%
+            attributes.put("min-split-position", "20");
+            attributes.put("max-split-position", "50px");
+            attributes.put("locked", "");
+            attributes.put("reversed", "");
+        }
+        String tagName = horizontal ? "v-horizontal-split-panel"
+                : "v-vertical-split-panel";
+        Element element = new Element(Tag.valueOf(tagName), "", attributes);
+        // Create the children
+        if (hasFirstChild) {
+            Element child = new Element(Tag.valueOf("v-table"), "");
+            element.appendChild(child);
+        }
+        if (hasSecondChild) {
+            Element child = new Element(Tag.valueOf("v-vertical-layout"), "");
+            if (!hasFirstChild) {
+                child.attr(":second", "");
+            }
+            element.appendChild(child);
+        }
+        return element;
+    }
+
+    /*
+     * Checks the reversed property of a split panel.
+     */
+    private void checkReversed(AbstractSplitPanel sp, boolean expected)
+            throws Exception {
+        Method getter = AbstractSplitPanel.class
+                .getDeclaredMethod("getSplitterState");
+        getter.setAccessible(true);
+        SplitterState state = (SplitterState) getter.invoke(sp);
+        assertEquals("Wrong value for split panel property reversed.",
+                expected, state.positionReversed);
+    }
+}
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/server/component/abstractsplitpanel/TestWriteDesign.java b/server/tests/src/com/vaadin/tests/server/component/abstractsplitpanel/TestWriteDesign.java
new file mode 100644
index 0000000000..649498c20b
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/abstractsplitpanel/TestWriteDesign.java
@@ -0,0 +1,151 @@
+/*
+ * Copyright 2000-2014 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.server.component.abstractsplitpanel;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Element;
+
+import com.vaadin.server.Sizeable.Unit;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.HorizontalSplitPanel;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalSplitPanel;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Tests synchronizing the properties and child components of split panels to a
+ * design.
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestWriteDesign extends TestCase {
+    private DesignContext ctx;
+
+    @Override
+    public void setUp() {
+        ctx = new DesignContext();
+    }
+
+    public void testHorizontalWithDefaultValues() {
+        // no attributes or child elements should appear
+        HorizontalSplitPanel sp = new HorizontalSplitPanel();
+        Element e = ctx.createElement(sp);
+        assertEquals("Wrong tag name.", "v-horizontal-split-panel",
+                e.nodeName());
+        assertEquals("The split panel should not have attributes.", 0, e
+                .attributes().size());
+        assertEquals("The split panel should not have children.", 0, e
+                .children().size());
+    }
+
+    public void testVerticalWithAttributes() {
+        // All defined attributes should be output in the tree node. No child
+        // components are present in this test.
+        VerticalSplitPanel sp = new VerticalSplitPanel();
+        sp.setSplitPosition(27f, Unit.PIXELS, true);
+        sp.setMinSplitPosition(5.5f, Unit.PERCENTAGE);
+        sp.setMaxSplitPosition(95, Unit.PERCENTAGE);
+        sp.setLocked(true);
+        Element e = ctx.createElement(sp);
+        assertEquals("Wrong tag name.", "v-vertical-split-panel", e.nodeName());
+        assertEquals("Unexpected number of attributes.", 5, e.attributes()
+                .size());
+        assertEquals("Wrong split position.", "27px", e.attr("split-position"));
+        assertEquals("Wrong minimum split position.", "5.5%",
+                e.attr("min-split-position"));
+        assertEquals("Wrong maximum split position.", "95%",
+                e.attr("max-split-position"));
+        assertTrue("Unexpected value for locked: " + e.attr("locked"),
+                "true".equals(e.attr("locked")) || "".equals(e.attr("locked")));
+        assertTrue(
+                "Unexpected value for reversed: " + e.attr("reversed"),
+                "true".equals(e.attr("reversed"))
+                        || "".equals(e.attr("reversed")));
+    }
+
+    public void testHorizontalWithFirstChild() {
+        // The split panel contains only the first child.
+        HorizontalSplitPanel sp = new HorizontalSplitPanel();
+        sp.setSplitPosition(25f);
+        sp.setFirstComponent(new Button("First slot"));
+        Element e = ctx.createElement(sp);
+        assertEquals("Wrong split position.", "25%", e.attr("split-position"));
+        assertEquals("Wrong number of child elements.", 1, e.children().size());
+        Element eb = e.children().get(0);
+        assertEquals("Wrong tag name of first child element.", "v-button",
+                eb.nodeName());
+        assertEquals("Wrong text in the button element.", "First slot",
+                eb.html());
+    }
+
+    public void testVerticalWithSecondChild() {
+        // The split panel contains only the second child.
+        VerticalSplitPanel sp = new VerticalSplitPanel();
+        sp.setMinSplitPosition(25f, Unit.PIXELS);
+        sp.setSecondComponent(new Label("Second slot"));
+        Element e = ctx.createElement(sp);
+        assertEquals("Wrong minimum split position.", "25px",
+                e.attr("min-split-position"));
+        assertEquals("Wrong number of child elements.", 1, e.children().size());
+        Element el = e.children().get(0);
+        assertEquals("Wrong tag name of child element.", "v-label",
+                el.nodeName());
+        assertEquals("Wrong text in the label element.", "Second slot",
+                el.html());
+        assertTrue("Missing attribute :second in the label element.",
+                el.hasAttr(":second"));
+    }
+
+    public void testVerticalWithBothChildren() {
+        // The split panel has both child components.
+        VerticalSplitPanel sp = new VerticalSplitPanel();
+        sp.setFirstComponent(new Button("First slot"));
+        sp.setSecondComponent(new Label("Second slot"));
+        Element e = ctx.createElement(sp);
+        assertEquals("Wrong number of child elements.", 2, e.children().size());
+        Element eb = e.children().get(0);
+        assertEquals("Wrong tag name of first child element.", "v-button",
+                eb.nodeName());
+        assertEquals("Wrong text in the button element.", "First slot",
+                eb.html());
+        Element el = e.children().get(1);
+        assertEquals("Wrong tag name of second child element.", "v-label",
+                el.nodeName());
+        assertEquals("Wrong text in the label element.", "Second slot",
+                el.html());
+        assertFalse(
+                "There should be no :second attribute when a split panel has both children.",
+                el.hasAttr(":second"));
+    }
+
+    public void testReSynchronize() {
+        // Test that old children and attributes are removed when an element is
+        // synchronized to a new component.
+        VerticalSplitPanel sp = new VerticalSplitPanel();
+        sp.setMinSplitPosition(5.5f, Unit.PERCENTAGE);
+        sp.setMaxSplitPosition(95, Unit.PERCENTAGE);
+        sp.setFirstComponent(new Button("First slot"));
+        sp.setSecondComponent(new Label("Second slot"));
+        Element e = ctx.createElement(sp);
+        sp = new VerticalSplitPanel();
+        sp.writeDesign(e, ctx);
+        assertTrue("There should be no attributes in the node.", e.attributes()
+                .size() == 0);
+        assertTrue("There should be no child elements.",
+                e.children().size() == 0);
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/abstracttextfield/TestReadDesign.java b/server/tests/src/com/vaadin/tests/server/component/abstracttextfield/TestReadDesign.java
new file mode 100644
index 0000000000..3b4b6f1f03
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/abstracttextfield/TestReadDesign.java
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2000-2014 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.server.component.abstracttextfield;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.AbstractTextField;
+import com.vaadin.ui.AbstractTextField.TextChangeEventMode;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for reading the attributes of the AbstractTextField from design
+ */
+public class TestReadDesign extends TestCase {
+
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    public void testAttributes() {
+        Element design = createDesign();
+        AbstractTextField component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals("this-is-null", component.getNullRepresentation());
+        assertEquals(true, component.isNullSettingAllowed());
+        assertEquals(5, component.getMaxLength());
+        assertEquals(3, component.getColumns());
+        assertEquals("input", component.getInputPrompt());
+        assertEquals(TextChangeEventMode.EAGER,
+                component.getTextChangeEventMode());
+        assertEquals(100, component.getTextChangeTimeout());
+    }
+
+    private AbstractTextField getComponent() {
+        return new TextField();
+    }
+
+    private Element createDesign() {
+        Attributes attributes = new Attributes();
+        attributes.put("null-representation", "this-is-null");
+        attributes.put("null-setting-allowed", "true");
+        attributes.put("maxlength", "5");
+        attributes.put("columns", "3");
+        attributes.put("input-prompt", "input");
+        attributes.put("text-change-event-mode", "eager");
+        attributes.put("text-change-timeout", "100");
+        Element node = new Element(Tag.valueOf("v-text-field"), "", attributes);
+        return node;
+    }
+
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/abstracttextfield/TestWriteDesign.java b/server/tests/src/com/vaadin/tests/server/component/abstracttextfield/TestWriteDesign.java
new file mode 100644
index 0000000000..be5c384d3b
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/abstracttextfield/TestWriteDesign.java
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2000-2014 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.server.component.abstracttextfield;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.AbstractTextField;
+import com.vaadin.ui.AbstractTextField.TextChangeEventMode;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for writing the attributes of the AbstractTextField to design
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestWriteDesign extends TestCase {
+
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    public void testSynchronizetestAttributes() {
+        Element design = createDesign();
+        AbstractTextField component = getComponent();
+        component.setNullRepresentation("this-is-null");
+        component.setNullSettingAllowed(true);
+        component.setMaxLength(5);
+        component.setColumns(3);
+        component.setInputPrompt("input");
+        component.setTextChangeEventMode(TextChangeEventMode.EAGER);
+        component.setTextChangeTimeout(100);
+        component.writeDesign(design, ctx);
+        assertEquals("this-is-null", design.attr("null-representation"));
+        assertEquals("true", design.attr("null-setting-allowed"));
+        assertEquals("5", design.attr("maxlength"));
+        assertEquals("3", design.attr("columns"));
+        assertEquals("input", design.attr("input-prompt"));
+        assertEquals("EAGER", design.attr("text-change-event-mode"));
+        assertEquals("100", design.attr("text-change-timeout"));
+    }
+
+    private AbstractTextField getComponent() {
+        return new TextField();
+    }
+
+    private Element createDesign() {
+        Attributes attr = new Attributes();
+        return new Element(Tag.valueOf("v-text-field"), "", attr);
+    }
+
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/button/TestReadDesign.java b/server/tests/src/com/vaadin/tests/server/component/button/TestReadDesign.java
new file mode 100644
index 0000000000..e194232742
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/button/TestReadDesign.java
@@ -0,0 +1,129 @@
+/*
+ * Copyright 2000-2014 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.server.component.button;
+
+import java.lang.reflect.Field;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+import org.junit.Test;
+
+import com.vaadin.event.ShortcutAction.KeyCode;
+import com.vaadin.event.ShortcutAction.ModifierKey;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickShortcut;
+import com.vaadin.ui.NativeButton;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * 
+ * Test cases for reading the contents of a Button and a NativeButton from a
+ * design.
+ * 
+ */
+public class TestReadDesign extends TestCase {
+
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    @Test
+    public void testWithContent() {
+        createAndTestButtons("Click", null);
+    }
+
+    @Test
+    public void testWithHtmlCaption() {
+        createAndTestButtons("<b>Click me</b>", null);
+    }
+
+    @Test
+    public void testWithContentAndCaption() {
+        createAndTestButtons("Click me", "caption");
+    }
+
+    @Test
+    public void testWithCaption() {
+        createAndTestButtons(null, "Click me");
+    }
+
+    @Test
+    public void testAttributes() throws IllegalArgumentException,
+            SecurityException, IllegalAccessException, NoSuchFieldException {
+        Attributes attributes = new Attributes();
+        attributes.put("tabindex", "3");
+        attributes.put("plain-text", "");
+        attributes.put("icon-alt", "OK");
+        attributes.put("click-shortcut", "ctrl-shift-o");
+        Button button = (Button) ctx
+                .readDesign(createButtonWithAttributes(attributes));
+        assertEquals(3, button.getTabIndex());
+        assertEquals(false, button.isHtmlContentAllowed());
+        assertEquals("OK", button.getIconAlternateText());
+        Field field = Button.class.getDeclaredField("clickShortcut");
+        field.setAccessible(true);
+        ClickShortcut value = (ClickShortcut) field.get(button);
+        assertEquals(KeyCode.O, value.getKeyCode());
+        assertEquals(ModifierKey.CTRL, value.getModifiers()[0]);
+        assertEquals(ModifierKey.SHIFT, value.getModifiers()[1]);
+    }
+
+    /*
+     * Test both Button and NativeButton. Caption should always be ignored. If
+     * content is null, the created button should have empty content.
+     */
+    private void createAndTestButtons(String content, String caption) {
+        Element e1 = createElement("v-button", content, caption);
+        Button b1 = (Button) ctx.readDesign(e1);
+        Element e2 = createElement("v-native-button", content, caption);
+        NativeButton b2 = (NativeButton) ctx.readDesign(e2);
+        if (content != null) {
+            assertEquals("The button has the wrong text content.", content,
+                    b1.getCaption());
+            assertEquals("The button has the wrong text content.", content,
+                    b2.getCaption());
+        } else {
+            assertTrue("The button has the wrong content.",
+                    b1.getCaption() == null || "".equals(b1.getCaption()));
+            assertTrue("The button has the wrong content.",
+                    b2.getCaption() == null || "".equals(b2.getCaption()));
+        }
+    }
+
+    private Element createButtonWithAttributes(Attributes attributes) {
+        return new Element(Tag.valueOf("v-button"), "", attributes);
+    }
+
+    private Element createElement(String elementName, String content,
+            String caption) {
+        Attributes attributes = new Attributes();
+        if (caption != null) {
+            attributes.put("caption", caption);
+        }
+        Element node = new Element(Tag.valueOf(elementName), "", attributes);
+        if (content != null) {
+            node.html(content);
+        }
+        return node;
+    }
+}
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/server/component/button/TestWriteDesign.java b/server/tests/src/com/vaadin/tests/server/component/button/TestWriteDesign.java
new file mode 100644
index 0000000000..dff80769f4
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/button/TestWriteDesign.java
@@ -0,0 +1,103 @@
+/*
+ * Copyright 2000-2014 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.server.component.button;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+import org.junit.Test;
+
+import com.vaadin.event.ShortcutAction.KeyCode;
+import com.vaadin.event.ShortcutAction.ModifierKey;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.NativeButton;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Tests generating html tree nodes corresponding to the contents of a Button
+ * and a NativeButton.
+ */
+public class TestWriteDesign extends TestCase {
+
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    @Test
+    public void testWithTextContent() {
+        createAndTestButtons("Click me");
+    }
+
+    @Test
+    public void testWithHtmlContent() {
+        createAndTestButtons("<b>Click</b>");
+    }
+
+    @Test
+    public void testAttributes() {
+        Button button = new Button();
+        button.setTabIndex(3);
+        button.setIconAlternateText("OK");
+        button.setClickShortcut(KeyCode.O, ModifierKey.CTRL, ModifierKey.SHIFT);
+        Element e = new Element(Tag.valueOf("v-button"), "", new Attributes());
+        button.writeDesign(e, ctx);
+        assertEquals("3", e.attr("tabindex"));
+        assertTrue("Button is plain text by default", e.hasAttr("plain-text"));
+        assertEquals("OK", e.attr("icon-alt"));
+        assertEquals("ctrl-shift-o", e.attr("click-shortcut"));
+    }
+
+    @Test
+    public void testUpdateContentMode() {
+        Button button = new Button("OK");
+        Element e = new Element(Tag.valueOf("v-button"), "", new Attributes());
+        button.writeDesign(e, ctx);
+        assertTrue("Button is plain text by default", e.hasAttr("plain-text"));
+
+        button.setHtmlContentAllowed(true);
+        button.writeDesign(e, ctx);
+        assertTrue("Button is updated to HTML", !e.hasAttr("plain-text"));
+
+    }
+
+    private void createAndTestButtons(String content) {
+        Button b1 = new Button(content);
+        // we need to set this on, since the plain-text attribute will appear
+        // otherwise
+        b1.setHtmlContentAllowed(true);
+        Element e1 = ctx.createElement(b1);
+        assertEquals("Wrong tag name for button.", "v-button", e1.tagName());
+        assertEquals("Unexpected content in the v-button element.", content,
+                e1.html());
+        assertTrue("The v-button element should not have attributes.", e1
+                .attributes().size() == 0);
+        NativeButton b2 = new NativeButton(content);
+        b2.setHtmlContentAllowed(true);
+        Element e2 = ctx.createElement(b2);
+        assertEquals("Wrong tag name for button.", "v-native-button",
+                e2.tagName());
+        assertEquals("Unexpected content in the v-button element.", content,
+                e2.html());
+        assertTrue("The v-button element should not have attributes.", e2
+                .attributes().size() == 0);
+    }
+}
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/server/component/checkbox/TestReadDesign.java b/server/tests/src/com/vaadin/tests/server/component/checkbox/TestReadDesign.java
new file mode 100644
index 0000000000..c58b3b6bdd
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/checkbox/TestReadDesign.java
@@ -0,0 +1,67 @@
+/*
+ * Copyright 2000-2014 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.server.component.checkbox;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+import org.junit.Test;
+
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * 
+ * Test cases for reading the contents of a Checkbox from a design.
+ * 
+ */
+public class TestReadDesign extends TestCase {
+
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    @Test
+    public void testChecked() {
+        Element e = createElement(true);
+        CheckBox box = (CheckBox) ctx.readDesign(e);
+        assertEquals("The checkbox must be checked", Boolean.TRUE,
+                box.getValue());
+    }
+
+    @Test
+    public void testUnchecked() {
+        Element e = createElement(false);
+        CheckBox box = (CheckBox) ctx.readDesign(e);
+        assertEquals("The checkbox must be unchecked", Boolean.FALSE,
+                box.getValue());
+    }
+
+    private Element createElement(boolean checked) {
+        Attributes attributes = new Attributes();
+        if (checked) {
+            attributes.put("checked", "");
+        }
+        Element node = new Element(Tag.valueOf("v-check-box"), "", attributes);
+        return node;
+    }
+}
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/server/component/checkbox/TestWriteDesign.java b/server/tests/src/com/vaadin/tests/server/component/checkbox/TestWriteDesign.java
new file mode 100644
index 0000000000..d187371db6
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/checkbox/TestWriteDesign.java
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2000-2014 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.server.component.checkbox;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Element;
+import org.junit.Test;
+
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Tests generating html tree nodes corresponding to the contents of a Checkbox
+ */
+public class TestWriteDesign extends TestCase {
+
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    @Test
+    public void testChecked() {
+        CheckBox box = new CheckBox();
+        box.setValue(true);
+        Element e = ctx.createElement(box);
+        assertTrue("element must have checked attribute", e.hasAttr("checked"));
+        assertTrue("the checked attribute must be true", e.attr("checked")
+                .equals("true") || e.attr("checked").equals(""));
+    }
+
+    @Test
+    public void testUnchecked() {
+        CheckBox box = new CheckBox();
+        box.setValue(false);
+        Element e = ctx.createElement(box);
+        assertFalse("the element must not have checked attribute",
+                e.hasAttr("checked"));
+    }
+}
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/server/component/csslayout/TestReadDesign.java b/server/tests/src/com/vaadin/tests/server/component/csslayout/TestReadDesign.java
new file mode 100644
index 0000000000..bac3dc70eb
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/csslayout/TestReadDesign.java
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2000-2014 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.server.component.csslayout;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.Component;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for reading CssLayout from design
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestReadDesign extends TestCase {
+
+    public void testChildCount() {
+        CssLayout root = createLayout();
+        assertEquals(2, root.getComponentCount());
+    }
+
+    public void testAttributes() {
+        CssLayout root = createLayout();
+        assertEquals("test-layout", root.getCaption());
+        assertEquals("test-label", root.getComponent(0).getCaption());
+        assertEquals("test-button", root.getComponent(1).getCaption());
+    }
+
+    private CssLayout createLayout() {
+        DesignContext ctx = new DesignContext();
+        Element design = createDesign();
+        Component child = ctx.readDesign(design);
+        return (CssLayout) child;
+    }
+
+    private Element createDesign() {
+
+        Attributes rootAttributes = new Attributes();
+        rootAttributes.put("caption", "test-layout");
+        Element node = new Element(Tag.valueOf("v-css-layout"), "",
+                rootAttributes);
+
+        Attributes firstChildAttributes = new Attributes();
+        firstChildAttributes.put("caption", "test-label");
+        Element firstChild = new Element(Tag.valueOf("v-label"), "",
+                firstChildAttributes);
+        node.appendChild(firstChild);
+
+        Attributes secondChildAttributes = new Attributes();
+        Element secondChild = new Element(Tag.valueOf("v-button"), "",
+                secondChildAttributes);
+        secondChild.html("test-button");
+        node.appendChild(secondChild);
+        return node;
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/csslayout/TestWriteDesign.java b/server/tests/src/com/vaadin/tests/server/component/csslayout/TestWriteDesign.java
new file mode 100644
index 0000000000..d660eb77ec
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/csslayout/TestWriteDesign.java
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2000-2014 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.server.component.csslayout;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for writing CssLayout to design
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestWriteDesign extends TestCase {
+
+    public void testSynchronizeEmptyLayout() {
+        CssLayout layout = new CssLayout();
+        layout.setCaption("changed-caption");
+        Element design = createDesign();
+        layout.writeDesign(design, createDesignContext());
+        assertEquals(0, design.childNodes().size());
+        assertEquals("changed-caption", design.attr("caption"));
+    }
+
+    public void testSynchronizeLayoutWithChildren() {
+        CssLayout layout = new CssLayout();
+        layout.addComponent(new Label("test-label"));
+        layout.getComponent(0).setCaption("test-caption");
+        layout.addComponent(new Label("test-label-2"));
+        Element design = createDesign();
+        layout.writeDesign(design, createDesignContext());
+        assertEquals(2, design.childNodes().size());
+        assertEquals("v-label", ((Element) design.childNode(0)).tagName());
+        assertEquals("test-caption", design.childNode(0).attr("caption"));
+    }
+
+    private Element createDesign() {
+        // make sure that the design node has old content that should be removed
+        Attributes rootAttributes = new Attributes();
+        rootAttributes.put("caption", "test-layout");
+        Element node = new Element(Tag.valueOf("v-vertical-layout"), "",
+                rootAttributes);
+        Attributes firstChildAttributes = new Attributes();
+        firstChildAttributes.put("caption", "test-label");
+        Element firstChild = new Element(Tag.valueOf("v-label"), "",
+                firstChildAttributes);
+        node.appendChild(firstChild);
+
+        Element secondChild = new Element(Tag.valueOf("v-button"), "",
+                new Attributes());
+        secondChild.html("test-button");
+        node.appendChild(secondChild);
+        return node;
+    }
+
+    private DesignContext createDesignContext() {
+        return new DesignContext();
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/label/TestReadDesign.java b/server/tests/src/com/vaadin/tests/server/component/label/TestReadDesign.java
new file mode 100644
index 0000000000..3e577b5578
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/label/TestReadDesign.java
@@ -0,0 +1,102 @@
+/*
+ * Copyright 2000-2014 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.server.component.label;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+import org.junit.Test;
+
+import com.vaadin.ui.Label;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * 
+ * Test case for reading the contents of a Label from a design.
+ * 
+ */
+public class TestReadDesign extends TestCase {
+
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    @Test
+    public void testWithContent() {
+        createAndTestLabel("A label", null);
+    }
+
+    @Test
+    public void testWithHtmlContent() {
+        createAndTestLabel("<b>A label</b>", null);
+    }
+
+    @Test
+    public void testWithContentAndCaption() {
+        createAndTestLabel("A label", "This is a label");
+    }
+
+    @Test
+    public void testWithCaption() {
+        createAndTestLabel(null, "This is a label");
+    }
+
+    @Test
+    public void testWithoutContentAndCaption() {
+        createAndTestLabel(null, null);
+    }
+
+    /*
+     * Test creating a Label. A Label can have both caption and content.
+     */
+    private void createAndTestLabel(String content, String caption) {
+        Element e = createElement("v-label", content, caption);
+        Label l = (Label) ctx.readDesign(e);
+        if (content != null) {
+            assertEquals("The label has wrong text content.", content,
+                    l.getValue());
+        } else {
+            assertTrue("The label has wrong text content.",
+                    l.getValue() == null || "".equals(l.getValue()));
+        }
+        if (caption != null) {
+            assertEquals("The label has wrong caption.", caption,
+                    l.getCaption());
+        } else {
+            assertTrue("The label has wrong caption.", l.getCaption() == null
+                    || "".equals(l.getCaption()));
+        }
+    }
+
+    private Element createElement(String elementName, String content,
+            String caption) {
+        Attributes attributes = new Attributes();
+        if (caption != null) {
+            attributes.put("caption", caption);
+        }
+        Element node = new Element(Tag.valueOf(elementName), "", attributes);
+        if (content != null) {
+            node.html(content);
+        }
+        return node;
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/label/TestWriteDesign.java b/server/tests/src/com/vaadin/tests/server/component/label/TestWriteDesign.java
new file mode 100644
index 0000000000..3368a7d22e
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/label/TestWriteDesign.java
@@ -0,0 +1,126 @@
+/*
+ * Copyright 2000-2014 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.server.component.label;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+import org.junit.Test;
+
+import com.vaadin.shared.ui.label.ContentMode;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Tests generating an html tree node corresponding to a Label.
+ */
+public class TestWriteDesign extends TestCase {
+
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    @Test
+    public void testWithContent() {
+        createAndTestLabel("A label", null);
+    }
+
+    @Test
+    public void testWithHtmlContent() {
+        createAndTestLabel("<b>A label</b>", null);
+    }
+
+    @Test
+    public void testWithCaption() {
+        createAndTestLabel(null, "Label caption");
+    }
+
+    @Test
+    public void testWithContentAndCaption() {
+        createAndTestLabel("A label", "Label caption");
+    }
+
+    @Test
+    public void testContentModeText() {
+        Label l = new Label("plain text label");
+        Element e = new Element(Tag.valueOf("v-label"), "", new Attributes());
+        l.writeDesign(e, ctx);
+        assertTrue("Label should be marked as plain text",
+                e.hasAttr("plain-text"));
+    }
+
+    @Test
+    public void testContentModeHtml() {
+        Label l = new Label("html label");
+        l.setContentMode(ContentMode.HTML);
+
+        Element e = new Element(Tag.valueOf("v-label"), "", new Attributes());
+        l.writeDesign(e, ctx);
+        assertFalse("Label should not be marked as plain text",
+                e.hasAttr("plain-text"));
+    }
+
+    @Test
+    public void testChangeContentMode() {
+        Label l = new Label("html label");
+        l.setContentMode(ContentMode.HTML);
+
+        Element e = new Element(Tag.valueOf("v-label"), "", new Attributes());
+        l.writeDesign(e, ctx);
+
+        assertFalse("Label should not be marked as plain text",
+                e.hasAttr("plain-text"));
+        l.setContentMode(ContentMode.TEXT);
+        l.writeDesign(e, ctx);
+
+        assertTrue("Label should be marked as plain text",
+                e.hasAttr("plain-text"));
+    }
+
+    @Test
+    public void testWithoutContentAndCaption() {
+        createAndTestLabel(null, null);
+    }
+
+    private void createAndTestLabel(String content, String caption) {
+        Label l = new Label(content);
+        if (caption != null) {
+            l.setCaption(caption);
+        }
+        Element e = ctx.createElement(l);
+        assertEquals("Wrong tag name for label.", "v-label", e.tagName());
+        if (content != null) {
+            assertEquals("Unexpected content in the v-label element.", content,
+                    e.html());
+        } else {
+            assertTrue("Unexpected content in the v-label element.",
+                    e.html() == null || "".equals(e.html()));
+        }
+        if (caption != null) {
+            assertEquals("Wrong caption in the v-label element.", caption,
+                    e.attr("caption"));
+        } else {
+            assertTrue("Unexpected caption in the v-label element.",
+                    e.attr("caption") == null || "".equals(e.attr("caption")));
+        }
+    }
+}
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/server/component/panel/TestReadDesign.java b/server/tests/src/com/vaadin/tests/server/component/panel/TestReadDesign.java
new file mode 100644
index 0000000000..3eb52309a8
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/panel/TestReadDesign.java
@@ -0,0 +1,98 @@
+/*
+ * Copyright 2000-2014 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.server.component.panel;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.Panel;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.declarative.DesignContext;
+import com.vaadin.ui.declarative.DesignException;
+
+/**
+ * Test case for reading the attributes of a Panel from design.
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestReadDesign extends TestCase {
+    DesignContext ctx;
+
+    @Override
+    public void setUp() {
+        ctx = new DesignContext();
+    }
+
+    public void testAttributes() {
+        Element design = createDesign();
+        Panel panel = new Panel();
+        panel.readDesign(design, ctx);
+        assertEquals("A panel", panel.getCaption());
+        assertEquals(2, panel.getTabIndex());
+        assertEquals(10, panel.getScrollLeft());
+        assertEquals(20, panel.getScrollTop());
+        assertEquals(200f, panel.getWidth());
+        assertEquals(150f, panel.getHeight());
+    }
+
+    public void testChild() {
+        Element design = createDesign();
+        Panel panel = new Panel();
+        panel.readDesign(design, ctx);
+        VerticalLayout vLayout = (VerticalLayout) panel.getContent();
+        assertEquals(300f, vLayout.getWidth());
+        assertEquals(400f, vLayout.getHeight());
+    }
+
+    public void testWithMoreThanOneChild() {
+        Element design = createDesign();
+        // Add a new child to the panel element. An exception should be
+        // thrown when parsing the design.
+        Element newChild = new Element(Tag.valueOf("v-horizontal-layout"), "");
+        design.appendChild(newChild);
+        Panel panel = new Panel();
+        try {
+            panel.readDesign(design, ctx);
+            fail("Parsing a design containing a Panel with more than one child component should have failed.");
+        } catch (DesignException e) {
+            // Nothing needs to be done, this is the expected case.
+        }
+    }
+
+    /*
+     * Creates an html document that can be parsed into a valid component
+     * hierarchy.
+     */
+    private Element createDesign() {
+        // Create a node defining a Panel
+        Element panelElement = new Element(Tag.valueOf("v-panel"), "");
+        panelElement.attr("caption", "A panel");
+        panelElement.attr("tabindex", "2");
+        panelElement.attr("scroll-left", "10");
+        panelElement.attr("scroll-top", "20");
+        panelElement.attr("width", "200px");
+        panelElement.attr("height", "150px");
+        // Add some content to the panel
+        Element layoutElement = new Element(Tag.valueOf("v-vertical-layout"),
+                "");
+        layoutElement.attr("width", "300px");
+        layoutElement.attr("height", "400px");
+        panelElement.appendChild(layoutElement);
+        return panelElement;
+    }
+}
\ No newline at end of file
diff --git a/server/tests/src/com/vaadin/tests/server/component/panel/TestWriteDesign.java b/server/tests/src/com/vaadin/tests/server/component/panel/TestWriteDesign.java
new file mode 100644
index 0000000000..f81193d511
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/panel/TestWriteDesign.java
@@ -0,0 +1,71 @@
+/*
+ * Copyright 2000-2014 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.server.component.panel;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.Panel;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for writing the attributes and the child element of a Panel to a
+ * design.
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestWriteDesign extends TestCase {
+    Element panelElement;
+
+    @Override
+    public void setUp() {
+        // create a component hierarchy
+        Panel panel = new Panel("A panel");
+        panel.setId("panelId");
+        panel.setHeight("250px");
+        panel.setScrollTop(50);
+        panel.setTabIndex(4);
+        VerticalLayout vLayout = new VerticalLayout();
+        vLayout.setWidth("500px");
+        panel.setContent(vLayout);
+        // synchronize to design
+        DesignContext ctx = new DesignContext();
+        panelElement = new Element(Tag.valueOf("div"), "");
+        panel.writeDesign(panelElement, ctx);
+    }
+
+    public void testAttributes() {
+        // should have caption, id, height, scroll top and tab index
+        assertEquals(5, panelElement.attributes().size());
+        // check the values of the attributes
+        assertEquals("A panel", panelElement.attr("caption"));
+        assertEquals("panelId", panelElement.attr("id"));
+        assertEquals("250px", panelElement.attr("height"));
+        assertEquals("50", panelElement.attr("scroll-top"));
+        assertEquals("4", panelElement.attr("tabindex"));
+    }
+
+    public void testChild() {
+        // the panel element should have exactly one child, a v-vertical-layout
+        assertEquals(1, panelElement.childNodes().size());
+        Element vLayoutElement = panelElement.child(0);
+        assertEquals("v-vertical-layout", vLayoutElement.nodeName());
+        assertEquals("500px", vLayoutElement.attr("width"));
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/tabsheet/TestReadDesign.java b/server/tests/src/com/vaadin/tests/server/component/tabsheet/TestReadDesign.java
new file mode 100644
index 0000000000..f7c4f16cdc
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/tabsheet/TestReadDesign.java
@@ -0,0 +1,132 @@
+/*
+ * Copyright 2000-2014 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.server.component.tabsheet;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.server.ExternalResource;
+import com.vaadin.ui.TabSheet;
+import com.vaadin.ui.TabSheet.Tab;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case from reading TabSheet from design
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class TestReadDesign extends TestCase {
+
+    private TabSheet sheet;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        sheet = createTabSheet();
+    }
+
+    public void testChildCount() {
+        assertEquals(1, sheet.getComponentCount());
+    }
+
+    public void testTabIndex() {
+        assertEquals(5, sheet.getTabIndex());
+    }
+
+    public void testTabAttributes() {
+        Tab tab = sheet.getTab(0);
+        assertEquals("test-caption", tab.getCaption());
+        assertEquals(false, tab.isVisible());
+        assertEquals(false, tab.isClosable());
+        assertEquals(false, tab.isEnabled());
+        assertEquals("http://www.vaadin.com/test.png",
+                ((ExternalResource) tab.getIcon()).getURL());
+        assertEquals("OK", tab.getIconAlternateText());
+        assertEquals("test-desc", tab.getDescription());
+        assertEquals("test-style", tab.getStyleName());
+        assertEquals("test-id", tab.getId());
+    }
+
+    public void testSelectedComponent() {
+        TabSheet tabSheet = new TabSheet();
+        tabSheet.readDesign(createFirstTabSelectedDesign(), new DesignContext());
+        assertEquals(tabSheet.getTab(0).getComponent(),
+                tabSheet.getSelectedTab());
+    }
+
+    public void testTabContent() {
+        assertTrue("The child for the tabsheet should be textfield", sheet
+                .getTab(0).getComponent() instanceof TextField);
+    }
+
+    private TabSheet createTabSheet() {
+        TabSheet tabSheet = new TabSheet();
+        DesignContext ctx = new DesignContext();
+        Element design = createDesign();
+        tabSheet.readDesign(design, ctx);
+        return tabSheet;
+    }
+
+    private Element createDesign() {
+        // create root design
+        Attributes rootAttributes = new Attributes();
+        rootAttributes.put("tabindex", "5");
+        Element node = new Element(Tag.valueOf("v-tab-sheet"), "",
+                rootAttributes);
+        // create tab design
+        Attributes tabAttributes = new Attributes();
+        tabAttributes.put("caption", "test-caption");
+        tabAttributes.put("visible", "false");
+        tabAttributes.put("closable", "false");
+        tabAttributes.put("enabled", "false");
+        tabAttributes.put("icon", "http://www.vaadin.com/test.png");
+        tabAttributes.put("icon-alt", "OK");
+        tabAttributes.put("description", "test-desc");
+        tabAttributes.put("style-name", "test-style");
+        tabAttributes.put("id", "test-id");
+        Element tab = new Element(Tag.valueOf("tab"), "", tabAttributes);
+        // add child component to tab
+        tab.appendChild(new Element(Tag.valueOf("v-text-field"), "",
+                new Attributes()));
+        // add tab to root design
+        node.appendChild(tab);
+        return node;
+    }
+
+    private Element createFirstTabSelectedDesign() {
+        // create root design
+        Attributes rootAttributes = new Attributes();
+        Element node = new Element(Tag.valueOf("v-tab-sheet"), "",
+                rootAttributes);
+        // create tab design
+        Attributes tabAttributes = new Attributes();
+        tabAttributes.put("selected", "");
+        tabAttributes.put("caption", "test-caption");
+        Element tab = new Element(Tag.valueOf("tab"), "", tabAttributes);
+        // add child component to tab
+        tab.appendChild(new Element(Tag.valueOf("v-text-field"), "",
+                new Attributes()));
+        // add tab to root design
+        node.appendChild(tab);
+        return node;
+
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/tabsheet/TestWriteDesign.java b/server/tests/src/com/vaadin/tests/server/component/tabsheet/TestWriteDesign.java
new file mode 100644
index 0000000000..a46b33e2d6
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/tabsheet/TestWriteDesign.java
@@ -0,0 +1,109 @@
+/*
+ * Copyright 2000-2014 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.server.component.tabsheet;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.server.ExternalResource;
+import com.vaadin.ui.TabSheet;
+import com.vaadin.ui.TabSheet.Tab;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for writing TabSheet to design
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class TestWriteDesign extends TestCase {
+
+    private TabSheet sheet;
+    private Element design;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        sheet = createTabSheet();
+        design = createDesign();
+        sheet.writeDesign(design, createDesignContext());
+    }
+
+    public void testOnlyOneTab() {
+        assertEquals("There should be only one child", 1, design.children()
+                .size());
+    }
+
+    public void testAttributes() {
+        Element tabDesign = design.child(0);
+        assertEquals("5", design.attr("tabindex"));
+        assertEquals("test-caption", tabDesign.attr("caption"));
+        assertEquals("false", tabDesign.attr("visible"));
+        assertTrue(tabDesign.hasAttr("closable"));
+        assertTrue(tabDesign.attr("closable").equals("true")
+                || tabDesign.attr("closable").equals(""));
+        assertEquals("false", tabDesign.attr("enabled"));
+        assertEquals("http://www.vaadin.com/test.png", tabDesign.attr("icon"));
+        assertEquals("OK", tabDesign.attr("icon-alt"));
+        assertEquals("test-desc", tabDesign.attr("description"));
+        assertEquals("test-style", tabDesign.attr("style-name"));
+        assertEquals("test-id", tabDesign.attr("id"));
+    }
+
+    public void testContent() {
+        Element tabDesign = design.child(0);
+        Element content = tabDesign.child(0);
+        assertEquals("Tab must have only one child", 1, tabDesign.children()
+                .size());
+        assertEquals("v-text-field", content.tagName());
+    }
+
+    private Element createDesign() {
+        // make sure that the design node has old content that should be removed
+        Element node = new Element(Tag.valueOf("v-tab-sheet"), "",
+                new Attributes());
+        node.appendChild(new Element(Tag.valueOf("tab"), "", new Attributes()));
+        node.appendChild(new Element(Tag.valueOf("tab"), "", new Attributes()));
+        node.appendChild(new Element(Tag.valueOf("tab"), "", new Attributes()));
+        return node;
+    }
+
+    private DesignContext createDesignContext() {
+        return new DesignContext();
+    }
+
+    private TabSheet createTabSheet() {
+        TabSheet sheet = new TabSheet();
+        sheet.setTabIndex(5);
+        sheet.addTab(new TextField());
+        Tab tab = sheet.getTab(0);
+        tab.setCaption("test-caption");
+        tab.setVisible(false);
+        tab.setClosable(true);
+        tab.setEnabled(false);
+        tab.setIcon(new ExternalResource("http://www.vaadin.com/test.png"));
+        tab.setIconAlternateText("OK");
+        tab.setDescription("test-desc");
+        tab.setStyleName("test-style");
+        tab.setId("test-id");
+        return sheet;
+    }
+
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/textarea/TestReadDesign.java b/server/tests/src/com/vaadin/tests/server/component/textarea/TestReadDesign.java
new file mode 100644
index 0000000000..a31367008a
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/textarea/TestReadDesign.java
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2000-2014 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.server.component.textarea;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.AbstractTextField;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for reading the value of the TextField from design
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestReadDesign extends TestCase {
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    public void testValue() {
+        Element design = createDesign();
+        AbstractTextField component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals("test value", component.getValue());
+    }
+
+    private AbstractTextField getComponent() {
+        return new TextArea();
+    }
+
+    private Element createDesign() {
+        Attributes attributes = new Attributes();
+        Element node = new Element(Tag.valueOf("v-text-area"), "", attributes);
+        node.html("test value");
+        return node;
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/textarea/TestWriteDesign.java b/server/tests/src/com/vaadin/tests/server/component/textarea/TestWriteDesign.java
new file mode 100644
index 0000000000..01b0095fe9
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/textarea/TestWriteDesign.java
@@ -0,0 +1,60 @@
+/*
+ * Copyright 2000-2014 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.server.component.textarea;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.AbstractTextField;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for writing the value of the TextField to design
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestWriteDesign extends TestCase {
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    public void testSynchronizeValue() {
+        Element design = createDesign();
+        AbstractTextField component = getComponent();
+        component.setValue("test value");
+        component.writeDesign(design, ctx);
+        assertEquals("test value", design.html());
+        assertFalse(design.hasAttr("value"));
+    }
+
+    private AbstractTextField getComponent() {
+        return new TextArea();
+    }
+
+    private Element createDesign() {
+        Attributes attr = new Attributes();
+        return new Element(Tag.valueOf("v-text-area"), "", attr);
+    }
+
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/textfield/TestReadDesign.java b/server/tests/src/com/vaadin/tests/server/component/textfield/TestReadDesign.java
new file mode 100644
index 0000000000..62cb1a53bc
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/textfield/TestReadDesign.java
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2000-2014 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.server.component.textfield;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.AbstractTextField;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for reading the value of the TextField from design
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestReadDesign extends TestCase {
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    public void testValue() {
+        Element design = createDesign();
+        AbstractTextField component = getComponent();
+        component.readDesign(design, ctx);
+        assertEquals("test value", component.getValue());
+    }
+
+    private AbstractTextField getComponent() {
+        return new TextField();
+    }
+
+    private Element createDesign() {
+        Attributes attributes = new Attributes();
+        attributes.put("value", "test value");
+        Element node = new Element(Tag.valueOf("v-text-field"), "", attributes);
+        return node;
+    }
+}
diff --git a/server/tests/src/com/vaadin/tests/server/component/textfield/TestWriteDesign.java b/server/tests/src/com/vaadin/tests/server/component/textfield/TestWriteDesign.java
new file mode 100644
index 0000000000..479c94f6a8
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/textfield/TestWriteDesign.java
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2000-2014 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.server.component.textfield;
+
+import junit.framework.TestCase;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+import org.jsoup.parser.Tag;
+
+import com.vaadin.ui.AbstractTextField;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.declarative.DesignContext;
+
+/**
+ * Test case for writing the value of the TextField to design
+ * 
+ * @author Vaadin Ltd
+ */
+public class TestWriteDesign extends TestCase {
+    private DesignContext ctx;
+
+    @Override
+    protected void setUp() throws Exception {
+        super.setUp();
+        ctx = new DesignContext();
+    }
+
+    public void testSynchronizeValue() {
+        Element design = createDesign();
+        AbstractTextField component = getComponent();
+        component.setValue("test value");
+        component.writeDesign(design, ctx);
+        assertEquals("test value", design.attr("value"));
+    }
+
+    private AbstractTextField getComponent() {
+        return new TextField();
+    }
+
+    private Element createDesign() {
+        Attributes attr = new Attributes();
+        return new Element(Tag.valueOf("v-text-field"), "", attr);
+    }
+
+}