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:
