Carousel TutorialThe 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: The full source can be found at the bottom of the tutorial here. Additional information regarding <mobi:carousel> can be found here: Basic Carousel
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
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
CarouselBean.java private ArrayList<String> images = new ArrayList<String>();
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 Code1. icemobile-carousel-basic-tutorial.zip |
Carousel Tutorial
© Copyright 2016 ICEsoft Technologies Canada Corp.