Luc Bors, june 2013, ODTUG KScope 2013 New Orleans

Best Practices for Developing Applications with Oracle ADF Mobile

Oracle ADF Mobile

Who Am I

•  Luc Bors

•  Principal Consultant

•  AMIS Nieuwegein Netherlands

•  Friends of Oracle & Java

•  5 Oracle ACE(D)

•  Oracle Partner

ADF Mobile Overview

17 Copyright © 2011, Oracle and/or its affiliates. All rights reserved.

Device Services

How It Works?

Phone Gap

Device Native Container Web View

Server HTML

ADF Mobile XML View

Java

Managed Beans

ADF Model

Third Party Web Sites

ADF Faces RC

ADF Mobile Browser

Mobile Device

Web Services (SOAP & REST)

Local HTML

HTML5 & JavaScript

Configuration Server

ADF Controller

Local'Data'

Credential M

anagement,

SSO &

Access C

ontrol

Application

Configuration

Server

ADF mobile vs. Vanilla ADF

•  The Obvious Differences

•  The Annoying Differences

•  The Not so Obvious Differences

•  The Nice Differences

The Obvious Differences

•  Mobile

•  Multiple Platforms

•  Multiple Form Factors

•  Touchscreens

What Device are you on ?

•  Device info

•  Device Properties

Work With Form Factors

•  Respond to Form Factors •  Conditionally Render Different content

Demo

Using the mouse for…..

•  Clicking Menu Items •  Clicking Links & Buttons •  Expanding / Collapsing •  Selecting / Deselecting

Gesture Support

•  You can configure Button, Link, and List Item components to react to the following gestures:

•  Swipe to the right •  Swipe to the left •  Swipe up •  Swipe down •  Tap-and-hold

Gesture examples

•  The Swipe Gesture

•  The Tap Gesture

<amx:actionListener binding="#{mybean.DoX}" type="swipeRight"/>

<amx:showPopupBehavior popupid="pop1" type="tapHold“ />

Annoying differences

A simple calculator….

•  In Vanilla ADF…… •  InputText for Value •  Autosubmit

•  OutputText for Result •  PartialTriggers

•  Managed Bean •  Holds the values

This is annoying….

•  ADF Mobile •  Autosubmit and PartialTriggers does not exist !

•  2 Options

I.  Use application Scoped Variables (no Coding) •  Not meant for this purpose

II.  Use the Property Change Listener Pattern

PropertyChangeSupport

The not so obvious ones

•  No menu structure….. •  What about Application Start ? •  What about Navigation ?

•  No ADF Business Components •  Now what ?

Springboard & navigationbar

•  Springboard configuration in adfmf-application.xml

The Default Springboard

The Custom SpringBoard

Configuring the springboard

Using the Local Database

Creating the Local Database

Register Listener

Using the POJO Datacontrol

Talking to the DB (Select)

Talking to the DB (DML…)

Using Webservices

•  Create a Webserivce Datacontrol

Using Webservices (1)

•  Just drag & drop the method from the Data Control

Using Webservices (1)

•  The PageDefinition File

•  The PageDefinition

Using Webservices (2)

•  Invoke directly from java. •  Does not use the binding layer

•  Uses Framework utilityMethod •  AdfmfJavaUtilities.invokeDataControlMethod()

•  Datacontrol must be in available in DataBindings.cpx

Advice

•  Do Not Hook Up Webservices Directly to Your Page

–  Use Multiple Layers of Datacontrols For Abstraction

–  You are in control

Demo

Use Caching

•  By default the webservice will be called on every request

•  Simply compare if what is in memory is the same as what needs to be shown.

if (!s_locationsList.isEmpty()){ MyLocation cur = (MyLocation)s_locationsList.get(0); Integer currentLoc = cur.getId(); if (currentLoc.compareTo(Integer.valueOf(<NEWVALUE>))!=0){ // clear cache callWebservice(); } }

The return of the invokeAction

•  The current row in ADF Mobile is not preserved across pages that bind to the same data collection

•  Steps: –  Inside the <amx:listItem> element of the list page, you need to add a

<amx:setPropertyListener> element to store the row key in a pageFlowScope variable.

–  In the page definition of the detail page, you need to add a setCurrentRowWithKey action, which uses the pageFlowScope variable to set the current row.

–  In the page definition of the detail page, you need to add an invokeAction executable for the setCurrentRowWithKey action to ensure the current row is automatically set when entering the detail page.

–  http://www.ateam-oracle.com/adf-mobile-preserving-the-current-row-across-pages/

The Nice Differences

•  Device Interaction

•  Thematic Maps

Device Interaction

•  The Device Datacontrol

•  Drag n Drop support

•  Attributes as fields

•  Operations as buttons

Camera interaction

•  Take a picture ……………

•  …… or get one from the Library

import oracle.adf.model.datacontrols.device; DeviceManagerFactory.getDeviceManager().getPicture(100, DeviceManager.CAMERA_DESTINATIONTYPE_FILE_URI, DeviceManager.CAMERA_SOURCETYPE_CAMERA, false, DeviceManager.CAMERA_ENCODINGTYPE_PNG, 0, 0);

DeviceManager.CAMERA_SOURCETYPE__PHOTOLIBRARY

Be careful !!

•  DESTINATIONTYPE_DATA_URL you will get the image as base64 encoded string

•  Camera’s are very good. •  Picture quality is amazing.

–  Encoding such images as base64 causes memory issues

•  Don’t blow up your app. –  iOS you should set quality parameter to a value less then 50 to avoid –  On Android out-of-memory can be caused with default image settings. Make

image smaller by setting targetWidth and targetHeight

Demo

I wish ADF could do this

Custom Thematic Map

•  Configuration File

•  Custom Image

Custom Thematic Map

Custom Thematic Map

Demo

Summary

•  Today was about differences •  Know the differences •  Know the ADF Mobile way to do it

•  There are many parallels •  Developing ‘feels’ like Vanilla ADF •  Component Based Developement •  ADF ‘like’ config files •  DataControl / DataBinding

•  My advise •  Use ADF Mobile like ADF •  Know The DataControl by heart •  Know how to use Multiple (levels) of Datacontrols •  Use Java; it is more flexible then declarative

Questions ?

Luc Bors, AMIS, The Netherlands Luc.Bors@amis.nl LucBors@gmail.com

Follow me on : @lucb_