ADF Mobile - an intro for Developers

  • 2,868 views
Uploaded on

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

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

More in: Automotive
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,868
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
112
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Google play
  • Oracle ADF Mobile – For applications built with the ADF Mobileframework, running on-device, and integrating with enterprise webservices (and covered in this data sheet). This is a new product targetingrelease in calendar year 2012.Oracle Application Development Framework (ADF) Mobile provides a naturalextension of enterprise/internet applications to mobile clients by providing tools,services, and infrastructure to protect against technology shifts. An application builtwith ADF Mobile framework installs on a smart device, renders user interface viaHTML5, and has access to device services. This means the programming model isprimarily web-based, which offers consistency with other enterprise applications aswell as easier migration to new platforms. But the application has access to deviceservices, enabling a richer experience for users than a browser alone can offer.
  • Device Native Container represents an application container or templatecompiled as device native application binary which provides the run-timeenvironment for an ADF Mobile application to run as an on-device, nativeapplication in the mobile device’s operation system (for example, Apple iOS).Besides hosting the client-side components for an ADF Mobile application, itprovides navigation utilities, such as a springboard and navigation bar, whichenable access to particular features of the application.Web View is a part of the device native container that uses a mobile device’s webengine to display and process web-based content. In an ADF Mobile application,the web view is the primary mechanism to render and deliver the application userinterface.Server HTML represents a web-based user interface that is generated on theserver and delivered as a Web page to the ADF Mobile application. Theapplication HTML code, business logic, and page flow logic are generated on aremote server. Server HTML can access device native services, such as camera,through the JavaScript API supported by PhoneGap, as long as it is running insidean ADF Mobile application. Common options for server HTML-based pages areADF Mobile browser and Oracle ADF Faces rich client-based pages.Local HTML represents web pages developed using JDeveloper or third-partytools that are directly embedded within an ADF Mobile application. These pagesare delivered as a part of the ADF Mobile application. Local HTML files can accessdevice native features through the JavaScript APIs supported by PhoneGap.ADF Mobile AMX Views are based on the ADF Mobile AMX technology thatdelivers a JSF-like development experience to working with an HTML5-based userinterface. ADF Mobile AMX views are defined using UI and code editors providedby JDeveloper. These views are embedded into an ADF Mobile application anddeployed to a mobile device. At run time, the JavaScript engine in the web viewrenders ADF Mobile AMX view definitions into HTML5 components. ADF MobileAMX components are built to deliver a mobile optimized user experience out ofbox. These components support the device native user experience throughextensive animation and gesture support.ADF Controller is represented by a mobile version of Oracle ADF controller thatsupports a subset of Oracle ADF task flow components available to a server-basedOracle ADF application. Both bounded and unbounded Oracle ADF task flows aresupported, as well as a subset of events and scopes that are supported by theserver-based ADF.Java provides a Java run-time environment for an ADF Mobile application. ThisJava Virtual Machine (JVM) is implemented in device-native code, and isembedded (or compiled) into each instance of the ADF Mobile application as partof the native application binary. The JVM is based on the JavaME ConnectedDevice Configuration (CDC) specificationManaged Beans are Java classes that can be created to extend the capabilities ofADF Mobile, such as provide additional business logic for processing datareturned from the server. Managed beans are executed by the embedded Javasupport, and therefore must conform to the JavaME CDC specifications.ADF Model in an ADF Mobile application supports a subset of business logiccomponents available to a server-based Oracle ADF application. ADF modelcontains the binding layer that provides an interface between the business logiccomponents and user interface, as well as the execution logic to invoke REST orSOAP-based web services.Application Configuration refers to services that allow key applicationconfigurations to be downloaded and refreshed. For example, URL endpoints for aweb service or remote URL connection. Application configuration servicesdownload the configuration information from a WebDav-based server-sideServiceCredential Management, SSO, and Access Control refers to client-side servicesthat provide security-related services for an ADF Mobile application. For example,a local credential store that securely caches user credentials to support an offlineauthentication or access control services that display or hide application featuresbased on user access privileges.PhoneGapis an open-source code library that provides a common JavaScript APIto access various mobile device services, such as the camera. PhoneGap provides amajority of the device services integration for an ADF Mobile application.PhoneGap JavaScript APIs are further abstracted as device data controls in theJDeveloper design time for ADF Mobile AMX-based views, allowing forintegration of device services by simply dragging and dropping data controls totheir ADF Mobile AMX views.Local Data refers to data stores that reside on the device. In ADF Mobile, these areimplemented as encrypted SQLite databases. Create Retrieve Update Delete(CRUD) operations are supported to this local data store through the Java layer,using JDBC-based APIs.On the server side, the Configuration Server refers to a WebDav-based server thathosts configuration files used by the application configuration services. Theconfiguration server is delivered as a reference implementation. Any commonWebDav services hosted on a common J2EE server can be used for this purpose.
  • 3.3.1.1 Configuring the Environment for Form FactorsForm factor is a specific device configuration. The Form Factors Preference pageenables you to manage (create, edit or delete) named form factors. Each form factor isidentified by a name that you specify for it and contains information on the specifiedresolution denoted by pixel width and pixel height.Form factors defined in preferences are used in the ADF Mobile AMX page Previewtab (see Section 7.3.2.2, "Using the Visual Editor"). You can select or switch betweenvarious form factors to see how an ADF Mobile AMX page is rendered in various formfactors. You can also see multiple form factors applied to the same page using the splitscreen view.
  • Whenyou want tocreate a new ADF Mobile application, Jdeveloperprovides a Mobile Application template.The template takes care of configuringJDeveloperfor mobile development. That means thatsomeartifacts are createdforyou. Among these artifacts is an ADF Mobile framework model project and the view-controller project (with thedefault name, ViewController) that has the ADF Mobile framework feature application resources. As we cansee in the next slide
  • Someartifacts are created at the viewcontroller levelDescriptor file for feature applications (adfmf-feature.xml)Skinning Files adfmf-skins.xml—defines available skins and enable you to define new skins.adfmf-config.xml—defines current version of the skin as defined in adfmf-skins.xmlDevice Data Controls Control File (DataControls.dcx) Platform-specific resourcesFeature Application-Specific ContentIf you are familiar with ADF Development you will notice the similarity in the filenames. For ADF Mobile, mf is added to the filenames.
  • Whileothers are created at the Application levelDescriptor file for mobile applications (adfmf-application.xml)Application imagesThe adfmf-application.xml descriptor file enables you to set the basicconfiguration of the ADF Mobile application by designating its display name, a uniqueapplication ID to prevent naming collisions, selecting the features that will display onthe application springboard, which is the equivalent of a home page on a smartphone.Further, this file enables you to create the user preferences pages for the mobileapplication as well as how the mobile application handles errors. This file, which isgenerated by JDeveloper after you complete the application creation wizard
  • You can also open the Overview tab and use the overview editor to createnavigation rules and navigation cases. Press F1 for details on using the overvieweditor to create navigation.Additionally, you can manually add elements to the task flow file by directlyediting the page in the source editor. To open the file in the source editor, click theSource tab.
  • Task flows allow you to define the navigation between ADF Mobile AMX pages. Usingyour application workspace in Jdeveloper, you can start creating the user interface for your ADF Mobile AMX feature by designing task flows. As with any standard JSF application, ADF Mobile AMX uses navigation cases and rules to define the task flow. These definitions are stored in a file with the default name of ViewController-task-flow.xmlADF Mobile enables you to create ADF Mobile AMX features that have both boundedand unbounded task flows. As described in "Task Flow Types" section of Oracle FusionMiddleware Fusion Developer's Guide for Oracle Application Development Framework, abounded task flow is also known as a task flow definition and represents the reusableportion of an application. In ADF Mobile, bounded task flows have a single entrypoint and no exit points. They have their own collections of activities and control-flowrules, as well as their own memory scope and managed-bean life span.You use the ADF Mobile AMX Task Flow Designer to create bounded task flows foryour feature. When designing an ADF Mobile AMX task flow, JDeveloper maintainsthe same experience as designing an ADF task flow, as described in "Creating a TaskFlow" section of Oracle Fusion Middleware Fusion Developer's Guide for Oracle ApplicationDevelopment Framework. Like the overview editor for task flows, this tool includes adiagrammer (see Section 7.2.4, "What You May Need to Know About the ADF MobileTask Flow Diagrammer") in which you build the task flow by dragging and droppingactivities and control flows from the Components editor. You then define theseactivities and the transitions between them using the Property Inspector.Unless a task flow has already been created, ADF Mobile automatically generates adefault unbounded task flow (adfc-mobile-config.xml file) when a new ADFMobile AMX page is created.
  • In ADF Mobile, data controls behave similarly to the way they work in Oracle ADF.Device data controls appear within the Data Controls panel in JDeveloper, allowingyou to drag and drop the primary data attributes of data controls to your applicationas (text) fields, and the operations of data controls as command objects (buttons).Performing such drag and drop actions will generate standard EL bindings in yourapplication in the appropriate properties for the controls that are created. The normalADF bindings for those actions (represented by a general DataControls.dcx file, topoint at the data control source, and the page bindings, to link the specific page’sreference to the data control) will be present, allowing the runtime to process thebindings when your application executes
  • allows the user to take a picture with the device’scamera. The result will be the full path to the saved image

Transcript

  • 1. MOBILE DEVELOPMENT WITH JDEVELOPER AND ADFLuc Bors, AMIS, The NetherlandsMonday October 12th 2012KC ADF MobileNieuwegein, 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, ANDDATABASESADF 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 devicesThe 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 EmailsDeviceManagerFactory.getDeviceManager().sendEmail • Create ContactsDeviceManagerFactory.getDeviceManager().findContacts.createContact(aContact); • Send SMSDeviceManagerFactory.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 APPSThe following are the steps you need to do to useJDeveloper to debug the Java code1.Configure the project properties for remote debugging by creating an ADF Model debugging configuration2.Deploy the application to a mobile device or simulator3.Specify the debugging parameters in the cvm.properties file4.Redeploy and start the application5.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 ADFLuc Bors, AMIS, The NetherlandsLuc.Bors@amis.nlLucBors@gmail.comFollow me on : @lucb_