How ADF's 'Select Many Shuttle' Component Works

I was trying to find out how Select Many Shuttle (SMS) component works and was finding almost similar posts which were using iterator binding. What I wanted is how just this component works without any binding details, and with some managed bean methods. So if you are also looking for the same, this blog can help.

I wanted to create a small page with SMS component in it and a command button. On clicking the command button, I wanted to print the selected or moved items content. The following image shows what I wanted to do:



To achieve this, I created the following ShuttlePage.jspx page:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document id="d1" binding="#{backingBeanScope.BackingShuttlePage.d1}">
      <af:form id="f1" binding="#{backingBeanScope.BackingShuttlePage.f1}">
        <af:selectManyShuttle label="Employee Shuttle"
                              binding="#{backingBeanScope.BackingShuttlePage.sms1}"
                              id="sms1"
                              value="#{backingBeanScope.BackingShuttlePage.selectedEmployees}">
          <f:selectItems value="#{backingBeanScope.BackingShuttlePage.allEmployees}"
                         binding="#{backingBeanScope.BackingShuttlePage.si1}"
                         id="si1"/>
        </af:selectManyShuttle>
        <af:commandButton text="Print Selection"
                          binding="#{backingBeanScope.BackingShuttlePage.cb1}"
                          id="cb1"
                          actionListener="#{backingBeanScope.BackingShuttlePage.printSelection}"/>
      </af:form>
    </af:document>
  </f:view>
  <!--oracle-jdev-comment:auto-binding-backing-bean-name:BackingShuttlePage-->
</jsp:root>

The above page is making use of the following backing bean:

package view.backing;
import oracle.adf.view.rich.component.rich.RichDocument;
import oracle.adf.view.rich.component.rich.RichForm;
import java.util.ArrayList;
import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.component.UISelectItems;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.faces.model.SelectItem;
import oracle.adf.model.BindingContext;
import oracle.adf.model.binding.DCBindingContainer;
import oracle.adf.model.binding.DCIteratorBinding;
import oracle.adf.view.rich.component.rich.input.RichSelectManyShuttle;
import oracle.adf.view.rich.component.rich.nav.RichCommandButton;
public class BackingShuttlePage {
    private RichForm f1;
    private RichDocument d1;
    List allEmployees;
    List selectedEmployees;
    private RichSelectManyShuttle sms1;
    private UISelectItems si1;
    private RichCommandButton cb1;
    public void setF1(RichForm f1) {
        this.f1 = f1;
    }
    public RichForm getF1() {
        return f1;
    }
    public void setD1(RichDocument d1) {
        this.d1 = d1;
    }
    public RichDocument getD1() {
        return d1;
    }
    public List getAllEmployees() {
      if (allEmployees == null) {
        allEmployees = new ArrayList<javax.faces.model.SelectItem>();
        allEmployees.add(new javax.faces.model.SelectItem("Employee 1"));
        allEmployees.add(new javax.faces.model.SelectItem("Employee 2"));
        allEmployees.add(new javax.faces.model.SelectItem("Employee 3"));
        allEmployees.add(new javax.faces.model.SelectItem("Employee 4"));
        allEmployees.add(new javax.faces.model.SelectItem("Employee 5"));
        allEmployees.add(new javax.faces.model.SelectItem("Employee 6"));
      }
      return allEmployees;
    }
   
    public List getSelectedEmployees() {
      if (selectedEmployees == null) {
        selectedEmployees = new ArrayList<javax.faces.model.SelectItem>();
      }
      return selectedEmployees;   
    }
   
    public void setSelectedEmployees(List selectedItems) {
        this.selectedEmployees = selectedItems;
    }
   
    public void printSelection(ActionEvent actionEvent) {
        List l = this.getSelectedEmployees();
        StringBuilder text = new StringBuilder("Size = ").append(getSelectedEmployees().size()).append(", Items added are: ");
        for (int i = 0; i <l.size(); i++ ) {
            text.append("Item ").append(i).append(" = ").append(l.get(i)).append(", ");
        }  
        FacesContext fctx = FacesContext.getCurrentInstance();
        FacesMessage message = new FacesMessage(text.toString());
        fctx.addMessage(null, message);
    }
    public void setSms1(RichSelectManyShuttle sms1) {
        this.sms1 = sms1;
    }
    public RichSelectManyShuttle getSms1() {
        return sms1;
    }
    public void setSi1(UISelectItems si1) {
        this.si1 = si1;
    }
    public UISelectItems getSi1() {
        return si1;
    }

    public void setCb1(RichCommandButton cb1) {
        this.cb1 = cb1;
    }
    public RichCommandButton getCb1() {
        return cb1;
    }
}

Important points are highlighted above. The things to note are the value bindings for selectManyShuttle and selectItems tags. Remember that the value binding for selectManyShuttle represents the selected values (right shuttle values) and the value binding for selectItems represents non-selected values (left shuttle values). Also provided the method for setting selected employees, setSelectedEmployees, as without it also the example does not work and this method is called as soon as we click the Print Selection command button, as shown in the following figure:

So, the selected values are automatically added in the list by the component. Thats what I wanted to know whether the component modifies the list with the selected values. Later on we can iterate over those values to do whatever our logic demands, like printing them in this example.
Hope this blog will save some of your time.

JDev Release 11.1.1.4