Setting up a Carousel Component in ADF Mobile

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"/>
          </amx:panelFormLayout>
        </amx:carouselItem>
      </amx:facet>
    </amx:carousel>

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