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

2

Following on the heels of Luc's excellent post on the new ADF 11g carousel component – http://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.

Share.

About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director for Fusion Middleware. Consultant, trainer and instructor on diverse areas including Oracle Database (SQL & PLSQL), Service Oriented Architecture, BPM, ADF, Java in various shapes and forms and many other things. Author of the Oracle Press book: Oracle SOA Suite 11g Handbook. Frequent presenter on conferences such as JavaOne, Oracle OpenWorld, ODTUG Kaleidoscope, Devoxx and OBUG. Presenter for Oracle University Celebrity specials.

2 Comments

  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.