<af:carousel>

UIComponent class: oracle.adf.view.rich.component.rich.data.RichCarousel
Component type: oracle.adf.RichCarousel

Naming container: Yes. When referring to children of this component ("partialTriggers", findComponent(), etc.), you must prefix the child's ID with this component's ID and a colon (':')

The carousel component displays a spinning series of items based on rows of a collection model.

Carousel Model

The carousel component uses a model to access the data in the underlying list. The specific model class is oracle.adf.view.rich.model.CollectionModel. You may also use other model instances, e.g., java.util.List, array, and javax.faces.model.DataModel. The carousel will automatically convert the instance into a CollectionModel.

Fetch Size

The carousel component is virtualized. This means that not all the rows that are available for the component on the server are fetched and displayed on the client. The number of rows that are displayed on the client should generally be just enough to fill the viewport. More rows are fetched as the user spins the carousel. "fetchSize" is the number of rows requested from the client to the server on each attempt to fill the component. So if the space allocated for the carousel is small, the fetch size of 25 may be sufficient to fill the component. However if the space allocated for the carousel is large, there might be a need to request the data multiple times from the server. If the carousel has to make a request to the server 2 times when fetchSize is 25, it may be appropriate to set the fetchSize to 50.

CSS Style Restriction

The carousel requires dimensions to display. Either the carousel must be placed in a parent component that will stretch it or the carousel must have explicit dimensions which are provided by the skin. You need to be careful to not apply an inlineStyle or styleClass that would change the dimensions to be indeterminate.

Attachment Mode

It is recommended that you set contentDelivery="immediate" and a large fetch size. Any items beyond the fetch size will not be available on the client.

Geometry Management

This component can be stretched by a parent layout component that stretches its children, e.g. panelStretchLayout, panelSplitter.
This component only accepts carouselItem children and they will be stretched as needed to fit within the dimensions allocate by the carousel. Refer to the carouselItem documentation for details on how geometry is managed for carouselItem children.

Attribute Notes

The "first" and "rows" attributes inherited from the UIXIterator superclass are not currently supported for the rich render kit.

Code Example(s)

<af:carousel id="carousel" var="item" value="#{myBean.items}"
             carouselSpinListener="#{myBean.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>

Events

Type	Phases	Description
oracle.adf.view.rich.event.CarouselSpinEvent	Apply Request Values, Invoke Application	The spin event is delivered when the table selection changes.
org.apache.myfaces.trinidad.event.AttributeChangeEvent	Invoke Application, Apply Request Values	Event delivered to describe an attribute change. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing.

Type

Phases

Description

oracle.adf.view.rich.event.CarouselSpinEvent

Apply Request Values,
Invoke Application

The spin event is delivered when the table selection changes.

org.apache.myfaces.trinidad.event.AttributeChangeEvent

Invoke Application,
Apply Request Values

Event delivered to describe an attribute change. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing.

Name	Description
nodeStamp	the component to use to stamp each element in the carousel. A carouselItem child is required.

Name

Description

nodeStamp

the component to use to stamp each element in the carousel. A carouselItem child is required.

Attributes

Name	Type	Supports EL?	Description
attributeChangeListener	javax.el.MethodExpression	Only EL	a method reference to an attribute change listener. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing.
auxiliaryOffset	Number	Yes	the offset shift factor that a carousel item will have relative to its nearest item towards the current carousel item in circular displayItems mode. This is the distance an auxiliary item will be moved from its nearest item towards the current item (the distance is the size of the next nearest item multiplied by this offset factor).
auxiliaryPopOut	String	Yes	Valid Values: off, hover whether mouse movements within the auxiliary item area of the carousel in circular displayItems mode causes the auxiliary items to be scaled to match the current carousel item.
auxiliaryScale	Number	Yes	the size scaling factor that a carousel item will have relative to its nearest item towards the current carousel item in circular displayItems mode. A value of 1 means the auxiliary items will all be the same size. A value less than 1 means the auxiliary items will become smaller the further they are from the current item. A value greater than 1 means the auxiliary items will become larger the further they are from the current item. Note that regardless of item size, the current carousel item is the only item that is interactive; clicking on an auxiliary item will only spin the carousel.
binding	oracle.adf.view.rich.component.rich.data.RichCarousel	Only EL	an EL reference that will store the component instance on a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean.
carouselSpinListener	javax.el.MethodExpression	Only EL	a method reference to a carousel spin listener
clientComponent	boolean	Yes	whether a client-side component will be generated. A component may be generated whether or not this flag is set, but if client Javascript requires the component object, this must be set to true to guarantee the component's presence. Client component objects that are generated today by default may not be present in the future; setting this flag is the only way to guarantee a component's presence, and clients cannot rely on implicit behavior. However, there is a performance cost to setting this flag, so clients should avoid turning on client components unless absolutely necessary.
contentDelivery	String	Yes	Valid Values: immediate, lazy whether data should be fetched when the component is rendered initially. When contentDelivery is "immediate", data is fetched and inlined into the component chrome. If contentDelivery is "lazy", data will be fetched and delivered to the client during a subsequent request.
controlArea	String	Yes	Valid Values: full, small, compact, none specifies how the area where the user spins the carousel is presented. The "full" option lets a user spin through carousel items one at a time, jump to a specific item, or drag the slider thumb to continuously spin the carousel until the mouse is let go. The "small" option lets a user click the next and previous buttons to spin through carousel items one at a time. The "compact" option is similar to "small" but omits details such as the "x of y" progress information. The "none" option provides no control area at all.
currentItemKey	Object	Yes	the key that identifies the current item in this component.
customizationId	String	Yes	This attribute is deprecated. The 'id' attribute should be used when applying persistent customizations. This attribute will be removed in the next release.
disabled	boolean	Yes	a boolean which if the value is "true", the component becomes non-interactive. Otherwise, the default value is "false" and component assumes its expected behavior.
displayItems	String	Yes	Valid Values: circular, oneByOne the current carousel item will always be shown but you can use this attribute to specify how the auxiliary carousel items are displayed. Use "circular" if you want the auxiliary items displayed near the current item in a scaled down pattern with as many items shown as will fit. Use "oneByOne" if you only want the current item shown.
emptyText	String	Yes	the text of an empty carousel. If the text is enclosed in an open and closing html tag, it will be formatted. The formatting behavior is similar to outputFormatted component. If it is not enclosed in an open and closing html tag, it will not be formatted.
fetchSize	int	Yes	the number of rows in the data fetch block Not supported on the following renderkits: org.apache.myfaces.trinidad.core
first	int	Yes	the index of the first row in the currently range of rows. This index is zero-based. This attribute is used to control which range of rows to display to the user.
halign	String	Yes	Valid Values: start, center, end determines the horizontal alignment of the carousel items.
id	String	No	the identifier for the component. The identifier must follow a subset of the syntax allowed in HTML: Must not be a zero-length String. First character must be an ASCII letter (A-Za-z) or an underscore ('_'). Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').
immediate	boolean	Yes	whether or not data validation - client-side or server-side - should take place when events are generated by this component. When immediate is true, the default ActionListener provided by the JavaServer Faces implementation should be executed during Apply Request Values phase of the request processing lifecycle, rather than waiting until the Invoke Application phase.
inlineStyle	String	Yes	the CSS styles to use for this component. This is intended for basic style changes. The inlineStyle is a set of CSS styles that are applied to the root DOM element of the component. If the inlineStyle's CSS properties do not affect the DOM element you want affected, then you will have to create a skin and use the skinning keys which are meant to target particular DOM elements, like ::label or ::icon-style.
orientation	String	Yes	Valid Values: horizontal, vertical horizontal (the default) for the images being displayed along an x-axis or vertical for y-axis.
partialTriggers	String[]	Yes	the IDs of the components that should trigger a partial update. This component will listen on the trigger components. If one of the trigger components receives an event that will cause it to update in some way, this component will request to be updated too. Identifiers are relative to the source component (this component), and must account for NamingContainers. If your component is already inside of a naming container, you can use a single colon to start the search from the root of the page, or multiple colons to move up through the NamingContainers - "::" will pop out of the component's naming container (or itself if the component is a naming container) and begin the search from there, ":::" will pop out of two naming containers (including itself if the component is a naming container) and begin the search from there, etc.
rendered	boolean	Yes	whether the component is rendered. When set to false, no output will be delivered for this component (the component will not in any way be rendered, and cannot be made visible on the client). If you want to change a component's rendered attribute from false to true using PPR, set the partialTrigger attribute of its parent component so the parent refreshes and in turn will render this component.
rows	int	Yes	the maximum number of rows to display in a single range of rows. Some ranges might have fewer than the number of rows specified by this attribute (eg: the last range might have an insufficient number of rows). To display all rows at once, set this attribute to 0. The default is 25.
shortDesc	String	Yes	the short description of the component. This text is commonly used by user agents to display tooltip help text, in which case the behavior for the tooltip is controlled by the user agent, e.g. Firefox 2 truncates long tooltips. For form components, the shortDesc is displayed in a note window. For components that support the helpTopicId attribute it is recommended that helpTopicId is used as it is more flexible and is more accessibility-compliant.
styleClass	String	Yes	a CSS style class to use for this component. The style class can be defined in your jspx page or in a skinning CSS file, for example, or you can use one of our public style classes, like 'AFInstructionText'.
unsecure	java.util.Set	Yes	A whitespace separated list of attributes whose values ordinarily can be set only on the server, but need to be settable on the client. Currently, this is supported only for the "disabled" attribute.
valign	String	Yes	Valid Values: middle, top, bottom determines the vertical alignment of the carousel items.
value	Object	Yes	the data model being used by this component. The specific model class is `org.apache.myfaces.trinidad.model.CollectionModel`. You may also use other model instances, e.g., `java.util.List` , array, and `javax.faces.model.DataModel`. This component will automatically convert the instance into a `CollectionModel`.
var	String	No	Name of the EL variable used to reference each element of this collection. Once this component has completed rendering, this variable is removed (or reverted back to its previous value).
varStatus	String	No	Name of the EL variable used to reference the varStatus information. Once this component has completed rendering, this variable is removed (or reverted back to its previous value). The VarStatus provides contextual information about the state of the component to EL expressions. For components that iterate, varStatus also provides loop counter information. Please see the this component's documentation for the specific properties on the varStatus. The common properties on varStatus include: "model" - returns the CollectionModel for this component. "index" - returns the zero based row index. "hierarchicalIndex" - returns an array containing zero based row index. "hierarchicalLabel" - returns a string label representing 1 based index of this row. "rowKey" - returns the current rowKey in the collection. "current" - returns the current row in the collection.
visible	boolean	Yes	the visibility of the component. If it is "false", the component will be hidden on the client. Unlike "rendered", this does not affect the lifecycle on the server - the component may have its bindings executed, etc. - and the visibility of the component can be toggled on and off on the client, or toggled with PPR. When "rendered" is false, the component will not in any way be rendered, and cannot be made visible on the client. In most cases, use the "rendered" property instead of the "visible" property. Not supported on the following renderkits: org.apache.myfaces.trinidad.core

Name

Type

Supports EL?

Description

attributeChangeListener

javax.el.MethodExpression

Only EL

a method reference to an attribute change listener. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing.

auxiliaryOffset

Number

Yes

the offset shift factor that a carousel item will have relative to its nearest item towards the current carousel item in circular displayItems mode. This is the distance an auxiliary item will be moved from its nearest item towards the current item (the distance is the size of the next nearest item multiplied by this offset factor).

auxiliaryPopOut

String

Yes

Valid Values: off, hover

whether mouse movements within the auxiliary item area of the carousel in circular displayItems mode causes the auxiliary items to be scaled to match the current carousel item.

auxiliaryScale

Number

Yes

the size scaling factor that a carousel item will have relative to its nearest item towards the current carousel item in circular displayItems mode. A value of 1 means the auxiliary items will all be the same size. A value less than 1 means the auxiliary items will become smaller the further they are from the current item. A value greater than 1 means the auxiliary items will become larger the further they are from the current item. Note that regardless of item size, the current carousel item is the only item that is interactive; clicking on an auxiliary item will only spin the carousel.

binding

oracle.adf.view.rich.component.rich.data.RichCarousel

Only EL

an EL reference that will store the component instance on a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean.

carouselSpinListener

javax.el.MethodExpression

Only EL

a method reference to a carousel spin listener

clientComponent

boolean

Yes

whether a client-side component will be generated. A component may be generated whether or not this flag is set, but if client Javascript requires the component object, this must be set to true to guarantee the component's presence. Client component objects that are generated today by default may not be present in the future; setting this flag is the only way to guarantee a component's presence, and clients cannot rely on implicit behavior. However, there is a performance cost to setting this flag, so clients should avoid turning on client components unless absolutely necessary.

contentDelivery

String

Yes

Valid Values: immediate, lazy

whether data should be fetched when the component is rendered initially. When contentDelivery is "immediate", data is fetched and inlined into the component chrome. If contentDelivery is "lazy", data will be fetched and delivered to the client during a subsequent request.

controlArea

String

Yes

Valid Values: full, small, compact, none

specifies how the area where the user spins the carousel is presented. The "full" option lets a user spin through carousel items one at a time, jump to a specific item, or drag the slider thumb to continuously spin the carousel until the mouse is let go. The "small" option lets a user click the next and previous buttons to spin through carousel items one at a time. The "compact" option is similar to "small" but omits details such as the "x of y" progress information. The "none" option provides no control area at all.

currentItemKey

Object

Yes

the key that identifies the current item in this component.

customizationId

String

Yes

This attribute is deprecated. The 'id' attribute should be used when applying persistent customizations. This attribute will be removed in the next release.

disabled

boolean

Yes

a boolean which if the value is "true", the component becomes non-interactive. Otherwise, the default value is "false" and component assumes its expected behavior.

displayItems

String

Yes

Valid Values: circular, oneByOne

the current carousel item will always be shown but you can use this attribute to specify how the auxiliary carousel items are displayed. Use "circular" if you want the auxiliary items displayed near the current item in a scaled down pattern with as many items shown as will fit. Use "oneByOne" if you only want the current item shown.

emptyText

String

Yes

the text of an empty carousel. If the text is enclosed in an open and closing html tag, it will be formatted. The formatting behavior is similar to outputFormatted component. If it is not enclosed in an open and closing html tag, it will not be formatted.

fetchSize

int

Yes

the number of rows in the data fetch block
Not supported on the following renderkits: org.apache.myfaces.trinidad.core

first

int

Yes

the index of the first row in the currently range of rows. This index is zero-based. This attribute is used to control which range of rows to display to the user.

halign

String

Yes

Valid Values: start, center, end

determines the horizontal alignment of the carousel items.

String

the identifier for the component. The identifier must follow a subset of the syntax allowed in HTML:

Must not be a zero-length String.
First character must be an ASCII letter (A-Za-z) or an underscore ('_').
Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').

immediate

boolean

Yes

whether or not data validation - client-side or server-side - should take place when events are generated by this component. When immediate is true, the default ActionListener provided by the JavaServer Faces implementation should be executed during Apply Request Values phase of the request processing lifecycle, rather than waiting until the Invoke Application phase.

inlineStyle

String

Yes

the CSS styles to use for this component. This is intended for basic style changes. The inlineStyle is a set of CSS styles that are applied to the root DOM element of the component. If the inlineStyle's CSS properties do not affect the DOM element you want affected, then you will have to create a skin and use the skinning keys which are meant to target particular DOM elements, like ::label or ::icon-style.

orientation

String

Yes

Valid Values: horizontal, vertical

horizontal (the default) for the images being displayed along an x-axis or vertical for y-axis.

partialTriggers

String[]

Yes

the IDs of the components that should trigger a partial update. This component will listen on the trigger components. If one of the trigger components receives an event that will cause it to update in some way, this component will request to be updated too. Identifiers are relative to the source component (this component), and must account for NamingContainers. If your component is already inside of a naming container, you can use a single colon to start the search from the root of the page, or multiple colons to move up through the NamingContainers - "::" will pop out of the component's naming container (or itself if the component is a naming container) and begin the search from there, ":::" will pop out of two naming containers (including itself if the component is a naming container) and begin the search from there, etc.

rendered

boolean

Yes

whether the component is rendered. When set to false, no output will be delivered for this component (the component will not in any way be rendered, and cannot be made visible on the client). If you want to change a component's rendered attribute from false to true using PPR, set the partialTrigger attribute of its parent component so the parent refreshes and in turn will render this component.

rows

int

Yes

the maximum number of rows to display in a single range of rows. Some ranges might have fewer than the number of rows specified by this attribute (eg: the last range might have an insufficient number of rows). To display all rows at once, set this attribute to 0. The default is 25.

shortDesc

String

Yes

the short description of the component. This text is commonly used by user agents to display tooltip help text, in which case the behavior for the tooltip is controlled by the user agent, e.g. Firefox 2 truncates long tooltips. For form components, the shortDesc is displayed in a note window. For components that support the helpTopicId attribute it is recommended that helpTopicId is used as it is more flexible and is more accessibility-compliant.

styleClass

String

Yes

a CSS style class to use for this component. The style class can be defined in your jspx page or in a skinning CSS file, for example, or you can use one of our public style classes, like 'AFInstructionText'.

unsecure

java.util.Set

Yes

A whitespace separated list of attributes whose values ordinarily can be set only on the server, but need to be settable on the client. Currently, this is supported only for the "disabled" attribute.

valign

String

Yes

Valid Values: middle, top, bottom

determines the vertical alignment of the carousel items.

value

Object

Yes

the data model being used by this component. The specific model class is org.apache.myfaces.trinidad.model.CollectionModel. You may also use other model instances, e.g., java.util.List , array, and javax.faces.model.DataModel. This component will automatically convert the instance into a CollectionModel.

var

String

Name of the EL variable used to reference each element of this collection. Once this component has completed rendering, this variable is removed (or reverted back to its previous value).

varStatus

String

Name of the EL variable used to reference the varStatus information. Once this component has completed rendering, this variable is removed (or reverted back to its previous value). The VarStatus provides contextual information about the state of the component to EL expressions. For components that iterate, varStatus also provides loop counter information. Please see the this component's documentation for the specific properties on the varStatus. The common properties on varStatus include:

"model" - returns the CollectionModel for this component.
"index" - returns the zero based row index.
"hierarchicalIndex" - returns an array containing zero based row index.
"hierarchicalLabel" - returns a string label representing 1 based index of this row.
"rowKey" - returns the current rowKey in the collection.
"current" - returns the current row in the collection.

visible

boolean

Yes

the visibility of the component. If it is "false", the component will be hidden on the client. Unlike "rendered", this does not affect the lifecycle on the server - the component may have its bindings executed, etc. - and the visibility of the component can be toggled on and off on the client, or toggled with PPR. When "rendered" is false, the component will not in any way be rendered, and cannot be made visible on the client. In most cases, use the "rendered" property instead of the "visible" property.
Not supported on the following renderkits: org.apache.myfaces.trinidad.core

<af:carousel>

Carousel Model

Fetch Size

CSS Style Restriction

Attachment Mode

Geometry Management

Attribute Notes

Code Example(s)

Events

Supported Facets

Attributes