Often times applications store values in look up tables or domains then map those values to an Enum. In this java lesson will show how to create radio buttons with an Enum as a backing object. If you look at our RadioButtonEnum backing bean, you will noticed that we will return the Enum by calling values() which return the enum in the order they are declared. Depending on your requirements your web screen you may need to order the enum based a value for a better user experience.
Backing bean
@ManagedBean
public class RadioButtonEnum {
private String radioButtonJSF;
private String radioButtonJSF22;
public void checkExample() {
System.out.println(radioButtonJSF);
System.out.println(radioButtonJSF22);
}
public US[] getStates () {
return US.values();
}
public enum US {
ALABAMA("Alabama", "AL"),
ALASKA("Alaska", "AK"),
ARIZONA("Arizona", "AZ");
String unabbreviated;
String abbreviation;
US(String unabbreviated, String abbreviation) {
this.unabbreviated = unabbreviated;
this.abbreviation = abbreviation;
}
}
}JSF 2.0
<f:selectItems/> is part of the core JSF library which accepts an array or collection as the value where we bind it to the radioButtonEnum.states. Creating a variable state, it is referenced in the itemValue which will be the value that is sent in the request. The itemLabel is the value that will be shown on the webpage. There is other variables so please refer to the documentation.
Xhtml source
<div>
<h2>JSF selectOneRadioButton with enum</h2>
<h:selectOneRadio value="#{radioButtonEnum.radioButtonJSF}">
<f:selectItems value="#{radioButtonEnum.states}"
var="state"
itemValue="#{state.abbreviation}"
itemLabel="#{state.unabbreviated}" />
</h:selectOneRadio>
</div>Generated html
<div>
<h2>JSF selectOneRadioButton with enum</h2>
<table>
<tbody>
<tr>
<td>
<input type="radio" name="j_idt8" id="j_idt8:0" value="AL">
<label for="j_idt8:0"> Alabama</label>
</td>
<td>
<input type="radio" checked="checked" name="j_idt8" id="j_idt8:1" value="AK">
<label for="j_idt8:1"> Alaska</label>
</td>
<td>
<input type="radio" name="j_idt8" id="j_idt8:2" value="AZ">
<label for="j_idt8:2"> Arizona</label>
</td>
</tr>
</tbody>
</table>
</div>JSF 2.2 passthrough
JSF 2.2 introduced the ability to write standard HTML/HTML5 elements and bind values using JSF passthrough attributes and elements. Below shows an example to use radio buttons without a table and your favorite front end framework such as bootstrap or google material design. Using the same backing bean or managed bean above we will specify the name as passthrough attribute which will override the implicit attribute. Then using a <ui:repeat/> we will create <label/>, <input/> and <span/> to elements to visually display the radio buttons.
Xhtml source
<div>
<f:metadata>
<f:viewParam name="radioButtonJSF22" value="#{radioButtonEnum.radioButtonJSF22}"/>
</f:metadata>
<ui:repeat value="#{radioButtonEnum.states}" var="state">
<label for="state-#{state.abbreviation}">
<input type="radio" jsf:id="state" pt:name="radioButtonJSF22" value="#{state.abbreviation}"/>
<span>#{state.unabbreviated}</span>
</label>
</ui:repeat>
</div>Generated html
<div>
<label for="state-AL">
<input id="j_idt11:0:state" name="radioButtonJSF22" type="radio" value="AL">
<span>Alabama</span>
</label>
<label for="state-AK">
<input id="j_idt11:1:state" name="radioButtonJSF22" type="radio" value="AK">
<span>Alaska</span>
</label>
<label for="state-AZ">
<input id="j_idt11:2:state" name="radioButtonJSF22" type="radio" value="AZ">
<span>Arizona</span>
</label>
</div>