Creating an ADF Mobile Application

Tweet about this on TwitterShare on Facebook0Share on LinkedIn3Share on Google+0

Oracle ADF Mobile is the application development framework that enables you to create multi-featured applications for Apple iOS and Google Android-powered devices from a single source using the declarative development approach. The applications run natively on the mobile devices.

Download the sample application – CurrencyConvertorMobileApp.zip – that use a currency convertor web service from webservicex.net to show the conversion rate between two currencies that we choose.

Create a new Mobile Application (ADF). Set the Application Name to CurrencyConvertorMobileApp and Application Package Prefix to br.com.waslleysouza, click on Finish.

creating-an-adf-mobile-application1

Now, we have an application with two projects, ApplicationController that contain configuration files for describing the metadata of the ADF Mobile application, and ViewController that house the resources for the application features.

creating-an-adf-mobile-application2

Go to Features section from adfmf-feature.xml and click on green plus icon to add a new feature. Set the Feature Name to CurrencyConvertor and click on OK.

creating-an-adf-mobile-application3

Go to Content tab, click on green plus icon from File field and select Task Flow.
In the Create ADF Mobile Task Flow Dialog, click on OK.

creating-an-adf-mobile-application4

Drag two View components from Component Palette and drop them inside Task Flow.
Name them as Form and Result.

creating-an-adf-mobile-application5

Double-click on Form View, mark Header option and click on OK to create the page.

creating-an-adf-mobile-application6

Select the outputText and set the Value property to Currency Convertor.
Add the code below to page.

<amx:panelFormLayout id="pfl1">
  <amx:selectOneChoice label="From Currency" id="soc1" value="#{pageFlowScope.fromCurrency}">
    <amx:selectItem id="si1" label="----" value=""/>
    <amx:selectItem id="si2" label="Brazilian Real" value="BRL"/>
    <amx:selectItem id="si3" label="U.S. Dolar" value="USD"/>
    <amx:selectItem id="si4" label="Euro" value="EUR"/>
  </amx:selectOneChoice>
  <amx:selectOneChoice label="To Currency" id="soc2" value="#{pageFlowScope.toCurrency}">
    <amx:selectItem id="si5" label="----" value=""/>
    <amx:selectItem id="si6" label="Brazilian Real" value="BRL"/>
    <amx:selectItem id="si7" label="U.S. Dolar" value="USD"/>
    <amx:selectItem id="si8" label="Euro" value="EUR"/>
  </amx:selectOneChoice>
</amx:panelFormLayout>
<amx:commandButton text="Currency Convertor" id="cb2" action="goResult"/>

creating-an-adf-mobile-application7

Go back to Task Flow, double-click on Result View, mark Header option and click on OK to create the page.

creating-an-adf-mobile-application8

Select the outputText and set the Value property to Currency Convertor.
Add a component to comunicate with web service. Go to File | New | Business Tier | Data Controls, select Web Service Data Control (SOAP/REST) and click on OK. Set the Name to CurrencyConvertor and URL to http://www.webservicex.net/CurrencyConvertor.asmx?WSDL, and click on Next.

creating-an-adf-mobile-application9

Select the CurrencyConvertorSoap, and click on Finish.

creating-an-adf-mobile-application10

Go to Data Controls palette and expand CurrencyConvertor data control.
Drag the Double – which represents the results from the web service – to the Panel Page from Structure palette and drop it as an ADF Mobile Output Text.

creating-an-adf-mobile-application11

In the Edit Action Binding Dialog, set the value of FromCurrency to #{pageFlowScope.fromCurrency} and value of ToCurrency to #{pageFlowScope.toCurrency}.

creating-an-adf-mobile-application12

Add a commandButton, set the Action property to __back and Text property to Back.
__back is a special function that allow to go back to the previously visited page.

creating-an-adf-mobile-application13

Go to binding tab of Result page, create an invokeAction inside Executables section, and move it to the first place, to execute initially before any other executable.

creating-an-adf-mobile-application14

Change the Refresh property to Always.

creating-an-adf-mobile-application15

Save everything.
Let’s deploy and test the application!
From the Application menu in JDeveloper, select Deploy | Android1.

creating-an-adf-mobile-application16

Select Deploy application to emulator and click on Finish.

creating-an-adf-mobile-application17

In the Deployment tab of the Log window, make sure the deployment is finished.

creating-an-adf-mobile-application18

In the emulator, navigate to the Applications page and open the CurrencyConvertorMobileApp application.

creating-an-adf-mobile-application19

The emulator shows the Currency Convertor Form page.
Select Brazilian Real and Euro to get conversion rate from one currency to another currency, and click on Currency Convertor.

creating-an-adf-mobile-application20

Click on Back button to go back to Form.

creating-an-adf-mobile-application21

Resource:
Oracle Fusion Middleware Mobile Developer’s Guide for Oracle Application Development Framework 11g Release 2 (11.1.2.4.0): http://docs.oracle.com/cd/E37975_01/doc.111240/e24475/toc.htm

Tweet about this on TwitterShare on Facebook0Share on LinkedIn3Share on Google+0

Author: Waslley Souza

Consultor Oracle com foco em tecnologias Oracle Fusion Middleware e SOA. Certificado Oracle WebCenter Portal, Oracle ADF e Java.

Leave a Reply

Your email address will not be published. Required fields are marked *