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)
• ...
3 Types of Mobile Applications
•  Native Solution
–  Higher barrier to entry
–  Tight integration to device
features
•  Br...
Mobile Application Type - 1
•  Native Mobile Apps
–  Application installed & runs on device
–  Optimized for specific mobi...
Mobile Application Type - 2
•  Mobile Web Apps
–  Online application accessed through mobile device browser
–  Browser gov...
Mobile with JDeveloper & ADF
•  Complete Enterprise Application
Framework
•  Declarative and visual
development
•  Reuse b...
ADF Mobile Browser
•  Develop ADF Applications for Mobile Browsers
–  Trinidad Components for UI
–  ADF Model / Databindin...
ADF Mobile Browser
•  Use a goLink / goButton to invoke phone and email:
<tr:goLink
styleClass="messageText"
text="#{sessionScope.empDetails....
Use Skinning for Look & Feel
•  For ADF Mobile browser, you implement
native-ish look and feel by skinning
•  In ADF 11g R...
ADF RC for web apps
accessed on laptops & tablets
•  OS Gesture Support
–  Drag and drop, multi-select, hover, context men...
Optimized Tablet Components
•  Optimized Layout
Components as of
version12c
•  PanelSpringboard
–  Displaymode Grid or Str...
Mobile Application Type - 3
•  Hybrid Mobile Apps
–  Application installed & runs on device with HTML5 UI
–  Optimized for...
Oracle ADF Mobile
•  Build Once, Run on Multiple-Platforms – Phones, Tablets, iOS, Android, …
•  Java for business logic
•...
Native Mobile User Experience
•  Device native user experience
•  Spring board and tab bar for feature navigation
•  Advan...
ADF mobile – UI content
•  Local AMX File
–  JSF-like file built visually in JDeveloper
–  Generated into HTML/JS on devic...
•  Development Machine:
–  Mac is required if you intend to support iOS devices
•  Mobile development SDKs and simulators
...
ADF Mobile : UX OOTB
ADF Mobile enables you to develop Mobile Applications that meet User
Requirements and comply with con...
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
...
Layout Components
Work with the device…..
..…not against it
•  Use Device Properties to enhance User Experience
–  Is it a tablet 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 t...
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
Upcoming SlideShare
Loading in...5
×

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

881

Published on

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

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
881
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×