• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Oracle ADF Mobile OGh (Oracle User Group Netherlands)
 

Oracle ADF Mobile OGh (Oracle User Group Netherlands)

on

  • 862 views

2 Hour presentation on ADF Mobile for the OGh (Dutch Oracle User Group)

2 Hour presentation on ADF Mobile for the OGh (Dutch Oracle User Group)

Statistics

Views

Total Views
862
Views on SlideShare
861
Embed Views
1

Actions

Likes
0
Downloads
41
Comments
0

1 Embed 1

http://oracle.sociview.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

    Oracle ADF Mobile OGh (Oracle User Group Netherlands) Oracle ADF Mobile OGh (Oracle User Group Netherlands) Presentation Transcript

    • Luc Bors, july 2013; OGh Thema sessie ADF Mobile Verhalen uit de praktijk Oracle ADF Mobile
    • Who Am I •  Luc Bors •  Principal Consultant •  AMIS Nieuwegein Netherlands •  Friends of Oracle & Java •  5 Oracle ACE(D) •  Oracle Partner
    • •  iPhone 5 •  7.6 mm (0.3 inches) •  112 gram (3.95 ounces) •  Motorola PT300s •  Very big (10-15 inches) •  Very heavy (9 pounds) HISTORY
    • WHY IS MOBILE IMPORTANT ? Android Devices •  500.000.000 •  Daily growth 1.300.000 iPhones •  218.000.000 •  iPhone5: 2.000.000 in 24h
    • Mobile Challenges
    • Mobile Requirements •  Tablet, Smart Phone, Feature Phone, Laptop •  Screen size •  Device capabilities •  Web browser capabilities •  Processing power •  Do you have control of the devices? •  Network types –  Wi-Fi, 4GL, 3GL, offline –  Speed –  Availability –  Reliability
    • Integration of device features •  Browser •  Camera •  GPS •  Contacts •  Calendar •  SMS •  Phone
    • End Users •  Occasional users –  Frequency of interaction –  Length of interaction •  Dedicated users –  Internal or External –  Frequency of interaction –  Length of interaction
    • •  Technology evolving very fast –  iOS, Android, Windows, Blackberry ….. –  Different tools, languages, platforms, etc. •  User demands are very high –  Consumer are spoiled…. •  Currently IT optimized for web –  Very experienced IT department –  Now must meet demand for mobile •  Multiple platforms and form factors What are your challenges
    • MOBILE OPTIONS •  Browser-based Solution –  Easiest to provide –  Limited integration to device features •  Native Solution –  Higher barrier to entry –  Tight integration to device features •  Hybrid Solution –  Combines ease of web development with the power of native applications –  Good integration to device features
    • •  Complete Enterprise Application Framework •  Declarative and visual development •  Reuse business services •  Reuse developer skills and tooling –  Consistent developer experiences for web and mobile Mobile with Jdeveloper & ADF
    • 3 Types of Applications •  Mobile Web Apps –  Online application accessed through mobile device browser –  Browser governs access to local storage and device services (camera, GPS, etc.) –  Highly reusable code –  Highly portable •  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 •  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
    • Mobile Use Cases USE CASE DESCRIPTI ON SOLUTION FUNCTION and BENEFITS Tablet Laptop/Desktop Replacement ADF Faces RC Compone nts For desktop browser apps that are fully functional in iPad and Android tablet browsers Desktop browser based applications must perform flawlessly in Tablet browser Single codebase Simplest rollout, maintenance, portability Mobile Phone Mobile Approval and Search ADF Mobile Browser For web pages that adapt to the mobile browser where they are viewed Allows users to perform quick actions while on the go Benefits from application optimizations to smartphone form factor Some benefit from Device Service enhancements Supports broad range of mobile browsers (smartphones and feature phones) Smartphone/ tablet Advanced Mobile Workers and Mobile Approval and Search ADF Mobile For mobile apps that install and run on iOS devices Applications must be optimized for device form factors Requires both devices services access as well as offline support Access to local storage and device services (camera, bar scanner, etc.) Reuse existing ADF development skills Minimizes development cycle for supporting new mobile platforms
    • •  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 For web apps accessed on both laptops and tablets ADF Faces Rich Client
    • Use Cases USE CASE DESCRIPTI ON SOLUTION FUNCTION and BENEFITS Tablet Laptop/Desktop Replacement ADF Faces RC Compone nts For desktop browser apps that are fully functional in iPad and Android tablet browsers Desktop browser based applications must perform flawlessly in Tablet browser Single codebase Simplest rollout, maintenance, portability Mobile Phone Mobile Approval and Search ADF Mobile Browser For web pages that adapt to the mobile browser where they are viewed Allows users to perform quick actions while on the go Benefits from application optimizations to smartphone form factor Some benefit from Device Service enhancements Supports broad range of mobile browsers (smartphones and feature phones) Smartphone/ tablet Advanced Mobile Workers and Mobile Approval and Search ADF Mobile For mobile apps that install and run on iOS devices Applications must be optimized for device form factors Requires both devices services access as well as offline support Access to local storage and device services (camera, bar scanner, etc.) Reuse existing ADF development skills Minimizes development cycle for supporting new mobile platforms
    • •  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
    • •  For ADF Mobile browser, you implement skinning by performing the following tasks: •  In the trinidad-config.xml component •  define the <skin-family> tag with the EL (Expression Language) expression, #{requestContext.agent.skinFamilyType} that returns the skin family type of the browser. •  In trinidad-skins.xml •  Specify the renderkit and style sheet •  Include the CSS files within the ADF Mobile browser project •  In ADF 11g R2 this is created and configured by default Skinning to achieve Look And Feel
    • •  Use a goLink or goButton to invoke phone: •  Use a goLink or goButton to invoke 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
    • Mobile browser demo
    • ADF Mobile Browser
    • APEX •  Templates for mobile UI accessed from browser •  Based on JQuery Mobile components
    • Use Cases USE CASE DESCRIPTI ON SOLUTION FUNCTION and BENEFITS Tablet Laptop/Desktop Replacement ADF Faces RC Compone nts For desktop browser apps that are fully functional in iPad and Android tablet browsers Desktop browser based applications must perform flawlessly in Tablet browser Single codebase Simplest rollout, maintenance, portability Mobile Phone Mobile Approval and Search ADF Mobile Browser For web pages that adapt to the mobile browser where they are viewed Allows users to perform quick actions while on the go Benefits from application optimizations to smartphone form factor Some benefit from Device Service enhancements Supports broad range of mobile browsers (smartphones and feature phones) Smartphone/ tablet Advanced Mobile Workers and Mobile Approval and Search ADF Mobile For mobile apps that install and run on iOS devices Applications must be optimized for device form factors Requires both devices services access as well as offline support Access to local storage and device services (camera, bar scanner, etc.) Reuse existing ADF development skills Minimizes development cycle for supporting new mobile platforms
    • •  Declaratively develop hybrid on-device apps •  Access local storage and device services (camera, bar scanner, etc.) •  Reuse existing ADF development skills •  Minimize development cycle for supporting new mobile platforms ADF Mobile
    • •  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 Native Mobile User Experience
    • •  Thin native application container provides device services integration •  Leverages Open Sourced PhoneGap •  Abstracted for easy integration •  Common interface across all platforms •  Gracefully handle device services availability Tight Device Services Integration
    • •  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 Adf mobile – ui content options
    • •  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
    • •  Understand application requirements based on use cases –  Off-line capable or online only –  Device services integration requirements –  Server-side data source and protocol •  SOAP, REST-XML with XSD, or REST-JSON •  Application Design –  Server-side services: need to optimize for mobile access –  Client business services: Java modules and data controls –  Features & Client UI: wireframe for views and task flow Development Roadmap
    • •  Create server-side services and corresponding client-side data controls •  For basic mobile applications, create task flow and views that directly consume server-side web (SOAP or REST) services •  For more complex mobile applications, develop Java classes backing user interface and bean data control –  Retrieves data, instantiates data objects, provide implementation for methods, and refreshes UI –  Needed when WS DC does not provide sufficient functionality Development Roadmap
    • •  Create task flow, views, and features –  Bind to the Java beans and bean DC created above –  Consider different form factors. Typically you would need two sets of task flows and views between smart phone and tablets –  Add device data controls invocation and processing call/ code –  Configure application features •  Deploy application and test on simulators and devices –  Adjust UI based on user feedback •  Configure and enable security Development Roadmap
    • •  Implement Java code to access server-side data –  For online only applications, these Java classes would directly invoke web services •  For SOAP or REST-XML data sources, invoke through data controls •  For JSON, invoke data sources directly –  For off-line capable applications, these Java classes would populate data into the local SQLite DB •  UI would be backed by data in SQLite DB Development Roadmap
    • •  Deploy application to simulator and test devices in a test environment •  Performance optimization •  Deploy to production environment –  Through external App Store or internal Enterprise App Store Development Roadmap
    • ADF Mobile Overview 17 Copyright © 2011, Oracle and/or its affiliates. All rights reserved. Device Services How It Works? Phone Gap Device Native Container Web View Server HTML ADF Mobile XML View Java Managed Beans ADF Model Third Party Web Sites ADF Faces RC ADF Mobile Browser Mobile Device Web Services (SOAP & REST) Local HTML HTML5 & JavaScript Configuration Server ADF Controller Local'Data' CredentialManagement, SSO&AccessControl Application Configuration Server
    • Obvious Differences •  Mobile •  Multiple Platforms •  Multiple Form Factors •  Touchscreens
    • What Device are you on ? •  Device info •  Device Properties
    • Work With Form Factors •  Respond to Form Factors •  Conditionally Render Different content
    • Demo
    • Using the mouse for….. •  Clicking Menu Items •  Clicking Links & Buttons •  Expanding / Collapsing •  Selecting / Deselecting
    • 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
    • Gesture examples •  The Swipe Gesture •  The Tap Gesture <amx:actionListener binding="#{mybean.DoX}" type="swipeRight"/> <amx:showPopupBehavior popupid="pop1" type="tapHold“ />
    • Springboard & navigationbar •  Springboard configuration in adfmf-application.xml
    • The Default Springboard
    • The Custom SpringBoard
    • Configuring the springboard
    • Using the Local Database
    • Creating the Local Database
    • Register Listener
    • Using the POJO Datacontrol
    • Talking to the DB (Select)
    • Talking to the DB (DML…)
    • Using Webservices •  Create a Webserivce Datacontrol
    • Using Webservices (1) •  Just drag & drop the method from the Data Control
    • Using Webservices (1) •  The PageDefinition File •  The PageDefinition
    • Using Webservices (2) •  Invoke directly from java. •  Does not use the binding layer •  Uses Framework utilityMethod •  AdfmfJavaUtilities.invokeDataControlMethod() •  Datacontrol must be in available in DataBindings.cpx
    • Advice •  Do Not Hook Up Webservices Directly to Your Page –  Use Multiple Layers of Datacontrols For Abstraction –  You are in control
    • Demo
    • Use Caching •  By default the webservice will be called on every request •  Simply compare if what is in memory is the same as what needs to be shown. if (!s_locationsList.isEmpty()){ MyLocation cur = (MyLocation)s_locationsList.get(0); Integer currentLoc = cur.getId(); if (currentLoc.compareTo(Integer.valueOf(<NEWVALUE>))!=0){ // clear cache callWebservice(); } }
    • Device Interaction •  The Device Datacontrol •  Drag n Drop support •  Attributes as fields •  Operations as buttons
    • Camera interaction •  Take a picture …………… •  …… or get one from the Library import oracle.adf.model.datacontrols.device; DeviceManagerFactory.getDeviceManager().getPicture(100, DeviceManager.CAMERA_DESTINATIONTYPE_FILE_URI, DeviceManager.CAMERA_SOURCETYPE_CAMERA, false, DeviceManager.CAMERA_ENCODINGTYPE_PNG, 0, 0); DeviceManager.CAMERA_SOURCETYPE__PHOTOLIBRARY
    • Be careful !! •  DESTINATIONTYPE_DATA_URL you will get the image as base64 encoded string •  Camera’s are very good. •  Picture quality is amazing. –  Encoding such images as base64 causes memory issues •  Don’t blow up your app. –  iOS you should set quality parameter to a value less then 50 to avoid –  On Android out-of-memory can be caused with default image settings. Make image smaller by setting targetWidth and targetHeight
    • Demo
    • Device Interaction GPS
    • I wish ADF could do this
    • Custom Thematic Map •  Configuration File •  Custom Image
    • Custom Thematic Map
    • Demo
    • User Preferences
    • User Preferences
    • Push Notification
    • Push Notification
    • Badging and Notifications
    • FileContent Display •  Integration with Device Native Viewers •  Exposed as displayFile on DataControl •  On Android: Use FileType to start appropriate viewer •  On iOS QuickLook Preview is used
    • Access and Security •  Authentication: –  SSO Integration across Features –  OAM/OID support (i.e. integration with Fusion Middleware) –  Can support offline authentication •  Access Control: –  Role based access (show/hide UI) •  Encryption: –  Credential store –  Local data –  Communication channels
    • Example Authentication •  Use ADF Authentication •  Secured ADF Application on WLS
    • Enable Feature Security
    • Mobile Design and UX •  Know your users •  Define the essential mobile task •  Design contextually •  Flatten the navigation model •  Design for two minutes to get tasks done •  Integrate analytics •  Simplify searching requirements •  Embed collaboration •  Disclose information progressively •  Leverage platform capabilities
    • User Experience Patterns and Guidelines –  http://www.oracle.com/technetwork/topics/ux/applications/gps-1601227.html
    • Questions ?
    • Luc Bors, AMIS, The Netherlands Luc.Bors@amis.nl LucBors@gmail.com Follow me on : @lucb_