2 Configuring the ADF Mobile Browser Environment

This chapter describes how to configure the development environment for ADF Mobile browser applications and how to build and test mobile browser applications.

This chapter includes the following sections:

2.1 Introduction to the ADF Mobile Browser Development Environment

ADF Mobile browser application development is almost identical to ADF web application development, except that ADF Mobile browser application development uses only mobile JSF pages that consist of Apache MyFaces Trinidad components.

To create an ADF Mobile browser application:

  • Configure the environment by creating an application and project.

  • Add a web project.

  • Add the JSF pages comprised of Apache MyFaces Trinidad components.

  • Optimize the page layout with ADF Mobile browser skinning, as described in Chapter 4, "Skinning."

  • Test the application on a simulator or device.

2.2 Configuring the ADF Mobile Browser Development Environment

ADF Mobile browser application development differs only from ADF web application development for desktop browsers in the creation of the mobile-optimized view controller project. For more information, see Section 2.3, "Developing an ADF Mobile Browser Application."

2.2.1 How to Configure the Environment by Creating a Mobile Application and Project

To configure the environment, first create an ADF Mobile browser application that includes a project with the ADF Mobile browser technology.

Before you begin:

If needed, create an ADF model project. The ADF Mobile browser application can share a model project with an existing ADF application.

To create the ADF Mobile Browser Application and the ADF Mobile Browser Project:

  1. Choose File and then New.

    Figure 2-1 The New Gallery

    Fusion Web Application is highlighted in the New Gallery
  2. In the New Gallery, expand General, choose Applications, then Fusion Web Application (ADF). Click OK.

  3. In the Name your application page of the Create Fusion Web Application (ADF) wizard, enter a name and, if needed, a location for the application in the Directory field, as shown in Figure 2-2.

    Figure 2-2 The Name your application Page

    The Name your application page.
  4. Click Finish.

    Selecting Fusion Web Application (ADF) creates the model project used by the mobile view project. Figure 2-3 shows the application's generated model and view controller projects that appear in the Application Navigator when you complete the wizard.

    Figure 2-3 The Fusion Web Application and its Projects in the Application Navigator

    Model and View-Controller projects


    Although you can define the business logic for the model project, do not use the generated view controller project. Instead, create a mobile view controller project as described in the following steps.
  5. Choose File and then New. The New Gallery appears.

  6. In the New Gallery, expand Categories, choose Projects and then Generic Project. Click OK.

  7. In the Create Generic Project wizard, complete the wizard by first entering a name for the project. For example, enter mvc (a short name for mobile view controller), as shown in Figure 2-4.

  8. Select the ADF Mobile browser technology for the project by moving ADF Mobile Browser from the Available list to the Selected list.

    Figure 2-4 Selecting the ADF Mobile Browser Technology for a Project

    Mobile Browser technology is selected.

    Figure 2-4 shows the ADF Mobile Browser technology in the Available list. After you move the ADF Mobile Browser technology to the Selected list, the following technologies are made available to the project and also appear in the Selected list, as shown in Figure 2-5:

    • Java

    • JSF (JavaServer Faces)

    • JSP and Servlets

    Figure 2-5 ADF Mobile Browser and Supporting Technologies Selected for a Project

    Techologies added with ADF Mobile browser.
  9. Click Next to navigate through the Configure Java settings page and then click Finish.

2.2.2 What Happens When You Create a Mobile Application and Project

As shown in Figure 2-6, the mobile view controller project (mvc) appears in the Application Navigator within the Fusion web application (adfm).

Figure 2-6 The Mobile ADF Model View Controller Project in the Application Navigator

An ADF Mobile browser view controller project.

Because you added the mobile browser technology scope, the Apache MyFaces Trinidad library is automatically loaded to the workspace and the Trinidad component palette is loaded when you create mobile JSF pages, shown in Figure 2-10.

2.3 Developing an ADF Mobile Browser Application

ADF Mobile browser application development is nearly identical to ADF web application development for desktop browsers; the two only differ in how you create the web project. For mobile browser applications, you develop an application by creating web pages within the web project. Otherwise, you develop a mobile browser application in the same way that you develop an ADF web application for a desktop browser. Typically, you create a web project within the application to implement a user interface and ADF Business Components to implement a business layer.

Figure 2-7 shows a mobile application (adfm) that contains model, a business components project.

Figure 2-7 Creating a Business Components Project within an ADF Mobile Browser Application

ADF Mobile project and its contents

2.3.1 How to Develop an ADF Mobile Browser Application by Creating a Mobile JSF Page

You develop an ADF Mobile browser application by first creating a JSP page and then by populating it with the Apache My Faces Trinidad components.

To create a mobile JSF page:

  1. Choose File and then New.

  2. In the New Gallery, expand Categories, choose Web Tier, then JSF, and then JSF Page. Click OK.


    Project Technologies (the default) must be selected from the Filter By list.

    Figure 2-8 The New Gallery for JSF Pages

    JSF category and JSF Page item are selected
  3. Enter a name for the JSF page, and if needed, enter a directory location for it in the JSF Page dialog, shown in Figure 2-9.


    Because you added the Mobile Browser technology scope for the application, the Render in Mobile Device option is selected by default, as shown in Figure 2-9.
  4. Figure 2-9 The Create JSF Page Dialog Box

    The Create JSF Page dialog box

    Figure 2-10 shows the designer for a mobile JSP page called page1.jsp.

  5. From the Components Palette, select the Trinidad components and then create the page using the Apache MyFaces Trinidad components.

Figure 2-10 Using the Trinidad Component Palette

The Trinidad component pallet

2.3.2 What Happens When You Create a Mobile JSF Page

Because the Render in Mobile Device option is selected by default, the page designer in the visual editor reflects the size of a mobile device, as illustrated in Figure 2-10.


You change the size of the page in the visual editor or by clicking Tools, then Preferences, then Mobile.

In addition, JDeveloper populates the ADF Mobile browser view project with a trinidad-config.xml file, which you use to set the default skin for the application. For more information, see Chapter 4, "Skinning."

2.4 Testing an ADF Mobile Browser Application

You can test an ADF Mobile browser application on a mobile device, a mobile device emulator, or a desktop browser. Testing on an actual mobile device or mobile device emulator provides more accurate results than does testing on a desktop browser.

Testing an ADF Mobile browser application with a desktop browser produces only approximate results because it provides a fairly uniform testing environment; in desktop browsers, web pages appear and behave similarly and business logic executes identically. Testing an application on an actual mobile device, however, produces more accurate results, because the capabilities of mobile browsers may cause controls to behave differently than they do on a desktop browser. In addition, mobile browsers are usually smaller than desktop browsers. They also render pages differently than desktop browsers because web servers optimize the look and feel by generating pages that are specific to the mobile browser.

Testing ADF Mobile browser applications directly on mobile devices has limitations as well, in that you may not have access to all of the devices that you must test. Furthermore, firewalls can complicate testing. Many mobile devices can only access the Internet and therefore cannot reach development environments behind a firewall. In such cases, mobile device emulators provide an alternative testing method. For example, to test applications on BlackBerry or Windows Mobile emulators (shown in Figure 2-11 and Figure 2-13, respectively), first download device emulators from the RIM developer site (http://us.blackberry.com) and the Microsoft developer site (http://www.microsoft.com). Before you test applications on the emulator, you must first configure the emulator and connect it to the web server. The Oracle Technology Network (http://www.oracle.com/technetwork/index.html) provides information on downloading and configuring simulators for ADF Mobile browser.

Figure 2-11 Testing an ADF Mobile Browser Application on a BlackBerry Emulator

Testing on a Blackberry simulator

2.4.1 How to Test ADF Mobile Browser Applications on Emulators

After you test an application on a desktop browser, you can then test it on an emulator. You can use the URL displayed in the desktop browser, but if it uses the localhost IP address (, you must change it to the network IP address of your computer.


To obtain the network IP address, use the ipconfig command interface on Windows systems and the ifconfig command on Linux/UNIX systems.

Figure 2-12 Testing an ADF Mobile Browser Application on a Desktop Browser

Testing on desktop

For example, to test an application using a Windows Mobile 6 emulator, change the address from the desktop's localhost IP address (, shown in Figure 2-12) to that of the computer's network IP address (, shown in Figure 2-13).

Figure 2-13 Testing an ADF Mobile Browser Application on a Windows Mobile Emulator

Testing on Windows Mobile emulator

In addition, you must remove the session specification that follows the page name. The page name is typically appended with either .jspx or .jsp. In Figure 2-12, the page name, home, is appended with .jspx.

In general, you debug an application by repeating cycles of code and then by testing the application. When you test an application that has been modified, you must do one, or both, of the following:

  • Refresh the page.

  • Clear the browser's cache.


Because the URL does not change if you develop the same application, you are not required to enter it again.

2.4.2 What You May Need to Know About Browser Settings

Viewing ADF Mobile browser applications properly requires adjustments to the browser settings for Windows Mobile and BlackBerry browsers.

Microsoft Windows Mobile 5 and 6, Microsoft Pocket Internet Explorer

For optimal viewing, select the Fit to Screen view (accessed by selecting Menu, View and then Fit to Screen).


Selecting the One Column view option results in layout problems. Do not select this option.

BlackBerry Browser 4.n

ADF Mobile browser only works if JavaScript support is enabled. To ensure that JavaScript support is enabled:

  1. Select Options and then Browser Configuration.

  2. Ensure that the following tables are selected:

    • Support JavaScript

    • Allow JavaScript Popup

    • Support HTML Tables