adf mobile - an intro for developers
DESCRIPTION
This is the presentation that used at november 12th during the AMIS Knowledge session on ADF MobileTRANSCRIPT
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 [email protected]@gmail.comFollow me on : @lucb_