3 Types of 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 Types (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 Types (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
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
• 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
• In 12.1.2 it looks to be disappeared
ADF Faces 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
• HMTL 5 Supports
• Optimized components for Mobile
HTML5 input types
• New HTML 5 input types: color, date(time), email, month, number, range, search, tel, time, url, week
• These input types allow better input control and validation
• Can easily be used in ADF Faces though usage property
– Only 11.1.1.xand12.1.x
• Specify as EL expression to prevent design-time error underlining
Oracles ‘Simplified UI’
• Next-Generation of Enterprise Applications interface
• Oracle Applications Sales Cloud & HCM Cloud
• Tablet first approach
• Modern, intuitive, streamlined
• Innovates the rich feature set of Oracle’s Fusion Applications
What is ‘Simplified UI’?
• Key UX Concepts• Simplicity
• Mobility
• Extensibility
– Re-brand company logo
– Change themes
– Change availability, order and name of functional areas
– Page level changes like show/hide/move fields
– Page structure and layout changes
– Add buttons/links to punch out
• Visualization
What is ‘Simplified UI’?
• UX Design Philosophy: Glance, Scan, Commit
Glance to see if anything
needs attention
Scan for more details
or take a small action
Commit to working
on a particular task
ADF Faces Components
• PanelSpringBoard
– ShowDetailItems
– Can use Badging exactly as in iOS
– Used to display content in “Strip” Mode
ADF Faces Components
• PanelSpringBoard
– PanelDrawer (with showDetailItems) to show ‘extra’ content.
ADF Faces Components
• PanelSpringBoard
– PanelDrawer (with showDetailItems) to show ‘extra’ content.
Mobile Application Types (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
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
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
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 ?
Application Navigation
• Default Springboard
– List
• Custom Springboard
– Any, such as Grid
• Navigation Bar
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
Combining the Options: Remote URLs
• For embedding existing web pages in your ADF Mobile app.
• For instance:
– News Website
– Existing enterprise app Mobile Browser Pages
• Note:
– Best use Optimized Mobile Browser Pages
Summary
Ways to create Mobile UI:
• With ADF Faces Optimized Components
• With ADF Mobile UI Components
• Handcoded HTML5 pages
• All can be combined in one single ADF Mobile application