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.
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();
Hi Luc,
That is a nice one! It is deceptively simple – but you have to think of it. I am anxious to read more of these tricks.
Lucas