AMIS UX Event 2014: Mobile ADF; From Design To Device; The Tools that make it Happen
1. The tools that make it happen
AMIS / Oracle UX event, Nieuwegein, March 18th 2014
Oracle and Mobile -
From Design to Device
2. Who Am I
• Luc Bors
• Principal Consultant
• AMIS, Netherlands
• Friends of Oracle & Java
• Multiple Oracle ACE(D)
• Oracle Partner
3. 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)
4. 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
5. 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
6. 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
7. 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
9. • 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
10. 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
11. 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
12. Optimized Tablet Components
• Optimized Layout
Components as of
version12c
• PanelSpringboard
– Displaymode Grid or Strip
13. 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
14. 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
15. 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
16. 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
17. • 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
18. 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
22. 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
24. 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 ?
25. Work With Form Factors
• Respond to Form Factors
• Conditionally Render Different content
26. 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