How to Display Output Text

16-6 Web User Interface Developers Guide for Oracle Application Development Framework The image component can also be used as a link and can include an image map, however, it must be placed inside a goLink component. For more information, see Section 16.5, Using Images as Links. To display an image: 1. In the Component Palette, from the Common Components panel, drag and drop an Image onto your page. 2. In the Insert Image dialog, set the following: ■ ShortDesc : Set to the text to be used as the alternate text for the image. ■ Source : Enter the URI to the image file. 3. If you want to include a longer description for the image, in the Property Inspector, set LongDescURL attribute to the URI where the information is located.

16.5 Using Images as Links

ADF Faces provides the commandImageLink component that renders an image as a link, along with optional text. You can set different icons for when the user hovers the mouse over the icon, and for when the icon is depressed or disabled. For more information about the commandImageLink component, see Section 18.2, Using Buttons and Links for Navigation. If you simply want an image to be used to navigate to a given URI, you can enclose the image in the goLink component and then, if needed, link to an image map. You can use an image as a goLink component to one or more destinations. If you want to use an image as a simple link to a single destination, use a goLink component to enclose your image, and set the destination attribute of the goLink component to the URI of the destination for the link. If your image is being used as a graphical navigation menu, with different areas of the graphic navigating to different URIs, enclose the image component in a goLink component and create a server-side image map for the image. To use an image as one or more goLink components: 1. In the Component Palette, from the Common Components panel, drag and drop a Go Link onto the page.

2. Drag and drop an Image as a child to the goLink component.

3. In the Insert Image dialog, set the following: ■ ShortDesc : Set to the text to be used as the alternate text for the image. ■ Source : Enter the URI to the image file. 4. If different areas of the image are to link to different destinations: ■ Create an image map for the image and save it to the server. ■ In the Property Inspector, set ImageMapType attribute to server. Tip: If you plan to support changing the source attribute of the image through active data for example, data being pushed from the data source will determine the image that is displayed, then you should use the activeImage component instead of the image component. Create an activeImage component by dragging an Image Active from the Component Palette. Using Output Components 16-7 ■ Select the goLink component and in the Property Inspector, set Destination to the URI of the image map on the server.

5. If the whole image is to link to a single destination, select the goLink component

and enter the URI of the destination as the value of Destination.

16.6 Displaying Images in a Carousel

You can display images in a revolving carousel, as shown in Figure 16–5 . Users can change the image at the front either by using the slider at the bottom or by clicking one of the auxiliary images to bring that specific image to the front. Figure 16–5 The ADF Faces Carousel By default, the carousel is displayed horizontally. The objects within the horizontal orientation of the carousel are vertically aligned to the middle and the carousel itself is horizontally aligned to the center of its container. You can configure the carousel so that it can be displayed vertically, as you might want for a reference card file. By default, the objects within the vertical orientation of the carousel are horizontally aligned to the center and the carousel itself is vertically aligned to the middle, as shown in Figure 16–6 . You can change the alignments using the carousel’s alignment attributes. 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.