Upload
lucbors
View
1.124
Download
3
Embed Size (px)
DESCRIPTION
2 Hour presentation on ADF Mobile for the OGh (Dutch Oracle User Group)
Citation preview
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 [email protected] [email protected]
Follow me on : @lucb_