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

Monday, June 30, 2014

How to use the Deck component (ADF 12.1.3 New Feature)

With the arrival of ADF 12.1.3 many new features has been introduced. One of those features is the brand new deck ui component. In this blogpost I want to give an example on how to use that new component.

Use Case

The use case is quite simple. Arrange pictures of soccer players in a grid. Once clicked on a picture it is flipped. On the backside you can see more details for the given player. Clicking once again on the card it flips back and shows the picture again. Let's look at the result:
Now clicking on the first pic it flips (with an animated transition) and show details.

How to implement

To implement the described use case create a panelGridLayout first with the following properties

  • row: Fixed height
  • cell: Fixed width, halign="stretch" and valign="stretch"

Inside each cell place the new af:deck component with two links as child components and two transition operations.
The commandLinks act as clickable cards on the deck. Each transition operation defines the desired animation when transitioning from one card to another. There are a lot of out-of-the-box transitions available as you can see in the screenshot.
Which card is currently displayed on the deck is controlled by the displayedChild attribute. It expects the component id of the given child ui component (in this case the af:commandLinks). The interesting piece of JSF Code for the sample to work is as follows:

To make the sample complete a backing bean is needed to handle the action events on each command link. Main task of the action listeners is to change the displayedChild attribut on the deck component and repaint it on the client (through a partial refresh)
While implementing the deck sample I did not want to use the deprecated af:commandLink. But converting it to af:link implies a JSF compilation error. So I switched back to the deprecated component.

Looks like the new Link Component is not fully compatible. Is this a bug?

Further Information