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

Lucas Jellema 2
0 0
Read Time:2 Minute, 24 Second

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.

About Post Author

Lucas Jellema

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director and Oracle Developer Champion. Solution architect and developer on diverse areas including SQL, JavaScript, Kubernetes & Docker, Machine Learning, Java, SOA and microservices, events in various shapes and forms and many other things. Author of the Oracle Press book Oracle SOA Suite 12c Handbook. Frequent presenter on user groups and community events and conferences such as JavaOne, Oracle Code, CodeOne, NLJUG JFall and Oracle OpenWorld.
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

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: