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

535 views
432 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
535
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. The tools that make it happen AMIS / Oracle UX event, Nieuwegein, March 18th 2014 Oracle and Mobile - From Design to Device
  2. 2. Who Am I •  Luc Bors •  Principal Consultant •  AMIS, Netherlands •  Friends of Oracle & Java •  Multiple Oracle ACE(D) •  Oracle Partner
  3. 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. 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. 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. 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. 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. 8. ADF Mobile Browser
  9. 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. 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. 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. 12. Optimized Tablet Components •  Optimized Layout Components as of version12c •  PanelSpringboard –  Displaymode Grid or Strip
  13. 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. 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. 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. 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. 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. 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. 19. OOTB Components •  Many Components •  Gallery with Predefined Layouts
  20. 20. Application Navigation •  Default Springboard –  List •  Custom Springboard –  Any, such as Grid •  Navigation Bar
  21. 21. Layout Components •  AMX Page can use templates
  22. 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. 23. Layout Components
  24. 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. 25. Work With Form Factors •  Respond to Form Factors •  Conditionally Render Different content
  26. 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. 27. Use case example
  28. 28. …. And there is more….. •  Device Interaction •  Push Notifications
  29. 29. User Experience Patterns and Guidelines WIKI
  30. 30. Luc Bors @lucb_ Luc.Bors@amis.nl LucBors@gmail.com

×