Docs

Documentation versions (currently viewingVaadin 8)

Vaadin 8 reached End of Life on February 21, 2022. Discover how to make your Vaadin 8 app futureproof →

Client-Side Module Descriptor

Client-side Vaadin modules, such as the Vaadin Client-Side Engine (widget set) or pure client-side applications, that are to be compiled to JavaScript, are defined in a module descriptor ( .gwt.xml) file.

When defining a widget set to build the Vaadin client-side engine, the only necessary task is to inherit a base widget set. If you are developing a regular widget set, you should normally inherit the DefaultWidgetSet.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC
  "-//Google Inc.//DTD Google Web Toolkit 2.8.2//EN"
  "http://www.gwtproject.org/doctype/2.8.2/gwt-module.dtd">

<module>
    <!-- Inherit the default widget set -->
    <inherits name="com.vaadin.DefaultWidgetSet" />
</module>

If you are developing a pure client-side application, you should instead inherit com.vaadin.Vaadin, as described in "Client-Side Applications". In that case, the module descriptor also needs an entry-point.

If you are using the Eclipse IDE, the New Vaadin Widget wizard will automatically create the GWT module descriptor. See "Creating a Widget" for detailed instructions.

Specifying a Stylesheet

A client-side module can include CSS stylesheets. When the module is compiled, these stylesheets are copied to the output target. In the module descriptor, define a stylesheet element.

For example, if you are developing a custom widget and want to have a default stylesheet for it, you could define it as follows:

<stylesheet src="mywidget/styles.css"/>

The specified path is relative to the public folder under the folder of the module descriptor.

Limiting Compilation Targets

Compiling widget sets takes considerable time. You can reduce the compilation time significantly by compiling the widget sets only for your browser, which is useful during development. You can do this by setting the user.agent property in the module descriptor.

<set-property name="user.agent" value="gecko1_8"/>

The value attribute should match your browser. The browsers supported by GWT depend on the GWT version, below is a list of browser identifiers supported by GWT.

Table 1. GWT User Agents
Identifier Name

ie6

Internet Explorer 6

ie8

Internet Explorer 8

gecko1_8

Mozilla Firefox 1.5 and later

safari

Apple Safari and other Webkit-based browsers including Google Chrome

opera

Opera

ie9

Internet Explorer 9

For more information about the GWT Module XML Format, please see Google Web Toolkit Developer Guide.