This 30 minutes presentation was part of the AMIS UX Event on march 18th 2014. A joined effort from the Oracle UX team and AMIS

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