Client-Side Widgets

The layout of the client-side UI is managed with panel widgets, which correspond in their function with layout components in the Vaadin server-side API.

In addition to the rendering API, the client-side API includes facilities for making HTTP requests, logging, accessibility, internationalization, and testing.

For information about the basic GWT framework, please refer to https://de- velopers.google.com/web-toolkit/overview.

15.2. GWT Widgets

GWT widgets are user interface elements that are rendered as HTML. Rendering is done by manipulating the HTML Document Object Model (DOM) through the lower-level DOM API, or simply by injecting the HTML with setInnerHTML().The layout of the user interface is managed using special panel widgets.

For information about the basic GWT widgets, please refer to the GWT Developer's Guide at ht- tps://developers.google.com/web-toolkit/doc/latest/DevGuideUi.

15.3. Vaadin Widgets

Vaadin comes with a number of Vaadin-specific widgets in addition to the GWT widgets, some of which you can use in pure client-side applications.The Vaadin widgets have somewhat different feature set from the GWT widgets and are foremost intended for integration with the server-side components, but some may prove useful for client-side applications as well.

public class MyEntryPoint implements EntryPoint { @Override

public void onModuleLoad() { // Add a Vaadin button

VButton button = new VButton(); button.setText("Click me!"); button.addClickHandler(new ClickHandler() {

@Override

public void onClick(ClickEvent event) { mywidget.setText("Clicked!");

}

});

RootPanel.get().add(button);

}

}

358	GWT Widgets

Chapter 16

Integrating with the Server-Side

16.1. Overview ..............................................................................................	359
16.2. Starting It Simple With Eclipse ............................................................	361
16.3. Creating a Server-Side Component ....................................................	364
16.4. Integrating the Two Sides with a Connector .........................................	364
16.5. Shared State ........................................................................................	366
16.6. RPC Calls Between Clientand Server-Side .......................................	368
16.7. Component and UI Extensions ............................................................	369
16.8. Styling a Widget ...................................................................................	371
16.9. Component Containers ........................................................................	372
16.10. Creating Add-ons ...............................................................................	372
16.11. Migrating from Vaadin 6 .....................................................................	377
16.12. Integrating JavaScript Components and Extensions .........................	378

This chapter describes how you can integrate client-side widgets or JavaScript components with a server-side component.The client-side implementations of all standard server-side components in Vaadin use the same client-side interfaces and patterns.

16.1. Overview

Vaadin components consist of two parts: a server-side and a client-side component. The latter are also called widgets in Google Web Toolkit (GWT) parlance. A Vaadin application uses the

Book of Vaadin

359

Integrating with the Server-Side

API of the server-side component, which is rendered as a client-side widget in the browser. As on the server-side, the client-side widgets form a hierarchy of layout widgets and regular widgets as the leaves.

Figure 16.1. Integration of Client-Side Widgets

360

Overview