- Vaadin 7 UI Design By Example:Beginner’s Guide
- Alejandro Duarte
- 355字
- 2021-08-13 16:17:42
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
.
- 計(jì)算思維與算法入門(mén)
- 復(fù)雜軟件設(shè)計(jì)之道:領(lǐng)域驅(qū)動(dòng)設(shè)計(jì)全面解析與實(shí)戰(zhàn)
- 造個(gè)小程序:與微信一起干件正經(jīng)事兒
- Learning Spring 5.0
- Mastering Entity Framework
- Linux環(huán)境編程:從應(yīng)用到內(nèi)核
- 手把手教你學(xué)C語(yǔ)言
- PhoneGap:Beginner's Guide(Third Edition)
- Spring Boot企業(yè)級(jí)項(xiàng)目開(kāi)發(fā)實(shí)戰(zhàn)
- Mastering Android Development with Kotlin
- Java:High-Performance Apps with Java 9
- 區(qū)塊鏈技術(shù)進(jìn)階與實(shí)戰(zhàn)(第2版)
- IPython Interactive Computing and Visualization Cookbook
- 實(shí)戰(zhàn)Python網(wǎng)絡(luò)爬蟲(chóng)
- SQL Server on Linux