Search code examples
javaradio-buttonvaadinvaadin7

How to make a pair of radio buttons in Vaadin 7 to represent True/False values but localized text?


I want a pair of radio buttons in Vaadin 7 to represent boolean values where each value has a textual display such as "Active" and "Inactive".

screen shot of radio buttons "Active" and "Inactive" in group labeled "Filter By:".


Solution

  • Vaadin 7

    This Answer addresses Vaadin 7 as asked in the Question. Note that Vaadin 8 makes this much easier. See my other Answer.

    OptionGroup Widget

    In Vaadin 7, radio buttons are handled as a single widget, an instance of OptionGroup. The widget contains multiple Items, and if set to single item selection mode, they display as a group of radio buttons.

    Item Id versus Item

    The tricky part for me was understanding that the commands such as addItem are a bit of a misnomer. We do not pass full Item instances. Rather, we pass an object that is to serve as the id of the item.

    The addItem command takes the item id, generates an Item instance and returns it to you. This is clearly documented, but took a while for me to sink in. You might think you are obligated to track that returned Item. But, no, you can use the item id to later retrieve or compare Items within the OptionGroup.

    Since we need not 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 As Item Id

    In our case, we want to use boolean values as our core data. We need objects rather than boolean primitives because we are passing around objects. So we use the Boolean class. Notice that the Boolean class a couple of handy constants: Boolean.TRUE & Boolean.FALSE.

    These Boolean objects can be used as the item ids.

    Example Code

    Some example 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 alternate Lambda syntax. NetBeans 8 will suggest and perform 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 );
    });