Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Doag wysiwyg

454 views

Published on

DOAG ADF-SIG june 2014; Mobile UI Development with ADF and ADF Mobile

Published in: Software
  • Be the first to comment

Doag wysiwyg

  1. 1. ADF WYSIWYG Mobile UI Development with ADF and ADF Mobile DOAG , Dusseldorf, June 2014
  2. 2. Who Am I • Luc Bors • Principal Consultant • AMIS, Netherlands
  3. 3. 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 Image from http://wiki.developerforce.com (salesforce) – Combines ease of web development with the power of native applications – Good integration to device features
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. ADF Mobile Browser
  8. 8. Device interaction with mobile browser • 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}"/>
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. HTML5 ‘Native’ Controls • Desktop Browser • iOS browser (Safari)
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. ADF Faces Components • PanelSpringBoard – Mode=“grid” – Mode=“strip”
  17. 17. ADF Faces Components • PanelSpringBoard – ShowDetailItems – Can use Badging exactly as in iOS – Used to display content in “Strip” Mode
  18. 18. ADF Faces Components • PanelSpringBoard – ShowDetailItem with nested PanelTabbed
  19. 19. ADF Faces Components • PanelSpringBoard – PanelDrawer (with showDetailItems) to show ‘extra’ content.
  20. 20. ADF Faces Components • PanelSpringBoard – PanelDrawer (with showDetailItems) to show ‘extra’ content.
  21. 21. Oracles Implementation Smooth animated transition with no extra code (Film Strip mode)
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. OOTB Components • Many Components • Gallery with Predefined Layouts
  28. 28. Layout Components
  29. 29. 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
  30. 30. Using Layout Components
  31. 31.
  32. 32. 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 ?
  33. 33. Work With Form Factors • Respond to Form Factors • Conditionally Render Different content
  34. 34. Application Navigation • Navigation Bar • Default Springboard – List • Custom Springboard – Any, such as Grid
  35. 35. 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
  36. 36. Use case example
  37. 37. 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
  38. 38. Feature as Remote URL • Create New Feature as Remote URL • Create URL Connection
  39. 39. Browser Navigation • You can Enable Browser Navigation Buttons
  40. 40. ADF Mobile Design Wiki •
  41. 41. UX Direct •
  42. 42. 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
  43. 43. Luc Bors, AMIS, The Netherlands Luc.Bors@amis.nl LucBors@gmail.com Follow me on : @lucb_

×