adf mobile - an intro for developers

MOBILE DEVELOPMENT WITH JDEVELOPER AND ADF

Luc Bors, AMIS, The NetherlandsMonday October 12th 2012 KC ADF Mobile Nieuwegein, Nederland

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

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

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

ADF MOBILE ARCHITECTURE

SUPPORTED PLATFORMS, DEVICES, AND DATABASES

ADF Mobile supports the following platforms:• Apple iOS 5 or later• Android 2.3 or laterThe following mobile devices are supported:• Apple iPhone• Apple iPad• Android-powered devices

The supported database • SQLite

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

CONFIGURE IDE FOR ADF MOBILE

CREATE A NEW ADF MOBILE APP.

CREATED ARTIFACTS (PROJECT)

ADF MOBILE TASKFLOWS

ADF MOBILE TASKFLOWS

• Supported activities– Method calls– Router– View Activity

CREATING ADF MOBILE PAGES

BUILDING THE AMX PAGES

• Layout First

• Input / Output / Command Components

• More Advanced Components

• Behavior

• Device Interaction

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

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>

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

ADF MOBILE COMPONENT SET

• Input Date Field

<amx:inputNumberSlider id="inputNumberSlider1“ label="Input Number" minimum="0" maximum="20" stepSize="1" value="10"/>

<amx:inputDate id="inputDate1" label="Input Date" value="#{myBean.date}"/>

• Input Number Slider

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>

USING DATA VISUALIZATION

• areaChart • barChart • bubbleChart• comboChart• lineChart• pieChart• scatterChart• sparkChart

• LedGauge• StatusMeterGauge

• Geographic Map• Thematic Map

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>

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

BEHAVIOR : GESTURE SUPPORT

• The Swipe Gesture

• The Tap Gesture

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

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

DEPLOYING THE APPLICATION

• One click deployment to ….– Device– Simulator/Emulator– Package

• Finally– Publish to appStore– Publish to Google Play

CREATE A DEPLOYMENT PROFILE

• ADF Mobile for Android

• ADF Mobile for iOS

• Both have multiple configuration options

ANDROID DEPLOYMENT PROFILE

IOS DEPLOYMENT PROFILE

DEMO

ADF Mobile Demo

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, 0, 0);

DeviceManager.CAMERA_SOURCETYPE__PHOTOLIBRARY

………. AND MORE

• Send Emails

• Create Contacts

• Send SMS

DeviceManagerFactory.getDeviceManager().sendEmail

DeviceManagerFactory.getDeviceManager().findContacts.createContact(aContact);

DeviceManagerFactory.getDeviceManager().sendSMS(“03000100", “Testmessage");

USING THE LOCAL DATABASE

DATABASE SCRIPTS

CREATING A LOCAL DATABASE

USING WEBSERVICES

• Create Webservice Datacontrol

USING WEBSERVICES

• Just drag & drop the method from the Data Control

USING WEBSERVICES

• The Page

• D

• The Pagedefinition

USING WEBSERVICES (2)

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

• Uses Framework utilityMethod

• AdfmfJavaUtilities.invokeDataControlMethod()

• Use generic Types

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.

DEMO

DEMO Weather Service

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.

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

DEBUGGING ADF MOBILE APPS

DEBUGGING ADF MOBILE APPS

DEMO

DEMO Debugging

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

MOBILE DEVELOPMENT WITH JDEVELOPER AND ADF

Luc Bors, AMIS, The NetherlandsLuc.Bors@amis.nlLucBors@gmail.comFollow me on : @lucb_