Carousel Tutorial

The carousel tag provides a simple list of items which are to be scrolled in a horizontal viewport. The carousel tag allows users to scroll left and right using a touch gesture. This is an iterative tag which will dynamically generate a series of repeating child-components. We will cover two different implementations:

Basic Carousel
Carousel using custom objects

The full source can be found at the bottom of the tutorial here. Additional information regarding <mobi:carousel> can be found here:

WIKI
TLD

Basic Carousel

Add the <mobi:carousel> component to your page:

carousel.xhtml

       <mobi:carousel value="#{carouselBean.images}" var="item" selectedItem="#{carouselBean.selectedItem}"></mobi:carousel>

Our value will be bound to an arrayList of Strings but we could have also used plain old java objects (POJOs). Our row level object var is "item". Our next step is to add our carousel's child components. Please paste the following inside of the <mobi:carousel> tag:

carousel.xhtml

       <h:panelGroup>
                <h:graphicImage library="images" name="#{item}"/>
       </h:panelGroup>

The carousel tag will iterate over the arrayList bound to our value attribute and render an image for each "item". The JSF 2 ResourceHandler will know to look in the web/resources/images directory for these files. The images are can be found in the source folder's web/resources/images folder here.

CarouselBean.java

The value attribute of the carousel component can use either a list of Strings or plain old java objects. Create CarouselBean.java and add the following code:

CarouselBean.java

       @ManagedBean
       @ViewScoped
       public class CarouselBean implements Serializable {

	     private ArrayList<String> images = new ArrayList<String>();
	     private int selectedItem;

             //TODO Generate getters/setter methods
       }

We will initialize our <mobi:carousel>s image objects in our CarouselBean's constructor:

CarouselBean.java

      public CarouselBean() {
	        images.add("desktop.png");
	        images.add("laptop.png");
	        images.add("monitor.png");
	        images.add("pda.png");
	        images.add("desktop.png");
	        images.add("laptop.png");
	        images.add("monitor.png");
	        images.add("pda.png");
	        images.add("desktop.png");
	    }

Create a directory called images in the web/resources directory of your project. The image files are located in the web/resources/images folder of the source download which is available at the bottom of the tutorial. Click here to see the rendered carousel.

Advanced Carousel

In the basic example, the <mobi:carousel> was bound to a list of strings but we will change that to a list of custom objects. Replace the following code in CarouselBean.java:

CarouselBean.java

private ArrayList<String> images = new ArrayList<String>();

with

private List<ImageItem> images = new ArrayList<ImageItem>() ;

Each custom object will have the image's Url, a title, height, and style. Add the following code as an inner class of CarouselBean:

CarouselBean.java

public class ImageItem implements Serializable{
    	private String imageUrl;
    	private String title;
    	private String height;
    	private String style;

        //TODO Generate getters/setter methods

    	public ImageItem (String url, String title, String height, String style){
    		this.imageUrl = url;
    		this.title = title;
    		this.height= height;
    		this.style = style;
    	}
}

We will populate our list by replacing the current CarouselBean constructor with the following:

CarouselBean.java

	private String height="60px";
	private String style="color:blue";

	public CarouselBean(){
             images.add(new ImageItem("desktop.png", "desktop", height, style));
             images.add(new ImageItem ("laptop.png", "laptop", height, style));
             images.add(new ImageItem ("monitor.png", "monitor", height, style));
             images.add(new ImageItem ("pda.png", "pda", height, style));
             images.add(new ImageItem("desktop.png", "desktop", height, style));
             images.add(new ImageItem ("laptop.png", "laptop", height, style));
             images.add(new ImageItem ("monitor.png", "monitor", height, style));
             images.add(new ImageItem ("pda.png", "pda", height, style));
	}

We can now replace our <h:panelGroup> and our <h:graphicImage> with the following:

carousel.xhtml

      <h:panelGroup>
	<h:graphicImage library="images" name="#{item.imageUrl}" title="#{item.title}"/><br/>
	<h:outputLabel style="#{item.style}" value="#{item.title}" />
      </h:panelGroup>

And our carousel will look like the following:

Source Code

1. icemobile-carousel-basic-tutorial.zip
2. icemobile-carousel-advanced-tutorial.zip

Carousel Tutorial