How to make a couple of switches in Vaadin 7 to represent True / False but localized text?

Question

I need a couple of radio buttons in Vaadin 7 to represent Boolean values, where each value has a text display, such as Active and Inactive.

Answer 1

Vaadin 7

This answer addresses Vaadin 7 as asked in the Question. Please note that Vaadin 8 makes this a lot easier. See my other answer .

OptionGroup Widget

In Vaadin 7, radio buttons are treated as a single widget, an instance of OptionGroup . A widget contains several Elements , and if the individual elements selection mode is set , they are displayed as a group of radio buttons.

Product identifier versus item

I find it hard to understand that commands like addItem are a little wrong. We do not transfer the full instance of Item . Rather, we pass in an object that should serve as an identifier for the element .

The addItem command accepts the identifier of an element, generates an instance of Item and returns it to you. This is clearly documented, but it took me a while to dive. You may think you are required to track this returned item. But no, you can use the item identifier to retrieve or compare items in the Option group later.

Since we do not need to track the returned items, we can call the addItems (plural) command to use one line of code to create multiple items for multiple radio buttons.

Boolean identifier of an element

In our case, we want to use boolean values ​​as our master data. We need objects, not boolean primitives, because we go around objects. Therefore, we use the boolean class. Note that the Boolean class has a couple of convenient constants: Boolean.TRUE and Boolean.FALSE .

These Boolean objects can be used as item identifiers.

Code example

Sample code using Vaadin 7.3.2.

 this.activeCustomerRadio = new OptionGroup( "Filter By:" ); // Pass a string used as caption (title) of the group of radio buttons. this.activeCustomerRadio.addItems( Boolean.TRUE , Boolean.FALSE ); // Pass item ids to be used in constructing Item objects on our behalf. this.activeCustomerRadio.setItemCaption( Boolean.TRUE , "Active" ); // Specify a textual label rather than default generated value "true" & "false". this.activeCustomerRadio.setItemCaption( Boolean.FALSE , "Inactive" ); this.activeCustomerRadio.setValue( Boolean.FALSE ); // Specify which radio button is selected by default. // Add a listener to react to user selection. this.activeCustomerRadio.addValueChangeListener( new Property.ValueChangeListener() { @Override public void valueChange ( Property.ValueChangeEvent event ) { Notification.show( "Radio Button" , "You chose: " + event.getProperty().getValue().toString() , Notification.Type.HUMANIZED_MESSAGE ); } } ); 

Lambda syntax

By the way ... In Java 8, you can use the new alternative lambda syntax . NetBeans 8 will suggest and do the conversion to lambda syntax if you wish.

 this.activeSupplierRadio.addValueChangeListener(( Property.ValueChangeEvent event ) -> { Notification.show( "Radio Button" , "You chose: " + event.getProperty().getValue().toString() , Notification.Type.HUMANIZED_MESSAGE ); }); 

Answer 2

TL; DR

Much easier in Vaadin 8.

 radios.setItems( Boolean.TRUE , Boolean.FALSE ); 

... and ...

 radios.setItemCaptionGenerator( ( ItemCaptionGenerator < Boolean > ) item -> { return item ? "Active" : "Inactive"; // Alternate labels. } ); 

Vaadin 8

Vaadin 8 is much simpler and more intuitive!

Vaadin 8 offers a new simplified data model , using modern Java features to eliminate the Container interface that completes your content in the old data model .

Java Generics support means the radio button widget knows the type of your content elements. In this question, this type is a Boolean class.

 RadioButtonGroup < Boolean > radios = new RadioButtonGroup <>( "T/F:" ); 

transmit objects to be represented by radio buttons

Now we just throw our objects into the widget, for example RadioButtonGroup . In the case of this question, we throw a couple of Boolean objects, the predefined constants Boolean.TRUE and Boolean.FALSE . Reorder the arguments to change the order of the switches presented to the user.

 radios.setItems( Boolean.TRUE , Boolean.FALSE ); 

To pre-select one of the switches, simply refer to the desired object of the object. Here it will be either a constant, or Boolean.TRUE or Boolean.FALSE .

 radios.setValue( Boolean.FALSE ); 

As for the shortcuts that we present to the user for each switch, by default each object of the object has its own toString method. For us, this means that true and false will be the text used for the radio button labels.

Tagging

Our question here requires alternative labeling of our switches, for example localization . Therefore, we call setItemCaptionGenerator and pass the small generator we write to create a string for each switch.

Our generator uses a ternary operator convenient for a conditional based on a Boolean value. Remember that in the following code, a item is a Boolean object.

 radios.setItemCaptionGenerator( new ItemCaptionGenerator < Boolean >( ) { @Override public String apply ( Boolean item ) { return item ? "vrai" : "faux"; // French for "true"/"false". } } ); 

Or use lambda syntax.

 radios.setItemCaptionGenerator( ( ItemCaptionGenerator < Boolean > ) item -> { return item ? "vrai" : "faux"; // French for "true"/"false". } ); 

Here is a screenshot of the same Boolean objects that show tags in French.

In particular, it is requested in the question "Active" and "Inactive".

 radios.setItemCaptionGenerator( ( ItemCaptionGenerator < Boolean > ) item -> { return item ? "Active" : "Inactive"; // Alternate labels. } ); 

Response to user request

You may want to answer when the user wants to press the switch. Add a value change listener. Pay attention to how we are informed about the object located behind the element selected by the user, and not the text of the label we created. Calling event.getValue( ) returns a Boolean type without the need for casting due to Java Generics. Here, the code knows that the radio buttons represent Boolean objects, not just text.

 radios.addValueChangeListener( new HasValue.ValueChangeListener < Boolean >( ) { @Override public void valueChange ( HasValue.ValueChangeEvent < Boolean > event ) { Notification.show( "User chose: " + event.getValue( ) , Notification.Type.TRAY_NOTIFICATION ); } } ); 

Or use lambda syntax.

 radios.addValueChangeListener( ( HasValue.ValueChangeListener < Boolean > ) event -> Notification.show( "User chose: " + event.getValue( ) , Notification.Type.TRAY_NOTIFICATION ) ); 

Whole example

Here is a complete working example in a single class file.

 package com.example.vaadin.radio; import javax.servlet.annotation.WebServlet; import com.vaadin.annotations.Theme; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.data.HasValue; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinServlet; import com.vaadin.ui.*; /** * This UI is the application entry point. A UI may either represent a browser window * (or tab) or some part of a html page where a Vaadin application is embedded. * <p> * The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be * overridden to add component to the user interface and initialize non-component functionality. */ @Theme ( "mytheme" ) public class MyUI extends UI { @Override protected void init ( VaadinRequest vaadinRequest ) { final VerticalLayout layout = new VerticalLayout( ); RadioButtonGroup < Boolean > radios = new RadioButtonGroup <>( "T/F:" ); radios.setItems( Boolean.TRUE , Boolean.FALSE ); radios.setValue( Boolean.FALSE ); radios.setItemCaptionGenerator( ( ItemCaptionGenerator < Boolean > ) item -> { return item ? "vrai" : "faux"; // French for "true"/"false". } ); radios.addValueChangeListener( new HasValue.ValueChangeListener < Boolean >( ) { @Override public void valueChange ( HasValue.ValueChangeEvent < Boolean > event ) { Notification.show( "User chose: " + event.getValue( ) , Notification.Type.TRAY_NOTIFICATION ); } } ); layout.addComponent( radios ); setContent( layout ); } @WebServlet ( urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true ) @VaadinServletConfiguration ( ui = MyUI.class, productionMode = false ) public static class MyUIServlet extends VaadinServlet { } } 

More details

See the manual for the radio button .

In Sampler < > / a>.

See What's New at Vaadin .