Client-Side Vaadin Development

Figure 13.1. GWT Widget Base Class Hierarchy

For example, we could extend the Label widget to display some custom text.

package com.example.myapp.client;

import com.google.gwt.user.client.ui.Label;

public class MyWidget extends Label {

public static final String CLASSNAME = "mywidget";

public MyWidget() { setStyleName(CLASSNAME); setText("This is MyWidget");

}

}

The above example is largely what the Eclipse plugin generates as a widget stub. It is a good practice to set a distinctive style class for the widget, to allow styling it with CSS.

The client-side source code must be contained in a client package under the package of the descriptor file, which is covered later.

13.5.2. Using the Widget

You can use a custom widget just like you would use any widget.

public class MyEntryPoint implements EntryPoint { @Override

public void onModuleLoad() { // Use the custom widget

final MyWidget mywidget = new MyWidget(); RootPanel.get().add(mywidget);

}

}

13.6. Debugging Client-Side Code

Vaadin includes two application execution modes for debugging client-side code.The Development Mode compiles the client-side module when you load the page and runs it in the browser, using a browser plugin to communicate with the debugger. The "SuperDevMode" allows debugging the code right in the browser, without even need to install a plugin.

Using the Widget

347