Themes

Panel lightPanel = new Panel("Light Panel"); lightPanel.addStyleName(Runo.PANEL_LIGHT); lightPanel.addComponent(new Label("With addStyleName(\"light\")"));

...

The example with the Runo theme is shown in Figure 8.7, “Runo Theme”.

Figure 8.7. Runo Theme

Serving Built-In Themes Statically

The built-in themes included in the Vaadin library JAR are served dynamically from the JAR by the servlet. Serving themes and widget sets statically by the web server is more efficient.You only need to extract the VAADIN/ directory from the JAR under your WebContent directory. Just make sure to update it if you upgrade to a newer version of Vaadin.

Creation of a default theme for custom GWT widgets is described in Section 16.8, “Styling a Widget”.

8.4.5. Using Themes in an UI

Using a theme is simple, you just set it for a UI class with the @Theme annotation.

8.4.6. Theme Inheritance

When you define your own theme, you will need to inherit a built-in theme (unless you just copy the built-in theme, which is not recommended).

Inheritance in CSS is done with the @import statement. In the typical case, when you define your own theme, you inherit a built-in theme as follows:

@import "../reindeer/styles.css";

.v-app {

background: yellow;

}

You can even create a deep hierarchy of themes by inheritance.

8.5. Creating a Theme in Eclipse

The Eclipse plugin provides a wizard for creating custom themes. Do the following steps to create a new theme.

236	Using Themes in an UI

Themes

1.	Select File	New Other... in the main menu or right-click the Project Explorer and
	select New	Other.... A window will open.
2.	In the Select a wizard step, select the Vaadin Vaadin Theme wizard.

Click Next to proceed to the next step.

3.In the Create a new Vaadin theme step, you have the following settings:

Project (mandatory)

The project in which the theme should be created.

Theme name (mandatory)

The theme name is used as the name of the theme folder and in a CSS tag (prefixed with "v-theme-"), so it must be a proper identifier. Only latin alphanumerics, underscore, and minus sign are allowed.

Modify application classes to use theme (optional)

The setting allows the wizard to write a code statement that enables the theme in the constructor of the selected application (UI) class(es). If you need to control the theme with dynamic logic, you can leave the setting unchecked or change the generated line later.

Click Finish to create the theme.

The wizard creates the theme folder under the WebContent/VAADIN/themes folder and the actual style sheet as mytheme.scss and styles.scss files, as illustrated in Figure 8.8, “Newly Created Theme”.

Creating a Theme in Eclipse

237

Themes

Figure 8.8. Newly Created Theme

The created theme inherits a built-in base theme with an @import statement. See the explanation of theme inheritance in Section 8.4, “Creating and Using Themes”. Notice that the reindeer theme is not located in the widgetsets folder, but in the Vaadin JAR. See Section 8.4.4, “Builtin Themes” for information for serving the built-in themes.

If you selected an application class or classes in the Modify application classes to use theme in the theme wizard, the wizard will add the @Theme annotation to the application UI class.

If you later rename the theme in Eclipse, notice that changing the name of the folder will not automatically change the @Theme annotation. You need to change such references to theme names in the calls manually.

238	Creating a Theme in Eclipse

Chapter 9

Binding Components to Data

9.1. Overview ................................................................................................	239
9.2. Properties ..............................................................................................	241
9.3. Holding properties in Items ....................................................................	246
9.4. Creating Forms by Binding Fields to Items ............................................	249
9.5. Collecting Items in Containers ...............................................................	254

This chapter describes the Vaadin Data Model and shows how you can use it to bind components directly to data sources, such as database queries.

9.1. Overview

The Vaadin Data Model is one of the core concepts of the library.To allow the view (user interface components) to access the data model of an application directly, we have introduced a standard data interface.

The model allows binding user interface components directly to the data that they display and possibly allow to edit. There are three nested levels of hierarchy in the data model: property,

Book of Vaadin

239

Binding Components to Data

item, and container. Using a spreadsheet application as an analogy, these would correspond to a cell, a row, and a table, respectively.

Figure 9.1. Vaadin Data Model

The Data Model is realized as a set of interfaces in the com.vaadin.data package. The package contains the Property, Item, and Container interfaces, along with a number of more specialized interfaces and classes.

Notice that the Data Model does not define data representation, but only interfaces. This leaves the representation fully to the implementation of the containers.The representation can be almost anything, such as a plain old Java object (POJO) structure, a filesystem, or a database query.

The Data Model is used heavily in the core user interface components of Vaadin, especially the field components, that is, components that implement the Field interface or more typically extend AbstractField, which defines many common features. A key feature of all the built-in field components is that they can either maintain their data by themselves or be bound to an external data source. The value of a field is always available through the Property interface. As more than one component can be bound to the same data source, it is easy to implement various viewereditor patterns.

The relationships of the various interfaces are shown in Figure 9.2, “Interface Relationships in Vaadin Data Model”; the value change event and listener interfaces are shown only for the Property interface, while the notifier interfaces are omitted altogether.

240

Overview