Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS

Uploaded on

Luc Bors, …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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 (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_