Oracle JDeveloper 11g Release 2 Tutorials - Building Mobile Applications with Oracle ADF Mobile.pdf

6/2/13 10:34 PMOracle JDeveloper 11g Release 2 Tutorials - Building Mobile Applications with Oracle ADF Mobile

Page 1 of 61http://docs.oracle.com/cd/E18941_01/tutorials/buildmobileappscontent/adfmobiletutorial_1.html

***************************************************-->

Building Mobile Applications with Oracle ADF MobileIn this tutorial, you use Oracle JDeveloper and Oracle ADF Mobile to build and deploy a mobile application.

Assumptions:

To complete this tutorial you must have installed JDeveloper 11.1.2.4 and have installed the ADF Mobile Extension. You must also have theAndroid SDK version 4.2.2 API level 17 installed. If you choose, you can deploy the application to a connected Android device. The tutorialdemonstrates deploying the application to an Android emulator. 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 iOSEnvironment.

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 ADF Mobile. To see the completeapplication you will create, click the Download button to download a zip of the finishedapplication, and unzip it to your JDeveloper mywork folder.

2.5 hours

Part 1: Creating an ADF Mobile Application

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

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

Step 1: Create an Application Workspace

1. Open JDeveloper 11.1.2.4.

2. In the Application Navigator, click New Application.

http://docs.oracle.com/cd/E18941_01/tutorials/MobileTutorial/jdtut_11r2_54_1.html


http://docs.oracle.com/cd/E18941_01/tutorials/buildmobileappscontent/labs/employees.zip



3. In the New Gallery, select General > Applications > Mobile Application (ADF) and click OK.

4. In the Create Mobile Application (ADF) wizard, name the application Employees, and set the Application Package Prefix to mycomp.Click Next.

5. Click Next to accept the default Project Name (ApplicationController).



6. Notice the default package and click Next to accept the default value and continue.

7. Click Next to accept the Project Name for the second project.



8. On the last step of the wizard, notice the Default Package name and click Finish to create the application.

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



Step 2: Add Features to the Application

When you deploy an Oracle ADF Mobile application, the application will be a single application on the mobile device. The application may consistof 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 theseparts 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 yourapplication.

1. The features of an ADF Mobile application are defined in the adfmf-feature.xml file. If the file is not already open, double-click the file toopen it in the editor.

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



3. Name the new feature Employees and click OK.

4. Click the green plus sign in the Features table to create another new feature. Set the Feature Name to Help, then click OK.

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



6. Next to the URL property, click the Create (green plus sign ) icon to create the local HTML file.

7. Set the File Name to help.html and click OK.



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

9. Back in adfmf-feature.xml, select Employees in the Features table, and in the Content tab make sure that the Type is set to ADF MobileAMX.

10. Save your work.

Step 3: Create an ADF Task Flow

In this section you create an ADF task flow that will be consumed by the Employees feature. An ADF 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 adfmf-feature.xml in the Application Navigator to open it in the editor. If it is already open, you canclick the tab named adfmf-feature.xml.

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

3. Click the Add (green plus sign ) icon next to the File field on the Content table and select Task Flow. This will create a task flow andassociate it with the Employees feature.



4. In the Create dialog box, set the File Name property to EmpsTaskFlow.xml and click OK.

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 (navigationcontrols).



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

6. Notice that the name of the view activity is highlighted in the task flow diagram. Change the name the view activity to empList.

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



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

8. Click Control Flow Case on the Component Palette.

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



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

11. Select the showGraph control flow case and in the Property Inspector under Behavior, set the Transition property to flipRight.



The EmpsTaskFlow should look something like the following:

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

ADF 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 thengenerate data controls that are based on the classes. The user interface portion of the application uses the data controls to present data to theuser.

1. Right-click the ViewController project and select New.



2. In the New Gallery, select Java Class and click OK.

3. Name the class Emp and click OK to accept the other default values.



4. Add the following private variables. When you add Date hiredate, JDeveloper will prompt you to add an import. Choose java.util.Date forthe import.

5. Add two constructors as follows:

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

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

public Emp(String name, String email, int salary, Date hireDate) {



The code should look something like:

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

super(); this.name = name; this.email = email; this.salary = salary; this.hireDate = hireDate;}



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

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

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

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



The class will look like:

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

package mycomp.mobile;

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() { super(); }

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", "[email protected]",4000, getADate(2011,3,24,9,0) )) ; s_emps.add(new Emp("Gary", "[email protected]", 5000, getADate(2007,2,24,9,0) )) ;

mailto:[email protected]




The code should look like:

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

10. Select Emps.java in the Application Navigator (HINT: You can also press ALT+Home.)

s_emps.add(new Emp("Jeff", "[email protected]", 5500, getADate(2003,2,19,9,0) )) ; s_emps.add(new Emp("Joe", "[email protected]", 4000, getADate(2012,2,13,9,0) )) ; s_emps.add(new Emp("Shay", "[email protected]",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; }

}






11. Click Save All on the Toolbar to save your work.

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

13. In the Application Navigator, right-click Emps.java and select Create Data Control.



14. Save your work.

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 of the tutorial, you create the pages that are associated with the view activities you created on the task flow. You have alreadycreated 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 ApplicationNavigator.)



2. Double-click empList and select all of the page facets. Click OK to create the page.

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



4. In the editor, click the Preview tab at the bottom of the right pane to preview the UI.



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



6. In the source editor, select the button in the primary facet and in the Property Inspector, set the Text property to Graph. When the userclicks this button, the application will display a graph of employee data.

7. Set the Action property to showGraph, which is the navigation case to navigate to the Graph page.



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

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

9. Drag the emps collection from within the Emps data control to the Panel Page node in the Structure window and drop the collection as anADF Mobile List View. The Structure window provides an easy to read hierarchical view of the current page. The hierarchical view makesit easier for you to select components and move them around on the page. Because the structure window and editor operate on the samecode, the are always in sync.



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



11. In the Edit List View dialog box, set the Divider Mode to First Letter and click OK.

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

12. Save your work.

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



14. Make sure that all the page facets are selected and click OK.

15. 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 bottomscroll bar in the editor.



16. In editor, click the Preview tab at the bottom of the right pane to preview the UI.



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



18. 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 Structurewindow, but this time, drop it as an ADF Mobile Chart.

19. In the Component Gallery, select Bar and the first Quick Start Layout, and click OK.



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



21. Save your work.

22. In Application Resources, expand Descriptors > ADF META-INF and navigate to adfmf-application.xml.

23. Double-click adfmf-application.xml to open it in the editor view.



24. On the Application tab, notice that you can specify the application name and set application menu properties. Click the FeatureReferences tab to see the features that are part of this application.

You now have a working application. In the next section you deploy the application, and then you test it.

Step 6: Deploy and Test the Application

When you deploy an ADF Mobile application, you can improve performance by using Release mode. This mode causes the application to bedeployed 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, youcan skip these steps and continue at step 8 (beginning of deployment steps.)

For Android, you have to create a local keystore before you can use Release mode. The next few steps set up the keystore for Androiddeployment.

1. Open a 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 commandwindow as Administrator. To open the command window as Administrator Click Start, in the Start Search box, type cmd and then pressCTRL + SHIFT + ENTER.

2. Enter the following command but substitute a name of your choosing for the Keystore Name and Alias Name. In the screenshot below,

http://docs.oracle.com/cd/E18941_01/tutorials/buildmobileappscontent/adfmobiletutorial_1.html#Deployment



we used employees for both. After you type the command, press enter. NOTE: You will need to type the command into the a commandwindow instead of using copy and paste.

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

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

4. Enter a password as the last prompt:



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

5. In the JDeveloper menu, select Tools > Preferences.

6. Expand ADF Mobile and select Platforms. In the Signing Credentials section, click the Release tab.

7. In the Keystore Location property, enter the location of the keystore you just created. Enter the Keystore Password, Key Alias,and KeyPassword and then click OK.

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.



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

8. From the Application menu, select Deploy > New Deployment Profile.

9. Select ADF Mobile for Android or ADF Mobile for iOS and click OK.

10. Click Android Options or iOS options, select Release for the Build Mode, and click OK.




11. To deploy the application, from the Application menu, select Deploy > ADROID_MOBILE_NATIVE_archive1.

12. Select Deploy application to emulator and click Next.



13. Click Finish to begin the deployment.

14. In the Log window, click the Deployment tab to see the deployment messages.



15. After the deployment is complete, switch windows to the Android emulator.



16. Click the Apps icon at the bottom middle of the emulator screen. This will show the Applications that are deployed to the device, oremulator.



17. In the Apps page, click the Employees application to open the application you just built and deployed. Notice the Emp List which shows allof the employees from your data source. NOTE: The emulator may be slower than an actual device and it may take a while for theapplication to load.



18. Click the Graph button to navigate to the Graph page.



You now have a working ADF Mobile application that you have deployed to an Android emulator. In the next part of this tutorial, you modify the UI.

Step 7: Refine the UI

Now that you have a working application, you refine the user interface to take advantage of some of the ADF Mobile 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 didnot 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: anemployee 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 theEmpsTaskFlow and double-click the empList view component)



2. From the Layout section of the Component Palette, drag a Panel Splitter component to the Panel Page in the Structure window.



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



4. 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 theFacet - navigator.

5. From the Data Controls palette, drag the emps data control to the the Panel Item in the Structure window and drop it as an ADF ReadOnly Form.



6. Click OK to accept the default labels and components for the form.



Now you have two sections on the page: the employee list and the employee form. At run time, you want to make sure that whateveremployee the user selects is displayed on the form. In the next few steps, you add a component to keep track of that.

7. In the Structure window, expand the List View node to show the List Item component.

8. From the Operations section of the Component Palette, drag a Set Property Listener component to the List Item component in theStructure window.



9. The Set Property Listener has three properties, From, To, and Type. Select the Set Property Listener component and set the Fromparameter to #{row.rowKey}. Set the To parameter to #{pageFlowScope.empId}. Set the Type to action. The expression row.rowKeyreturns the id of the current row. The pageFlowScope is a predefined managed bean where you can store values. In this case you arestoring the Id of the current row as the variable empId. Setting the Type to action specifies that when the user selects an item from the list,the current row Id is stored in pageFlowScope.empId.

Next, you are going to add an operation from the Emps data control that will accept a parameter and set the current row of the iterator tothe row that the user selects.

10. Expand Emps > Operations in the Data Controls palette to show all of the available operations.



11. Drag the setCurrentRowWithKey operation to the List Item in the Structure window and drop the operation as an ADF Mobile Button.

12. Under Parameters in the Edit Action Binding dialog box, set the Value of the Parameter to the same value you used as the To value on theSet Property Listener, which was #{pageFlowScope.empId}.



Two things happen when you add the button: First, JDeveloper adds the button to the Emp List, and then it creates an action listener thatwill set the current row key when the button is clicked. In reality, a button displayed within the list is not the look you really want. Insteadyou want the current row key to be captured and stored whenever a row is selected. In the next few steps, you copy the code from the button, add it to the listItem, and remove the button.

13. Find the button component in the code editor.



14. Select the actionListener code and either drag it to the listItem component above, or copy and paste it into the listItem.



15. Because you don't want the button, delete the commandButton.



16. Save your work

Now you can deploy the application to show your work.

17. From the Application menu in JDeveloper, select Application > Deploy > ANDROID_MOBILE_NATIVE_archive1 to Android emulator.

18. 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 onthe left side of the page.



19. Click the arrow to expand the splitter and show the employee list.



20. Click any other employee to show that employee's details.



21. The page flips back to show the employee details.



You have now completed the first part of this tutorial. In the next part, you add a call to a web service that will update the salary of anemployee.

Previous 1 2 3 Next

Copyright © 2013, Oracle and/or its affiliates. All rights reserved.

http://docs.oracle.com/cd/E18941_01/tutorials/buildmobileappscontent/adfmobiletutorial_2.html



Date post:	25-Dec-2015
Category:	Documents
Upload:	mpandiar
View:	40 times
Download:	2 times

Oracle JDeveloper 11g Release 2 Tutorials - Building Mobile Applications with Oracle ADF Mobile.pdf

Documents