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 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
Compone
nts
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
Compone
nts
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

APEX
•  Templates for mobile UI accessed from browser
•  Based on JQuery Mobile components

•  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'
CredentialManagement,
SSO&AccessControl
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

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

Using Webservices
•  Create a Webserivce Datacontrol

Using Webservices (1)
•  Just drag & drop the method from the Data Control

•  The PageDefinition File
•  The PageDefinition

•  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

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

Custom Thematic Map
•  Configuration File
•  Custom Image

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

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

Luc Bors, AMIS, The Netherlands

Luc.Bors@amis.nl

LucBors@gmail.com

Follow me on : @lucb_

Oracle ADF Mobile OGh (Oracle User Group Netherlands)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (13)

Andere mochten auch

Andere mochten auch (10)

Ähnlich wie Oracle ADF Mobile OGh (Oracle User Group Netherlands)

Ähnlich wie Oracle ADF Mobile OGh (Oracle User Group Netherlands) (20)

Mehr von Luc Bors

Mehr von Luc Bors (18)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Oracle ADF Mobile OGh (Oracle User Group Netherlands)