1. Integrating ADF Mobile with
WebCenter
Brian “Bex” Huff
Chief Software Architect
Oracle ACE Director

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. 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. 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. Mobile OS Market Share
 2013 Q1 Sales by OS (ABI Research / CNN)
5

6. Technology Adoption Rates
6

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. 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. 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. 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. 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. Users Prefer Mobile Web To Mobile Apps
12

13. Hybrid Application: Web-Based Native
Apps
 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. 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. 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. ADF Mobile Architecture
16

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. Enterprise Hybrid App Needs Middleware
WebCenter
Content
WebLogic WebCenter
Portal
Enterprise
Apps
18

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. 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. 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. 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. WebCenter Spaces Data Sources
23

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. 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. 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. Useful Links
 Download ADF Mobile
• http://www.oracle.com/technetwork/developer-tools/adf-
mobile/downloads/index.html
• http://docs.oracle.com/cd/E18941_01/tutorials/MobileTutorial/jdtut_11r2_54
_1.html
 ADF Mobile References
• http://jdevadf.oracle.com/amx/
• http://docs.oracle.com/cd/E35521_01/apirefs.111230/e27204/toc.htm
• http://docs.oracle.com/cd/E35521_01/apirefs.111230/e26230/toc.htm
 JSON-P/CORS/jQuery support for WebCenter Content
• https://bezzotech.com/support/attachments/download/155/CrossDomainJs
on-11g.zip
27

28. Questions?
 My Company: http://bezzotech.com
 My Blog: http://bexhuff.com
 My Self: bex@bezzotech.com
28