AMIS UX Event 2014: Mobile ADF; From Design To Device; The Tools that make it Happen
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

AMIS UX Event 2014: Mobile ADF; From Design To Device; The Tools that make it Happen

on

  • 918 views

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

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

Statistics

Views

Total Views
918
Views on SlideShare
914
Embed Views
4

Actions

Likes
0
Downloads
6
Comments
0

2 Embeds 4

https://twitter.com 3
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

AMIS UX Event 2014: Mobile ADF; From Design To Device; The Tools that make it Happen Presentation Transcript

  • 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