Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Mobile / Android

Oracle ADF Mobile Tutorial

3.67/5 (7 votes)
24 Apr 2014CPOL8 min read 31.5K  
This article helps developer to start working with new mobile application development framework Oracle ADF Mobile.

Introduction

Oracle is a well know IT company which is continuously giving cutting edge technologies to their customers. Result is, it also create opportunities for developers to start work on latest technology. Few years back, Oracle has introduced a hybrid framework called Oracle ADF Mobile, that is, develop once and deploy on many.

In this article, I will demonstrate how to start working on new platform. I have seen many developers stuck on very basics. I will try my best to demonstrate the Hello World tutorial so that any naive person can start development and may benefit with this new framework.

NOTE: I have pasted images for elaboration, so this article may seems lengthy but it is easy to implement.

Background

There are few links posted below that may help you to understand what is Oracle ADF Mobile as I will be start developing immediately. So you these links might help you to establish development environment.

  1. What is Oracle JDeveloper
  2. What is Oracle ADF Mobile
  3. Develop ADF Mobile Environment
Please go through these links and setup development environment. If there is any issue, please let me know.

Using the code

I assume that you have configured the development environment.

Followings are the steps for beginners to start work on ADF Mobile.

In this section, we will create an app that will display a simple text Hello World on button click.

<o:p>

Start JDeveloper Studio. Go to Start->All Programs->Oracle Fusion Middleware 11.1.2.40->JDeveloper Studio 11.1.2.40.

Image 1

If it prompts for Select Role, the select Studio Developer (All Features) which is default, click OK.

Image 2

From top Menu, select Application and then New…

Image 3

A dialog will open showing different types of project options. Select the Mobile Application (ADF) and click OK.

Image 4

A new dialog will open with heading Name your application, in Application Name: enter your any application name that you are going to develop. I have named it MyFirstApp, and in Application Package Prefix: enter any application package prefix. Common practice is to name your package with small letters. I have named it myapp. After setting application and package prefix, click Next.

Image 5

In the Project 1 name page, enter project name or keep going with default name, i.e. ApplicationController. We will be using default name. You can change the directory or keep going with default. After setting values, click Next.

Image 6

In Project 1 Java Settings page, keep going with default value, i.e. myapp.application the click Next.

Image 7

In Project 2 Name page, keep going with default settings and click Next.

Image 8

In Project 2 Java Settings page, keep the default package name and click Finish.

Image 9

As soon as you click on Finish, ADF creates two projects for you, you can see those projects in Project pane at left side of IDE. And it also opens adfmf-feature.xml page. It is a page where you can add different features. More on this in succeeding sections.

Image 10

While adfmf-feature.xml page opened, if no then expand ViewController->Application Sources->META-INF->adfmf-features.xml, In Features: section click on Image 11 button to add new feature to your application.

Image 12

Feature is a component or module of your application. It can be a page (html or asmx), or a flow task. We will elaborate it as soon as we keep developing apps and explore different scenarios. <o:p>

Clicking on Image 13 will open a dialog box that will prompt for feature name. You can add any feature name. As we are going to have only one mobile screen, so we name it FirstPage. After that click OK.

Image 14

It will add the feature FirstPage in xml feature file (adfmf-feature.xml) that was opened by default.

Image 15

Just below the Features tab, you can see the General tab, go to the Content tab, you can see that Id and Type: is automatically added. Note that, type of the feature is ADF Mobile AMX, you can change it from drop down menu but here we will go with default option. After that, click on Image 16 against File section.

Image 17

When you click on Image 18 button against File: section, it will show two options, ADF Mobile AMX Page… and Task Flow, go for first option.

Image 19

A dialog will open, add File Name, and in Page Facets section, check all and click OK.

Image 20

Now you can see the first.amx page. It is where you design UI of your app. This is only one screen. From bottom right corner of first.amx page, drag it to left and in right pane, click Preview. Here you can see the preview of your UI and any changes that you make in xml file will reflect here.

Image 21

Now from Component Palette, drag an Output Text from Text and Selection section and drop it on first.amx page.

Image 22

It will show OutputText1 as default value. Note that you have to drag and drop control on xml source file, not on preview.

Image 23

Now selecting amx:outputText, go to Property Inspector pane located at bottom right corner below Component Palette. We will change its Value using Expression Builder.

Image 24

In the same Property Inspector window, got to the drop down arrow and click on Expression Builder….

Image 25

It will open Expression Builder dialog. In the expression field, add an expression, #{viewScope.actionevent} and click OK. More on viewScope will be discussed later in coming sections.

Image 26

Note that as soon as you have changed the value of output text to an expression, it is also visible on preview window.

Image 27

Now drag a Button from Component Palette and drop it on first.amx page just like we did for OutputText. Drop it below amx:outputText.

Image 28

Now we need to add button’s event handler. When a button is clicked, we will change output text value to Hello World. We will be doing this using Java Managed Beans classes.<o:p>

Now, keep selecting the amx:commandButton or just take the blinking cursor on the command button, it will show the property inspector window just like it was previously showing for amx:outputText control. Go to the Button Action section in Property Inspector window and click on drop down button against Action Listener: and then Edit….

Image 29

It will open a dialog box where you need to specify the Bean class. As we haven’t created yet any java bean class, click on New to create the new one.

Image 30

It will prompt for required fields, enter them and click OK.

Image 31

After we have added bean class, we need to specify the method that we will be invoked whenever a button is clicked. Click on the New… to add the new method.

Image 32

Enter method name and click OK.

Image 33

After you have specified both, the class and method, click OK view the generated class. It is located in ViewController->Application Sources->myapp.mobile->EventHandler.java.

Image 34

Double click on it to see the class. It is a class with default constructor and an event handler method that we added in the previous steps.

Image 35

Now, in OnClick method, add the following lines of code.

<p><img src="764190/dev-hello-34.png" width="488" height="69" /></p><p />
<p style="text-align: left;">Note that it needs two imports:</p><p class="MsoNormal"><o:p /></p><p class="MsoListParagraphCxSpFirst" style="text-align: left; margin-removed 1.25in; text-indent: -0.25in;"><span style="font-family: Symbol;">·<span style="font-size: 7pt; font-family: 'Times New Roman';">        
</span> </span><span style="font-family: 'Courier New';">javax.el.ValueExpression</span>
<o:p /></p><p class="MsoListParagraphCxSpLast" style="text-align: left; margin-removed 1.25in; text-indent: -0.25in;"><span style="font-family: Symbol;">·<span style="font-size: 7pt; font-family: 'Times New Roman';">        
</span> </span><span style="font-family: 'Courier New';">oracle.adfmf.framework.api.AdfmfJavaUtilities.
</span><o:p /></p><p style="text-align: left;"><span style="font-size: 11pt; line-height: 107%; font-family: Calibri, sans-serif;">Now
we have done. It is time to deploy our app on Android Emulator.</span> </p>

Deployment

To create an Android Emulator, go to the android sdk directory where you have installed it and go to the tools directory. Like in my case, I have following directory:

<o:p>

D:\AndroidSDK\adt-bundle-windows-x86_64-20140321\sdk\tools<o:p>

In tools directory, run android windows batch file. An SDK Manager window will open. From menu bar select tools and then click on Manage AVDs….

Image 36

It will show Android Virtual Device Manager window that shows all available devices if exists. In my case, I have already created an android virtual device that I will use to run my app on it. Click Start to run the Android Emulator.<o:p>

NOTE: Make sure that you select or create an emulator with Google APIs.

Image 37

Wait for a while for emulator to show the home screen. Now in JDeveloper studio, go to the Applications… from menu bar and select Deploy and then New Deployment Profile…. Note that you can also use existing one.

Image 38

From Profile Type: select ADF Mobile for Android and in Deployment Profile Name enter any name and click OK.

Image 39

It will show Properties window.

Image 40

In Application Images you can specify your app icon. We will go with default icon. Click OK to create deployment profile. Now android emulator is running and now we need to deploy our app on emulator.

Image 41

In JDeveloper Studio, go to Applications->Deploy and then select Emulator…. This is the same profile that we had created just now.

Image 42

A deployment window Deploy Emulator will be shown. Select Deploy application to Emulator and click Next.

Image 43

An application summary will be shown to you with Application Bundle Id, File and Deployment Mode.

Image 44

Now click Finish to start the deployment process. You can see the deployment process details in Deployment tab below in Deployment Log.

Image 45

When it completes deploying app, it gives you deployment summary at the end. Deployment process make take few minutes, so be patient.

Image 46

Now the deployment in complete, in android emulator, click on Menu button and find the MyFirstApp and click on it to run.

Image 47

An Oracle based splash screen will open, wait a while for automatically dismissal of splash screen. Click on commandButton1 to show hello world text.

Image 48

Output Hello World.

Image 49

Here we have done with creating and deploying our first Hello World app. I hope this tutorial will help you all.

I always open to Bugs, feedback. Please let me know.

Thanks!

Points of Interest

We have learnt how we can use ADF Mobile to build out apps. This is a starter. It might seems that it take more time to develop an app than native Android/iOS development. But the fact is, ADF Mobile enhances your development. It is just like, write once and run any where. As soon as you start developing apps on this you will notice significant difference in development process.

Thank You!

History

None

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)