2 Configuring the ADF Mobile Environment

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

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

To create the ADF Mobile Application and the Mobile Project

1. Choose File and then New. The New Gallery appears (Figure 2-1).

   Figure 2-1 The New Gallery

   
   

2. Choose Applications in the Categories section of the window and then Fusion Web Application (ADF) in the Items section. Selecting Fusion Web Application (ADF) creates the model project used by the mobile view project.

3. Click OK. The Create Fusion Web Application (ADF) wizard opens to its first page, Step 1: Name your application. (Figure 2-2).

4. Complete this page by entering a name and, if needed, a location for the application in the Directory field.

   Figure 2-2 The Name your application Page

   
   

5. Click Finish. The application's Model and its generated Model-View-Controller projects appear in the Application Navigator (Figure 2-3).

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

   
   

   Note:

   Define the business logic for the Model project, but do not use the generated Model-View-Controller project. Instead, create a mobile Model-View-Controller project as described in the following steps.

6. Choose File and then New. The New Gallery appears.

7. Select Projects in the Categories section and then Generic Project in the Items section.

8. Click OK. The Create Generic Project wizard appears.

9. Complete the wizard by first entering a name for the project. For example, enter mvc (a short name for Model-View-Controller mobile).

   Tip:

   To make entering a URL on a mobile device easier, enter short, lower-case names for both the application and the project.

10. Select the ADF Mobile technology scope for the project by moving Mobile from the Available section to the Selected section. As depicted in Figure 2-4, the following technologies appear in the Selected section:

    • Java

    • JSF (JavaServer Faces)

    • JSP and Servlets

    • Mobile

    Figure 2-4 Selecting the Mobile Technology Scope

    
    

11. Click Next. The Configure Java settings for the project page appears.

12. Click Finish to complete the project.

2.2.2 What Happens When You Create a Mobile Application and Project

The mobile Model-View-Controller project (mvc) appears in the Application Navigator (Figure 2-5) within the Fusion Web application (adfm).

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

Because you added the Mobile technology scope, the Apache MyFaces Trinidad library is automatically loaded to the workspace and the Trinidad component palette will be loaded when you create mobile JSF pages (Figure 2-9).

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

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

To create a mobile JSF page

1. Choose File and then New. The New Gallery appears.

2. Select JSF from the Web Tier node in the Categories section.

   Note:

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

   Figure 2-7 The New Gallery for JSF Pages

   
   

3. Select JSF Page in the Items section and then click OK. The Create JSF Page dialog box appears (Figure 2-8).

   Note:

   Because you added the Mobile technology scope for the application, the Render in Mobile Device option is selected by default.

4. Figure 2-8 The Create JSF Page Dialog Box

   
   

   A page designer for a mobile JSF page appears (page1.jsp in Figure 2-9).

5. Select the Trinidad component palette and then create the page using the Apache MyFaces Trinidad components. You can create the page in the same manner as a desktop ADF Web page.

Figure 2-9 Using the Trinidad Component Palette

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

2.4.1 How to Test ADF Mobile 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 you must replace the local IP address with the IP address of the server that hosts the emulator. For example, to text an application using a Windows Mobile 6 emulator, change the address from the local IP used by the desktop to that of the server hosting the Windows Mobile 6 emulator.

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

For example, in Figure 2-11, the desktop browser displays the IP address of the local host, 127.0.0.1. In Figure 2-12, the IP address has been changed to that of the server hosting the Windows Mobile 6 emulator (144.25.167.234).

Figure 2-12 Testing an ADF Mobile Application on a 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-11, 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.

2.4.2 What You May Need to Know About Browser Settings

To view ADF Mobile 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).

RIM BlackBerry Browser 4.x

ADF Mobile 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