The document discusses different types of mobile applications that can be developed with Oracle tools, including native, web-based, and hybrid applications. It focuses on how to build hybrid mobile apps with Oracle ADF Mobile, which allows developing once and running on multiple platforms like iOS and Android, and provides out-of-the-box user experience components, layouts, and patterns that follow native design guidelines. Development is done visually in JDeveloper with Java for business logic and HTML5/JavaScript for the user interface.

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

8. ADF Mobile Browser

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

19. OOTB Components
• Many Components
• Gallery with Predefined Layouts

20. Application Navigation
• Default Springboard
– List
• Custom Springboard
– Any, such as Grid
• Navigation Bar

21. Layout Components
• AMX Page can use templates

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

23. Layout Components

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

27. Use case example

28. …. And there is more…..
• Device Interaction
• Push Notifications

29. User Experience Patterns and
Guidelines WIKI

30. Luc Bors
@lucb_
Luc.Bors@amis.nl
LucBors@gmail.com