JSF选择带有图像的OneRadio项目，如何设置单选按钮CHECKED

Question

我想在JSF中实现以下UI。

[RadioButton][Image][Label]

[RadioButton][Image][Label]

[RadioButton][Image][Label]等等…

实现以下代码后，UI看起来不错。但是，当我单击任何单选按钮时，选择都不会出现在UI中（单选未选中），尽管bean类通过valueChanged事件进行了更新。那么，我如何设置selectOneRadio选中？

JSF代码：

    <!-- 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-->

和bean类中的方法：

    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;
    }

和处理程序类中的valueChanged事件：

    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

实际上radioOneButton的'value="#{shoppingCartBean.selectedPaymentMethod}"'多次被空字符串或错误字符串覆盖。因此，单选按钮中总是显示错误或没有选择。

为了避免Bean类中"selectedPaymentMethod"属性设置错误，我采取了以下解决方法。并确保"selectedPaymentMethod"仅由Handler类中的"valueChanged"方法更新。

在Handler类的valueChanged事件中所做的更改：

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

Bean类中的修改：

public void setSelectedPaymentMethod(String selectedPaymentMethod) {
    // DO NOTHING, Leave this method empty
}
public void setPaymentMethod(String paymentMethod) {
    this.selectedPaymentMethod = paymentMethod;
}

现在"getSelectedPaymentMethod"总是返回当前选择的单选项目，因此会检查正确的单选项目。