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:





Comments:

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!

Rodrigo

Posted by guest on November 28, 2013 at 11:55 AM PST #

Post a Comment:
  • HTML Syntax: NOT allowed
About

me
I'm a Director of Product Management for the Oracle Java Development Tools.
Follow me:
Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today