Client-Side Vaadin Development

is a member of the GWT Steering Committee, working on the future direction of GWT together with Google and other supporters of GWT.

Widgets and Components

Google Web Toolkit uses the term widget for user interface components. In this book, we use the term widget to refer to client-side components, while using the term component in a general sense and also in the special sense for server-side components.

The main idea in server-side Vaadin development is to render the server-side components in the browser with the Client-Side Engine. The engine is essentially a set of widgets paired with connectors that serialize their state and events with the server-side counterpart components. The client-side engine is technically called a widget set, to describe the fact that it mostly consists of widgets and that widget sets can be combined, as described later.

13.2. Installing the Client-Side Development Environment

The installation of the client-side development libraries is described in Chapter 2, Getting Started with Vaadin. You especially need the vaadin-client library, which contains the client-side Java API, and vaadin-client-compiler, which contains the Vaadin Client Compiler for compiling Java to JavaScript.

13.3. Client-Side Module Descriptor

Client-side Vaadin modules, such as the Vaadin Client-Side Engine (widget set) or pure clientside 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 1.7.0//EN"

"http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/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 Chapter 14, 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 Section 16.2.1, “Creating a Widget” for detailed instructions.

13.3.1. 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.

344	Installing the Client-Side Development Environment