The Apple iPhone, since its initial introduction in July 2007, has become the fastest selling smartphone in the 18 months of its existence. A key factor in its success is its powerful Safari Web browser that allows users to view virtually any page on the Web, with full support of JavaScript and AJAX features typically found on desktop browser only. This article will focus on using Oracle JDeveloper and Oracle Application Development Framework (ADF) Mobile to develop a mobile Web application optimized for the iPhone.

Challenges
Designing a Web application varies greatly for a mobile user who accesses the Web using the 3.5-inch iPhone screen, versus for a sedentary user access the Web using a 22-inch LCD monitor. This offers an interesting challenge to Web developers, since Web development tools on the market today fit into one of these two categories:
* Tools that target the desktop Web browser: These tools fully leverage the AJAX/JavaScript capabilities offered by these desktop browsers. They also focus on developing user interface intended for screen size of 17-inch or resolution of 1024X768 or larger.
* Tools that target the HTML mobile Web browser: These tools focus on delivering user interfaces to the small (240X320) screen. They also use a least common denominator approach in delivering a basic HTML content to all mobile browsers .

These two tools translate into Web sites that either deliver a sub-optimal user interface and large page download, or plain HTML pages that do not leverage any advanced AJAX features that Safari browser supports.

The Oracle ADF Mobile Browser client, however, enables developers to leverage the AJAX capabilities of the iPhone Safari browser, while maintain complete compatibility with mobile browsers that can only handle plain HTML or WAP 2.0 contents. Furthermore, it helps developers create user interfaces that are optimized for iPhone screen size and mobile Web use.

Mobile Development Basics in Oracle ADF
Oracle ADF supports mobile application development through Oracle ADF Mobile. The cores of mobile support reside in the JavaServer Faces (JSF) mobile render kits delivered through MyFaces Trinidad components, as well as in Oracle JDeveloper design time support. Here are just some of the key features delivered by ADF Mobile:
* Browser User Agent Detection and Capabilities Delivery: Mobile render kits of Trinidad components would determine client browser types by detecting user agent, and then deliver contents based on the capabilities of the detected browser. For example, when rendering for mobile browsers that do not support full AJAX capabilities, partial-page refresh support is disabled automatically. While this mechanism supports a large number of mobile browsers, they roughly fall into the following categories:
o iPhone Safari Browser
o BlackBerry Browsers
o Nokia S60 Browsers
o Windows Mobile Browsers
o Basic HTML Browsers
* Mobile Browser Rendering Optimization: Each mobile browser differs in how various UI components are supported, and each mobile device have different form factors and resolutions. Trinidad components would render these UI elements differently to ensure optimized display and layout of the user interface, thus insulate developers from having to consider variation in each of the target mobile devices.
* Full support of ADF Model: All of the ADF Model and Business Logic components are supported for mobile development, with the same design time, drag-and-drop support in JDeveloper.
* Mobile View Creation and Component Palette: The “Create JSF Page” dialog box in JDeveloper allows the developer to select mobile devices as the intended target. Once set, component palette would only list supported components on a mobile browser
* . Screen Resolution Support in the View Editor: The developer can set the size of the view editor in Oracle JDeveloper to approximate the size of a mobile device screen. This feature provides developers an approximate idea of how a view would look like on an actual mobile device.

There are also some limitations around mobile support:
* Only Trinidad components contain render kits for mobile devices. Oracle ADF Faces components currently do not contain mobile-specific render kits.
* A subset of Trinidad components are supported on mobile devices. Furthermore, there are certain limitations for a few supported Trinidad components as well. For details, please refer to the ADF Mobile Component Tags Summary page on the Oracle Technology Network Website.

Developing an Oracle ADF Mobile Application Optimized for iPhone
High level steps to develop an iPhone-optimized mobile application using Oracle ADF and JDeveloper are as follows:
1. Develop or re-use existing business logic components: Because ADF Mobile is fully compatible with ADF Model and business logic components, the developer can simply re-use any existing business logic components from other projects. Furthermore, JDeveloper feature that supports drag-and-drop of Data Controls to the view editor is fully supported.
2. Develop page flows and views for the mobile application: The process of developing page flows and views for a mobile application is basically the same as developing for a JSF application. One useful feature in the view editor is the ability to set the size of the canvas to approximate mobile devices' resolution. Oracle JDeveloper supports a handful of common mobile resolution, and iPhone resolutions can be manually added.
3. Optimize for iPhone Safari browser: a few techniques can be used to achieve iPhone native look-and-feel, interacting with iPhone services, and improve page transition user experiences.

Details about adding view editor resolutions and iPhone optimization techniques are described below.

Adding iPhone Resolution to the View Editor
Screen resolutions list in the View Editor provides a visual aid for developers when designing views. Oracle JDeveloper provides support for the following resolutions out-of-box: 240x240, 240x260, 240x320, and 320x240. iPhone supports a 320x480 resolution.

To add iPhone resolution to the View Editor:
1. First, locate and copy the following file to a temporary location. This is the JDeveloper extension file that provides mobile development support in Oracle JDeveloper:
<JDeveloper Install Home>/jdev/extenstions/oracle.wireless.dt.jar
2. Open the jar file using your favorite unzip program, and locate the file dc.xml. Open the file in a text editor or from Oracle JDeveloper. Please note the lines that define the various device resolution entries in the View Editor. For example:
<reference-device name="320 X 240" displayable-name="320 X 240" width="320" height="240" TablesCapable="true" />

3. Insert the following line just above the entry for 240x40 resolution:
<reference-device name="320 X 480" displayable-name="320 X 480" width="320" height="480" TablesCapable="true" />

4. Save the updated dc.xml file back into the oracle.wireless.dt.jar file. This can be done by either opening the file directly from the unzip program and then save the file when prompted, or add the file back into the jar file using your favorite unzip program.
5. Make a backup copy of the original oracle.wireless.dt.jar file in the jdev/extensions directory first. Then copy the updated oracle.wireless.dt.jar back into the jdev/extensions directory
6. . You will need to re-start Oracle JDeveloper to see the additional entry in the View Editor resolutions drop-down list box.

Achieving iPhone Native Look-and-Feel
Skinning allows an Oracle ADF Mobile application to take on iPhone native look-and-feel using Trinidad components. Furthermore, it allows the same set of UI components to take on platform native look-and-feel, without needing to create multiple versions of the same application for different mobile devices.

The first step in skinning for iPhone is to implement logic that would allow a JSF application to apply different style sheets for different mobile browsers during run time. Typically an Oracle ADF Mobile application needs to support more than one type of devices, and it would be impractical to define a style sheet that works well across multiple devices. To do that, first a Managed Bean should be created for the page flow of the application, where one of the methods needs detect the browser type, and return the name of the skin family that will be used for that platform. This method would be invoked in the Trinidad-config.xml file; for example:

<skin-family>#{AgentUtil.phoneFamily} Where AgentUtil is the class name of the Managed Bean, and phoneFamily is the method that returns the skin family as a string. The various skin families are defined in the Trinidad-skins.xml file, as well as the corresponding location of the CSS file within the project. For example, for iPhone, skin family can be defined as:

<skin> <id>iphone</id> <family>iphoneFamily</family> <render-kit-id>org.apache.myfaces.trinidad.desktop styles/iPhone.css</style-sheet-name> </skin>

The AgentUtil.phoneFamily method would return iphoneFamily when iPhone is used. This would cause the style sheet located at styles/iPhone.css to be used. A sample code snippet for the AgentUtil.phoneFamily method is shown below; please note that the sample code only contain cases for iPhone, Symbian, and all other mobile browsers. You may add additional browsers as necessary.

private String IPHONE_SKIN = "iphoneFamily";
private String SYMBIAN_SKIN = "symbianFamily";
private String DEFAULT_SKIN = "minimalFamily";

public String getPhoneFamily() {
if (phoneFamily.isEmpty())
{
FacesContext fc = FacesContext.getCurrentInstance();
HttpServletRequest req =
(HttpServletRequest)fc.getExternalContext().getRequest();
String agent = req.getHeader("User-Agent");

if (agent != null && amp;agent.indexOf("iPhone") > -1) {
phoneFamily = IPHONE_SKIN;
} else if (agent != null && amp; agent.indexOf("Symbian") > -1) {
phoneFamily = SYMBIAN_SKIN;
} else {
phoneFamily = DEFAULT_SKIN;
}
}
return phoneFamily;
}


One note about the function agent.indexOf(<UA String>”). This function would use the input <UA String> to match against the User Agent field of the browser that's making the request. This function performs a partial match – for example, in the example agent.indexOf(“iPhone”), this function would check the entire User Agent string of the browser against the pattern “iPhone”. If a match is made, i.e. the user agent contains the string iPhone, then the function would be return -1. You may specify as much or as little of the string in this field as necessary, as long as the return guarantees the match you are looking for. While you should specify the UA string that works in your test case, here are some patterns that are commonly used:

* iPhone: Used to identify all iPhone Safari browser
* Symbian: Used to identify all Nokia S60 browsers * BlackBerry9000: Used to identify all BlackBerry 9000 series browsers
* BlackBerry88: Used to identify BlackBerry 8800 series browsers
* BlackBerry83: Used to identify BlackBerry 8300 series browsers
* BlackBerry: Used to identify all other BlackBerry browsers
* Windows CE: Used to identify all Windows Mobile browsers
* Android: Used to identify the WebKit based browser in Android


Detailed instructions will be published in the next version of Oracle ADF Mobile Developer Guide. Further details of how to define CSS files for Trinidad-based application, please refer to this doc.

Implementing Common iPhone UI Elements Using Skinning and Trinidad Components
The next step is to achieve the iPhone native look-and-feel is to define the style classes in the style sheet that would support the creation of common iPhone UI components. There are basically three common UI elements around in an iPhone native application: Navigation Panel Lists, Field Set Panel, and Navigation Bar. Let's look at each of these elements in more detail.

Navigation Panel Lists
Navigation Panel Lists displays a list of data as a one column table, where each row contains data from multiple columns. It supports the scenario where a user browser through a list of summary data, and select a row to reveal additional detail associated with that row. In the example below, the Panel List displays a list of houses on sale.

Full article...