As Published In
Oracle Magazine
November/December 2013

TECHNOLOGY: Oracle ADF

  

The Next Big Wave

By Frank Nimphius

 

Explore mobile frontiers with Oracle ADF Mobile.

In his article “The Latest Infographics: Mobile Business Statistics for 2012,” Mark Fidelman, a contributing writer to the Forbes website, presents several interesting facts and statistics about the current and predicted future usage of mobile devices. A clear trend in this article is that business is “going” mobile and that in only a few years, the number of mobile devices will significantly outnumber that of wired devices and PCs used at work and at home. One message to extrapolate from this is that mobile application development is the next big wave in enterprise application development.

However, enterprise developers adding mobile as an access channel to enterprise business systems need to maintain the same data validation, business logic, and security levels as for traditional applications. And the mobile world is a diverse set of platforms and operating systems—a far more complex landscape than the four or five browsers that developers have had to support in enterprise web-enabled solutions of the past.

For enterprise application developers, a promising strategy for conquering these “go mobile” challenges is to embark on a hybrid mobile development approach that replaces the burden of device-specific native programming with a consistent development model that uses standard technologies such as HTML, CSS, JavaScript, and Java and can be run across multiple platforms. One development tool suited for such a hybrid mobile application strategy is the Oracle ADF Mobile feature of Oracle Application Development Framework (Oracle ADF).

This article introduces Oracle ADF Mobile and presents a hands-on mobile development and deployment exercise.

ORACLE ADF Mobile Overview

Oracle ADF Mobile is a declarative development and application runtime environment that uses standards-based technologies—including HTML, CSS, JavaScript, and Java—to deliver a hybrid solution for building, deploying, and running cross-platform on-device native mobile applications on Apple iOS– and Google Android–powered devices.

As shown in Figure 1, Oracle ADF Mobile applications execute in a specific runtime environment: the Device Native Container. This container hosts the Oracle ADF Mobile application, is written in the native language for the target device, and enables applications to access mobile device services such as the address book and the camera. Oracle ADF Mobile enables you to integrate and choose between three user interface technologies according to your requirements and your team’s skill sets:

o63adf-fig1

Figure 1: Simplified Oracle ADF Mobile block diagram

 

  • Local HTML. HTML5 pages execute on the mobile device in the context of Oracle ADF Mobile. Data and device interaction is programmed with provided Oracle ADF Mobile JavaScript and Java APIs as well as Apache Cordova APIs.

  • Oracle ADF XML. The declarative option for building applications in Oracle ADF Mobile uses JavaServer Faces–like user interface components that are bound to remote or local data through the Oracle ADF binding layer and data controls. Files of this type use the file extension amx.

  • Remote URL content. This option enables developers to integrate remote web content, such as mobile pages built with Apache Trinidad mobile browser components, with Oracle ADF Mobile applications.

All user interfaces are displayed in a web engine context, the web view, which means that views in Oracle ADF Mobile are not compiled to native code but are executed as HTML, JavaScript, and CSS. Developers use the aforementioned user interface technologies in Oracle ADF Mobile features—a feature is a reusable module, made up of one or more screens, that executes in its own web view. At runtime, applications can dynamically switch between features, and mobile application users will not be able to tell if they are working with a local HTML page, remote web content, or Oracle ADF Mobile XML (AMX) pages.

Using the open source Apache Cordova libraries, Oracle ADF AMX and local HTML pages can access mobile device services, such as the camera, phone, or address book, and invoke Java executed in the Oracle ADF Mobile Java Virtual Machine (JVM). An encrypted instance of the SQLite database is provided for each application for storing data locally for offline use, which is particularly useful if connectivity cannot be guaranteed. The SQLite database is accessed through Java.

To query and update remote data in mobile application models, Oracle ADF Mobile uses standard SOAP and REST services for create, read, update, and delete (CRUD) operations.

Sample Application Overview

The hands-on instructions in this article use the declarative Oracle ADF development approach in Oracle ADF Mobile and step you through building a two-page application that queries employee data from a provided Oracle ADF Business Components Java API for XML Web Services service. Oracle ADF Business Components is a feature of Oracle ADF that is not an integral part of the Oracle ADF Mobile solution but, rather, provides a convenient set of web services for the mobile application to utilize.

Figure 2 shows the two mobile screens you build by following the hands-on instructions in this article. The list of employees is categorized by the initial letter of the employee’s last name. Selecting (by tapping) the employee with the last name Baer in the image to the left navigates to the detail screen for that employee.

o63adf-fig2

Figure 2: The Browse Employees and Show Detail screens

Note that an earlier Oracle Magazine article, “Consume Early, Consume Often” (in the September/October 2012 issue), explains best practices and recommendations for exposing Oracle ADF Business Components to the service interface.

Getting Ready

Before following the steps in this article, download and install the Studio edition of Oracle JDeveloper 11g Release 2 (11.1.2.4). It is available as a free download on Oracle Technology Network. You also need access to an Oracle Database instance with an unlocked sample HR schema.

Installing the Mobile Extension

Oracle ADF Mobile is not provided with Oracle JDeveloper 11g Release 2 (11.1.2.4). Oracle ADF Mobile must be downloaded and installed separately as an extension.

To download and install Oracle ADF Mobile, launch Oracle JDeveloper 11g Release 2, select Help -> Check for Updates, and click Next in the Check for Update dialog box.

Ensure that Search Update Centers is selected and the Official Oracle Extensions and Updates option is checked, and click Next. Select the ADF Mobile extension, and click Next.

Accept the license agreement, by clicking I Agree, and click Next to download and install the mobile extension. Click Finish after the extension files have been downloaded, and click Yes to restart Oracle JDeveloper.

Note: If you are accessing the internet through a proxy server, you must provide the proxy settings before opening the Check for Updates center. Select Tools -> Preferences -> Web Browser and Proxy to do this.

Preparing Oracle ADF Business Components for Deployment

Download the o53adf-1958733.zip sample application, and unzip the file into a directory that does not contain blank spaces in the name.

Note: The o53adf-1958733.zip file also contains the completed sample application. Refer to the readme.txt file contained in the download for the configurations required to run the completed mobile application. Also note that the completed application contains an additional chart component for displaying the employee salary. (The instructions for building the chart are not part of this article.)

The sample application is an Oracle ADF Business Components model configured for deployment as a JAX-WS SOAP-based web service that the Oracle ADF Mobile application can connect to and consume. The only change needed in the sample application is to the database connection used by the Oracle ADF Business Components model project to point to your HR database schema. To make the change, follow these instructions:

  1. In Oracle JDeveloper, select File -> Open and navigate to the directory containing the unpacked sample application.

  2. Open the Oramag091013/adfBcHrService folder, and select the adfBcHrService.jws file. Click Open to load the workspace.

  3. Select View -> Database -> Database Navigator, and expand the adfBcHrService node to display hrconn in the Database Navigator node.

  4. Right-click hrconn, and select Properties from the menu. Edit the database connection information to work with your setup. Test the changes, and click OK.

 
Next, start the Oracle WebLogic Server instance integrated with Oracle JDeveloper. To start the Oracle WebLogic Server, select Run -> Start Server Instance.

If this is the first time you’ve run the integrated Oracle WebLogic Server, a Create Default Domain dialog box will open. Create a password for the default Oracle WebLogic Server domain.

 

Note: To ensure that the integrated Oracle WebLogic Server listens for the localhost and the IP address of your computer, don’t select an address from Listen Address.

Click OK to save the changes and to create and configure the default domain for Oracle ADF. The Oracle WebLogic Server will create a default domain and then start the server. Wait for the “IntegratedWebLogicServer started.” message on the Running: IntegratedWebLogicServer tab before proceeding to the steps in the next section.

Deploying the Model

The Oracle ADF Business Components model provides a deployment profile you can use to deploy the Oracle ADF Business Components service to the Oracle WebLogic Server instance integrated in Oracle JDeveloper or to a standalone Oracle WebLogic Server instance. This article assumes that deployment will be to the integrated server instance. To deploy the Oracle ADF Business Components model:

  1. If it is not already open, open the log window, by choosing View -> Log.

  2. Choose Application -> Deploy -> ADFBC_ADFBC_HR_SERVICE to initiate the deployment.

  3. Select Deploy to Application Server, and click Next.

  4. Ensure that the IntegratedWebLogicServer option is selected and the Override modules of the same name box is checked, and then click Next.

  5. Ensure that Deploy to all instances in the domain and Deploy as standalone Application are selected, click Next, and then click Finish.

  6. Check the deployment process by selecting the Deployment tab in the log window. After successful deployment, open a browser window and type the following URL into the URL address field: http://:7101/ adfservice/HrAppModuleService?wsdl. This will display the contents of the Web Services Description Language (WSDL) file in your browser.

  7. Copy the URL to the clipboard—you will need it later when designing the Oracle ADF Mobile access to the service.

Building the Workspace

The following instructions guide you through building the basic skeleton of the Oracle ADF Mobile sample application. 

  1. In Oracle JDeveloper, choose File -> New and then General -> Applications.

  2. Select the Mobile Application (ADF) entry in the Items list, and click OK. (Note that if you don’t see the Mobile Application (Oracle ADF) template, that is most likely because you didn’t complete installation of the ADF Mobile extension.)

  3. On the Create Mobile Application (ADF) screen, provide the following information: 

    Application Name OraMagSepOct13
    Directory <select pathname.="" its="" in="" spaces="" blank="" no="" has="" that="" folder="" a="">
    Application Package Prefix oramag.sample.sepoct. Thirteen
     
  4. Click Next.
  5. Click Finish to accept the default naming and package structures for the two projects that Oracle JDeveloper creates for the Oracle ADF Mobile workspace.

  6. When you’re finished, Oracle JDeveloper will open the adfmf-features.xml file in the editor. If you don’t see this editor, navigate to the ViewController -> Application Sources -> META-INF folder in the Application Navigator and double-click this file.

  7. On the adfmf-features.xml tab, click the green plus (+) icon next to the Features label to create a new Oracle ADF Mobile feature.

  8. Enter BrowseEmployees in the Feature Name field. Keep all the other default settings, and click OK.

  9. Still in the adfmf-features.xml editor, select the Content tab and click the green plus (+) icon next to the File field.

  10. Select Task Flow from the list, and enter EmployeeBtf.xml in the File Name field. Click OK. Oracle JDeveloper creates a bounded task flow and opens it on the EmployeeBtf.xml tab.

  11. If it is not already open, open the Oracle JDeveloper Component Palette, by choosing View -> Component Palette.

  12. In the Component Palette, select the View activity and drag and drop it onto the task flow diagram. Name the activity BrowseEmployees.

  13. Drag and drop a second View activity from the Component Palette to the task flow diagram, and name it ShowEmpDetails.

  14. Select the Control Flow Case element in the Component Palette, and draw a connection line between the BrowseEmployees and ShowEmpDetails views. Name this connection showDetails.

  15. Select the Control Flow Case element in the Component Palette, and draw a connection line between the ShowEmpDetails and BrowseEmployees views. Name this connection browseEmp. Note: It is not necessary to create an explicit connection from ShowEmpDetails to BrowseEmployees, because an implicit connection with the name _back is automatically created. However, if you want to add animation to the navigation transition, using explicit navigation is required.

  16. Select the showDetails control flow case, and open the Property Inspector by choosing View -> Property Inspector.

  17. In the Property Inspector, change the Transition property in the Behavior category to flipRight to add some animation at runtime.

  18. Repeat Steps 27 and 28 for the browseEmp control flow case. This time choose flipLeft as the Transition property value.

What you did: In this section, you created a new Oracle ADF Mobile application workspace and added a feature for Oracle ADF–related content. Further, you created a bounded task flow in which you designed the navigation flow between the two screens used in the sample mobile application.

Next you will create a web service data control connection to the Oracle ADF Business Components service for querying data from the Oracle HR schema.

Creating the Data Control 

  1. In the Application Navigator, select the ViewController project node and choose File -> New.

  2. Under Categories, select the Business Tier -> Web Services node and, under Items, select Web Service Data Control (SOAP / REST).

  3. Click OK to start the Create Web Service Data Control wizard.

  4. Enter OraMagHrAdfBc in the Name field for the Web Service Data Control, and ensure that SOAP is selected.

  5. Paste the WSDL URL from earlier into the URL field, and ensure that the Copy WSDL Locally option is selected. The deployed Oracle ADF Business Components web service is accessible from the following URL: http://:7101/ adfservice/HrAppModuleService?wsdl. Note: If you test the mobile application from a native device instead of a simulator, you need to use the IP address or the domain name of the integrated Oracle WebLogic Server to ensure that the server is accessible from the mobile device over the wireless network.

  6. Click Next.

  7. Select all web service methods, by clicking the shuttle button with the two blue right-pointing arrows, and click Finish to accept the remaining default settings.

  8. Ensure that the ViewController project is selected, and expand the Data Controls accordion in the Application Navigator. Click the blue arrows (refresh) located on top of the Data Controls panel to refresh the view. The OraMagHrAdfBc data control entry should appear, together with the Oracle ADF Mobile DeviceFeatures and ApplicationFeatures data controls. Note: This article does not dive into all of the available data controls for Oracle ADF Mobile. “Next Steps” includes a link that points to a follow-up tutorial.

  9. Save your work.

What you did: In this section, you created a data control connection to the remote web service for later declarative UI-to-data binding. Next you create the BrowseEmployees view.

Creating the BrowseEmployees View 

  1. On the EmployeeBtf.xml tab, double-click the BrowseEmployees activity in the bounded task flow diagram.

  2. In the Create ADF Mobile AMX Page dialog box, uncheck the Primary Action and Secondary Action checkboxes and keep the other default settings. Click OK.

  3. On the BrowseEmployees.amx tab, change the value property of the amx:outputText component from Header to Browse Employees to change the display title of the mobile screen.

  4. Expand the Data Controls accordion panel in the Application Navigator.

  5. Expand the OraMagHrAdfBc -> findAllEmployees(Object, Object) -> Return node.

  6. If it is not already open, open the Structure window by selecting View -> Structure.

  7. Click in the BrowseEmployees.amx page to ensure that its structure is shown in the Structure window.

  8. On the Data Controls panel, drag the result collection element, located in the OraMagHrAdfBc -> findAllEmployees(Object, Object) -> Return path, onto the Panel Page node in the Structure window and drop it. Then choose ADF Mobile List View from the list.

  9. Keep the default selections in the ListView Gallery, and click OK.

  10. Keep the default selections in the Edit Action Binding dialog box, and click OK.

  11. In the Edit List View dialog box, under List Item Content, select LastName as the value in the Value Binding field.

  12. For Divider Attribute, select LastName.

  13. For Divider Mode, select First Letter, and then click OK.

What you did: You created an Oracle ADF Mobile AMX page to list the employee data by employee last name. By dragging the findAllEmployees result node, you started creating a list view that shows employees by their last name with the first letter of the last name as a group-by condition. Next, you will implement row selection support for the list view.

  1. Click the Bindings tab at the bottom of the BrowseEmployees.amx editor.

  2. To pass the selected employee ID to the detail page, you need to extend the Oracle ADF binding used by the list view to include the EmployeeId attribute. To do this, first select the result entry in the Bindings section and click the pencil icon.

  3. In the Edit Tree Binding dialog box, in the Available Attributes list, with the Ctrl key pressed, select the DepartmentId and EmployeeId attributes and click the button with the single right-arrow icon to shuttle the attributes to the Display Attributes list. This makes the DepartmentId and EmployeeId values available on the page where they can be referenced from expression language (EL).

  4. Click OK.

  5. Switch back to the source code view, by clicking the Source tab at the bottom of the BrowseEmployees.amx editor.

  6. In the Structure window, expand the List View item and select the List Item entry. Then, if it is not already open, open the Property Inspector, by choosing View -> Property Inspector.

  7. In the Property Inspector, for the Action property in the Behavior section, select showDetails.

  8. Save your work.

  9. If it is not already open, open the Component Palette, by choosing View -> Component Palette.

  10. Expand the Operations category in the Component Palette, and drag the Set Property Listener component from the palette and drop it on top of the List Item element in the Structure window.

  11. With the Set Property Listener component selected in the Structure window, open the Property Inspector and provide the following values:

    From #{row.EmployeeId}
    To #{row.EmployeeId}
    Type action
     
  12. Repeat Steps 61 and 62 for the following values:

    From #{row.DepartmentId}
    To #{pageFlowScope. DepartmentId}
    Type action

What you did: You implemented behavior in the list view selection. The first behavior triggers navigation following the control flow to the detail page. The second memorizes the employee row’s EmployeeId and DepartmentId values for later use when a user selects an employee. 

Creating the ShowEmpDetail View

You have one more screen to build before you can run the application on a mobile device or a device simulator. The employee detail page shows information about the employee selected in the BrowseEmployees view.

  1. Select the EmployeeBtf.xml tab to switch to the bounded task flow diagram, and double-click the ShowEmpDetails activity to create a new Oracle ADF Mobile AMX page.

  2. In the Create ADF Mobile AMX Page dialog box, ensure that Secondary Action is checked and click OK.

  3. On the ShowEmpDetails.amx tab, change the Value property of the amx:outputText component from Header to Show Detail to change the display title of the mobile screen.

  4. Expand the View -> Panel Page -> Facet secondary node in the Structure window, and select Button.

  5. Open the Property Inspector, and set the value for the Text property to Employees and the value of the Action property in the Behavior section to browseEmp. (Note the _back value that is available for the Action property. Using this implicit navigation also brings you back to the BrowseEmployees view, but it doesn’t allow you to define an animation.)

  6. In the Component Palette, expand the Text and Selection category and drag and drop the Output Text component onto the Panel Page node in the Structure window.

  7. Use the Property Inspector to set the Output Text component’s Value property to Employee Information.

  8. Then, back in the Component Palette, expand the Layout category and drag and drop the Panel Form Layout component onto the Panel Page node in the Structure window.

  9. Repeat Steps 69 through 71, and set the Output Text component’s Value property to Department Information.

  10. On the Data Controls panel (in the Application Navigator), drag the result collection element located in the OraMagHrAdfBc getEmployeeByKey(Integer) -> Return path onto the first Panel Form Layout component in the Structure window and drop it there. Choose ADF Mobile Iterator from the list to create a read-only form.

  11. In the Edit Action Binding dialog box, set the Value property of the empId parameter to #{pageFlowScope .EmployeeId}.

  12.  Next Steps 

      

    READ more about ADF
     Consume Early, Consume Often 

    READ more about Oracle ADF Mobile
     Setting Up Oracle ADF Mobile
     Building Mobile Applications with Oracle ADF Mobile
     Oracle ADF Mobile Samples
     the official Oracle ADF Mobile blog

    DOWNLOAD
     Oracle JDeveloper and Oracle ADF
     the sample application for this article

  13. Click OK and then OK again in the following dialog box to accept all attributes to display in the form.

  14. Next, on the Data Controls panel, drag the result collection element located in the OraMagHrAdfBc -> getDepartmentByKey(Integer) -> Return path onto the second Panel Form Layout component in the Structure window and drop it there. Again, choose ADF Mobile Iterator from the list to create a read-only form.

  15. In the Edit Action Binding dialog box, set the Value property of the departmentId parameter to #{pageFlowScope .DepartmentId}.

  16. Click OK and then OK again in the following dialog box to accept all attributes to display in the form.

  17. To ensure that the employee and department information is refreshed according to the EmployeeId that is passed from the browse employee page, change the refresh behavior of the Oracle ADF iterators. To do this, first click the Binding tab at the bottom of the ShowEmpDetails.amx editor.

  18. Select getEmployeeByKeyIterator in the Executables section, and use the Property Inspector to change the value of the Refresh property (under Advanced) from (deferred) to always.

Finally, select the getDepartmentBy KeyIterator in the Executables section and use the Property Inspector to change the value of the Refresh property (under Advanced) from (deferred) to always

Deployment

Read the tutorial on setting up Oracle ADF Mobile, referenced in “Next Steps,” to learn about configuring your development environment for mobile application deployment to Android- and iOS-native devices or their emulators. After you complete the configuration, deploying the sample application to a native device or a device emulator is simple.

  1. Connect your mobile device to the development machine via the USB port.

  2. Choose Application -> Deploy -> IOS1 or ANDROID1 from the menu.

  3. Choose whether to deploy the application to a native device or a simulator/emulator, and click Finish.

The deployment time varies between mobile operating systems and devices, but it takes as long as two minutes. During deployment the sample application is packaged and then wrapped in a device-native container for the target operating system. After deployment you will see an application icon on your mobile device labeled OraMagSepOct13 (the label may be cropped if you deployed the application to a mobile phone).

Note that the red triangle icon shown at the top of the mobile screen at runtime (see Figure 2) indicates that the deployed application is in debug mode. This can be changed by a configuration setting in the ViewController project, and the change also shortens deployment time.

Conclusion

Abstracting the development of mobile applications from the target runtime environment is a sound and future-safe strategy. Oracle ADF Mobile makes it easy for Java Platform, Enterprise Edition (Java EE) and Oracle ADF developers to build cross-platform mobile applications that extend new and existing enterprise web and SOA applications to a mobile channel. Oracle ADF Mobile provides a straightforward strategy enabling Oracle customers to surf the next big wave in enterprise application development—mobile—without getting washed away.


Frank Nimphius is a senior principal product manager for Oracle JDeveloper and Oracle ADF. He is a coauthor of Oracle Fusion Developer Guide: Building Rich Internet Applications with Oracle ADF Business Components and Oracle ADF Faces (McGraw-Hill, 2010).

Send us your comments