Managing Layout

/* Alternative 2: CSS rules to be enabled in code */

.v-verticallayout-margin-left {padding-left: ___px;}

.v-verticallayout-margin-right {padding-right: ___px;}

.v-verticallayout-margin-top {padding-top: ___px;}

.v-verticallayout-margin-bottom {padding-bottom: ___px;}

6.14. Custom Layouts

While it is possible to create almost any typical layout with the standard layout components, it is sometimes best to separate the layout completely from code.With the CustomLayout component, you can write your layout as a template in XHTML that provides locations of any contained components. The layout template is included in a theme. This separation allows the layout to be designed separately from code, for example using WYSIWYG web designer tools such as Adobe Dreamweaver.

A template is a HTML file located under layouts folder under a theme folder under the

W e b C o n t e n t / V A A D I N / t h e m e s / f o l d e r , f o r e x a m p l e ,

WebContent/VAADIN/themes/themename/layouts/mylayout.html. (Notice that the root path WebContent/VAADIN/themes/ for themes is fixed.) A template can also be provided dynamically from an InputStream, as explained below. A template includes <div> elements with a location attribute that defines the location identifier. All custom layout HTML-files must be saved using UTF-8 character encoding.

<table width="100%" height="100%"> <tr height="100%">

<td>

<table align="center"> <tr>

<td align="right">User name:</td> <td><div location="username"></div></td>

</tr>

<tr>

<td align="right">Password:</td> <td><div location="password"></div></td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="right" colspan="2">

<div location="okbutton"></div> </td>

</tr>

</table>

The client-side engine of Vaadin will replace contents of the location elements with the components. The components are bound to the location elements by the location identifier given to addComponent(), as shown in the example below.

//Have a Panel where to put the custom layout. Panel panel = new Panel("Login"); panel.setSizeUndefined(); main.addComponent(panel);

//Create custom layout from "layoutname.html" template. CustomLayout custom = new CustomLayout("layoutname"); custom.addStyleName("customlayoutexample");

//Use it as the layout of the Panel. panel.setContent(custom);

//Create a few components and bind them to the location tags

Custom Layouts

209

Managing Layout

// in the custom layout.

TextField username = new TextField(); custom.addComponent(username, "username");

TextField password = new TextField(); custom.addComponent(password, "password");

Button ok = new Button("Login"); custom.addComponent(ok, "okbutton");

The resulting layout is shown below in Figure 6.26, “Example of a Custom Layout Component”.

Figure 6.26. Example of a Custom Layout Component

You can use addComponent() also to replace an existing component in the location given in the second parameter.

In addition to a static template file, you can provide a template dynamically with the CustomLayout constructor that accepts an InputStream as the template source. For example:

new CustomLayout(new ByteArrayInputStream("<b>Template</b>".getBytes()));

or

new CustomLayout(new FileInputStream(file));

210	Custom Layouts

Chapter 7

Visual User

Interface Design

with Eclipse

7.1. Overview ................................................................................................	211
7.2. Creating a New Composite ....................................................................	212
7.3. Using The Visual Designer ....................................................................	214
7.4. Structure of a Visually Editable Component ..........................................	220

This chapter provides instructions for developing the graphical user interface of Vaadin components with the Vaadin Plugin for the Eclipse IDE.

Because of pressing release schedules to get this edition to your hands, we were unable to completely update this chapter. The content is up-to-date with Vaadin 7 to a large extent, but some topics still describe Vaadin 6 and require revision. Please consult the web version once it is updated, or the next print edition.

7.1. Overview

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 in-

Book of Vaadin

211

Visual User Interface Design with Eclipse

terface 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.22, “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.4, “Installing Vaadin Plugin for Eclipse”.

Using a Composite Component

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.

7.2. Creating a New Composite

If the Vaadin Plugin is installed in Eclipse, you can create a new composite component as follows.

1.	Select File	New Other... in the main menu or right-click the Project Explorer and
	select New	Other... to open the New window.
2.	In the first, Select a wizard step, select Vaadin Vaadin Composite and click Next.

212	Using a Composite Component

Visual User Interface Design with Eclipse

3.The Source folder is the root source directory where the new component will be created. This is by default the default source directory of your project.

Enter the Java Package under which the new component class should be created or select it by clicking the Browse button. Also enter the class Name of the new component.

Creating a New Composite

213