JSF selectOneRadio item with image, how to set the radio button CHECKED

Question

I wanted to achieve following UI in JSF.

[RadioButton] [Image] [Label]

[RadioButton] [Image] [Label]

[RadioButton] [Image] [Label] and so on...

After implementing following codes, the UI looks good. But when I click on any radio button, selection does not appear in the UI (radio not checked) although bean class get updated by valueChanged event. So how can I set selectOneRadio checked?

JSF code:

    <!-- payment options -->
    <ui:repeat value="#{shoppingCartBean.paymentMethods}" var="m">

        <!-- radio button -->
        <div style="float:left;">
            <ice:selectOneRadio  
                value="#{shoppingCartBean.selectedPaymentMethod}"
                layout="pageDirection" 
                partialSubmit="true" 
                valueChangeListener="#{shoppingCartHandler.valueChanged}">     
                <f:selectItem itemLabel="" itemValue="#{m}"/>  
            </ice:selectOneRadio>  
        </div>           

        <!-- card image -->
        <div style="float:left;">
            <ice:graphicImage  value="#{layoutBean.currentImagesPath}/#{m}.png"/> 
        </div>

        <!-- payment method description or label -->
        <div style="padding: 10px">
            <ice:outputText value="#{bundleMessages.messages[m]}"/>
        </div>

        <div style="clear:both;"></div>
    </ui:repeat>

    <!-- payment options end-->

and method in the bean class:

    public List<String> getPaymentMethods() {
        List<String> paymentMethods = new ArrayList<String>();
        paymentMethods.add("crditcard");
        paymentMethods.add("directbanking");
        paymentMethods.add("paypal");
        return paymentMethods;
    }

    public String getSelectedPaymentMethod() {            
        return this.selectedPaymentMethod;
    }

    public void setSelectedPaymentMethod(String selectedPaymentMethod) {
        this.selectedPaymentMethod = selectedPaymentMethod;
    }

and valueChanged event in the handler class:

    public void valueChanged(ValueChangeEvent event) {
        String value = null;
        if (event.getSource() instanceof HtmlSelectOneRadio) {
            value = ((String) event.getNewValue());
        }
        if (value != null) {
            this.shoppingCartBean.setSelectedPaymentMethod(value);
        }
    }

Answer 1

Actually radioOneButton's 'value="#{shoppingCartBean.selectedPaymentMethod}"' got overwritten several times with empty or wrong string. Therefore always shows wrong or no selection in the radio button.

I did following workaround to avoid false setting of 'selectedPaymentMethod' attribute in the Bean class. And made sure 'selectedPaymentMethod' is only get updated by 'valueChanged' method in the Handler class.

Changes made in the valueChanged event of Handler class:

public void valueChanged(ValueChangeEvent event) {        
    String value = null;
    if (event.getSource() instanceof HtmlSelectOneRadio) {
        value = ((String) event.getNewValue());
    }
    if (value != null) {
        this.shoppingCartBean.setPaymentMethod(value);
    }
}

And modification in the Bean class:

public void setSelectedPaymentMethod(String selectedPaymentMethod) {
    // DO NOTHING, Leave this method empty
}

public void setPaymentMethod(String paymentMethod) {
    this.selectedPaymentMethod = paymentMethod;
}

Now 'getSelectedPaymentMethod' always returns currently selected radio item, so correct radio item get checked.