Except for page fragments, pop-up in dialogs, and region support, you can use the ADF task flow to develop ADF Mobile browser applications. ADF Mobile browser application that use the ADF task flow only support the trinidad-simple skin family.

Figure 2-4 shows the ADF Mobile Browser feature in the Available window. After you move the ADF Mobile Browser feature to the Selected window, the Java, JSF (JavaServer Faces), JSP and Servlets technologies are made available to the project and also appear in the Selected window, as shown in Figure 2-5.

The creation of the view controller project also results in the creation of the mobile application's page-flow definition file, faces-config.xml. For information on creating a page flow, see "Defining Page Flows" in Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.

Because you added the ADF Mobile Browser feature, 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-11.

2.3 Developing an ADF Mobile Browser Application

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 or an Oracle EclipseLink project to implement a business layer.

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

2.3.1 How to Develop a Mobile JSF Page

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

To create a mobile JSF page:

Choose File and then New.

In the New Gallery, expand Categories, select Web Tier, select JSF/Facelets and then Page. Click OK.

Note:

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

Figure 2-9 The New Gallery for JSF Pages

Enter a name for the JSF page in the JSF Page dialog, as shown in Figure 2-10. If needed, enter a directory location for the page.

Note:

Because you added the ADF Mobile Browser feature for the application, the Render in Mobile Device option is selected by default, as shown in Figure 2-10.

Figure 2-10 The Create JSF Page Dialog Box

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

From the Components Palette, select Trinidad as shown in Figure 2-11 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-11 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-11. This option also results in the creation of the following ADF skin-related configuration files and style sheets which are configured for ADF Mobile browser. Table 2-1 describes these files, which are located in the ADF Mobile browser view-controller project's Web Content folder.

Table 2-1 Skinning-Related Artifacts

Skinning File

Location

Description

trinidad-config.xml

WEB-INF node of the mobile view-controller project

Defines the skins used in the ADF Mobile browser application. For more information on using this file in a mobile context, see Section 4.2, "Implementing ADF Mobile Browser Skinning." See also "Configuration in trinidad-config.xml" in Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.

trinidad-skins.xml

WEB-INF node of the mobile view-controller project

Lists the skins files that are automatically generated when you create the mobile JSF page. By default, these are mobile.css and richmobile.css. See also Section 4.2, "Implementing ADF Mobile Browser Skinning" and the "Configuration in trinidad-skins.xml" section in Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.

mobile.css

Styles node of the mobile view-controller project

Used for basic HTML browsers and browsers used in older versions of smartphones.

richmobile.css

Styles node of the mobile view-controller project

Used for webkit-based smartphone browsers, such as those powered by iOS or Android.

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; web pages appear and behave similarly and business logic executes identically in any type of desktop browser. 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. Mobile browsers, which are usually smaller than desktop browsers, render pages differently because web servers optimize the look and feel by generating mobile browser-specific pages.

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, as many mobile devices can access only the internet and cannot reach development environments behind firewalls. In such cases, mobile device emulators provide an alternative testing method. For example, to test applications on BlackBerry smartphone simulators or Windows Mobile device emulators (shown in Figure 2-12 and Figure 2-14, respectively), download smartphone simulators from the RIM developer site (http://na.blackberry.com) and device emulators from the Microsoft developer site (http://www.microsoft.com). You must then configure them and connect them to the web server. For information on downloading and configuring simulators and emulators for ADF Mobile browser, refer to Running Mobile Device Simulators with ADF Mobile and JDeveloper, available through the Mobile Application Development with Oracle ADF Mobile page of the Oracle Technology Network. You can access this page by selecting Oracle ADF Mobile from the Oracle Technology Network's Oracle Application Development Framework overview page (http://www.oracle.com/technetwork/developer-tools/adf/overview/index.html).

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 (127.0.0.1), you must change it to the network IP address of your computer.

Tip:

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

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

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-13, 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.

Tip:

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