December 18, 2014
Hot Topics:

Getting Started with Oracle ADF Mobile Applications

  • April 14, 2014
  • By Manoj Debnath
  • Send Email »
  • More Articles »

Oracle ADF within JDeveloper provides a feature rich framework for mobile application development under an umbrella of Java Technologies. This widened the paradigm for mobile application development, because it had always been a problem to develop an application for such multifarious hand held devices where the challenges to create one for each device type is unique. Oracle tried to bring some uniformity that leverages existing knowledge and productivity into developing multifaceted applications. Mobile ADF apps are portable for both iOS and Android powered devices. Here we will show how to create a very simple Android application using Oracle ADF within JDeveloper IDE.

Basic Requirements and Configuration

Download the following packages:

1. Android SDK Bundle

1.1. Once downloaded, unzip Android SDK Bundle in any location.
1.2. For Windows platform, find SDK Manager.exe and double click to run it.
1.3. For Linux platform, go to the unzipped folder/sdk/tools and run ./android from the console.
1.4. SDK Manager Window can be used to install/update SDK tools.
1.5. To configure Emulator or Android Virtual Device go to Tools -> Manage AVDs and click on the New... button to create one.

Android SDK Manager
Fig1: Android SDK Manager

1.6. Enter the following information to configure the virtual device, then click OK to confirm. AVD Name: MyAVD or any other name you prefer
Device: Nexus One
Target: Choose from the drop down list
Back Camera: Emulated
Memory options: RAM: 512, VM Heap: 32
Internal Storage: 500 MiB
SD Card: Size: 500 MiB

1.7. Click OK to finish. This will create Android Virtual Device aka Emulator, which simulates the actual Android device environment. Our program, once deployed, runs in this environment and gives us a clue how our application will perform and look in the actual scenario.

Creating Android Virtual Device
Fig2: Creating Android Virtual Device

Note: Emulators are very slow, sometime they seem freeze and sometimes they actually freeze especially when running a large application. This can be very irritating. But when the application is installed in an actual device it definitely performs better. Professional developers use actual devices to test their application.

2. JDeveloper 11 (Version 12c does not yet support ADF for Mobile)

2.1. Open JDeveloper and go to Help -> Check for Updates... and update JDeveloper to use the ADF Mobile features. These components are required for the development of an ADF Mobile application in JDeveloper.

2.2. Now to configure JDeveloper to use Android SDK go to Tools -> Preferences... select Platforms under ADF Mobile in the left pane. Set Android SDK location to the /sdk folder under the unzipped adt-bundle... folder and Android platform location to …/sdk/platforms/android-19 (19 is the API level version in my case, you may have a different number).

Setting up Jdeveloper to use Android SDK
Fig3: Setting up Jdeveloper to use Android SDK

2.3. Click OK to close the Preferences window. Now, JDeveloper is ready for Oracle ADF Mobile application development.

 

Your First Oracle ADF Mobile Application

1 Open JDeveloper IDE and go to File -> New... Select Application from the General categories in the left pane. Choose Mobile Application (ADF) from the list of the Items. Click OK.

Creating Mobile Application in JDeveloper
Fig4: Creating Mobile Application in JDeveloper

2 Give a name to your application, such as SalesReportApp. Giving a name in Application Package Prefix is optional. Accept the default values and settings (although there are other ‘next’ steps for completing the wizard). You may click Finish.

Naming your project
Fig5: Naming your project

3 Observe that, JDeveloper creates two projects in the Application Navigator pane. One is ApplicationController and the other ViewController. ApplicationController contains code for the overall application and ViewController for specific features. ViewController represent the features of the application. So, to have many features there may be more than one ViewController under the same application. The figure below shows the opened admf-feature.xml file. This configuration file houses any feature we add into our application.

JDeveloper Environment and opened adfmf-feature.xml file
Fig6: JDeveloper Environment and opened adfmf-feature.xml file

4 To add a new feature:

4.1 Click on the plus icon shown in the figure below.

4.2 Create ADF Mobile Feature will appear. Provide a feature name and then click OK.

 Creating New Feature
Fig7: Creating New Feature

5 In the content tab of admf-feature.xml file:

5.1 Select the Content tab make sure that ADF Mobile AMX is selected under content type.

5.2 Click on the plus icon; two options will appear – ADF Mobile AMX Page... and Task Flow... Select Task Flow....

5.3 Give the file name sales-flow.xml -> OK.

Creating Task Flow xml file
Fig8: Creating Task Flow xml file

6 Design the following diagram in the sales-flow.xml as follows:

6.1 Open the Component Palette from View -> Component Palette, if it is not already open.

6.2 Drag-and-drop view component from the Component Palette to the sales-flow.xml diagram creation area.

6.2.1 Type the name of one component sales_view. 6.2.2 Name the Second component zonewise_sales_graph.

6.2.3 And the third one product_sale_graph.

6.3 Use control flow to create a link between:

6.3.1 sales_view and zonewise_sales_graph and name it zonewise.

6.3.2 sales_view and product_sale_graph and name it productwise.

 Designing Task flow
Fig9: Designing Task flow

 

7 Double-click on the sales_view icon in the previous figure to create sales_view UI. Name the file sales_view.amx. Make sure the Page Facets section has the following option checked – Header, Primary Action, Secondary Action and Footer.

Creating UI with the help of amx file
Fig10: Creating UI with the help of amx file

8 Similarly, double click to create and give the name zonewise_sales_graph.amx. Make sure that only Header and Primary Action is checked.

 Setting some configuration parameters for the amx file
Fig11: Setting some configuration parameters for the amx file

9 Follow the above step to create product_sale_graph.amx.

10 If not opened, open sales_view.amx file and do as follows:

10.1 Click and drag to split the window.

10.2 Click on preview to visualize design code of the amx file. Any change made in the code widow will have a visual appearance on the preview.

10.3 Position the cursor to the output text of the header facet and change the output text value to “Sales”.

10.4 Now position the cursor on the command button in the code window.

10.5 In the Property Inspector change the value of Text property to Product.

10.6 Select the Action property to productwise from the drop down list.

10.7 Follow the same step for the next command button and change the value of Text property to Zone and Action property to zonewise.

Visualize you amx code with the help of preview
Fig12: Visualize you amx code with the help of preview

11 Similarly, open the zonewise_sales_graph.amx file.

11.1 Change the Text property to Back.

11.2 Select from the drop down list Action property to _back.

Setting up Button and Header
Fig13: Setting up Button and Header

12 Right click in the ViewController from the Application Navigator pane and create two Java files. The Java codes give below are very basic and self-explanatory. To state in a line – Sales class acts as the interface to the SalesDB class, which acts as a database holding Sales record. That's it.

Sales.java

package mano.mobile;
                        
public class Sales {
                            
    private String product;
                            private int quantitySold;
                            private String region;
                            private float totalAmount;
                                    
    public Sales() {
                                super();
                            }
                          public Sales(String p, int qtySold, String region, float totAmount){
                                super();
                                this.product = p;
                                this.quantitySold = qtySold;
                                this.region = region;
                                this.totalAmount = totAmount;
                            }
                        
//...getters and setters
                        }

SalesDB.java

package mano.mobile;
                          public class SalesDB {      
                              public SalesDB() {
                                  super();
                              }
                              
    public Sales[] getSales(){
                                  Sales pdb[]=null;
                                  pdb[0]=new Sales("Audi Q5",25, "South", (float)1414.0);
                                  pdb[1]=new Sales("Nissan 370Z",25, "South", (float)1022.67);
                                  pdb[2]=new Sales("Mitsubishi Montero",25, "South-East", (float)678.45);
                                  pdb[3]=new Sales("Volvo XC60",25, "East", (float)123.45);
                                  pdb[4]=new Sales("Audi Q5",25, "East", (float)147.0);
                                  pdb[5]=new Sales("Mitsubishi Montero",25, "South-West", (float)7814.0);
                                  pdb[6]=new Sales("Mitsubishi Montero",25, "South-West", (float)3414.0);
                                  pdb[7]=new Sales("Audi Q5",25, "North", (float)164.0);
                                  pdb[8]=new Sales("Volvo XC60",25, "North", (float)1214.0);
                                  pdb[9]=new Sales("Audi Q5",25, "South-East", (float)140.0);  
                                  return pdb;                                                           
                              }
                          } 

13 Right click on the SalesDB.java in the Application Navigator pane and select Create Data Control from the pop up menu option.

14 From the Data Controls section drag and drop sales data to the sales_view.amx structure's Panel Page (Observe the figure below).

Drag and drop data controls visually in the panel page
Fig14: Drag and drop data controls visually in the panel page

15 A pop up menu will appear. Select ADF Mobile List View... Set Divider Attribute to product and Divider Mode to ALL. Click OK.

Setting up how the data would be visualized
Fig15: Setting up how the data would be visualized

16 Then select Simple from the List Formats in the List View Gallery and click OK.
17 Similarly, select product_sales_graph.amx and drag and drop sales from the Data Controls. Then select ADF Mobile Chart... from the create options. Select Pie Chart from the Categories. Set Pie to quantitySold and drag and drop product to the Slices box from Available list.

Configuring a graph
Fig16: Configuring a graph

18 Apply a similar procedure to zonewise_sales_graph.amx and select bar chart. This completes our project. Now to deploy the project follow the steps below.

Deploying the Application

We need to create a deployment profile to run the application.

1. Select Application from the menu, deploy -> New Deployment Profile...

2. Select the profile type as ADF Mobile for Android.

3. Provide a Deployment Profile Name e.g. Android1.

Setting up deployment parameters
Fig17: Setting up deployment parameters

4. click OK.

5. Now make sure that the Android emulator is running, otherwise run the Android SDK Manager. Then select Tools -> Manage AVDs... Select the AVD and click on Start. Once started wait for the menus to appear.

6. Now, go back to JDeveloper, click on Application -> deploy -> Android1.

7. Select Deploy application to emulator.

Choosing a device to run your application
Fig18: Choosing a device to run your application

8. Click on Finish.

Android environment provided by the emulator where application will run
Fig19: Android environment provided by the emulator where application will run

Conclusion

Creating a mobile application has its own challenges due to OS non uniformity, device variation, etc. Oracle ADF tries to provide a whole new perspective in leveraging developers' existing knowledge of Java, XML, Web services, HTML, CSS, etc. JDeveloper with Oracle ADF features will definitely leverage productivity for professional developers at the same time; a fun time for those geeks who neglected this arena so long. So Happy Coding! :)


Tags: Java, database, Oracle, Java EE, Android, mobile applications, IOS, JDeveloper




Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel