oracle and mobile, from design to device; the tools that make it happen - user experience event amis

The tools that make it happen

AMIS / Oracle UX event, Nieuwegein, March 18th 2014

Oracle and Mobile - From Design to Device

Who Am I

•  Luc Bors

•  Principal Consultant

•  AMIS, Netherlands

•  Friends of Oracle & Java

•  Multiple Oracle ACE(D)

•  Oracle Partner

3 Types of Mobile Applications

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

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

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

applications –  Good integration to device features

Image from http://wiki.developerforce.com (salesforce)

Mobile Application Type - 1

•  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

–  Need platform specific development tools and SDK

Mobile Application Type - 2

•  Mobile Web Apps –  Online application accessed through mobile device browser

–  Browser governs access to local storage and device services

–  Highly reusable code

–  Highly portable

Mobile with JDeveloper & ADF

•  Complete Enterprise Application Framework

•  Declarative and visual development

•  Reuse business services

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

ADF Mobile Browser

•  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

•  Use a goLink / goButton to invoke phone and 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

Use Skinning for Look & Feel

•  For ADF Mobile browser, you implement native-ish look and feel by skinning

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

ADF RC for web apps accessed on laptops & tablets

•  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

Optimized Tablet Components

•  Optimized Layout Components as of version12c

•  PanelSpringboard –  Displaymode Grid or Strip

Mobile Application Type - 3

•  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

Oracle ADF Mobile

•  Build Once, Run on Multiple-Platforms – Phones, Tablets, iOS, Android, … •  Java for business logic •  HTML5/JavaScript user interface •  Consistent business logic & data model •  Disconnected: SQLite with encryption •  Full access to native device features •  Modular, reusable application components •  JDeveloper and soon Eclipse

Native Mobile User Experience

•  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 •  Device Interaction using Cordova

ADF mobile – UI content

•  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

•  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

ADF Mobile : UX OOTB

ADF Mobile enables you to develop Mobile Applications that meet User Requirements and comply with contemporary Device Native User

Experience Standards and Guidelines

OOTB Components

•  Many Components

•  Gallery with Predefined Layouts

Application Navigation

•  Default Springboard –  List

•  Custom Springboard –  Any, such as Grid

•  Navigation Bar

Layout Components

•  AMX Page can use templates

Patterns OOTB

•  List Creation can be done based on a large set of predefined List Layouts

•  Pick any to create the code that helps you to quickly build List pages

Layout Components

Work with the device….. ..…not against it

•  Use Device Properties to enhance User Experience

–  Is it a tablet or not ? –  Is it iOS or Android ? –  Does it have a camera or not ?

Work With Form Factors

•  Respond to Form Factors •  Conditionally Render Different content

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

Use case example

…. And there is more…..

•  Device Interaction

•  Push Notifications

User Experience Patterns and Guidelines WIKI

Luc Bors @lucb_ Luc.Bors@amis.nl LucBors@gmail.com