Oracle ADF Mobile OGh (Oracle User Group Netherlands)

Luc Bors, july 2013; OGh Thema sessie ADF Mobile

Verhalen uit de praktijk Oracle ADF Mobile

Who Am I

•  Luc Bors

•  Principal Consultant

•  AMIS Nieuwegein Netherlands

•  Friends of Oracle & Java

•  5 Oracle ACE(D)

•  Oracle Partner

•  iPhone 5

•  7.6 mm (0.3 inches) •  112 gram (3.95 ounces)

•  Motorola PT300s

•  Very big (10-15 inches)

•  Very heavy (9 pounds)

HISTORY

WHY IS MOBILE IMPORTANT ?

Android Devices •  500.000.000 •  Daily growth 1.300.000

iPhones •  218.000.000

•  iPhone5: 2.000.000 in 24h

Mobile Challenges

Mobile Requirements

•  Tablet, Smart Phone, Feature Phone, Laptop •  Screen size •  Device capabilities •  Web browser capabilities •  Processing power •  Do you have control of the devices?

•  Network types –  Wi-Fi, 4GL, 3GL, offline –  Speed –  Availability –  Reliability

Integration of device features

•  Browser •  Camera •  GPS •  Contacts •  Calendar •  SMS •  Phone

End Users

•  Occasional users –  Frequency of interaction –  Length of interaction

•  Dedicated users –  Internal or External –  Frequency of interaction –  Length of interaction

•  Technology evolving very fast –  iOS, Android, Windows, Blackberry ….. –  Different tools, languages, platforms, etc.

•  User demands are very high –  Consumer are spoiled….

•  Currently IT optimized for web –  Very experienced IT department

–  Now must meet demand for mobile •  Multiple platforms and form factors

What are your challenges

MOBILE OPTIONS

•  Browser-based Solution –  Easiest to provide –  Limited integration to device features

•  Native Solution –  Higher barrier to entry –  Tight integration to device features

•  Hybrid Solution –  Combines ease of web development with the power of

native applications –  Good integration to device features

•  Complete Enterprise Application Framework

•  Declarative and visual development

•  Reuse business services

•  Reuse developer skills and tooling –  Consistent developer experiences for web and mobile

Mobile with Jdeveloper & ADF

3 Types of Applications

•  Mobile Web Apps

–  Online application accessed through mobile device browser

–  Browser governs access to local storage and device services (camera, GPS, etc.)

–  Highly reusable code

–  Highly portable

•  Native Mobile Apps

–  Application installed & runs on device

–  Optimized for specific mobile platform and form factor

–  Direct access to local storage and device services

–  Code reuse can be complex

–  Portability requires work

•  Hybrid Mobile Apps

–  Application installed & runs on device with HTML5 UI

–  Optimized for specific mobile platform & form factor

–  Direct access to local storage and device services

–  Code reuse simplified –  Portability simplified

Mobile Use Cases USE CASE DESCRIPTI

ON SOLUTION FUNCTION and BENEFITS

Tablet

Laptop/Desktop Replacement

ADF Faces RC Components

For desktop browser apps that are fully functional in iPad and Android tablet browsers

Desktop browser based applications must perform flawlessly in Tablet browser Single codebase Simplest rollout, maintenance, portability

Mobile Phone

Mobile Approval and Search

ADF Mobile Browser

For web pages that adapt to the mobile browser where they are viewed

Allows users to perform quick actions while on the go Benefits from application optimizations to smartphone form factor Some benefit from Device Service enhancements Supports broad range of mobile browsers (smartphones and feature phones)

Smartphone/tablet

Advanced Mobile Workers and

Mobile Approval and Search

ADF Mobile

For mobile apps that install and run on iOS devices

Applications must be optimized for device form factors Requires both devices services access as well as offline support Access to local storage and device services (camera, bar scanner, etc.) Reuse existing ADF development skills Minimizes development cycle for supporting new mobile platforms

•  OS Gesture Support –  Drag and drop, multi-select, hover, context menu, chart/

graph interactivity, etc. •  HTML5 implementation for DVT components •  Flowing layout support

–  Component flows downward based on fixed width

For web apps accessed on both laptops and tablets

ADF Faces Rich Client

Use Cases USE CASE DESCRIPTI

ON SOLUTION FUNCTION and BENEFITS

Tablet

Laptop/Desktop Replacement

ADF Faces RC Components

For desktop browser apps that are fully functional in iPad and Android tablet browsers

Desktop browser based applications must perform flawlessly in Tablet browser Single codebase Simplest rollout, maintenance, portability

Mobile Phone

Mobile Approval and Search

ADF Mobile Browser

For web pages that adapt to the mobile browser where they are viewed

Allows users to perform quick actions while on the go Benefits from application optimizations to smartphone form factor Some benefit from Device Service enhancements Supports broad range of mobile browsers (smartphones and feature phones)

Smartphone/tablet

Advanced Mobile Workers and

Mobile Approval and Search

ADF Mobile

For mobile apps that install and run on iOS devices

Applications must be optimized for device form factors Requires both devices services access as well as offline support Access to local storage and device services (camera, bar scanner, etc.) Reuse existing ADF development skills Minimizes development cycle for supporting new mobile platforms

•  Develop ADF Applications for Mobile Browsers –  Trinidad Components for UI –  ADF Model / Databinding –  ADF Business Components

•  Supported through JavaServer Faces Trinidad Components and Mobile Optimized CSS

•  Use the skills you have –  AJAX functionality such as PPR –  60 Trinidad JSF Components

ADF Mobile Browser

•  For ADF Mobile browser, you implement skinning by performing the following tasks: •  In the trinidad-config.xml component

•  define the <skin-family> tag with the EL (Expression Language) expression, #{requestContext.agent.skinFamilyType}

that returns the skin family type of the browser. •  In trinidad-skins.xml

•  Specify the renderkit and style sheet •  Include the CSS files within the ADF Mobile browser

project •  In ADF 11g R2 this is created and configured by default

Skinning to achieve Look And Feel

•  Use a goLink or goButton to invoke phone:

•  Use a goLink or goButton to invoke email:

<tr:goLink styleClass="messageText" text="#{sessionScope.empDetails.PhoneNumber}” destination="tel:#{sessionScope.empDetails.PhoneNumber}”/>

<tr:goLink styleClass="messageText" text="#{sessionScope.empDetails.Email}" destination="mailto:#{sessionScope.empDetails.Email}"/>

Device interaction with mobile browser

Mobile browser demo

ADF Mobile Browser

APEX

•  Templates for mobile UI accessed from browser

•  Based on JQuery Mobile components

Use Cases USE CASE DESCRIPTI

ON SOLUTION FUNCTION and BENEFITS

Tablet

Laptop/Desktop Replacement

ADF Faces RC Components

For desktop browser apps that are fully functional in iPad and Android tablet browsers

Desktop browser based applications must perform flawlessly in Tablet browser Single codebase Simplest rollout, maintenance, portability

Mobile Phone

Mobile Approval and Search

ADF Mobile Browser

For web pages that adapt to the mobile browser where they are viewed

Allows users to perform quick actions while on the go Benefits from application optimizations to smartphone form factor Some benefit from Device Service enhancements Supports broad range of mobile browsers (smartphones and feature phones)

Smartphone/tablet

Advanced Mobile Workers and

Mobile Approval and Search

ADF Mobile

For mobile apps that install and run on iOS devices

Applications must be optimized for device form factors Requires both devices services access as well as offline support Access to local storage and device services (camera, bar scanner, etc.) Reuse existing ADF development skills Minimizes development cycle for supporting new mobile platforms

•  Declaratively develop hybrid on-device apps •  Access local storage and device services (camera, bar

scanner, etc.) •  Reuse existing ADF development skills •  Minimize development cycle for supporting new mobile platforms

ADF Mobile

•  Device native user experience •  Spring board and tab bar for feature navigation •  Advanced HTML5-based UI

•  Full animation, gesture, and touch interaction support •  Interactive Data Visualization Components

Native Mobile User Experience

•  Thin native application container provides device services integration

•  Leverages Open Sourced PhoneGap

•  Abstracted for easy integration •  Common interface across all

platforms •  Gracefully handle device services

availability

Tight Device Services Integration

•  Local AMX File –  JSF-like file built visually in Jdeveloper –  Generated into HTML/JS on device at RT –  Based on HTML5

•  Remote URL –  ADF Trinidad for Smartphones –  ADF Faces on Tablets –  Any third-party site

•  Local HTML File –  Hand-coded HTML5 pages

Adf mobile – ui content options

•  Development Machine: –  Mac is required if you intend to support iOS devices

•  Mobile development SDKs and simulators –  Used by JDeveloper to compile device native binaries

•  Mobile developer program membership –  Needed to deploy to an actual device

•  Install JDev and download/install the ADF Mobile extension

•  Configure ADF Mobile extension preferences

Development Environment

•  Understand application requirements based on use cases –  Off-line capable or online only –  Device services integration requirements –  Server-side data source and protocol

•  SOAP, REST-XML with XSD, or REST-JSON

•  Application Design –  Server-side services: need to optimize for mobile access –  Client business services: Java modules and data controls –  Features & Client UI: wireframe for views and task flow

Development Roadmap

•  Create server-side services and corresponding client-side data controls

•  For basic mobile applications, create task flow and views that directly consume server-side web (SOAP or REST) services

•  For more complex mobile applications, develop Java classes backing user interface and bean data control –  Retrieves data, instantiates data objects, provide

implementation for methods, and refreshes UI –  Needed when WS DC does not provide sufficient

functionality

Development Roadmap

•  Create task flow, views, and features –  Bind to the Java beans and bean DC created above –  Consider different form factors. Typically you would need

two sets of task flows and views between smart phone and tablets

–  Add device data controls invocation and processing call/code

–  Configure application features •  Deploy application and test on simulators and devices

–  Adjust UI based on user feedback •  Configure and enable security

Development Roadmap

•  Implement Java code to access server-side data –  For online only applications, these Java classes would directly invoke web

services •  For SOAP or REST-XML data sources, invoke through data controls •  For JSON, invoke data sources directly

–  For off-line capable applications, these Java classes would populate data into the local SQLite DB

•  UI would be backed by data in SQLite DB

Development Roadmap

•  Deploy application to simulator and test devices in a test environment

•  Performance optimization

•  Deploy to production environment –  Through external App Store or internal Enterprise App

Store

Development Roadmap

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

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“ />

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(); } }

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

Device Interaction GPS

I wish ADF could do this

Custom Thematic Map

•  Configuration File

•  Custom Image

Custom Thematic Map

Demo

User Preferences

User Preferences

Push Notification

Push Notification

Badging and Notifications

FileContent Display

•  Integration with Device Native Viewers

•  Exposed as displayFile on DataControl

•  On Android: Use FileType to start appropriate viewer

•  On iOS QuickLook Preview is used

Access and Security

•  Authentication: –  SSO Integration across Features –  OAM/OID support (i.e. integration with Fusion Middleware) –  Can support offline authentication

•  Access Control: –  Role based access (show/hide UI)

•  Encryption: –  Credential store –  Local data –  Communication channels

Example Authentication

•  Use ADF Authentication

•  Secured ADF Application on WLS

Enable Feature Security

Mobile Design and UX

•  Know your users •  Define the essential mobile task •  Design contextually •  Flatten the navigation model •  Design for two minutes to get tasks done •  Integrate analytics •  Simplify searching requirements •  Embed collaboration •  Disclose information progressively •  Leverage platform capabilities

User Experience Patterns and Guidelines

–  http://www.oracle.com/technetwork/topics/ux/applications/gps-1601227.html

Questions ?

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

Follow me on : @lucb_