oracle and mobile, from design to device; the tools that make it happen - user experience event amis
DESCRIPTION
Luc Bors, There are many ways to bring your applications to mobile platforms. The key to success always is that you design for mobile first. Next step is to bring this design to the device. In this session you will learn the strategies and tools that are available in Oracles Fusion Middleware stack to implement a state of the art Mobile Application.TRANSCRIPT
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_ [email protected] [email protected]