Integrating with the Server-Side

//Preparations for the added feature final VOverlay warning = new VOverlay();

warning.add(new HTML("Caps Lock is enabled!"));

//Add an event handler

pw.addDomHandler(new KeyPressHandler() {

public void onKeyPress(KeyPressEvent event) { if (isEnabled() && isCapsLockOn(event)) {

warning.showRelativeTo(passwordWidget); } else {

warning.hide();

}

}

}, KeyPressEvent.getType());

}

private boolean isCapsLockOn(KeyPressEvent e) { return e.isShiftKeyDown() ^

Character.isUpperCase(e.getCharCode());

}

}

The extend() method gets the connector of the extended component as the parameter, in the above example a PasswordFieldConnector. It can access the widget with the getWidget().

An extension connector needs to be included in a widget set.The class must therefore be defined under the client package of a widget set, just like with component connectors.

16.8. Styling a Widget

To make your widget look stylish, you need to style it. There are two basic ways to define CSS styles for a component: in the widget sources and in a theme. A default style should be defined in the widget sources, and different themes can then modify the style.

16.8.1. Determining the CSS Class

The CSS class of a widget element is normally defined in the widget class and set with setStyleName(). A widget should set the styles for its sub-elements as it desires.

For example, you could style a composite widget with an overall style and with separate styles for the sub-widgets as follows:

public class MyPickerWidget extends ComplexPanel { public static final String CLASSNAME = "mypicker";

private final TextBox textBox = new TextBox();

private final PushButton button = new PushButton("...");

public MyPickerWidget() { setElement(Document.get().createDivElement()); setStylePrimaryName(CLASSNAME);

textBox.setStylePrimaryName(CLASSNAME + "-field"); button.setStylePrimaryName(CLASSNAME + "-button");

add(textBox, getElement()); add(button, getElement());

button.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) {

Window.alert("Calendar picker not yet supported!");

}

Styling a Widget

371