Vaadin Designer Not an Editable Custom Component

New to using Vaadin and I wanted to use the designer to modify the default page given when creating a vaadin project.

However I keep getting this error: 'Could not open design view: Failed to parse visually editable class caused by Not an editable CustomComponent'

The code is as follows:

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@SuppressWarnings("serial")
@Theme("timekeeper")
public class TimekeeperUI extends UI {

    VerticalLayout layout = new VerticalLayout();

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = TimekeeperUI.class)
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {
        layout.setMargin(true);
        setContent(layout);
    }

}

I think I have the xulrunner installed correctly as I'm not getting this error when I start up eclipse.

Any help appreciated.