User Interface Components

5.11.4. DateField Locale

The date and time are displayed according to the locale of the user, as reported by the browser. You can set a custom locale with the setLocale() method of AbstractComponent, as described in Section 5.3.5, “Locale”. Only Gregorian calendar is supported.

5.12. Button

The Button is a user interface component that is normally used for finalizing input and initiating some action. When the user clicks a button, a Button.ClickEvent is emitted. A listener that inherits the Button.ClickListener interface can handle clicks with the buttonClick() method.

public class TheButton extends CustomComponent implements Button.ClickListener {

Button thebutton;

public TheButton() {

//Create a Button with the given caption. thebutton = new Button ("Do not push this button");

//Listen for ClickEvents. thebutton.addListener(this);

setCompositionRoot(thebutton);

}

/** Handle click events for the button. */

public void buttonClick (Button.ClickEvent event) { thebutton.setCaption ("Do not push this button again");

}

}

Figure 5.34. An Example of a Button

As a user interface often has several buttons, you can differentiate between them either by comparing the Button object reference returned by the getButton() method of Button.ClickEvent to a kept reference or by using a separate listener method for each button. The listening object and method can be given to the constructor. For a detailed description of these patterns together with some examples, please see Section 3.4, “Events and Listeners”.

CSS Style Rules

.v-button { }

The exact CSS style name can be different if a Button has the switchMode attribute enabled. See the alternative CSS styles below.

Adding the "small" style name enables a smaller style for the Button. You can also use the BUTTON_SMALL constant in Runo and Reindeer theme classes as well. The BaseTheme class also has a BUTTON_LINK style, with "link" style name, which makes the button look like a hyperlink.

DateField Locale

125

User Interface Components

5.13. CheckBox

CheckBox is a two-state selection component that can be either checked or unchecked. The caption of the check box will be placed right of the actual check box. Vaadin provides two ways to create check boxes: individual check boxes with the CheckBox component described in this section and check box groups with the OptionGroup component in multiple selection mode, as described in Section 5.14.5, “Radio Button and Check Box Groups with OptionGroup”.

Clicking on a check box will change its state. The state is a Boolean property that you can set with the setValue() method and obtain with the getValue() method of the Property interface. Changing the value of a check box will cause a ValueChangeEvent, which can be handled by a ValueChangeListener.

//A check box with default state (not checked, false). final CheckBox checkbox1 = new CheckBox("My CheckBox"); main.addComponent(checkbox1);

//Another check box with explicitly set checked state. final CheckBox checkbox2 = new CheckBox("Checked CheckBox"); checkbox2.setValue(true);

main.addComponent(checkbox2);

//Make some application logic. We use anonymous listener

//classes here. The above references were defined as final

//to allow accessing them from inside anonymous classes. checkbox1.addListener(new ValueChangeListener() {

public void valueChange(ValueChangeEvent event) {

//Copy the value to the other checkbox. checkbox2.setValue(checkbox1.getValue());

}

});

checkbox2.addListener(new ValueChangeListener() { public void valueChange(ValueChangeEvent event) {

// Copy the value to the other checkbox. checkbox1.setValue(checkbox2.getValue());

}

});

Figure 5.35. An Example of a Check Box

For an example on the use of check boxes in a table, see Section 5.15, “Table”.

CSS Style Rules

.v-checkbox { }

.v-checkbox > input { }

.v-checkbox > label { }

The top-level element of a CheckBox has the v-checkbox style. It contains two sub-elements: the actual check box input element and the label element. If you want to have the label on the left, you can change the positions with "direction: rtl" for the top element.

126

CheckBox