Displaying Icons Displaying Images

16-8 Web User Interface Developers Guide for Oracle Application Development Framework Figure 16–6 Vertical Carousel Component Instead of configuring the carousel to partially displaying the previous and next images, you can configure it so that it only displays the current image, as shown in Figure 16–7 . Figure 16–7 Carousel Can Display Just One Image. You can also configure the controls used to browse through the images. You can display a slider that has next and previous arrows and that spans more than one image as shown in Figure 16–5 , you can display only next and previous buttons, as shown in Figure 16–7 , or you can display next and previous buttons, along with the slide counter, as shown in Figure 16–8 . Best Practice: Generally the carousel should be placed in a parent component that stretches its children such as a panelSplitter or panelStretchLayout. If you do not place the carousel in a component that stretches its children, your carousel will display at the default dimension of 500px wide and 300px tall. You can change these dimensions. Using Output Components 16-9 Figure 16–8 Next and Previous Buttons With a Slide Counter A child carouselItem component displays the objects in the carousel, along with a title for the object. Instead of creating a carouselItem component for each object to be displayed, and then binding these components to the individual object, you bind the carousel component to a complete collection. The component then repeatedly renders one carouselItem component by stamping the value for each item, similar to the way a tree stamps out each row of data. As each item is stamped, the data for the current item is copied into a property that can be addressed by an EL expression that uses the carousel component’s var attribute. Once the carousel has completed rendering, this property is removed or reverted back to its previous value. Carousels contain a nodeStamp facet, which is both a holder for the carouselItem component used to display the text and short description for each item, and the parent component to the image displayed for each item. For example, the carouselItem JSF page in the ADF Faces demo shown in Figure 16–5 contains a carousel component that displays an image of each of the ADF Faces components. The demoCarouselItem CarouselBean.java managed bean contains a list of each of these components. The value attribute of the carousel component is bound to the items property on that bean, which represents that list. The carousel component’s var attribute is used to hold the value for each item to display, and is used by both the carouselItem component and the image component to retrieve the correct values for each item. Example 16–4 shows the JSF page code for the carousel. For more information about stamping behavior in a carousel, see Section 10.5, Displaying Data in Trees. Example 16–4 Carousel Component JSF Page Code af:carousel id=carousel binding={editor.component} var=item value={demoCarousel.items} carouselSpinListener={demoCarousel.handleCarouselSpin} f:facet name=nodeStamp af:carouselItem id=crslItem text={item.title} shortDesc={item.title} af:image id=img source={item.url} shortDesc={item.title} af:carouselItem f:facet af:carousel A carouselItem component stretches its sole child component. If you place a single image component inside of the carouselItem, the image stretches to fit within the square allocated for the item as the user spins the carousel, these dimensions shrink or grow.