Real Life Oracle Mobile Application Framework. Things that you don't get from the developer guide

Transcription

1 Real Life Oracle Mobile Application Framework Things that you don't get from the developer guide Oracle Open World, San Francisco, September 28th 2014

2 Who Am I Luc Bors Principal Consultant AMIS, Netherlands Friends of Oracle & Java Oracle Partner Oracle Specialized Partner of the year 2014 Middleware - EMEA

3 Before we start Let s look at some basic terms related to MAF and Mobile Springboard Gestures Feature Push Notifications

4 MAF Architecture Overview Device Native Container Web View HTML5 and Javascript Presentation AMX View App Config Configuration Server Local HTML Server HTML Server Generated HTML Controller Java VM Business Logic Push Handler Credential Management SSO and Access Control APN/GCM Push Services JDBC SOAP and REST Services Apache Cordova Model SQLite Device Services SQLite Database

5 Todays Topics Navigation and Application Control Device Interaction Gestures Push Notifications

6 Springboard configuration in maf-application.xml Springboard & navigationbar

7 The Default Springboard

8 The Custom SpringBoard

9 Springboard Toggle Default button on bottom left Custom button such as Top Right Create this yourself Note: No show / hide available Note: No isspringboard visible property available. You need to create this yourself <amx:commandlink actionlistener="#{bindings.gotospringboard.execute}" id="cl1 styleclass="custom-springboard-link > <amx:image inlinestyle="width:30px;height:30px source="/images/springboard.png" id="i1"/> </amx:commandlink>

10 Feature Archives Feature Archives can be reused Deploy MAF app as FAR Add to Consumer Use features from FAR in other apps

11 Features can be taskflows Can contain multiple activities Navigation between activities is possible Information exchange is possible

12 List to Detail Navigate from List to Detail If List and Detail use the same iterator, correct details will show up automatically List View 1 Name.. 2 Name.. 3 Name.. 4 Name.. Detail View #3. Name State Country Example: If you select List item #3, and that will become the current item in the iterator the list is based on.

13 Navigation Declarative Navigation Button/Link/ListItem <amx:listitem id="li1" action="detail" showlinkicon="true selectedrowkeys="#{collection.collectionmodel.selectedrow} " selectionlistener="#{collection.collectionmodel.makecurrent}""." " >"

14 List to Detail (+) What if you don t want to GET all detail data for every List item? Simply use an (extra) service call to get the detail Data Service call List View 1 Name.. 2 Name.. 3 Name.. 4 Name.. Detail View #3. Name State Country Image: Example: If you select List item #3, and that will become the current item in the iterator the list is based on. You can use the Identifier of that list item to call the service

15 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"/>"

16 Programmatic Navigation Programmatic Navigation JavaCode AdfmfContainerUtilities.invokeContainerJavaScriptFunction(" AdfmfJavaUtilities.getFeatureName(), " "adf.mf.api.amx.donavigation", " new Object[] { detail" }); } "

17 Programmatic 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());"

18 Todays Topics Navigation and Application Control Device Interaction Gestures Push Notifications

19 All day example Twitter or Whatsapp and images What if you embed an image in a message? Two options: Use exisiting image from gallery or Create a new one with camera. Where is the catch?

20 Device Interaction (Declarative) The Device Datacontrol Drag n Drop support Attributes as fields Operations as buttons

21 Camera interaction (from Java) Take a picture 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); or get one from the Library DeviceManager.CAMERA_SOURCETYPE_PHOTOLIBRARY

22 Smart Camera Interaction Or how to prevent your app from crashing 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.

23 Even smarter Determine network connection #{hardware.networkstatus} Combined with #{device.os} To tweak size and quality parameters based on connectivity Always be aware of the other side.. Does the recipient have the same Connectivity.

24 Todays Topics Navigation and Application Control Device Interaction Gestures Push Notifications

25 Gestures ( and UX ) Gestures can be used from: Buttons Links List Item <amx:showpopupbehavior popupid="pop1" type="taphold />

26 Gesture Abuse.. Or how to confuse your app user <amx:showpopupbehavior popupid="pop1" type= swipeleft /> <amx:actionlistener binding="#{mybean.deleterow}" type= swipedown"/>

27 What Apple did (ios6 à ios7) They changed delete swipe from right to left. I rest my case Make sure to be aware of the right standard: For Device For OS For version

28 This is helpfull

29 Use case example

30 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} >" "

31 Example

32 Todays Topics Navigation and Application Control Device Interaction Gestures Push Notifications

33 Push Notifications Subscribe to GCM Receive token Register with Enterprise app Enterprise app Pushes message to GCM GCM delegates message to device(s)

34 Working with Payload Pusher knows the mobile app Pusher knows how app can respond App knows Pusher App knows what to expect from Pusher Pusher pushes info to determine the Feature and optionally a Key App Navigates to correct Feature based on this information and calls Service with the key to fetch information

35 Server side message Example: private Message createmessage(string msg) { String sound = "default"; Message message = new Message.Builder().delayWhileIdle(true).addData("alert", msg).adddata("sound",sound).adddata("featurename", "Sessions").addData("SessionId", "12").build(); } return message;

36 In the MAF App PushNotification Listener onmessage Deserialize Payload Call Feature

37 When Notified (onmessage) Application Push Notification Listener onmessage(event event) Deserialize Payload and work with it PayloadServiceResponse serviceresponse = (PayloadServiceResponse)jsonHelper.fromJSON( PayloadServiceResponse.class, event.getpayload()); ValueExpression notificationpayloadbinding = AdfmfJavaUtilities.getValueExpression( "#{applicationscope.notificationsessionid}", String.class); notificationpayloadbinding.setvalue( AdfmfJavaUtilities.getAdfELContext(), serviceresponse.getsessionid()); ValueExpression ve = AdfmfJavaUtilities.getValueExpression( "#{applicationscope.notified}", Boolean.class);

38 . Finally Change badge and go to the Feature. // 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");

39 In the MAF Feature FeatureLifeCycle Listener onactivate() Do Something Navigate

40 In the Feature Feature LifeCycle Listener In the onactivate() method respond to notification if(notified.booleanvalue()){ AdfmfContainerUtilities.invokeContainerJavaScriptFunction( AdfmfJavaUtilities.getFeatureName(),"adf.mf.api.amx.doNavigation,new Object[] { "featureactivated" }); }

41 The taskflow behind the scenes Wildcard activity featureactivated To Router Determine if Notified If so, handle the Notification HandleNotification Call Service to get info, or do whatever is needed to handle the notification

42 Summary Don t take anything for granted Start simple, renew fast. (Re-) Consider default behavior Users First!!!! Think about proper Use cases for every thing you do Use the wiki: Tip: Read a good MAF book and go to many session during #oow14

43 Book launch ISBN no s: / Regular price: $60 Oracle OpenWorld Bookstore: Moscone South, Upper Lobby. 20% discount for OOW visitors Meet the author: Meet me in the Oracle OpenWorld bookstore on Monday from 1 to 1:30 p.m.

44 More mobile at OOW14 Monday Tuesday

45 Wednesday More mobile at OOW14

46 More mobile at OOW14 Thursday Don t miss the HOL

47 Luc Bors, AMIS, The Netherlands Follow me on