I´m trying to send a <select>
value to a JSF managed bean but I don´t know how to make it.
My code is:
<select id="cb-frentes" required="required" jsf:value="#{checkstyleBean.frente}">
<option value=""/>
<ui:repeat var="frente" value="#{appBean.frentes}">
<option value="#{frente}" label="#{frente}"/>
</ui:repeat>
</select>
It does not work. The value of frente
attribute is always null
, when I invoke my action method.
How can I make this bind?
The <option>
element is by default not recognized as a passthrough element. It's not listed in table 8.4 of Java EE tutorial chapter 8.9 'HTML5-Friendly Markup'.
You'd need to explicitly tell the underlying JSF component. You can do that using the jsfc
attribute, which is surprisingly not mentioned in the Java EE 7 tutorial (perhaps because it's part of Facelets, the view technology, and not of JSF).
<select id="cb-frentes" required="required" size="1" jsf:value="#{checkstyleBean.frente}">
<option value="#{null}" jsfc="f:selectItem" />
<ui:repeat value="#{appBean.frentes}" var="frente" jsfc="f:selectItems">
<option value="#{frente}">#{frente}</option>
</ui:repeat>
</select>
Note that I fixed the value of the 1st option to be explicitly #{null}
, and that I fixed the incorrect way of setting the option label. Further I also added size="1"
to the <select>
, otherwise it's by default rendered as a listbox instead of a dropdown.
Looks like JSF converts select
element to h:selectOneListbox
but it doesn't properly convert option
tags. You should then use h:selectItem
or h:selectItems
, like this:
<select id="cb-frentes" required="required"
jsf:value="#{someBean.frente}" size="0">
<f:selectItem itemValue="" itemLabel=""/>
<f:selectItem itemValue="1" itemLabel="1"/>
<f:selectItem itemValue="2" itemLabel="2"/>
</select>
I needed to add size="0" attribute to render the options as drop-down menu. This is because JSF converts select element to h:selectOneListbox which is rendered as a list.
Alternatively, to use HTML5 attributes on JSF element you don't need to convert them to HTML5 tags (pass-through elements). You can use pass-through attributes:
<html ... xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
...
<h:selectOneMenu id="cb-frentes" p:required="required"
value="#{someBean.frente}">
<f:selectItem itemValue="" itemLabel=""/>
<f:selectItem itemValue="1" itemLabel="1"/>
<f:selectItem itemValue="2" itemLabel="2"/>
</h:selectOneMenu>
In case of both solutions instead of using f:selectItem
you can also use f:selectItems
so that you don't need ui:repeat
.
This solution worked for me:
<select jsf:id="province" size="1" jsf:value="#{shippingAddressBackingBean.shippingAddress.provinceCode}" name="province" class="form-control">
<option value="#{null}" jsfc="f:selectItem" />
<div value="#{shippingAddressBackingBean.provinces}" var="prov" jsfc="f:selectItems" itemValue="#{prov.code}" itemLabel="#{prov.name}"></div>
</select>
I've used the code above to solve my problem.
<select id="language-select" name="language-select" class="form-control input-lg" jsf:value="#{dashboardBean.language}" size="1">
<div value="#{dashboardBean.supportedLanguages}" var="language" jsfc="f:selectItems" itemValue="#{language.code}" itemLabel="#{dashboardBean.translate(language.name, null)}"></div>
</select>
SupportedLanguages.java
public enum SupportedLanguage implements TShopType {
UNKNOWN("un", "common.unknown"), DE("de", "common.supportedlanguage.de"), EN("en", "common.supportedlanguage.en"),
FR("fr", "common.supportedlanguage.fr"), NL("nl", "common.supportedlanguage.nl"), CS("cs",
"common.supportedlanguage.cs"), ES("es", "common.supportedlanguage.es"), IT("it",
"common.supportedlanguage.it");
private String code;
private String name;
private SupportedLanguage(String code, String name) {
this.code = code;
this.name = name;
}
public String getCode() {
return code;
}
public String getName() {
return name;
}
public static final SupportedLanguage getLanguage(String code) {
code = code.toLowerCase();
switch (code) {
case "de":
return SupportedLanguage.DE;
case "en":
return SupportedLanguage.EN;
case "fr":
return SupportedLanguage.FR;
case "nl":
return SupportedLanguage.NL;
case "cs":
return SupportedLanguage.CS;
case "es":
return SupportedLanguage.ES;
case "it":
return SupportedLanguage.IT;
default:
return SupportedLanguage.UNKNOWN;
}
}
public Converter getSupportedLanguageConverter() {
return new Converter() {
@Override
public String getAsString(FacesContext context, UIComponent component, Object value) {
// TODO Auto-generated method stub
return (value == null) ? null : ((SupportedLanguage) value).getCode();
}
@Override
public Object getAsObject(FacesContext context, UIComponent component, String value) {
// TODO Auto-generated method stub
return (value == null) ? null : SupportedLanguage.getLanguage(value);
}
};
}
If the appBean.frentes is list of POJO's you need to use converter in selectOneMenu tag.