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

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

on

  • 879 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
879
Views on SlideShare
876
Embed Views
3

Actions

Likes
0
Downloads
6
Comments
0

1 Embed 3

https://twitter.com 3

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 AMIS UX Event 2014: Mobile ADF; From Design To Device; The Tools that make it Happen Presentation Transcript

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