Question

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

的跟进

我有一个复合组件，允许用户在h：selectOneMenu和h：selectManyListbox之间切换，并返回一个Collection作为“selected”值。这非常有效。我现在正在尝试添加ajax支持，以便，如果在菜单或列表框中选择了一个值，则会触发ajax事件（意味着 mySelected 应填充其值并且我可以重新在我想要的页面上渲染任何其他组件。

<swr:singleMultiSelect list="#{myBean.myList}"
                       selected="#{myBean.mySelected}"
                       singleSelect="#{myBean.singleSelect}">
    <f:ajax event="valueChange" execute="@this" 
            render="buttonPanel"/>
</swr:singleMultiSelect>

在我的复合组件中使用以下属性：

<cc:clientBehavior name="valueChange" event="valueChange"
                   targets="selectOneMenu selectManyListbox"/>

我在使用selectOneMenu的值填充 mySelected 时遇到问题。当我做一个非ajax表单提交时， processUpdates 负责这个...我不太确定如何让它为ajax事件做同样的事情。

这是我的复合组件代码：

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:clientBehavior name="valueChange" event="valueChange"
                       targets="selectOneMenu selectManyListbox"/>

    </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}"
                             binding="#{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 {

    private UISelectOne singleSelected;

    public SingleMultiSelect() {
        super();
    }

    @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);
    }
    /**
     * @return the singleSelected
     */
    public UISelectOne getSingleSelected() {
        return singleSelected;
    }

    /**
     * @param singleSelected the singleSelected to set
     */
    public void setSingleSelected(UISelectOne singleSelected) {
        this.singleSelected = singleSelected;
    }
}

Answer 1

使用侦听器（绑定到FacesComponent中的方法）向selectOneMenu添加了ajax标记，该标记更新了所选的集合：

singleMultiSelect.xhtml：

<h:selectOneMenu id="selectOneMenu" 
                 rendered="#{cc.attrs.singleSelect}"
                 binding="#{cc.singleSelected}">                    
    <f:selectItems value="#{cc.attrs.list}"/>
    <f:ajax event="valueChange" execute="@this"
                    listener="#{cc.updateSelected}"/>
</h:selectOneMenu>

SingleMultiSelect.java：

public void updateSelected(AjaxBehaviorEvent event) {

    FacesContext context = FacesContext.getCurrentInstance();

    if (getAttributes().get("singleSelect") == Boolean.TRUE) {
        HashSet selected = new HashSet();
        if(singleSelected.getValue() != null) {
            selected.add(singleSelected.getValue());
        }
        getValueExpression("selected").setValue(context.getELContext(), selected);
    }
}

如何添加f：ajax支持到我的复合组件，将Collection绑定到h：selectOneMenu和h：selectManyListbox？

1 个答案: