This is the presentation that used at november 12th during the AMIS Knowledge session on ADF Mobile

1. MOBILE DEVELOPMENT WITH
JDEVELOPER AND ADF
Luc Bors, AMIS, The Netherlands
Monday October 12th 2012
KC ADF Mobile
Nieuwegein, Nederland

2. ADF MOBILE
• Declaratively develop hybrid on-device apps
• Access local storage and device services (camera, bar
scanner, etc.)
• Reuse existing ADF development skills
• Minimize development cycle
for supporting new mobile
platforms

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

4. TIGHT DEVICE SERVICES INTEGRATION
• Thin native application
container provides device
services integration
• Leverages Open Sourced
PhoneGap
• Abstracted for easy integration
• Common interface across all
platforms
• Gracefully handle device
services availability
• Version ….. 1.1 

5. ADF MOBILE ARCHITECTURE

6. SUPPORTED PLATFORMS, DEVICES, AND
DATABASES
ADF Mobile supports the following platforms:
• Apple iOS 5 or later
• Android 2.3 or later
The following mobile devices are supported:
• Apple iPhone
• Apple iPad
• Android-powered devices
The supported database
• SQLite

7. DEVELOPMENT OVERVIEW
• Setup Development Environment
• Configure JDevoper
• Create a new Application
• Create Taskflows
• Create Pages
• Add Components to Pages
• Add Gesture Support
• Add Device Interaction
• Deployment the Application

8. CONFIGURE IDE FOR ADF MOBILE

9. CREATE A NEW ADF MOBILE APP.

10. CREATED ARTIFACTS (PROJECT)

11. ADF MOBILE TASKFLOWS

12. ADF MOBILE TASKFLOWS
• Supported activities
– Method calls
– Router
– View Activity

13. CREATING ADF MOBILE PAGES

14. BUILDING THE AMX PAGES
• Layout First
• Input / Output / Command Components
• More Advanced Components
• Behavior
• Device Interaction

15. USING LAYOUT COMPONENTS
• Panel Group Layout
• Panel Form Layout
• Panel Label and Message
• List View
• List Item
• Popup
• Panel Splitter
• Panel Item
• Table Layout
• Row Layout
• Spacer

16. XML, VISUAL, DECLARATIVE
<amx:outputText id="outputText1“ value="Sub-Section Title 1"
styleClass="amx-text-sectiontitle"/>
<amx:panelFormLayout id="panelFormLayout1" labelPosition="start">
<amx:panelLabelAndMessage id="panelLabelAndMessage1"
label="Name">
<amx:commandLink id="commandLink1" text="Jane Doe"
action="editname" />
</amx:panelLabelAndMessage>
…………………………………..
</amx:panelFormLayout>

17. USING UI COMPONENTS
• Input Text
• Input Number Slider
• Input Date
• Output Text
• Button
• Link
• Image
• Checkbox
• Select Many Checkbox
• Select Many Choice
• Select Button
• Radio Button
• Carousel
• Verbatim

18. ADF MOBILE COMPONENT SET
• Input Date Field • Input Number Slider
<amx:inputDate
id="inputDate1" <amx:inputNumberSlider
label="Input Date" id="inputNumberSlider1“
value="#{myBean.date}"/> label="Input Number"
minimum="0"
maximum="20"
stepSize="1"
value="10"/>

19. USING A CAROUSEL
<amx:carousel id="carousel1“ value="#{bindings.products.collectionModel}“ >
<amx:facet name="nodeStamp">
<amx:carouselItem id="item1" text="#{item.name}"
shortDesc="Product: #{item.name}">
<amx:commandLink id="link1" action="goto-productDetails"
actionListener="#{someMethod()}">
<amx:image id="image1"
source="images/img-big-#{item.uid}.png"/>
</amx:commandLink>
</amx:carouselItem>
</amx:facet>
</amx:carousel>

20. USING DATA VISUALIZATION
• areaChart
• barChart
• bubbleChart
• comboChart
• lineChart
• pieChart
• scatterChart
• sparkChart
• LedGauge
• StatusMeterGauge
• Geographic Map
• Thematic Map

21. USING DATA VISUALIZATION
<dvtm:bubbleChart id="bubbleChart_1"
value="#{ChartData.bubble_data_alt.data}"
var="row">
<amx:facet name="dataStamp">
<dvtm:chartDataItem label="#{row.group}" x="#{row.data.x}"
y="#{row.data.y}" size="#{row.data.z}">
<dvtm:attributeGroups type="color" value="#{row.series}"/>
<dvtm:attributeGroups type="shape" value="#{row.group}"/>
</dvtm:chartDataItem>
</amx:facet>

22. BEHAVIOR : 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

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

24. DEPLOYING THE APPLICATION
• One click deployment to ….
– Device
– Simulator/Emulator
– Package
• Finally
– Publish to appStore
– Publish to Google Play

25. CREATE A DEPLOYMENT PROFILE
• ADF Mobile for Android
• ADF Mobile for iOS
• Both have multiple configuration options

26. ANDROID DEPLOYMENT PROFILE

27. IOS DEPLOYMENT PROFILE

28. DEMO

29. DEVICE INTERACTION
• The Device Datacontrol
• Drag n Drop support
• Attributes as fields
• Operations as buttons

30. CAMERA INTERACTION
• 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,
0,
0);
• …… or get one from the Library
DeviceManager.CAMERA_SOURCETYPE__PHOTOLIBRARY

31. ………. AND MORE
• Send Emails
DeviceManagerFactory.getDeviceManager().sendEmail
• Create Contacts
DeviceManagerFactory.getDeviceManager().findContacts.createContact(aContact);
• Send SMS
DeviceManagerFactory.getDeviceManager().sendSMS(“03000100", “Testmessage");

32. USING THE LOCAL DATABASE

33. DATABASE SCRIPTS

34. CREATING A LOCAL DATABASE

35. USING WEBSERVICES
• Create Webservice Datacontrol

36. USING WEBSERVICES
• Just drag & drop the method from the Data Control

37. USING WEBSERVICES
• The Page
• D
• The Pagedefinition

38. USING WEBSERVICES (2)
• Invoke directly from java.
• Does not use the binding layer
• Uses Framework utilityMethod
• AdfmfJavaUtilities.invokeDataControlMethod()
• Use generic Types

39. USING GENERIC TYPES
• Why is this important to know? Because
invokeDataControlMethod returns GenericType objects and
developers either need to parse these GenericType objects
themselves or use one of our helper functions.

40. DEMO

41. DATA CHANGE EVENTS
• Use the propertyChangeSupport Class
• Automatically generated when Bean getters and setters are
created
• firePropertyChange
• removePropertyChangeListener
• AddPropertyChangeListener
• And that is the way the framework captures changes, push
them to the client cache and notify the UI.

42. DEBUGGING ADF MOBILE APPS
The following are the steps you need to do to use
JDeveloper to debug the Java code
1.Configure the project properties for remote debugging
by creating an ADF Model debugging configuration
2.Deploy the application to a mobile device or simulator
3.Specify the debugging parameters in the
cvm.properties file
4.Redeploy and start the application
5.Start the debugger from JDeveloper

43. DEBUGGING ADF MOBILE APPS

44. DEBUGGING ADF MOBILE APPS

45. DEMO

46. SUMMARY
• ADF Mobile allows you to use your ADF development
skills
• Extensive component support (including DVT)
• Great user experience…
• Build once…
• ….. Deploy to multiple platforms from within
Jdeveloper

47. MOBILE DEVELOPMENT WITH
JDEVELOPER AND ADF
Luc Bors, AMIS, The Netherlands
Luc.Bors@amis.nl
LucBors@gmail.com
Follow me on : @lucb_