Jim Driscoll's Blog

Notes on Technology and the Web

JSF 2.0: The Switchlist example

leave a comment »

You’ve seen this component before: two lists, with buttons that let you move options from one list to the other. Here’s what it looks like:


Now, we’ll be looking at this for the next few blog posting, so I’m going to ask you to bear with me – this blog will just introduce the context for this component – I won’t be showing any neat new JSF 2.0 features – that will happen over the next few days, while I build on what I’m showing here.

So – two lists, two buttons. Here’s the facelets code that draws these on the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml"
    <title>Switchlist Example</title>
        <h1>Switchlist Example</h1>
        <h:form id="form1">
            <h:outputStylesheet name="switchlist.css"/>
            <h:selectManyListbox value="#{listholder.list1}" styleClass="switchlist">
                <f:selectItems value="#{listholder.items1}"/>
            <h:panelGroup id="buttonGroup" styleClass="switchlistButtons">
                <h:commandButton value="&gt;&gt;" actionListener="#{listholder.move1to2}" styleClass="switchlistButton" />
                <h:commandButton value="&lt;&lt;" actionListener="#{listholder.move2to1}" styleClass="switchlistButton" />
            <h:selectManyListbox value="#{listholder.list2}" styleClass="switchlist">
                <f:selectItems value="#{listholder.items2}"/>
                <h:commandButton value="reload" type="submit"/>

If you’ve been following my previous blogs on this, you’re not seeing anything new here: We include a style sheet using the h:outputStylesheet tag. There’s some styleClass attributes that take advantage of that. We then use 6 different properties on a single bean – 4 values and 2 methods – to manipulate the model that’s behind our switch list.

Here’s the css:

.switchlist {
    font-size: medium;
    font-family: Arial, sans-serif;
    height: 150px;
    width: 100px;
.switchlistButtons {
    width: 55px;
    display: inline-block;
    margin-top: 50px;
    vertical-align: top;
.switchlistButton {
    width: 50px;
    height: 25px;

We’re mostly worried about positioning those two middle buttons. None of this is special to JSF, so I’m only including it to give you a complete picture.

Lastly, we have the model bean behind the switch list:

package switchlist;

import javax.faces.model.ManagedBean;
import javax.faces.model.SessionScoped;
import javax.faces.event.ActionEvent;
import java.util.Map;
import java.util.LinkedHashMap;

public class ListHolder {

    private Map<String, String> items1 = new LinkedHashMap<String, String>();
    private Map<String, String> items2 = new LinkedHashMap<String, String>();
    private String[] list1 = null;
    private String[] list2 = null;

    {   items1.put("one", "one");
        items1.put("two", "two");
        items1.put("three", "three");
        items1.put("four", "four");     }

    {   items2.put("five", "five");
        items2.put("six", "six");
        items2.put("seven", "seven");
        items2.put("eight", "eight");   }

    public void move1to2(ActionEvent ae) {
        if (list1 != null && list1.length > 0) {
            for (String item : list1 ) {
                items2.put(item, items1.remove(item));

    public void move2to1(ActionEvent ae) {
        if (list2 != null && list2.length > 0) {
            for (String item : list2 ) {
                items1.put(item, items2.remove(item));

    public String[] getList1() {
        return list1;

    public void setList1(String list[]) {
        this.list1 = list;

    public String[] getList2() {
        return list2;

    public void setList2(String list[]) {
        this.list2 = list;

    public Map getItems1() {
        return items1;    

    public Map getItems2() {
        return items2;

It’s not important that we’ve got all this in one bean, of course – we could split it all up among several – what’s important is that we’re maintaining the state of the content of both lists (with the items variables), with the active selection of both lists (with the list variables), and moving values from one list to the other (with the move methods).

Put this all together, and you’ve got something that works in page, and reloads the entire page when you press either button. While this is fine, we’re going to fine tune that a bit – starting with making this ajax enabled. Stay tuned – I’ll have that up shortly. In the meantime, you can peek ahead by looking under jsf-demo/ajax-switchlist in Project Mojarra, and ask any questions below.

(This article originally published on my java.net blog on November 30, 2008.)


Written by jamesgdriscoll

February 9, 2010 at 8:07 PM

Posted in ajax, JSF

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: