HTML 5 dropdown and JSF 2.2

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?

标签： html5 jsf jsf-2.2

5条回答

Luminary・发光体

2楼-- · 2019-05-02 17:24

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.

0人赞添加讨论(0) 举报

\"骚年 ilove

3楼-- · 2019-05-02 17:26

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.

0人赞添加讨论(0) 举报

我只想做你的唯一

4楼-- · 2019-05-02 17:29

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>

0人赞添加讨论(0) 举报

傲

5楼-- · 2019-05-02 17:35

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

0人赞添加讨论(0) 举报

不美不萌又怎样

6楼-- · 2019-05-02 17:44

If the appBean.frentes is list of POJO's you need to use converter in selectOneMenu tag.

0人赞添加讨论(0) 举报

HTML 5 dropdown and JSF 2.2

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间