Tuesday, July 29, 2014

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

Sunday, July 13, 2014

ADF Mobile rebrands to Oracle MAF (Mobile Application Framework) - New Name, New Features, Growing Community!

Shortly after the release of ADF 12.1.3 the cross-platform mobile development framework ADF Mobile was rebranded to Oracle MAF (Mobile Application Framework). Nothing has changed on the technical foundation of that mobile framework. It is still based on Apache Cordova, HTML5/CSS3, Java, and offers the possibility to develop offline-capable apps with the help of an embedded SQLite database. The developed hybrid apps run on iOS and Android-based smartphones and tablets.
Oracle MAF (Mobile Application Framework) - Build Once , Run anyware
Oracle MAF Overview
The migration of ADF Mobile Apps to Oracle MAF runs smoothly. The migration is totaly transparent when opening the existing app in JDeveloper 12.1.3/Oracle MAF 2.0 Extension.  Excellent!

A highlight of Oracle MAF is that Apache Cordova plugins (eg barcode scanner plugins) can be integrated. The included sample apps have a showcase for reading barcodes. This is very handy! The integrated barcode scanner gives rise to many new and interesting fields of action. Hope to blog about that in more detail in near future. Stay tuned!

Oracle MAF - Finally integrated BarCode Scanner
Oracle MAF 2.0 -  Barcode Scanner Integration included














I won't list all the new features here, since it is well announced by Shay Shmeltzer here (Say hello to the new Oracle MAF) and here (Oracle MAF hits the street).

Besides the "rebranding" many new "channels" were launched, such as a forum for technical issues, a community at G+, Twitter and Facebook. I have checked all that and summarized the most important links. A lot of activity is going on! Enjoy Exploring;)

Oracle Mobile Application Framework (MAF)

Oracle Mobile Community and Forum

What others write