Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS
0 likes896 views
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.
Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event 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
- 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
- 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