Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS
-
Upload
amis-friends-of-oracle-and-java -
Category
Technology
-
view
416 -
download
0
description
Transcript of Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS
![Page 1: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/1.jpg)
The tools that make it happen
AMIS / Oracle UX event, Nieuwegein, March 18th 2014
Oracle and Mobile - From Design to Device
![Page 2: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/2.jpg)
Who Am I
• Luc Bors
• Principal Consultant
• AMIS, Netherlands
• Friends of Oracle & Java
• Multiple Oracle ACE(D)
• Oracle Partner
![Page 3: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/3.jpg)
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)
![Page 4: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/4.jpg)
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
![Page 5: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/5.jpg)
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
![Page 6: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/6.jpg)
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
![Page 7: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/7.jpg)
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
![Page 8: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/8.jpg)
ADF Mobile Browser
![Page 9: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/9.jpg)
• 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
![Page 10: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/10.jpg)
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
![Page 11: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/11.jpg)
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
![Page 12: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/12.jpg)
Optimized Tablet Components
• Optimized Layout Components as of version12c
• PanelSpringboard – Displaymode Grid or Strip
![Page 13: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/13.jpg)
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
![Page 14: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/14.jpg)
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
![Page 15: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/15.jpg)
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
![Page 16: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/16.jpg)
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
![Page 17: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/17.jpg)
• 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
![Page 18: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/18.jpg)
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
![Page 19: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/19.jpg)
OOTB Components
• Many Components
• Gallery with Predefined Layouts
![Page 20: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/20.jpg)
Application Navigation
• Default Springboard – List
• Custom Springboard – Any, such as Grid
• Navigation Bar
![Page 21: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/21.jpg)
Layout Components
• AMX Page can use templates
![Page 22: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/22.jpg)
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
![Page 23: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/23.jpg)
Layout Components
![Page 24: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/24.jpg)
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 ?
![Page 25: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/25.jpg)
Work With Form Factors
• Respond to Form Factors • Conditionally Render Different content
![Page 26: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/26.jpg)
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
![Page 27: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/27.jpg)
Use case example
![Page 28: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/28.jpg)
…. And there is more…..
• Device Interaction
• Push Notifications
![Page 29: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/29.jpg)
User Experience Patterns and Guidelines WIKI
![Page 30: Oracle and Mobile, From Design to Device; The tools that make it happen - User Experience Event AMIS](https://reader036.fdocuments.in/reader036/viewer/2022062614/5461ea58b1af9fba388b4bc8/html5/thumbnails/30.jpg)
Luc Bors @lucb_ [email protected] [email protected]