Client-Side Vaadin Development

The compiler writes the compilation result to a target folder that will include the compiled JavaScript with any static resources included in the module.

13.4.2. Compiling in Eclipse

When the Vaadin Plugin is installed in Eclipse, you can simply click the Compile Vaadin widgets button in the toolbar. It will compile the widget set it finds from the project. If the project has multiple widget sets, such as one for custom widgets and another one for the project, you need to select the module descriptor of the widget set to compile before clicking the button.

The compilation with Vaadin Plugin for Eclipse currently requires that the module descriptor has suffix Widgetset.gwt.xml, although you can use it to compile also other client-side modules than widget sets. The result is written under WebContent/VAADIN/widgetsets folder.

13.4.3. Compiling with Ant

You can find a script template for compiling widget sets with Ant and Ivy at the Vaadin download page [http://vaadin.com/download/]. You can copy the build script to your project and, once configured, run it with Ant.

13.4.4. Compiling with Maven

You can compile the widget set with the vaadin:compile goal as follows:

$ mvn vaadin:compile

13.5. Creating a Custom Widget

Creating a new Vaadin component begins from a client-side widget, which is later integrated with a server-side counterpart to enable server-side development. In addition, you can also choose to make pure client-side widgets, a possibility which we also describe later in this section.

13.5.1. A Basic Widget

All widgets extend the Widget class or some of its subclasses. You can extend any core GWT or supplementary Vaadin widgets. Perhaps typically, an abstraction such as Composite. The basic GWT widget component hierarchy is illustrated in Figure 13.1, “GWT Widget Base Class Hierarchy” .