ADF 11g : Carousel going round and round (..and round and..)

2

Mostly when you see a carousel-ish component on the internet, it is automatically showing the next entry after a few seconds. I wondered if this could be done with the ADF carousel component as well.
And guess what

In one of my posts on this weblog I already explained how to implement an ADF carousel component. I managed to add the autoSpin functionallity to the carousel by simply adding a poll component to the page. This component has a pollListener attribute that you can bind to a backing bean method.

            <af:poll pollListener="#{carouselBean.autoSpin}"
                         id="poll"
                         interval="2000" />

In this method ( autoSpin() ) you need to be able to invoke methods on the CountriesViewIterator
These (next and first) refer to action bindings in the page Definition. If they are not in there yet, just add them by copy/paste the code below.

    <action IterBinding="CountriesViewIterator"
                 id="Next1"
                 RequiresUpdateModel="true"
                 Action="next"/>
    <action IterBinding="CountriesViewIterator"
                 id="First1"
                RequiresUpdateModel="true"
                Action="first"/>

In this method it is very easy to implement logic that forces to invoke the Next operation on the iterator that holds the data for the carousel.
Make sure to invoke the First operation whenever you are at the last record (!hasNext()).

Finally invoke the refreshCarousel() method, that adds the carousel as a partialTarget so it will be refreshed.

  public void autoSpin(PollEvent pollEvent) {
    // Add event code here...

    DCIteratorBinding countryIt =
      getBindingContainer().findIteratorBinding("CountriesViewIterator");

    RowSetIterator countryRSI = countryIt.getRowSetIterator();

    OperationBinding operationBinding = null;
    if(countryRSI.hasNext()){
    operationBinding =
        (OperationBinding)getBindingContainer().getOperationBinding("Next1");
    }
    else {
      operationBinding =
          (OperationBinding)getBindingContainer().getOperationBinding("First1");
    }
     Object execute = operationBinding.execute();

     refreshCarousel();

  }

The spinning is nice (not yet too smooth…) and will go on forever. I added a checkbox to be able to stop the spinning if necessary.

Spinning in action and downloadable workspace.

I uploaded a movie with the spinning in action. See here for the Spinning Carousel.
You can download the JDeveloper workspace here.

Share.

About Author

Luc Bors is Expertise Lead ADF and technical specialist/architect at AMIS, Nieuwegein (The Netherlands). He developed several Workshops and training on ADF and also is an ADF and JHeadstart instructor. Luc is a member of the ADF Methodology group and publishes articles on ADF in oracle technology related magazines, on the AMIS technology blog, (http://technology.amis.nl/blog).

2 Comments

  1. It’s great but lost the animation effect. And cause carousel component refresh after every poll. I’ve tried to use javascript call next and pervious instead. It’s just work fin.
     
    Call javascript like <carousel component>.getPeer()._initiateSpinNextAnimation();