Shay Shmeltzer's Oracle Development Tools Tips

Setting up a Carousel Component in ADF Mobile

Shay Shmeltzer
Director of Product Management - Oracle

The Carousel component is one of the slickier ways of showing collections of data, and on a mobile device it works really great with the finger swipe gesture.

Using the Carousel component in ADF Mobile is similar to using it in regular web ADF applications, with one major change - right now you can't drag a collection from the data control palette and drop it as a carousel.

So here is a quick work around for that, and details about setting up carousels in your application.

First thing you'll need is a data control that returns an array of records. In my demo I'm using the Emps collection that you can get from following this tutorial.

Then you drag the emps and drop it in your amx page as an ADF mobile iterator.

We are doing this as a short cut to getting the right binding needed for a carousel in our page. If you look now in your page's binding you'll see something like this:

You can now remark the whole iterator code in your page's source.

Next let's add the carousel

From the component palette drag the carousel (from the data view category) to the page. Next drag a carousel item and drop it in the nodestamp facet of the carousel.

Now we'll hook up the carousel to the binding we got from the iterator - this is quite simple just copy the var and value attributes from the iterator tag to the carousel tag: var="row" value="#{bindings.emps.collectionModel}"

Next drop a panelForm, or another layout panel in to the carousel item.

Into that panelForm you can now drop items and bind their value property to row.attributeNames - basically copying the way it is in the fields in the iterator for example: value="#{row.hireDate}". By the way you can also copy other attributes like the label.

And that's it.

Your code should end up looking something like this:

    <amx:carousel id="c1" var="row" value="#{bindings.emps.collectionModel}">
      <amx:facet name="nodeStamp">
        <amx:carouselItem id="ci1">
          <amx:panelFormLayout id="pfl1">
            <amx:inputText label="#{bindings.emps.hints.salary.label}" value="#{row.salary}" id="it1"/>
            <amx:inputText label="#{bindings.emps.hints.name.label}" value="#{row.name}" id="it2"/>

And when you run your application it will look like this:

Join the discussion

Comments ( 3 )
  • guest Thursday, November 28, 2013

    Hi Shay! we are having problems with the Carousel... we are trying to use it to show an "Address Book" in a "header" form, where it shows peoples photo, and then, the detail of the contact, is shown in a "detail" Form.

    Now, we can't get the #{row.rowKey} for the current row...

    here is our code that should return the rowKey:

    ValueExpression vex = AdfmfJavaUtilities.getValueExpression("#{bindings.customerListIterator}", Object.class);

    AmxIteratorBinding iter2 = (AmxIteratorBinding)vex.getValue(AdfmfJavaUtilities.getAdfELContext());

    int index = iter2.getIterator().getCurrentIndex();

    return String.valueOf(index);

    Now we have a problem:

    1) the method returns always zero ("0"), so I think that is because italways points to the first element in the iterator...

    do you know why? or how can i solve it?

    Thanks in advance!


  • guest Tuesday, July 29, 2014

    Hi Shay,

    Can you please let me know how can we set current row is Coursel for ADF mobile and also displaying Master detail relationship collection items.



  • Shay Tuesday, July 29, 2014
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.