JSF 2.0: The Switchlist example

My pages	Projects	Communities	java.net

Search

Online Books:

java.net on MarkMail:

Advanced Search

Jim Driscoll

Another JSF 2.0 Ajax Component: Editable Text | Main | JSF 2.0: The f:ajax tag

JSF 2.0: The Switchlist example

Posted by driscoll on November 29, 2008 at 11:05 PM PST

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"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <title>Switchlist Example</title>
</h:head>
<h:body>
        <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:selectManyListbox>
            <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:panelGroup>
            <h:selectManyListbox value="#{listholder.list2}" styleClass="switchlist">
                <f:selectItems value="#{listholder.items2}"/>
            </h:selectManyListbox>
            <br/>
                <h:commandButton value="reload" type="submit"/>
            <h:messages/>
        </h:form>
</h:body>
</html>

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;


@ManagedBean(name="listholder")
@SessionScoped
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.

driscoll's blog
Login or register to post comments
1415 visits
Printer-friendly version

Get Involved

Get Informed

Get Connected

Search

Jim Driscoll

JSF 2.0: The Switchlist example