Visual User Interface Design with Eclipse

Finally, click Finish to create the component.

A newly created composite component is opened in the Design window, as shown in Figure 7.1, “New Composite Component”.

Figure 7.1. New Composite Component

You can observe that a component that you can edit with the visual designer has two tabs at the bottom of the view: Source and Design. These tabs allow switching between the source view and the visual design view.

If you later open the source file for editing, the Source and Design tabs should appear below the source editor. If they do not, right-click the file in the Project Explorer and select Open With.

7.3. Using The Visual Designer

The visual editor view consists of, on the left side, an editing area that displays the current layout and, on the right side, a control panel that contains a component list for selecting new components to add, the current component tree, and a component property panel.

214	Using The Visual Designer

Visual User Interface Design with Eclipse

7.3.1. Adding New Components

Adding new components to the user interface is done as follows by dragging them from the component list to either the editing area or to the component tree. If you drag the components to the tree,

1.Select which components are shown in the component list by entering a search string or by expanding the filters and selecting only the desired component categories.

2.Drag a component from the component list to either:

a.Editing area, where you can easily move and resize the component. Dragging a component onto a layout component will add it in it and you can also position components within a layout by dragging them.

b.Component tree. Remember that you can only add components under a layout component or other component container.

3.Edit the component properties

a.In the editing area, you can move and resize the components, and set their alignment in the containing layout.

b.In the property panel, you can set the component name, size, position and other properties.

Figure 7.2. Adding a New Component Node

You can delete a component by right-clicking it in the component tree and selecting Remove. The context menu also allows copying and pasting components.

A composite component created by the plugin must have a AbsoluteLayout as its root layout. While it is suitable for the visual designer, absolute layouts are rarely used otherwise in Vaadin applications. If you want to use another root layout, you can add another layout inside the mainLayout and set that as the root with setCompositionRoot() in the source view. It will be used as the root when the component is actually used in an application.

Adding New Components

215