Animation using ADF

ADF can be used to create animation though not that much but we can see a small example and then one can explore the possibilities in this area.

The secret of animation in ADF lies in the fact of using images which are similar to each other and then refreshing images so that different images ap
pear one after another within a fraction of second and viewer observe it as a moving. We will use af:switcher fucntionality to achieve the same in our ADF page.


The switcher component dynamicallyu decides which facet components should be rendered. The switch will render the facet matching the facetName, in case no facetName exists defaultFacet is rendered. The diagram below shows the same.

Now we will use the concept of af:switcher in our code to create an animation. Though this is not the best way but i just wanted to do some R&D on this and may be ADF guru's can put more light on the same.

The idea behind this exercise is the oracle post

http://www.oracle.com/technetwork/developer-tools/adf/learnmore/60-table-drag-n-drop-sample-176981.pdf

We will be using the functionality provided for af:switcher to achieve a small animation.

The animation will start on click of a button

Firstly we will create take two images so that we can flip between them to create an animation.

We will create two facet and will embed two image in them

We will create an AF:switcher which will default to an image1.

We will have a poll on second facet which will display the second image2.

Now the flow will be like this

Image1 will be display--->On click of button image2 will be displayed--->Poller will work and will again set the image to image1

This we are doing for two images and the time interval will be 100ms so that it all appears in a fraction of second.

As you can see in the structure

We have two facet having two different images. The facet2 has a polling mechanism which polls after a certain interval of time and set the image.

Facet1 has following image



And facet2 has following image



the command button has an action defined in the managed bean



Similarly the poller is also associated with a method in the same managed bean



The AF:switcher is pointed to FacetName and a deafult facet. In case the FacetName is not coming it will display the default facet otherwise it will pick the FacetName from the view scope



Rest is setting the view scope from the back end,

Following java code can be used


import java.util.Map;
import javax.faces.component.ContextCallback;
import javax.faces.component.UIComponent;
import javax.faces.component.UIViewRoot;
import javax.faces.context.FacesContext;
import oracle.adf.view.rich.context.AdfFacesContext;
import org.apache.myfaces.trinidad.event.PollEvent;
public class AnimationBean {
private void refreshPage(String componentId) {
String comp = componentId;
FacesContext fctx = FacesContext.getCurrentInstance();
UIViewRoot root = fctx.getViewRoot();
root.invokeOnComponent(fctx, comp, new ContextCallback() {
public void invokeContextCallback(FacesContext facesContext,
UIComponent uiComponent) {
AdfFacesContext.getCurrentInstance().addPartialTarget(uiComponent);
}
});
}

public void onPoll(PollEvent pollEvent) {
Map viewScope = AdfFacesContext.getCurrentInstance().getViewScope();
viewScope.put("binState", "Animation1");
refreshPage("db1");

}

public String Animate() {

Map viewScope = AdfFacesContext.getCurrentInstance().getViewScope();
viewScope.put("binState", "FinalPicture");
refreshPage("db1");
return null;
}
}


Here db1 is Id for the top level page which in our case is a decorative box




Go Ahead and deploy the process to integrate weblogic server.

Once you get the page click on the RunAnimation button and you will get following screen in succession