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

Following on the heels of Luc’s excellent post on the new ADF 11g carousel component – https://technology.amis.nl/blog/6514/jdeveloper-11112-carousel-component-as-master-and-detail – 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"
                           id="c7">
    <f:facet name="nodeStamp">
       <af:carouselItem id="ci2"/>
    </f:facet>
</af:carousel>

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"
                        id="it7"/>
          <af:inputText label="Last Name"
                        value="#{item.lastName}" columns="25"
                        id="it6"/>
          <af:inputText label="Country" value="#{item.country}"
                        columns="20" id="it5">
            <af:autoSuggestBehavior suggestedItems="#{countrySuggester.getCountries}"/>
          </af:inputText>
        </af:panelFormLayout>
      </af:showDetailItem>
      <af:showDetailItem text="Auxilliary" id="sdi2">
        <af:panelFormLayout id="pf2">
          <af:inputText label="Gender"
                        value="#{item.gender}" columns="8"
                        id="it8"/>
          <af:inputDate label="Birthdate" id="id3"
          value="#{item.birthdate}" />
          </af:panelFormLayout>
      </af:showDetailItem>
    </af:panelTabbed>
  </af:panelBox>
</af:carouselItem>

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: CarouselWithForm.zip.