Table of Contents
This chapter provides instructions for developing the graphical user interface of Vaadin components with the Vaadin Plugin for the Eclipse IDE.
The visual designer feature in the Vaadin Plugin for Eclipse allows you to design the user interface of an entire application or of specific composite components. The plugin generates the actual Java code, which is designed to be reusable, so you can design the basic layout of the user interface with the visual designer and build the user interaction logic on top of the generated code. You can use inheritance and composition to modify the components further.
The designer works with classes that extend the
CustomComponent class, which is the basic technique in
Vaadin for creating composite components. Component composition is described
in Section 5.23, “Component Composition with CustomComponent”. Any
CustomComponent will not do for the visual designer;
you need to create a new one as instructed below.
For instructions on installing the Eclipse plugin, see Section 2.2.1, “Vaadin Plugin for Eclipse”.
You can use a composite component as you would use any Vaadin
component. Just remember that the component as well as its root layout,
which is an AbsoluteLayout, are 100% wide and high
by default. A component with full size (expand-to-fit container) may not
be inside a layout with undefined size (shrink-to-fit content). The
default root layout for Window is a
VerticalLayout, which by default has undefined
height, so you have to set it explicitly to a defined size, usually to
full (100%) height.
public class MyApplication extends Application {
public void init() {
Window mainWindow = new Window("My Application");
setMainWindow(mainWindow);
// Needed because composites are full size
mainWindow.getContent().setSizeFull();
MyComposite myComposite = new MyComposite();
mainWindow.addComponent(myComposite);
}
}
You could also set the size of the root layout of the composite to a fixed
height (in component properties in the visual editor). An
AbsoluteLayout may not have undefined size.