Oracle ADF Mobile Tutorial

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

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.

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

From top Menu, select Application and then New…

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

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.

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.

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

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

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

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.

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

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 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.

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

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 against File section.

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

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

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.

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

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

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.

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

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.

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

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.

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….

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.

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

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.

Enter method name and click OK.

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.

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.

<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….

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.

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.

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

It will show Properties window.

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.

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

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

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

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

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

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

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

Output Hello World.

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