Technically it should be easy to be integrated, e.g. like
..
<flexslider:FlexSlider animation="fade“ id=" fs1="" imagelist="#{someBean.imageList}" />
..
Environment
The following sample is based on ADF 11.1.1.7How to do it
Well - in theory - it is quite simple. Take a look at the plain JavaScript/HTML Sample from http://www.woothemes.com/flexslider/ and put all necessary files in your component project which will be bundled as ADF Library for reuse. However based on your use cases (integrate inside a fragment based taskflow) there will be some challenges.- How to deal with more then one instance on one page
- How to hook the javascript, which typically hooks into the onload javascript phase
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade" /* or "slide" */
});
});
So here is my solution.
Step 1: Setup an ADF component project und copy all relevant files from the FlexSlider
Step 2: Next create the declarative component FlexSlider.jspx (by using the JDeveloper wizard, generate the component class and TagLibrary). The important part is to generate a unique id for the slider DIV and to make sure to call the needed javascript method to setup the slideshow. The FlexSlider.jspx looks as follows
and for the FlexSlider.java define the following methods
To make the Javascript call we use a known trick to bind the Call to a getter on an af:outputText with visible=„false“.
How to use it
Define a simple bean (or could also be a DataControl) that serves a List of Images
Drop the declarative component „FlexSlider“ from the component palette onto the given page and bind the given list via EL
As result you will get a reusable UI component to integrate slideshows into ADF applications.
Gotchas
The font resources like ttf, eot, woff, svg (that are referenced from the flexslider.css and are being used as the previous/next font-icons) are not served as expected from the ADF Library which holds the custom component. For now the workaround is to copy these resource into your master viewcontroller project. This way you make sure that all resources are loaded.See ADF EMG Issue https://java.net/jira/browse/ADFEMG-244 for the current progress.
