How to Create a Carousel

16-14 Web User Interface Developers Guide for Oracle Application Development Framework Figure 16–9 Using a More Complex Layout in a Carousel Example 16–6 shows the corresponding page code. Example 16–6 A More Complex Layout for a Carousel af:carouselItem id=mainItem text={item.title} shortDesc={item.title} af:panelGroupLayout id=itemPgl layout=vertical af:image id=mainImg source={item.url} shortDesc={item.title} styleClass=MyImage af:clientListener method=handleItemOver type=mouseOver af:clientListener method=handleItemDown type=mouseDown af:showPopupBehavior triggerType=contextMenu popupId=::itemCtx af:image af:panelGroupLayout id=overHead styleClass=MyOverlayHeader layout=vertical clientComponent=true af:menuBar id=menuBar af:menu id=menu text=Menu af:commandMenuItem id=menuItem1 text=Menu Item 1 af:commandMenuItem id=menuItem2 text=Menu Item 2 af:commandMenuItem id=menuItem3 text=Menu Item 3 af:menu af:menuBar af:panelGroupLayout af:panelGroupLayout id=overFoot styleClass=MyOverlayFooter layout=vertical clientComponent=true halign=center af:panelGroupLayout id=footHorz layout=horizontal f:facet name=separator af:spacer id=footSp width=8 f:facet af:commandImageLink . . . af:outputText id=pageInfo value=Page 1 of 1 af:commandImageLink . . . af:panelGroupLayout af:panelGroupLayout af:panelGroupLayout af:carouselItem Performance Tip: The simpler the structure for the carousel is, the faster it will perform. Using Output Components 16-15

16.6.2 What You May Need to Know About the Carousel Component and Different Browsers

In some browsers, the visual decoration of the carousel’s items will be richer. For example, Safari and Google Chrome display subtle shadows around the carousel’s items, and the noncurrent items have a brightness overlay to help make clear that the auxiliary items are not the current item, as shown in Figure 16–10 . Figure 16–10 Carousel Component Displayed in Google Chrome Figure 16–11 shows the same component in Internet Explorer. Figure 16–11 Carousel Component Displayed in Microsoft Internet Explorer

16.7 Displaying Application Status Using Icons

ADF Faces provides the statusIndicator component that you can use to indicate server activity. What displays depends both on the skin your application uses and on how your server is configured. By default, the following are displayed: ■ When your application is configured to use the standard data transfer service, during data transfer an animated spinning icon is displayed: When the server is not busy, a static icon is displayed: 16-16 Web User Interface Developers Guide for Oracle Application Development Framework ■ When your application is configured to use the Active Data Service ADS, what the status indicator displays depends on how ADS is configured. ADS can be configured to either have data pushed to the model, or it can be configured to have the application poll for the data at specified intervals. Table 16–3 shows the icons that are used to display server states for push and poll modes note that the icons are actually animated. After you drop a status indicator component onto the page, you can use skins to change the actual image files used in the component. For more information about using skins, see Chapter 20, Customizing the Appearance Using Styles and Skins. To use the status indicator icon: 1. In the Component Palette, from the Common Components panel, drag and drop a Status Indicator onto the page. 2. Use the Property Inspector to set any needed attributes.

16.8 Playing Video and Audio Clips

The ADF Faces media component allows you to include video and audio clips on your application pages. The media control handles two complex aspects of cross-platform media display: determining the best player to display the media, and sizing the media player. You can specify which media player is preferred for each clip, along with the size of the player to be displayed for the user. By default, ADF Faces uses the MIME type of the media resource to determine the best media player and the default inner player Note: ADS allows you to bind your application to an active data source. You must use the Fusion technology stack in order to use ADS. For more information, see the Using the Active Data Service chapter of the Oracle Fusion Middleware Fusion Developers Guide for Oracle Application Development Framework. Table 16–3 Icons Used in Status Indicator for ADS Icon Push Mode Pull Mode At the first attempt at connecting to the server. At the first attempt at connecting to server. When the first connection is successfully established. When the first connection is successfully established and when a connection is reestablished. When subsequent attempts are made to reconnect to the server. Before every poll request. When a connection cannot be established or reestablished. When the configured number of poll attempts are unsuccessful. Tip: For help in setting attributes, use the field’s dropdown menu to view a description of the attribute. Using Output Components 16-17 size to use, although you can specify the type of content yourself, using the contentType attribute. You can specify which controls are to be available to the user, and other player features such as whether or not the clip should play automatically, and whether or not it should play continuously or a specified number of times.

16.8.1 How to Allow Playing of Audio and Video Clips

Once you add a media component to your page, you can configure the media player to use by default, the size of the player and screen, the controls, and whether or not the clip should replay. To include an audio or video clip in your application page: 1. In the Component Palette, from the Common Components panel, drag and drop a Media onto the page.

2. In the Insert Media dialog, set the following attributes:

■ Source : Enter the URI to the media to be played. ■ StandbyText : Enter a message that will be displayed while the content is loading.

3. Expand the Common section of the Property Inspector and set the following:

■ Player : Select the media player that should be used by default to play the clip. You can choose from Real Player, Windows Media Player, or Apple Quick Time Player. Alternatively, you can create a link in the page that starts the playing of the media resource based on the user agents built-in content type mapping. The media control attempts to pick the appropriate media player using the following steps: – If the primary MIME type of the content is image, the built-in user-agent support is used. – If a media player has been specified by the player attribute, and that player is available on the user agent and can display the media resource, that player is used. – If one player is especially good at playing the media resource and that player is available on the user agent, that player is used. – If one player is especially dominant on the user agent and that player can play the media resource, that player is used. – The player connected to the link provided on the page is used. ■ Autostart : Set to True if you want the clip to begin playing as soon as it loads. ■ ContentType : Enter the MIME type of the media to play. This will be used to determine which player to use, the configuration of the controls, and the size of the display. 4. Expand the Appearance section of the Property Inspector and set the following: ■ Controls : Select the amount and types of controls you want the player to display. Because the set of controls available varies between players, you define what set of controls to display in a general way, rather than listing actual controls. 16-18 Web User Interface Developers Guide for Oracle Application Development Framework For example, you can have the player display all controls available, the most commonly used controls, or no controls. As an example, Example 16–7 uses the all setting for a media component. Example 16–7 Controls for a Media Player af:media source=imagesmyvideo.wmv controls=all Figure 16–12 shows how the player is displayed to the user. Figure 16–12 Media Player with All Controls Following values are valid: – All : Show all available controls for playing media on the media player. Using this setting can cause a large amount of additional space to be required, depending on the media player used. – Minimal : Show a minimal set of controls for playing media on the media player. This value gives users control over the most important media playing con- trols, while occupying the least amount of additional space on the user agent. – None : Do not show any controls for the media player and do not allow control access through other means, such as context menus. You would typically use this setting only for kiosk-type applications, where no user control over the playing of the media is allowed. This set- ting is typically used in conjunction with settings that automatically start the playback, and to play back continuously. – NoneVisible : Do not show any controls for the media player, but allow control access through alternate means, such as context menus. You would typically use this value only in applications where user con- trol over the playing of the media is allowed, but not encouraged. As with the none setting, this setting is typically used in conjunction with settings that automatically start the playback, and to play back continuously. – Typical : Show the typical set of controls for playing media on the media player. This value, the default, gives users control over the most common media playing controls, without occupying an inordinate amount of extra space on the user agent. ■ Width and Height: Define the size in pixels of the complete display, including the whole player area, which includes the media content area.