In this tutorial, you use Oracle JDeveloper and Oracle MAF to build and deploy a mobile application.

The application uses a simple Java class to store the data and displays a list of employees on one page and a graph of salaries on another. As you build the application, you will add MAF layout components to further control and customize the behavior of the application.

In Part 2 of the tutorial, you add specific device integration to your application. In Part 3, you add a call to a public stock quote web service.


To complete this tutorial you must have installed JDeveloper 12.1.3 and have installed the 2.2 MAF Extension. You may deploy to either an Android emulator (SDK version 5.0.x API level 21) or iOS simulator (Xcode 6.1.x). If you decide, you may deploy the application to a connected Android device. The tutorial demonstrates deploying the application to an Android emulator, which must be running before deploying. You launch the emulator using the Android Virtual Device (AVD) Manager, which is part of Android SDK Tools.

If you are using an iOS environment, you can use the following tutorial to set up the development environment: Set Up and Configure an iOS Environment.

If you are using an Android environment, you can use the following tutorial: Set Up and Configure an Android Environment.

Purpose Duration Application
This tutorial shows you how to develop applications with Mobile Application Framework. To see the completed application for this tutorial, click the Download button to download a zip of the the solution application, and unzip it to your JDeveloper mywork folder. 2.5 hours employees

Part 1: Creating a Mobile Application Framework application

When you work in JDeveloper, you organize your work in projects within an application. JDeveloper provides several templates that you can use to create an application and projects. The templates are pre-configured with a basic set of technologies that are needed for developing various types of applications, and you create a working environment by selecting the template that fits your needs. You can then configure it to add any other technologies you plan to use.

In this first section, you create an application by using the MAF application template. You then create a couple of mobile features that will hold the application you are be building.

Step 1: Create an Application Workspace
  1. Open JDeveloper 12.1.3.

  2. In the Application Navigator, click New Application.

    Application Navigator
  3. In the New Gallery, select General > Applications > Mobile Application Framework Application and click OK.

    New Gallery
  4. In the Create Mobile Application Framework Application wizard, name the application Employees, and set the Application Package Prefix to mycomp. Click Next.

  5. Create Mobile App Step 1
  6. Click Next to accept the default Project Name (ApplicationController).

  7. Create Mobile App Step 2
  8. Notice the default package and click Next to accept the default value and continue.

  9. Create Mobile App Step 3
  10. Click Next to accept the Project Name for the second project.

  11. Create Mobile App Step 4
  12. On the last step of the wizard, notice the Default Package name and click Finish to create the application.

  13. Create Mobile App Step 5

    JDeveloper creates the application and opens it in the Application Navigator. The Application Navigator should look something like the following:

    Application Navigator
Step 2: Add Features to the Application

When you deploy an Oracle MAF application, the application will be a single application on the mobile device. The application may consist of several parts. For example, there may be a search component, a document (like a help page), a data entry form, or even a list. Each of these parts is defined as a feature within the application. In this section of the tutorial, you create the features that you will deploy as part of your application.

  1. The features of a MAF application are defined in the maf-feature.xml file. If the file is not already open, double-click the file to open it in the editor.

  2. adfmf-feature.xml
  3. In maf-features.xml, click the green plus sign Green Plus Sign in the Features table to create a new feature.

  4. features table
  5. Name the new feature Employees and click OK. Ensure the Add a corresponding feature reference to maf-application.xml checkbox is selected.

  6. feature dialog
  7. Click the green plus sign Green Plus Sign again, in the Features table to create another new feature. Set the Feature Name to Help, then click OK.

  8. feature dialog
  9. In the Features table, select the Help feature. Under the Features table, click the Content tab. Set the Type to Local HTML.

  10. feature table
  11. Next to the URL property, click the Create (green plus sign Green Plus Sign ) icon to create the local HTML file.

  12. feature table
  13. Set the File Name to help.html and click OK.

  14. create html file
  15. JDeveloper creates the file and opens it in the editor. Enter "This document will be the Help System" in the help.html file.

  16. help.html page
  17. Save your work.

Step 3: Create an MAF Task Flow

In this section you create a MAF task flow that will be consumed by the Employees feature. A MAF task flow contains multiple pages that interact with one another. The task flow provides structure to the interaction.

  1. If it is not already open, double-click maf-feature.xml in the Application Navigator to open it in the editor. If it is already open, you can click the tab named maf-feature.xml.

  2. application navigator
  3. In the editor, select the Employees feature, and click the Content tab.

  4. feature table
  5. On the Content tab for the Employees Feature, use the Type dropdown to select MAF Task Flow.

  6. add feature
  7. Click the Add icon Green Plus Sign next to the File field.

  8. add feature
  9. In the Create dialog box, set the File Name property to EmpsTaskFlow.xml and click OK.

  10. Create task flow

    JDeveloper creates the task flow, and opens it in the editor.


    You can now add content to the task flow. The content will consist of view activities (pointers to pages), and control flow cases (navigation controls).

  11. Notice the Component Palette located in the upper-right corner of JDeveloper. From that palette, drag a view activity to the task flow.

  12. editor
  13. Change the name the view activity to empList.

  14. task flow
  15. Drag a second view activity to the task flow and name this one graph.

  16. task flow

    You now have two view activities on the task flow. The next step is to create navigation rules, or control flow cases, between the view activities.

  17. Click Control Flow Case on the Component Window.

  18. task flow
  19. After you have selected the control flow case, click the empList view activity and then click the graph view activity.

  20. Set the name of the control flow case to showGraph.

  21. task flow
  22. Select the showGraph control flow case and in the Property Window under Behavior, set the Transition property to flipRight.

    property inspector
  23. Save your work.

    The EmpsTaskFlow should look something like the following:

    task flow

    Remember that the view activities you have created are merely pointers to pages. You create the underlying pages later in this tutorial.

Step 4: Create Java Classes and Data Controls

MAF provides an application layer that manages data so that the UI can consume the data without concern about where or how the data is stored. This layer is called the data control layer.

This tutorial uses POJOs (Plain Old Java Objects) for the application data source. In this section, you learn how to create Java classes and generate data controls that are based on the classes. The user interface portion of the application uses the data controls to present data to the user.

  1. Right-click the ViewController project and select New > From Gallery .

  2. invoke new gallery
  3. In the New Gallery, select Java Class and click OK.

  4. new gallery
  5. Name the class Emp and click OK to accept the other default values.

  6. create java class
  7. Add the following private variables. When you add Date hiredate, JDeveloper will prompt you to add an import. Choose java.util.Date for the import.

    private String name;
    private String email;
    private int salary;
    private Date hireDate;

  8. editor
  9. Add two constructors as follows:

    public Emp(String name, String email) {
         super(); = name; = email;

    public Emp(String name, String email, int salary, Date hireDate) {
        super(); = name; = email;
        this.salary = salary;
        this.hireDate = hireDate;

  10. The code should look something like:

  11. Right-click inside the code editor and select Generate Accessors. This will create the getters and setters for the variables you choose.

  12. editor
  13. Select Emp to select all the included methods, select the Notify listeners when property changes check box, and click OK.

  14. generate accessors

    JDeveloper generates all of the getters and setters (accessors) for your class.

  15. Save your work.

    In the next few steps you create a class needed that contains the employee data.

  16. Just as you did a few steps earlier, create a Java class and name it Emps. (HINT: Right-click ViewController and select New; choose Java Class.)

  17. create java class

    The class will look like:

    java code
  18. The following code is the complete code for the Emps class. Replace all of the code in the editor.

  19. package;

    import java.util.ArrayList;
    import java.util.Calendar;
    import java.util.Date;
    import java.util.List;

    public class Emps {
        private List s_emps = null;

        public Emps() {

        public Emp[] getEmps() {
          //This Method gets a list of the employees and their emails
          Emp[] emps = null;
          s_emps = new ArrayList();
          s_emps.add(new Emp("Bill", "",4000, getADate(2011,3,24,9,0) )) ;
          s_emps.add(new Emp("Gary", "", 5000, getADate(2007,2,24,9,0) )) ;
          s_emps.add(new Emp("Jeff", "", 5500, getADate(2003,2,19,9,0) )) ;
          s_emps.add(new Emp("Joe", "", 4000, getADate(2012,2,13,9,0) )) ;
          s_emps.add(new Emp("Shay", "",6000, getADate(2002,2,21,9,0) )) ;
          emps = (Emp[]) s_emps.toArray(new Emp[s_emps.size()]);
          return emps;

        private Date getADate(int y,int m, int d,int h, int mi) {
          Calendar c1 = Calendar.getInstance();
          c1.set(y, m, d, h, mi);
          Date retDate = c1.getTime();
          return retDate;


    The code should look like:

    java code

    You now have a Java class that is the data source. Next you create an MAF data control that the application will use to consume the data.

  20. Save your work.

  21. From the Build menu, select Rebuild ViewController.jpr. This rebuilds all of the class files for the project.

    alt text
  22. In the Application Navigator, right-click and select Create Data Control.

  23. alt text
  24. In the wizard, accept the name and class name property values, then click Next.

  25. alt text
  26. In Step 2, accept the default values and click Finish.

  27. alt text
  28. Save your work.

  29. Now that you have a data control defined, you can begin creating the UI portion of the application.

Step 5: Create and Test the UI

In this section, you create the pages that are associated with the view activities you created on the task flow. You have already created the navigation rules, so you will now create the pages and add buttons for the application navigation.

  1. Open EmpsTaskFlow.xml in the editor. (HINT: The tab should still be open, but if not, double-click EmpsTaskFlow.xml in the Application Navigator.)

  2. task flow
  3. Double-click empList and select all of the page facets, except the Footer. Click OK to create the page.

  4. create page
  5. Use the drag bar to split the editor into two sections. The drag bar is the small vertical bar to the right of the bottom scroll bar in the editor.

  6. editor
  7. In the editor, click the Preview tab at the bottom of the right pane to preview the UI. Set the device to Android High and the Zoom factor to 75%. Note that this is for the preview pane only and does not affect your code or application.

  8. editor
  9. In the code section, within the header facet, click the outputText component and set the value property to Emp List.

  10. alt text
  11. In the source editor, select the button in the primary facet and in the Property Inspector, set the Text property to Graph. When the user clicks this button, the application will display a graph of employee data.

  12. alt text
  13. Set the Action property to showGraph, which is the navigation case to navigate to the Graph page.

  14. alt text

    In the next few steps, you add data components to the page from the data controls you created earlier.

  15. Expand the Data Controls palette to see the Emps data control.

    If needed, click the blue circled arrow icon to refresh the data controls.

  16. alt text
  17. Drag the emps collection from within the Emps data control to the Panel Page node in the Structure window and drop the collection as a MAF List View. The Structure window provides an easy to read hierarchical view of the current page. The hierarchical view makes it easier for you to select components and move them around on the page. Because the structure window and editor operate on the same code, the are always in sync.

    The data controls you created include collections and attributes. The emps collection is the one with the red table icon. Make sure you've selected the AMX page, otherwise you will not see anything in the Structure window.

  18. alt text

  19. Under List Formats, select Simple, then under Variations, select the variation with text items grouped by dividers. Under Styles, verify that the first style in the list is selected and click OK.

  20. alt text
  21. In the Edit List View dialog box, set the Divider Mode to First Letter and click OK.

  22. alt text

    That finishes the first page for now. Next, you create the page that will house the graph.

  23. Save your work.

  24. Just as you did before, double-click the graph view activity on the EmpsTaskFlow.

  25. alt text
  26. Make sure that all the page facets are selected, except the Footer, and click OK.

  27. alt text
  28. Use the drag bar and split the editor window to show two views. Remember, the drag bar is the small vertical bar to the right of the bottom scroll bar in the editor.

  29. alt text
  30. In editor, click the Preview tab at the bottom of the right pane to preview the UI. Set the Device to Android High and the Zoom factor to 75%.

  31. alt text
  32. In the code section, within the header facet, click the outputText component and set the value property to Emp Graph.

    alt text
  33. In the code section, select the commandButton in the primary facet and in the Property Inspector, set the Text to Back and the Action to __back.

  34. alt text
  35. Just as you did for the empList page, drag the emps collection from within the Emps data control to the Panel Page node in the Structure window, but this time, drop it as a MAF Chart.

    Make sure you've selected the AMX page, otherwise you will not see anything in the Structure window.

  36. alt text
  37. In the Component Gallery, select Bar and the first Quick Start Layout, and click OK.

  38. alt text
  39. In the Create Mobile Bar Chart wizard, drag salary to the Bars field and then drag name to the X Axis field. Click OK.

  40. alt text
  41. Save your work.

  42. You now have a working application. In the next section you deploy and test the application.

Step 6: Deploy and Test the Application

When you deploy a MAF application, you can improve performance by using Release mode. This mode causes the application to be deployed with an optimized JVM and minimal JavaScript libraries, thereby significantly improving the performance of the application.

For iOS, you select Release mode when you create the deployment profile, which you will do shortly. If you are using an iOS environment, you can skip the first 7 instructions and continue at instruction 8. From the Application menu, select Deploy > New Deployment Profile.

For Android, you have to create a local keystore before you can use Release mode.

The next few steps set up the keystore for Android deployment.

For iOS deployment you can skip to instruction 18.

  1. Open a terminal or command window. Navigate to the JDK\bin directory used by JDeveloper. If you are not sure where to find this directory, use Help > About > Properties > java.home to see the JDK or JRE that JDeveloper is using. For Windows 7 make sure you open the command window as Administrator. To open the command window as Administrator Click Start, in the Start Search box, type cmd and then press CTRL + SHIFT + ENTER.

  2. Enter the following command but substitute a name of your choosing for the Keystore Name and Alias Name. In the screen shot below, we used employees for both. After you type the command, press enter. NOTE: You will need to type the command into the a command window instead of using copy and paste. NOTE: If you are on a mac, you may need to check permissions.

    keytool –genkey –v –keystore <Keystore Name>.keystore –alias <Alias Name> -keyalg RSA –keysize 2048 –validity 10000

    alt text

  3. You will be prompted for several values including a password, your name, city, State, and so on. Enter values for those variables.

    alt text

  4. Confirm the information you entered, then enter a password as the last prompt:

    alt text

  5. When the command finishes, the keystore is ready to use. Next you configure JDeveloper to use the keystore.

  6. In the JDeveloper menu, select Tools > Preferences (on Windows) or JDeveloper > Preferences (on iOS).

  7. Expand Mobile Application Framework and select Android Platforms. In the Signing Credentials section, click the Release tab.

  8. In the Keystore Location property, enter the Keystore Location of the keystore you just created and then enter the Keystore Password, Key Alias,and Key Password. Click OK.

    alt text

  9. Now that JDeveloper knows about the keystore, you can use Release mode in the deployment profiles.

    In the next few steps, you create a deployment profile.

    NOTE: Remember that before you can deploy an Android application, you need to have started the emulator. Instructions are in the the tutorial Set Up and Configure an Android Environment.

  10. From the Application Navigator dropdown menu, select Deploy > New Deployment Profile.

    alt text
  11. Select MAF for Android and click OK.

  12. alt text
  13. Click Android Options and select Release for the Build Mode. Then click OK.

    alt text
  14. To deploy the application, from the Application menu, select Deploy > Android2.

    alt text
  15. Select Deploy application to emulator and click Next.

  16. alt text
  17. Click Finish to begin the deployment. Make sure your Android emulator is up and running.

  18. alt text
  19. In the Log window, click the Deployment tab to see the deployment messages.

  20. alt text
  21. After the deployment is complete, switch windows to the Android emulator. and select the home icon, then find the Employees icon. Start the application.
    If prompted, click OK for sending notifications.

  22. alt text
  23. Notice the Emp List which shows all of the employees from your data source. NOTE: The emulator may be slower than an actual device and it may take a while for the application to load.

  24. alt text
  25. Click the Graph button to navigate to the Graph page.

    alt text

    The following steps are for iOS deployment.

  26. From the Application Navigator dropdown menu, select Deploy > New Deployment Profile.

    alt text
  27. Select MAF for iOS as the Profile Type and click OK.

    alt text
  28. In the Deployment Profile Properties, select iOS options.

    alt text
  29. For Simulator, select iPad 2 (iOS 8.1 - iPad 2) and click OK.

    alt text
  30. From the Application Navigator dropdown menu, select Deploy > iOS2.

    alt text
  31. In the Deployment dialog, select Deploy application to simulator and click Finish.

    alt text

    When you deploy to the iOS Simulator, the application is deployed and opened on the simulator. If prompted, click OK for sending notifications.

  32. Notice the Emp List which shows all of the employees from your data source. Click Graph to see the graph page.

    alt text
  33. You now see the graph page. In iOS, you navigate back to the home page using the Simulator menu options Hardware > Home.

    alt text

You now have a working MAF application that you have deployed to either an Android emulator or the iOS simulator. Now that the deployment profiles are complete, you should be able to deploy your application to either environment by using just a few quick steps. You will be doing just that throughout the remainder of this tutorial.

Step 7: Refine the UI

Now that you have a working application, you refine the user interface to take advantage of some of the MAF layout components.

In the next few steps, you move the list of employees to a navigator pane. You also add a read-only form that shows employee details that you did not show in the employee list. As you recall, the employee list shows only the employee name. You also split the page in to two parts: an employee list, and an employee form.

  1. In JDeveloper open the empList.amx page. (HINT: Either find the page in the Application Navigator and double-click it, or use the EmpsTaskFlow and double-click the empList view component)

  2. alt text

    There are several ways to add components to a page. You can drag a component from the Component Palette to either the source code of the page, or to the Structure window. You can also right-click the component in the Structure window and select Insert Inside from the context menu, then select the new component.

    You should try the different techniques to see which one you find the easiest.

  3. In the Structure window, right-click Panel Page and select Insert Inside Panel Page > MAF AMX.

    alt text
  4. Select Panel Splitter and click OK.

    alt text
  5. In the Structure window, expand the Panel Splitter to expose the Facet - navigator and the Panel Item component.

  6. alt text
  7. You want the list to display as part of the new Panel Splitter so within the Structure window, drag the List View component down to the Facet - navigator.

  8. alt text

    alt text
  9. From the Data Controls palette, drag the emps data control to the the Panel Item in the Structure window and drop it as an MAF Read Only Form.

  10. alt text

    alt text
  11. Click OK to accept the default labels and components for the form.

  12. alt text

    Now you have two sections on the page: one to show the employee list and another to display an individual employee.

  13. Re-deploy the application. In the following steps, you will use the iOS Simulator. If you are using the Android emulator, the steps are similar. If you need a refresher, go to the deployment steps above.
    From the Application menu in JDeveloper, select Deploy > iOS2 Deploy and select the simulator as the target.

  14. alt text
  15. After the application is deployed, run it as you did before and notice that the page shows employee details and that there is an arrow on the left side of the page.

  16. alt text
  17. Click the arrow to expand the splitter and show the employee list.

  18. alt text
  19. Click any other employee to show that employee's details.

  20. alt text
  21. Click the arrow to hide the employee list and just show the employee details.

  22. You have now completed the first part of this tutorial. In the next part, you add a feature that uses two built in device features.

Bookmark Print Expand all | Hide all

Back to top
Copyright © 2015, Oracle and/or its affiliates. All rights reserved.