Файл: book-of-vaadin.pdf

Themes

}

}

is compiled as:

.v-app {

background: yellow;

}

.v-app .mybutton { font-style: italic;

}

.v-app .mybutton .v-button-caption { color: blue;

}

Mixins

Mixins are rules that can be included in other rules. You define a mixin rule by prefixing it with the @mixin keyword and the name of the mixin. You can then use @include to apply it to another rule. You can also pass parameters to it, which are handled as local variables in the mixin.

For example:

@mixin mymixin { background: yellow;

}

@mixin othermixin($param) { margin: $param;

}

.v-button-caption { @include mymixin;

@include othermixin(10px);

}

The above SCSS would translated to the following CSS:

.v-button-caption { background: yellow; margin: 10px;

}

You can also have nested rules in a mixin, which makes them especially powerful.

Vaadin themes are defined as mixins to allow use of multiple themes.

8.3.2. Sass Basics with Vaadin

We are not going to give in-depth documentation of Sass and refer you to its excellent documentation at http://sass-lang.com/. In the following, we give just basic introduction to using it with Vaadin.

You can create a new Sass-based theme with the Eclipse plugin, as described in Section 8.5, “Creating a Theme in Eclipse”.

Themes

8.3.3. Compiling On the Fly

The easiest way to use Sass themes is to let the Vaadin servlet compile them on the run. In this case, the SCSS source files are placed in the theme folder.

The on-the-fly compilation takes a bit time, so it is only available when the Vaadin servlet is in the development mode, as described in Section 4.8.4, “Other Deployment Parameters”. For production, you should compile the theme to CSS.

8.3.4. Compiling Sass to CSS

Sass style sheets can be compiled to CSS, with the styles.css of a custom theme as the compilation target. When compiled before deployment, the source files do not need to be in the theme folder.

java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css

The -cp parameter should point to the class path where the Vaadin JARs are located. In the above example, they are assumed to be locate in the WEB-INF/lib folder of the web application.

If you have loaded the Vaadin libraries using Ivy, as is the case with projects created with the Vaadin Plugin for Eclipse, the Vaadin libraries are stored in Ivy's local repository. Its folder hierarchy is somewhat scattered, so we recommend that you retrieve the libraries to a single folder. With Apache Ant, you can do that with an Ivy task as shown in the following example:

<project xmlns:ivy="antlib:org.apache.ivy.ant">

...

<target name="resolve" depends="init"> <ivy:retrieve

pattern="${result-dir}/lib/[module]-[type]-[artifact]-[revision].[ext]"/> </target>

</project>

8.4. Creating and Using Themes

Custom themes are placed in the VAADIN/themes folder of the web application (in an Eclipse project under the WebContent folder), as was illustrated in Figure 8.1, “Contents of a Theme”. This location is fixed.You need to have a theme folder for each theme you use in your application, although applications rarely need more than a single theme.

8.4.1. Sass Themes

You can use Sass themes in Vaadin in two ways, either by compiling them to CSS by yourself or by letting the Vaadin servlet compile them for you on-the-fly when the theme CSS is requested by the browser.

To define a Sass theme with the name mytheme, you must place a file with name styles.scss in the theme folder VAADIN/themes/mytheme. If no styles.css exists in the folder, the Sass file is compiled on-the-fly when the theme is requested by a browser.

We recommend that you organize the theme in at least two SCSS files so that you import the actual theme from a Sass file that is named more uniquely than the styles.scss, to make it more distinquishable in the editor. This is also how the Vaadin Plugin for Eclipse creates a new theme.

Themes

All rules in a theme should be prefixed with a selector for the theme name. You can do that in Sass by enclosing the rules in a nested rule with a selector for the theme name. Themes are defined as mixins, so after you import them mixin definition, you can include them in the theme rule as follows:

@import "mytheme.scss";

.mytheme {

@include mytheme;

}

The actual theme mixin should be defined as follows:

@import "../reindeer/reindeer.scss";

@mixin mytheme { @include reindeer;

/* An actual theme rule */

.v-button { color: blue;

}

}

Built-in Themes

Vaadin includes three built-in themes:

•reindeer, the primary theme in Vaadin 6 and 7

•runo, the default theme in IT Mill Toolkit 5

•chameleon, an easily customizable alternative theme

You can find more themes as add-ons from the Vaadin Directory [http://vaadin.com/directory].

8.4.2. Plain Old CSS Themes

In addition to Sass themes, you can create plain old CSS themes. CSS theme are more restricted than Sass styles - an application can only have one CSS theme while you can have multiple Sass themes.

A CSS theme is defined in a styles.css file in the VAADIN/themes/mytheme folder. You need to import the legacy-styles.css of the built-in theme as follows:

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

.v-app {

background: yellow;

}

8.4.3. Styling Standard Components

Each user interface component in Vaadin has a CSS style class that you can use to control the appearance of the component. Some components have additional sub-elements that also allow styling.

Table 8.1, “Default CSS Style Names of Vaadin Components” lists the style classes of all Vaadin components, together with their client-side widgets. Notice that a single server-side component can have multiple client-side implementations. For example, a Button can be rendered on the

Themes

client side either as a regular button or a check box, depending on the switchMode attribute of the button. For details regarding the mapping to client-side components, see Section 13.3.1, “Specifying a Stylesheet”. Each client-side component type has its own style class and a number of additional classes that depend on the client-side state of the component. For example, a text field will have v-textfield-focus class when mouse pointer hovers over the component. This state is purely on the client-side and is not passed to the server.

Table 8.1. Default CSS Style Names of Vaadin Components

Please see the documentation of the particular components for a listing of possible sub-component styles.

Some client-side components can be shared by different server-side components. There is also the VUnknownComponent, which is a component that indicates an internal error in a situation where the server asked to render a component which is not available on the client-side.

8.4.4. Built-in Themes

Vaadin currently includes two built-in themes: reindeer and runo. The default theme in Vaadin 6 and 7 is reindeer. The runo was the default theme for IT Mill Toolkit 5 (where its name was "default").

The built-in themes are provided in the respective VAADIN/themes/reindeer/styles.css and VAADIN/themes/runo/styles.css stylesheets in the Vaadin library JAR. These stylesheets are compilations of the separate stylesheets for each component in the corresponding subdirectory. The stylesheets are compiled to a single file for efficiency: the browser needs to load just a single file.

Various constants related to the built-in themes are defined in the theme classes in com.vaadin.ui.themes package. These are mostly special style names for specific components.

@Theme("runo")

public class MyRoot extends Root { @Override

protected void init(WrappedRequest request) {

...

Panel panel = new Panel("Regular Panel in the Runo Theme"); panel.addComponent(new Button("Regular Runo Button"));

// A button with the "small" style

Button smallButton = new Button("Small Runo Button"); smallButton.addStyleName(Runo.BUTTON_SMALL);