Search code examples
jsfcomposite-componentselectonemenuselectmanylistbox

How can I create a JSF composite component that binds a Collection to both an h:selectOneMenu and h:selectManyListbox?


I'm trying to create a composite component that will allow the user to toggle between a h:singleSelectMenu and h:selectManyListbox. I have it working sort of. It works as long as the value field points to a Collection...it does NOT work if the value field is null.

singleMultiSelect.xhtml

<?xml version="1.0" encoding="US-ASCII"?>
<!DOCTYPE html>
<ui:composition
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:cc="http://java.sun.com/jsf/composite"
    xmlns:c="http://java.sun.com/jstl/core"
    xmlns:ace="http://www.icefaces.org/icefaces/components"
    >

    <cc:interface componentType="singleMultiSelect">

        <!-- The initial list of objects -->
        <cc:attribute name="list" type="java.util.List" required="true"/>
        <!-- The selected objects -->
        <cc:attribute name="selected" type="java.util.Collection" required="true"/>
        <!-- whether to display the selectOneMenu (true) or selectManyBox (false) -->
        <cc:attribute name="singleSelect" type="java.lang.Boolean" 
                  required="false" default="true"/>  

    </cc:interface>
    <cc:implementation>

        <span id="#{cc.clientId}">

            <ace:checkboxButton id="singleSelectChkBx"
                                value="#{cc.attrs.singleSelect}">
                <ace:ajax render="#{cc.clientId}"/>
            </ace:checkboxButton>                    

            <h:selectOneMenu id="selectOneMenu" 
                             rendered="#{cc.attrs.singleSelect}"
                             value="#{cc.singleSelected}">                    
                <f:selectItems value="#{cc.attrs.list}"/>
            </h:selectOneMenu>

            <h:selectManyListbox id="selectManyListbox" 
                                 rendered="#{! cc.attrs.singleSelect}"
                                 value="#{cc.attrs.selected}">
                <f:selectItems value="#{cc.attrs.list}"/>
            </h:selectManyListbox>

        </span>

    </cc:implementation>
</ui:composition>

SingleMultiSelect.java

public class SingleMultiSelect extends UINamingContainer {    

    public SingleMultiSelect() {
        super();
    }           

    /**
     * Converts the Object selected within the selectOneMenu to the list
     * used by the component.
     * 
     * @param singleSelected
     */
    public void setSingleSelected(Object singleSelected) {
        getSelected().clear();
        if(singleSelected != null) {
            getSelected().add(singleSelected);
        }
    }

    /**
     * Converts the collection used by the component to a single
     * Object selected within the selectOneMenu.
     * 
     * @return
     */
    public Object getSingleSelected() {
        return getSelected().size() > 0 ? getSelected().iterator().next() : null;
    }    

    private Collection getSelected() {
        return (Collection) getAttributes().get("selected");
    }
}

I tried writing to the attributes map but that didn't work

public void setSingleSelected(Object singleSelected) {
    HashSet selected = new HashSet();         
    selected.add(singleSelected);
    ((Collection) getAttributes()).put("selected", selected);
}

Solution

  • getAttributes().put("selected", selected);
    

    You're basically overriding the underlying ValueExpression object #{cc.attrs.selected} with a HashSet. In other words, the EL expression became a "hardcoded" value and can't reach the bean property anymore.

    You should be obtaining the ValueExpression and invoke the setter via setValue() call.

    getValueExpression("selected").setValue(context.getElContext(), selected);
    

    Unrelated to the concrete problem, when implementing a backing component, it's better to think like an UI component, not a backing bean. Don't manipulate the model directly (the composite attributes), but the composite component's own components which you reach via binding. Moreover, do not touch the getters/setters. Replace the <h:selectOneMenu value> as below:

    <h:selectOneMenu binding="#{cc.singleSelected}" ...>
    
    private UISelectOne singleSelected; // +getter+setter
    
    @Override
    public void processUpdates(FacesContext context) {
        super.processUpdates(context);
    
        if (getAttributes().get("singleSelect") == Boolean.TRUE) {
            HashSet selected = new HashSet();
            if (singleSelected.getValue() != null) {
                selected.add(singleSelected.getValue());
            }
            getValueExpression("selected").setValue(context.getELContext(), selected);
        }
    }
    
    @Override
    public void encodeBegin(FacesContext context) throws IOException {
        if (getAttributes().get("singleSelect") == Boolean.TRUE) {
            Collection selected = (Collection) getAttributes().get("selected");
            if (selected != null && !selected.isEmpty()) {
                singleSelected.setValue(selected.iterator().next());
            } else {
                singleSelected.setValue(null);
            }
        }
    
        super.encodeBegin(context);
    }