Oracle ADF Mobile OGh (Oracle User Group Netherlands)

1,321 views
1,129 views

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,321
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
48
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Oracle ADF Mobile OGh (Oracle User Group Netherlands)

  1. 1. Luc Bors, july 2013; OGh Thema sessie ADF Mobile Verhalen uit de praktijk Oracle ADF Mobile
  2. 2. Who Am I •  Luc Bors •  Principal Consultant •  AMIS Nieuwegein Netherlands •  Friends of Oracle & Java •  5 Oracle ACE(D) •  Oracle Partner
  3. 3. •  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
  4. 4. WHY IS MOBILE IMPORTANT ? Android Devices •  500.000.000 •  Daily growth 1.300.000 iPhones •  218.000.000 •  iPhone5: 2.000.000 in 24h
  5. 5. Mobile Challenges
  6. 6. 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
  7. 7. Integration of device features •  Browser •  Camera •  GPS •  Contacts •  Calendar •  SMS •  Phone
  8. 8. End Users •  Occasional users –  Frequency of interaction –  Length of interaction •  Dedicated users –  Internal or External –  Frequency of interaction –  Length of interaction
  9. 9. •  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
  10. 10. 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
  11. 11. •  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
  12. 12. 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
  13. 13. 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
  14. 14. •  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
  15. 15. 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
  16. 16. •  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
  17. 17. •  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
  18. 18. •  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
  19. 19. Mobile browser demo
  20. 20. ADF Mobile Browser
  21. 21. APEX •  Templates for mobile UI accessed from browser •  Based on JQuery Mobile components
  22. 22. 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
  23. 23. •  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
  24. 24. •  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
  25. 25. •  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
  26. 26. •  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
  27. 27. •  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
  28. 28. •  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
  29. 29. •  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
  30. 30. •  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
  31. 31. •  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
  32. 32. •  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
  33. 33. 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
  34. 34. Obvious Differences •  Mobile •  Multiple Platforms •  Multiple Form Factors •  Touchscreens
  35. 35. What Device are you on ? •  Device info •  Device Properties
  36. 36. Work With Form Factors •  Respond to Form Factors •  Conditionally Render Different content
  37. 37. Demo
  38. 38. Using the mouse for….. •  Clicking Menu Items •  Clicking Links & Buttons •  Expanding / Collapsing •  Selecting / Deselecting
  39. 39. 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
  40. 40. Gesture examples •  The Swipe Gesture •  The Tap Gesture <amx:actionListener binding="#{mybean.DoX}" type="swipeRight"/> <amx:showPopupBehavior popupid="pop1" type="tapHold“ />
  41. 41. Springboard & navigationbar •  Springboard configuration in adfmf-application.xml
  42. 42. The Default Springboard
  43. 43. The Custom SpringBoard
  44. 44. Configuring the springboard
  45. 45. Using the Local Database
  46. 46. Creating the Local Database
  47. 47. Register Listener
  48. 48. Using the POJO Datacontrol
  49. 49. Talking to the DB (Select)
  50. 50. Talking to the DB (DML…)
  51. 51. Using Webservices •  Create a Webserivce Datacontrol
  52. 52. Using Webservices (1) •  Just drag & drop the method from the Data Control
  53. 53. Using Webservices (1) •  The PageDefinition File •  The PageDefinition
  54. 54. 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
  55. 55. Advice •  Do Not Hook Up Webservices Directly to Your Page –  Use Multiple Layers of Datacontrols For Abstraction –  You are in control
  56. 56. Demo
  57. 57. 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(); } }
  58. 58. Device Interaction •  The Device Datacontrol •  Drag n Drop support •  Attributes as fields •  Operations as buttons
  59. 59. 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
  60. 60. 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
  61. 61. Demo
  62. 62. Device Interaction GPS
  63. 63. I wish ADF could do this
  64. 64. Custom Thematic Map •  Configuration File •  Custom Image
  65. 65. Custom Thematic Map
  66. 66. Demo
  67. 67. User Preferences
  68. 68. User Preferences
  69. 69. Push Notification
  70. 70. Push Notification
  71. 71. Badging and Notifications
  72. 72. 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
  73. 73. 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
  74. 74. Example Authentication •  Use ADF Authentication •  Secured ADF Application on WLS
  75. 75. Enable Feature Security
  76. 76. 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
  77. 77. User Experience Patterns and Guidelines –  http://www.oracle.com/technetwork/topics/ux/applications/gps-1601227.html
  78. 78. Questions ?
  79. 79. Luc Bors, AMIS, The Netherlands Luc.Bors@amis.nl LucBors@gmail.com Follow me on : @lucb_

×