There are many web-based or device-native techniques to create mobile applications. To support multiple devices, such as iPhones, iPads, and Android phones and tablets, an application needs to be developed several times, using multiple tools, languages, and platforms. This dramatically lowers the ROI. Oracle JDeveloper and Oracle Application Development Framework (Oracle ADF) allow you to create one single application, based on HTML5, that runs on multiple mobile device platforms. This session demonstrates how to create a mobile application that can be used 'on the road' to perform relevant tasks, no matter what device is used. You will learn best practices on how to connect with server side datasources and the on device database. Finally you will learn how to integrate with device services such as calendar and camera.

1. Luc Bors, june 2013, ODTUG KScope 2013 New Orleans
Best Practices for Developing Applications
with Oracle ADF Mobile
Oracle ADF Mobile

2. Who Am I
• Luc Bors
• Principal Consultant
• AMIS Nieuwegein Netherlands
• Friends of Oracle & Java
• 5 Oracle ACE(D)
• Oracle Partner

3. ADF Mobile Overview
17 Copyright © 2011, Oracle and/or its affiliates. All rights reserved.
Device
Services
How It Works?
Phone Gap
Device Native Container
Web
View
Server
HTML
ADF Mobile
XML View
Java
Managed Beans
ADF Model
Third Party
Web Sites
ADF Faces RC
ADF Mobile
Browser
Mobile
Device
Web Services
(SOAP & REST)
Local
HTML
HTML5 & JavaScript
Configuration
Server
ADF Controller
Local'Data'
CredentialManagement,
SSO&AccessControl
Application
Configuration
Server

4. ADF mobile vs. Vanilla ADF
• The Obvious Differences
• The Annoying Differences
• The Not so Obvious Differences
• The Nice Differences

5. The Obvious Differences
• Mobile
• Multiple Platforms
• Multiple Form Factors
• Touchscreens

6. What Device are you on ?
• Device info
• Device Properties

7. Work With Form Factors
• Respond to Form Factors
• Conditionally Render Different content

8. Demo

9. Using the mouse for…..
• Clicking Menu Items
• Clicking Links & Buttons
• Expanding / Collapsing
• Selecting / Deselecting

10. 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

11. Gesture examples
• The Swipe Gesture
• The Tap Gesture
<amx:actionListener binding="#{mybean.DoX}"
type="swipeRight"/>
<amx:showPopupBehavior popupid="pop1"
type="tapHold“ />

13. Annoying differences

14. A simple calculator….
• In Vanilla ADF…… • InputText for Value
• Autosubmit
• OutputText for Result
• PartialTriggers
• Managed Bean
• Holds the values

15. This is annoying….
• ADF Mobile
• Autosubmit and PartialTriggers does not exist !
• 2 Options
I. Use application Scoped Variables (no Coding)
• Not meant for this purpose
II. Use the Property Change Listener Pattern

16. PropertyChangeSupport

18. The not so obvious ones
• No menu structure…..
• What about Application Start ?
• What about Navigation ?
• No ADF Business Components
• Now what ?

19. Springboard & navigationbar
• Springboard configuration in adfmf-application.xml

20. The Default Springboard

21. The Custom SpringBoard

22. Configuring the springboard

24. Using the Local Database

25. Creating the Local Database

26. Register Listener

27. Using the POJO Datacontrol

28. Talking to the DB (Select)

29. Talking to the DB (DML…)

31. Using Webservices
• Create a Webserivce Datacontrol

32. Using Webservices (1)
• Just drag & drop the method from the Data Control

33. Using Webservices (1)
• The PageDefinition File
• The PageDefinition

34. Using Webservices (2)
• Invoke directly from java.
• Does not use the binding layer
• Uses Framework utilityMethod
• AdfmfJavaUtilities.invokeDataControlMethod()
• Datacontrol must be in available in DataBindings.cpx

35. Advice
• Do Not Hook Up Webservices Directly to Your Page
– Use Multiple Layers of Datacontrols For Abstraction
– You are in control

36. Demo

37. Use Caching
• By default the webservice will be called on every request
• Simply compare if what is in memory is the same as what needs to be
shown.
if (!s_locationsList.isEmpty()){
MyLocation cur = (MyLocation)s_locationsList.get(0);
Integer currentLoc = cur.getId();
if (currentLoc.compareTo(Integer.valueOf(<NEWVALUE>))!=0){
// clear cache
callWebservice();
}
}

38. The return of the invokeAction
• The current row in ADF Mobile is not preserved across pages that bind to
the same data collection
• Steps:
– 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.
– http://www.ateam-oracle.com/adf-mobile-preserving-the-current-row-across-pages/

39. The Nice Differences
• Device Interaction
• Thematic Maps

40. Device Interaction
• The Device Datacontrol
• Drag n Drop support
• Attributes as fields
• Operations as buttons

41. 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,
0,
0);
DeviceManager.CAMERA_SOURCETYPE__PHOTOLIBRARY

42. Be careful !!
• DESTINATIONTYPE_DATA_URL you will get the image as base64 encoded
string
• Camera’s are very good.
• 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
– On Android out-of-memory can be caused with default image settings. Make
image smaller by setting targetWidth and targetHeight

43. Demo

44. I wish ADF could do this

45. Custom Thematic Map
• Configuration File
• Custom Image

46. Custom Thematic Map

47. Custom Thematic Map

48. Demo

49. Summary
• Today was about differences
• Know the differences
• Know the ADF Mobile way to do it
• There are many parallels
• Developing ‘feels’ like Vanilla ADF
• Component Based Developement
• ADF ‘like’ config files
• DataControl / DataBinding
• My advise
• Use ADF Mobile like ADF
• Know The DataControl by heart
• Know how to use Multiple (levels) of Datacontrols
• Use Java; it is more flexible then declarative

50. Questions ?

51. Luc Bors, AMIS, The Netherlands
Luc.Bors@amis.nl
LucBors@gmail.com
Follow me on : @lucb_