10 things that you don't get from the developer guide

DOAG Konferenz; November 19th 2013

Real Life ADF Mobile

Who Am I

•  Luc Bors

•  Principal Consultant

•  AMIS, Netherlands

•  Friends of Oracle & Java

•  5 Oracle ACE(D)

•  Oracle Partner

10 Things

One App….. …. 10 Things ….. …. In 45 Minutes…. ….Really…?

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

Feature as Remote URL

•  Create New Feature as Remote URL

•  Create URL Connection

Whitelisting

•  Why do we need to do this ?

•  Mobile device is redirected to m.uefa.com

Property Change Events

•  Raised when individual attributes of a model object are changed

•  Use setter method to update attributes

Provider Change Event

•  Raised when attributes of type Collection are changed on a model object

•  When a new row is created –  fireProviderCreate(providerKey, rowKey, newRow) –  New row is inserted in the UI without refreshing other parts of the page

•  When a row is deleted –  fireProviderDelete(providerKey, rowKey) – Row is deleted in the Iterator

•  When the collection is refreshed –  fireProviderRefresh(providerKey) –  Iterator is refreshed –  Row currency is lost.

providerChangeSupport.fireProviderRefresh("stadiums");!

Device Interaction

•  The Device Datacontrol

•  Drag n Drop support

•  Attributes as fields

•  Operations as buttons

Camera interaction

•  Take a picture ……………

•  …… or get one from the Library

import oracle.adf.model.datacontrols.device; DeviceManagerFactory.getDeviceManager().getPicture( 100, DeviceManager.CAMERA_DESTINATIONTYPE_FILE_URI, DeviceManager.CAMERA_SOURCETYPE_CAMERA, false, DeviceManager.CAMERA_ENCODINGTYPE_PNG, 200, 200);

DeviceManager.CAMERA_SOURCETYPE__PHOTOLIBRARY

Be careful !!

•  DESTINATIONTYPE_DATA_URL you will get the image as base64 encoded string

•  Camera’s are very good and picture quality is amazing. –  Encoding such images as base64 causes memory issues

•  Don’t blow up your app. –  iOS you should set quality parameter to a value less then 50 to avoid memory

issues –  On Android out-of-memory can be caused with default image settings. Make

image smaller by setting targetWidth and targetHeight

•  Small sized images can be uploaded using web services.

Data Services

Device Services

Cordova

Device Native Container Web View

Server HTML

ADF Mobile AMX View

Java VM

Business Logic

ADF Model

Server-Generated HTML

Mobile Device

SOAP & REST Services

Local HTML

HTML5 & JavaScript Presentation Configuration Server

ADF Controller

Encrypted SQLite DB

App

Config

Server

JDB

C SQLite

APN/GCM Push Services

Push H

andler

Credential M

anagement,

SSO &

Access C

ontrol

Using Webservices

•  The Webservice Datacontrol

Using Webservices directly

•  Just drag & drop the method from the Data Control

Using Webservices from Java

•  Invoke directly from java. •  Does not use the binding layer

•  Uses Framework utilityMethod •  AdfmfJavaUtilities.invokeDataControlMethod()

•  Datacontrol must be in available in DataBindings.cpx

Advantages

•  Provides more flexibility to shape model to mobile UI •  Perform client side validation •  Minimize the number of round trips •  Offline caching •  Mash-up data from multiple services

Patterns…

•  SOAP Webservice •  Web Service Data Control

Patterns…

•  REST Webservice •  Rest Service Adapter

Patterns….

•  SQLite Database •  Plain JDBC

Obviously all the same……

•  Service Object Data Control Pattern

–  Whatever “back end” data source you use…..

–  It is completely transparent for UI

Feature Archives

•  Feature Archives can be reused

•  Deploy ADF Mobile app as FAR •  Consume features from FAR in other apps

Feature Archives

•  Feature Archives Deployment Profile

•  Connections Detail should be used (default is wrong ?)

•  Only if connection is available in consuming APP name only works

Springboard & navigationbar

•  Springboard configuration in adfmf-application.xml

The Default Springboard

The Custom SpringBoard

Configuring the springboard

–  Do Not set AllowDeviceAccess to False for Springboard Feature !

Navigation

•  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"/>!

Navigation

•  Declarative Navigation –  Button/Link/ListItem

•  Programmatic Navigation –  JavaCode

AdfmfContainerUtilities.invokeContainerJavaScriptFunction(! AdfmfJavaUtilities.getFeatureName(), ! "adf.mf.api.amx.doNavigation", ! new Object[] { ”detail" });     } !

Navigation

•  Drawback –  No access to setPropertyListener

•  Solution if you need that functionality: –  Set the value in java Code

ValueExpression ve =! AdfmfJavaUtilities.getValueExpression(! "#{pageFlowScope.myBean.currentStadium}”! , String.class);!ve.setValue(AdfmfJavaUtilities.getAdfELContext()! , getCurrentStadium());!

Smart Navigation

•  Search Stadiums

•  What if resultset only contains one row ?

if (s_stadiums.size()==1){! // only one stadium! Lets navigate AdfmfContainerUtilities.invokeContainerJavaScriptFunction(! AdfmfJavaUtilities.getFeatureName(), ! "adf.mf.api.amx.doNavigation", ! new Object[] { "detail" });!} !

Preserve Current Row

•  Inside the <amx:listItem> element of the list page, you need to add a <amx:setPropertyListener> element to store the row key in a pageFlowScope variable.

•  In the page definition of the detail page, you need to add a setCurrentRowWithKey action, which uses the pageFlowScope variable to set the current row.

•  In the page definition of the detail page, you need to add an invokeAction executable for the setCurrentRowWithKey action to ensure the current row is automatically set when entering the detail page.

Preserve Current Row (A-Team)

•  Easiest way: –  Download and install extension –  adf-mobile-persistence-sample-install.zip –  Extension contains StatefulIteratorBeanDcDefinition

•  NOTE: This will be the way ADF Mobile will do it in future versions

<AdapterDataControl id="PlayerService” FactoryClass="oracle.adf.model.adapter.DataControlFactoryImpl” ImplDef= "oracle.ateam.sample.mobile.model.bean.StatefulIteratorBeanDcDefinition”! ………. Definition= "com.blogspot.lucbors.soccer.mobile.model.service.PlayerService” BeanClass= "com.blogspot.lucbors.soccer.mobile.model.service.PlayerService"! } !

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

Gesture examples

•  The Swipe Gesture

•  The Tap Gesture

<amx:actionListener binding="#{mybean.DoX}" type="swipeRight"/>

<amx:showPopupBehavior popupid="pop1" type="tapHold“ />

Use case example

Ingredients

•  A (Web) service and datacontrol •  A Page with Listview •  An ActionListener with type

SwipeDown •  Smart Java Code to call service

conditionally

<amx:listView var="row”! value="#{bindings.allLocations.collectionModel}" ! fetchSize="#{bindings.allLocations.rangeSize}”! id="lv1"> ! <amx:listItem id="li1"> ! <amx:actionListener type="swipeDown” ! binding="#{pageFlowScope.locationsBackingBean.checkForUpdates}”>! !

Change the data

Swimming-lanes

•  No Horizontal scrollbar •  All ‘data’ available

•  Use panelGroupLayout –  Width 100%

<amx:panelGroupLayout layout="horizontal” inlineStyle="width:100%;">!

Push Notification (GCM)

•  Subscribe to GCM •  Receive token •  Register with Enterprise app •  Enterprise app Pushes message to

GCM •  GCM delegates message to

device(s)

Server Side

•  Class to push a message to a device. –  import com.google.android.gcm.server.Constants; –  import com.google.android.gcm.server.Message; –  import com.google.android.gcm.server.Result; –  import com.google.android.gcm.server.Sender;

public class PushMessageBean { public String message; private Sender sender = new Sender(”<someSenderKey>"); public static final String ERROR_NOT_REGISTERED="NotRegistered”; private Message createMessage(String msg) { String sound = "default"; Message message = new Message.Builder().collapseKey("1") .delayWhileIdle(true) .addData("alert", msg) .addData("sound", sound).build(); return message;}

Server Side Send Code

public void pushNow(ActionEvent actionEvent) { // Add event code here… DCBindingContainer bindings = (DCBindingContainer) BindingContext.getCurrent().getCurrentBindingsEntry(); DCIteratorBinding iter = bindings.findIteratorBinding("GcmSubscribersIterator"); Row curr = iter.getCurrentRow(); String target = (String)curr.getAttribute("DeviceToken"); String type = (String)curr.getAttribute("DeviceType"); if(type.equalsIgnoreCase("Android")){ Message message = createMessage(this.message); Result result = null; sendSingleMessage(target, message); }

Example

•  Select device

•  Send message

•  Get notified

+

GCM Demo

Summary

1.  Whitelisting 2.  Provider Refresh 3.  Pictures 4.  Data Service Pattern 5.  Feature Archives

6.  Springboard 7.  Prog Navigation 8.  Keep current Row 9.  Pull to Refresh 10. Push Notifications

One App….. …. 10 Things ….. …. In 45 Minutes… ….. Really !

User Experience Patterns and Guidelines WIKI

Luc Bors, AMIS, The Netherlands Luc.Bors@amis.nl LucBors@gmail.com

Follow me on : @lucb_