0 
0 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.
Related posts:
ADF 11g – reducing the price of richness or how to streamline downloading Javascript Resources for ADF 11g Rich Client components ADF 11g – persisted run time user UI personalization or: Impatient man's MDS 
OOW 2009 – And they call that a "patch set"? Marvels coming up in ADF 11gR1 PS 1 
ADF 11g – the native AutoSuggest behavior The ADF must-go-to session at OOW 2012: the ADF EMG meeting on Sunday 30th September
Officially you have waaaaaaaaaaaay to much time on your hands.
CM.
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.