Download - amis-adf-enterprise-mobility
![Page 1: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/1.jpg)
Oracle’s ADF Mobile Framework
AMIS Enterprise to Mobility Oracle ADF Conference, Nieuwegein, May 21st 2014
Mobile First
![Page 2: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/2.jpg)
Who Am I
• Luc Bors
• Principal Consultant
• AMIS, Netherlands
![Page 3: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/3.jpg)
Agenda
• ADF Mobile Overview
• Preparing for Development • Creating your ADF Mobile Application
• Building the UI • Data (and) Services • Device Interaction • Push Notifications
• Stuff I cannot talk about (but Chris can)
![Page 4: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/4.jpg)
Oracle ADF Mobile
• Build Once, Run on Multiple-Platforms – Phones, Tablets, iOS, Android, … • Java for business logic • HTML5/JavaScript user interface • Consistent business logic & data model • Disconnected: SQLite with encryption • Full access to native device features • Modular, reusable application components • JDeveloper and soon Eclipse
![Page 5: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/5.jpg)
Native Mobile User Experience
• 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 • Device Interaction using Cordova
![Page 6: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/6.jpg)
ADF Mobile Overview
Device Native Container
SQLite Database
Java VM
Configuration Server
Business Logic
Model
JDBC
Apache CordovaSQLite
Web View
Server HTML
HTML5 and Javascript Presentation
AMX View
Local HTML
Controller
Push Handler
Server Generated HTML
APN/GCM Push Services
SOAP and REST Services
Device Services
App Config
Credential Managem
entSSO
and Access Control
![Page 7: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/7.jpg)
• 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
![Page 8: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/8.jpg)
JDeveloper Configuration
![Page 9: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/9.jpg)
ADF Mobile Deployment
![Page 10: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/10.jpg)
ADF Mobile Application Config
• Feature configuration – Constraints – Content – Feature Level Preferences – Security
• Application configuration – Configuration (ALCL) – Available Features – Application Level Preferences – Security
![Page 11: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/11.jpg)
ADF Mobile Features
•
![Page 12: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/12.jpg)
ADF mobile – UI content
• 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
![Page 13: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/13.jpg)
AMX View and Controller
Device Native Container
SQLite Database
Java VM
Configuration Server
Business Logic
Model
JDBC
Apache CordovaSQLite
Web View
Server HTML
HTML5 and Javascript Presentation
AMX View
Local HTML
Controller
Push Handler
Server Generated HTML
APN/GCM Push Services
SOAP and REST Services
Device Services
App Config
Credential Managem
entSSO
and Access Control
![Page 14: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/14.jpg)
Building AMX Pages
•
![Page 15: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/15.jpg)
Building AMX Pages
![Page 16: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/16.jpg)
Using Layout Components
![Page 17: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/17.jpg)
Swimming-lanes
• Make all ‘content’ available in a continuously scrolling swimlane
• Use panelGroupLayout – Width 100%
<amx:panelGroupLayout layout="horizontal” inlineStyle="width:100%;">"
![Page 18: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/18.jpg)
Device info and Properties
• Device info
• Device Properties
![Page 19: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/19.jpg)
Work With Form Factors
• Respond to Form Factors • Conditionally Render Different content
![Page 20: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/20.jpg)
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
![Page 21: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/21.jpg)
Gesture examples
• The Swipe Gesture
• The Tap Gesture
<amx:actionListener binding="#{mybean.DoX}" type="swipeRight"/>
<amx:showPopupBehavior popupid="pop1" type="tapHold“ />
![Page 22: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/22.jpg)
Navigation (Declarative)
• Declarative Navigation – Button/Link/ListItem
<amx:listItem id="li1" action="detail" showLinkIcon="true">" <amx:setPropertyListener id="x" from="#{row.rowKey}” to="#{pageFlowScope.myBean.currentStadium}" " type="action"/>"
![Page 23: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/23.jpg)
Navigation (Programmatic)
• Declarative Navigation – Button/Link/ListItem
• Programmatic Navigation – JavaCode
AdfmfContainerUtilities.invokeContainerJavaScriptFunction(" AdfmfJavaUtilities.getFeatureName(), " "adf.mf.api.amx.doNavigation", " new Object[] { ”detail" }); } "
![Page 24: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/24.jpg)
Controlling your application
• Springboard configuration in adfmf-application.xml
![Page 25: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/25.jpg)
The Default Springboard
![Page 26: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/26.jpg)
The Custom SpringBoard
![Page 27: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/27.jpg)
Configuring the springboard
![Page 28: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/28.jpg)
Feature Archives
• Feature Archives can be reused
• Deploy ADF Mobile app as FAR • Consume features from FAR in other apps
![Page 29: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/29.jpg)
Server HTML (Remote URL)
Device Native Container
SQLite Database
Java VM
Configuration Server
Business Logic
Model
JDBC
Apache CordovaSQLite
Web View
Server HTML
HTML5 and Javascript Presentation
AMX View
Local HTML
Controller
Push Handler
Server Generated HTML
APN/GCM Push Services
SOAP and REST Services
Device Services
App Config
Credential Managem
entSSO
and Access Control
![Page 30: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/30.jpg)
Remote URLs
• For embedding existing web pages in your ADF Mobile app.
• For instance: – News Website – Existing enterprise app Mobile Browser Pages
• Note: – Best use Optimized Mobile Browser Pages – Apache Trinidad components – Oracle recommends using ADF Mobile browser
![Page 31: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/31.jpg)
Feature as Remote URL
• Create New Feature as Remote URL
• Create URL Connection
![Page 32: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/32.jpg)
Whitelisting
• Why do we need to do this ?
• Mobile device is redirected to m.uefa.com
![Page 33: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/33.jpg)
Device Interaction
Device Native Container
SQLite Database
Java VM
Configuration Server
Business Logic
Model
JDBC
Apache CordovaSQLite
Web View
Server HTML
HTML5 and Javascript Presentation
AMX View
Local HTML
Controller
Push Handler
Server Generated HTML
APN/GCM Push Services
SOAP and REST Services
Device Services
App Config
Credential Managem
entSSO
and Access Control
![Page 34: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/34.jpg)
Device Interaction
• The Device Datacontrol
• Drag n Drop support • Attributes as fields • Operations as buttons • Or as a link
![Page 35: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/35.jpg)
Behind the scenes
• Now where is the catch ?
![Page 36: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/36.jpg)
Camera interaction
• Take a picture ……………
• …… or get one from the Library
import oracle.adf.model.datacontrols.device; DeviceManager dm = DeviceManagerFactory.getDeviceManager(); if (dm.hasCamera){ dm.getPicture( 100, DeviceManager.CAMERA_DESTINATIONTYPE_FILE_URI, DeviceManager.CAMERA_SOURCETYPE_CAMERA, false, DeviceManager.CAMERA_ENCODINGTYPE_PNG, 200, 200); }
DeviceManager.CAMERA_SOURCETYPE__PHOTOLIBRARY
![Page 37: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/37.jpg)
Data (and) Services
Device Native Container
SQLite Database
Java VM
Configuration Server
Business Logic
Model
JDBC
Apache CordovaSQLite
Web View
Server HTML
HTML5 and Javascript Presentation
AMX View
Local HTML
Controller
Push Handler
Server Generated HTML
APN/GCM Push Services
SOAP and REST Services
Device Services
App Config
Credential Managem
entSSO
and Access Control
![Page 38: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/38.jpg)
Using Webservices
• The Webservice Datacontrol for SOAP-XML and REST-XML
![Page 39: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/39.jpg)
Using Webservices directly
• Just drag & drop the method from the Data Control
![Page 40: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/40.jpg)
Using Webservices from Java
• Invoke directly from java. • Does not use the page Definition
• Uses Framework utilityMethod • AdfmfJavaUtilities.invokeDataControlMethod()
• Datacontrol must be in available in DataBindings.cpx
![Page 41: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/41.jpg)
Advantages
• Provides more flexibility to shape model to mobile UI • Perform client side validation • Minimize the number of round trips • Offline caching à Pay attention to Stevens Presentation later today ! • Mash-up data from multiple services
![Page 42: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/42.jpg)
Patterns…
• SOAP/REST XML Webservice – Needs WebServiceDataControl and invokeDataControlMethod()
![Page 43: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/43.jpg)
Patterns…
• REST-JSON Webservice – Needs URL Connection and RestServiceAdapter
![Page 44: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/44.jpg)
Patterns….
• SQLiteDatabase – Needs Plain JDBC
![Page 45: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/45.jpg)
Obviously all the same……
• Service Object Data Control Pattern
– Whatever “back end” data source you use…..
– It is completely transparent for your UI
![Page 46: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/46.jpg)
Push Notifications
Device Native Container
SQLite Database
Java VM
Configuration Server
Business Logic
Model
JDBC
Apache CordovaSQLite
Web View
Server HTML
HTML5 and Javascript Presentation
AMX View
Local HTML
Controller
Push Handler
Server Generated HTML
APN/GCM Push Services
SOAP and REST Services
Device Services
App Config
Credential Managem
entSSO
and Access Control
![Page 47: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/47.jpg)
Push Notifications
•
![Page 48: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/48.jpg)
Push Notifications
• Subscribe to Messaging Service • Receive token • Register with Enterprise app • Enterprise app Pushes message to
Messaging Service • Messaging Service delegates
message to device(s)
![Page 49: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/49.jpg)
Start The ADF Mobile App
• ApplicationLifeCycleListener – In the Start() Method create a new PushNotificationListener()
public void start() { // Add code here... EventSource evtSource = EventSourceFactory.getEventSource( NativePushNotificationEventSource. NATIVE_PUSH_NOTIFICATION_REMOTE_EVENT_SOURCE_NAME); evtSource.addListener(new PushNotificationListener()); }
![Page 50: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/50.jpg)
Open the application
• In the PushNotificationListener – OnOpen() // receive token – OnMessage() // handle notification – OnError()
public void onOpen(String token) { // Invoked during the Push Notification registration process. // The parameter "token" contains the token received from APNs or GCMs // that uniquely identifies a specific device-application combination. ValueExpression ve = AdfmfJavaUtilities.getValueExpression( "#{applicationScope.deviceToken}", String.class); if (token != null){ ve.setValue(AdfmfJavaUtilities.getAdfELContext(), token); } else{ ve.setValue(AdfmfJavaUtilities.getAdfELContext(), "dummy Token"); } }
![Page 51: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/51.jpg)
Working with the Notification
public void onMessage(Event event) { PayloadServiceResponse serviceResponse = (PayloadServiceResponse)jsonHelper.fromJSON( PayloadServiceResponse.class, event.getPayload()); String message = serviceResponse.getCustomMessage(); ValueExpression notificationPayloadBinding = AdfmfJavaUtilities.getValueExpression( "#{applicationScope.notificationSessionId}", String.class); ValueExpression ve = AdfmfJavaUtilities.getValueExpression( "#{applicationScope.notified}", Boolean.class); ve.setValue(AdfmfJavaUtilities.getAdfELContext(), Boolean.TRUE); // also, lets decrease the application icon badge by one int currentBadge = AdfmfContainerUtilities.getApplicationIconBadgeNumber(); if (currentBadge > 0){ AdfmfContainerUtilities. setApplicationIconBadgeNumber(currentBadge - 1); } AdfmfContainerUtilities.gotoFeature( "com.tamcapp.mobilebook.ses.ConferenceSessions"); } }
![Page 52: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/52.jpg)
Example
• Select device
• Send message
• Get notified
![Page 53: amis-adf-enterprise-mobility](https://reader033.vdocuments.us/reader033/viewer/2022060200/5598b8f31a28abbc4a8b4575/html5/thumbnails/53.jpg)
Nothing more I can say……