Using Images as Links

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. 16-10 Web User Interface Developers Guide for Oracle Application Development Framework The carousel component uses a CollectionModel class to access the data in the underlying collection. This class extends the JSF DataModel class and adds on support for row keys. In the DataModel class, rows are identified entirely by index. However, to avoid issues if the underlying data changes, the CollectionModel class is based on row keys instead of indexes. You may also use other model classes, such as java.util.List, array, and javax.faces.model.DataModel. If you use one of these other classes, the carousel component automatically converts the instance into a CollectionModel class, but without any additional functionality. For more information about the CollectionModel class, see the MyFaces Trinidad Javadoc at http:myfaces.apache.orgtrinidadtrinidad-1_ 2trinidad-apiapidocsindex.html . The carousel components are virtualized, meaning that not all the items available to the component on the server are delivered to, and displayed on, the client. You configure the carousel to fetch a certain number of rows at a time from your data source. The data can be delivered to the component either immediately upon rendering, or lazily fetched after the shell of the component has been rendered. By default, the carousel lazily fetches data for the initial request. When a page contains one or more of these components, the page initially goes through the standard lifecycle. However, instead of the carousel fetching the data during that initial request, a special separate partial page rendering PPR request is run on the component, and the number of items set as the value of the fetch size for the carousel is then returned. Because the page has just been rendered, only the Render Response phase executes for the carousel, allowing the corresponding data to be fetched and displayed. When a user does something to cause a subsequent data fetch for example, spinning the carousel for another set of images, another PPR request is executed. Best Practice: The image component does not provide any geometry management controls for altering how it behaves when stretched. You should use images that have equal width and height dimensions in order for the image to retain its proper aspect ratio when it is being stretched. Note: If your application uses the Fusion technology stack, you can create ADF Business Components over your data source that represent the items, and the model will be created for you. You can then declaratively create the carousel, and it will automatically be bound to that model. For more information, see the Using the ADF Faces Carousel Component section of the Oracle Fusion Middleware Fusion Developers Guide for Oracle Application Development Framework.