ADF 11g: Carousel is not just for images – on carousels with panelbox, tabs, panelform and input components

Lucas Jellema 2

Following on the heels of Luc’s excellent post on the new ADF 11g carousel component – – is another article that shows off this visually attractive component, using it in a slightly different way.

Even though the most logical application of the ADF 11gR1 PS1 carousel component is to use for displaying images, the component does not mandate that approach. We can create carousel-items that contain whatever we like – including forms with enterable items. The carousel can be used for example as an alternative way of presenting, browsing through and editing detail records.

As you can see in this screenshot, a carousel item can hold various nested components, such as PanelBox, PanelTabbed, PanelFormLayout and all kinds of input components.

This example has been based on a bean-data control – just to quickly put something together. The collect of people was dragged to the page and dropped as a carousel:


<af:carousel currentItemKey="#{bindings.people3.treeModel.rootCurrencyRowKey}"
                           value="#{bindings.people3.treeModel}" var="item"
    <f:facet name="nodeStamp">
       <af:carouselItem id="ci2"/>

Inside the carousel, the carousel items were extended to hold the additional nested components

<af:carouselItem id="ci1" text="#{item.firstName} #{item.lastName}">
  <af:panelBox text="#{item.firstName} #{item.lastName}" id="pb1">
    <af:panelTabbed id="pt1">
      <af:showDetailItem text="Main" id="sdi1">
        <af:panelFormLayout id="pf">
          <af:inputText label="First Name"
                        value="#{item.firstName}" columns="15"
          <af:inputText label="Last Name"
                        value="#{item.lastName}" columns="25"
          <af:inputText label="Country" value="#{}"
                        columns="20" id="it5">
            <af:autoSuggestBehavior suggestedItems="#{countrySuggester.getCountries}"/>
      <af:showDetailItem text="Auxilliary" id="sdi2">
        <af:panelFormLayout id="pf2">
          <af:inputText label="Gender"
                        value="#{item.gender}" columns="8"
          <af:inputDate label="Birthdate" id="id3"
          value="#{item.birthdate}" />

One thing to mention: the dimensions of the carousel are determined by the stretch-behavior of the parent component. The dimensions of the carousel items depend on the overall carousel dimensions and on the position of the item: the current focus item is the largest and the ones to the sides are increasinly smaller, fading into the horizon. The items that are further in the background will typically not be able to fully contain the form. Less appealing wrapping effects may occur.

Here the effect of the autoSuggest behavior on the Country inputText. This too works inside the carousel:


Download sample application:

2 thoughts on “ADF 11g: Carousel is not just for images – on carousels with panelbox, tabs, panelform and input components

  1. Aha, so that is what they mean by thinking out of the box. Very nice. Just out of curiosity: what do you think happens when you collapse the ‘current’ panelBox ? I didn’t try.

Comments are closed.

Next Post

ADF 11g - the native AutoSuggest behavior

The recent ADF 11gR1 PS1 release introduced a component we have been waiting for: the inputText with AutoSuggest. An inputText component that will present suggested values to the user depending on whatever text the user has already entered. The implementation in ADF of the functionality that got AJAX started, based […]
%d bloggers like this: