Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Integrating ADF Mobile with WebCenter


Published on

Published in: Technology, Business
  • Be the first to like this

Integrating ADF Mobile with WebCenter

  1. 1. Integrating ADF Mobile withWebCenterBrian “Bex” HuffChief Software ArchitectOracle ACE Director
  2. 2. Agenda  History of the mobile web  What’s your Mobile Strategy?  Crash Course in ADF  Native, ADF Mobile, and HTML5  Integrating Content and Web Services  Recommendations  Tips and Traps 2
  3. 3. History of Mobile Apps  Native • All mobile devices have an API for native programming • Used mainly for developers working on one specific platform  Wireless Application Protocol (1997) • Slimmed-down version of HTML for tiny mobile screens • Relatively unused  BlackBerry • Email on my mobile phone! Yay!!! I mean... Boooooo!  iPhone • The first true “smartphone” • Native language: Objective-C  HTML5 • Supported on all mobile smartphones • Supported on some desktops 3
  4. 4. Mobile Challenges  Richer context • Location, acceleration, camera, video • Offline database storage, messages and notifications  Design techniques • Objective-C, Java, C#, Native libraries • Web services, JSON, HTML5, JavaScript  New devices and operating systems every month! • iPhone, iPod Touch, iPad, Kindle, Nook • iOS, Blackberry, WebOS, Windows Mobile • Android has already “forked” three times! 4
  5. 5. Mobile OS Market Share  2013 Q1 Sales by OS (ABI Research / CNN) 5
  6. 6. Technology Adoption Rates 6
  7. 7. Words of Warning!  Heed the lessons from the dot com bust • Don’t rush to mobile like people rushed to the web • You’ll spend too much and get too little  Your web site should be a natural extension of your business  Your mobile app should be a natural extension of your business 7
  8. 8. Words of Wisdom... "Ten mobile apps is all I need" -- David Heinemeier Hansson, creator of Ruby on Rails "If we only bought what we needed, the economy would collapse" -- Paco Underhill 8
  9. 9. Three Main Mobile Strategies  Mobile application • Create native mobile application (iOS, Android, etc.)  Mobile website • Your current website data, optimized for a mobile browser • Optimized content and interactions  Hybrid applications • Part application, part website • Built with common web technologies (HTML5/JavaScript) • Load native libraries only as needed 9
  10. 10. Mobile Application  “Native Application” strategy • Initially the only way to make mobile apps  Are smart phone app sales your main moneymaker? • $15 billion market in 2013  Probably not what you need! 10
  11. 11. Mobile Web  The HTML5 Strategy • Use the power of HTML5 • Animation, offline storage, location services, etc.  Supported on most mobile browsers  Incredibly powerful  Preferred by most users, according to Adobe • Exceptions: social, music, and games 11
  12. 12. Users Prefer Mobile Web To Mobile Apps 12
  13. 13. Hybrid Application: Web-Based NativeApps  Three common frameworks • Titanium, PhoneGap, ADF Mobile  ADF Mobile • Released in November, 2012  ADF Mobile is based partly on PhoneGap • Allow you to create a “native” application using only HTML5 and JavaScript • New component-driven framework: ADF Mobile AMX files 13
  14. 14. History of ADF Mobile  ADF Mobile Browser • JSF skins optimized for older mobile phones • Open sourced as Trinidad skins • Probably not what you need  ADF ViewController with mobile skin • Slimmed down View, optimized for mobile • Supports gestures  ADF Mobile • Next-Generation hybrid mobile toolkit 14
  15. 15. Crash Course in ADF  ADF is a Model, View, Controller framework • Support included in JDeveloper and Eclipse • Tight DataBinding layer ties all 3 together  Model is typically ADF Business Components • POJOs, Web Services, Struts, and EJB also supported  View is typically ADF Faces (declarative framework) • JSP, JSF, ADF Mobile (AMX), Swing also supported • AMX very similar to JSF: declarative component based framework  Controller is typically ADF Task Flows • JSF Page Flows also supported, but less powerful 15
  16. 16. ADF Mobile Architecture 16
  17. 17. Integrating Hybrid Apps with your Enterprise  Best practice to have middleware between app and enterprise  What about existing SOAP/JSON APIs? • WebCenter Spaces? WebCenter Content?  Back-end APIs can change frequently • WebCenter Content is mostly stable, but no guarantee • Existing APIs may be too “chatty” • Updating Hybrid Apps is a pain that should be avoided • Have a slimmed-down API • ReST-ful XML or JSON good choices • JSON requires a bit more work in ADF Mobile 17
  18. 18. Enterprise Hybrid App Needs Middleware WebCenter Content WebLogic WebCenter Portal Enterprise Apps 18
  19. 19. Four “Flavors” of ADF Mobile  Declarative XML components • ADF Mobile (AMX), similar to JSF • Can use expression language, data controls, and binding layer  Remote URL • Similar to an iFrame with authentication  Local HTML/CSS/JS files on device • Basically PhoneGap 1.0 • Common native functions exposed via JavaScript • Camera, video, location services  Native • Undocumented “hooks” to integrate custom code (like bar code) • Not fully baked yet: custom native plugins require workarounds 19
  20. 20. Integrating Content  Mobile Web • CORS or JSON-P direct to WebCenter Content • jQuery $.post() to simplified JSP that connects via RIDC  Hybrid ADF App • Create a WebService Data Control (for XML) • Set endpoints in the connections.xml file • Call with RestServiceAdapter • Create a POJO Data Control for (JSON) • Use URLConnection object, or a custom ReST/JSON library  Hybrid jQuery/Cordova App • Use jQuery $.post() method 20
  21. 21. ADF Mobile WebService Data Control RestServiceAdapter rsa = Model.createRestServiceAdapter(); rsa.clearRequestProperties(); rsa.setConnectionName("RestServerEndpoint"); rsa.setRequestType(RestServiceAdapter.REQUEST_TYPE_POST); rsa.setRequestURI("/path/to/my/restful/endpoint"); String postData = "<msg>my data to send</msg>"; String response = restServiceAdapter.send(postData); // parse the XML response 21
  22. 22. Integrating Portal  WebCenter Spaces • Has its own JSON API  WebCenter Business Mashups • Part of WebCenter PORTAL • Can use SQL or Web Services as data sources • Turns them into REST-ful JSON or XML endpoints • Good middleware wrapper for any back-end system • EBS, Siebel, PeopleSoft, even WebCenter Content • Parameter binding for dynamic queries / services 22
  23. 23. WebCenter Spaces Data Sources 23
  24. 24. Recommendations  Think strategically, act tactically!  HTML5 is the future of the web • Your team MUST learn it anyway  HTML5 does 90% of what you want on mobile • Use mobile as a reason to begin HTML5 adoption  If not enough, use ADF Mobile • Deploy existing business components as web services • Consume via Business Mashups or custom middleware  Mobile web or mobile app? • Users prefer mobile web, unless data entry or graphics are key 24
  25. 25. Tips for Hybrid Apps  Apple store is biased towards native apps • It seems like a good idea to load all of your images/assets from a server • Apple considers that an attempt to get an “evil” app certified • Bundle most of the UI with the app  ADF Mobile works better with ReST/XML • No native support for ReST/JSON in current release  Migrating an existing ADF application? • Do not call existing Model objects directly from ADF Mobile! • Turn your ADF Model layer into a web service layer 25
  26. 26. Tips for Mobile Web  ADF: create separate View for mobile browsers • Don’t just slim the same UI down • Think about user experience, especially data entry  Alternate mobile web toolkits • jQuery Mobile, jqTouch, Sencha Touch • Sencha Touch, EXTJS, Zepto  weinre (WEb INspector REmote) • UNBELIEVABLY cool remote HTML5 debugger  modernizr • Feature detection library for HTML5 and CSS  html5shiv • add some HTML5 support to older browsers 26
  27. 27. Useful Links  Download ADF Mobile • mobile/downloads/index.html • _1.html  ADF Mobile References • • •  JSON-P/CORS/jQuery support for WebCenter Content • 27
  28. 28. Questions?  My Company:  My Blog:  My Self: 28