Using FlexSlider as Declarative Component in ADF

In the www there are a lot of cool photo slideshow components which one might want to use in ADF applications too. For example the FlexSlider.

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.7

How 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.

Download

enpit.sample.flexslider-jdev11117.zip