Time for action – fixing the OptionGroup example
It's time for our good deed of the day. OptionGroup has a very simple method to turn on a multiple selection mode: setMultiSelect.
- Open or import the optiongroup example in your IDE.
- Add
og.setMultiSelect(true)after instantiatingog. - Deploy and run the example.
What just happened?
Take a look at the new interface:
As you can see, now the component is displayed as an assortment of checkboxes and the getValue method (of both OptionGroup and Property) returns a Java Collection (actually a Set). This happens when we activate multiselect mode.
Note
We are not talking about Java EE, but just in case, the correct answers are:
Session beans and Message-driven beans
Have a go hero – improve the OptionGroup example
Try changing the OptionGroup example application to show a message informing whether the answer is correct or not. Here is a quick hint: cast the value to a Java Set instance.
Twin column selects
Instead of the OptionGroup component we can use TwinColSelect. We can change OptionGroup for TwinColSelect in the previous example:
TwinColSelect og = new TwinColSelect( "Two kinds of EJBs in Java EE are:", answers);
With this, we get an interesting component for selection:
.
Date/time pickers
Vaadin includes a nice date/time picker with multiple configuration options. You can add a date picker using this:
DateField dateField = new DateField("Select a date");
This will display a field to directly type the date and a button to open a convenient calendar:
The getValue method of DateField returns a java.util.Date object. You can configure the resolution of DateField. For example, to allow users select only a year, we can do this:
dateField.setResolution(Resolution.YEAR);
This will show a more restrictive component:
Note
Resolution is a Java enum that includes the YEAR, MONTH, DAY, HOUR, MINUTE, and SECOND values to use in your date pickers.
A date format can be specified using the setDateFormat method:
dateField.setDateFormat("yyyy-MM-dd");
Note
yyyy-MM-dd is the date format for the ISO 8601 standard.
Note
If you want to display the entire calendar selector (instead of the input field with the button to open a calendar) use InlineDateField.