integrating adf mobile with webcenter
TRANSCRIPT
Integrating ADF Mobile with WebCenter
Brian “Bex” HuffChief Software ArchitectOracle 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
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
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
Mobile OS Market Share
2013 Q1 Sales by OS (ABI Research / CNN)
5
Technology Adoption Rates
6
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
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
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
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
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
Users Prefer Mobile Web To Mobile Apps
12
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
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
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
ADF Mobile Architecture
16
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
Enterprise Hybrid App Needs Middleware
18
WebLogic
WebCenterContent
WebCenterPortal
EnterpriseApps
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
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
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
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
WebCenter Spaces Data Sources
23
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
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
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
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/
CrossDomainJson-11g.zip
27
28
My Company: http://bezzotech.com
My Blog: http://bexhuff.com
My Self: [email protected]
Questions?