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: bex@bezzotech.com

Questions?