2.3 Managing User Interface Design

This section describes key concepts about selecting a user interface for your application.

2.3.1 About Determining Your Application User Interface

Application Builder supports multiple user interfaces within a single application. Developers can choose to build an application for the desktop, for a mobile device, or for both. Each user interface defined for an application has its own theme, login page, home page, and global page (formerly called Page 0). When you create a page within an application, you must specify which user interface is associated with that page. The user interface you select determines the options that display when creating pages and regions. For example, only desktop pages support maps, data loading, and interactive reports. Similarly, on mobile pages the most common construct is a list and form, instead of report and form.

2.3.2 About Mobile Application Design

Because mobile applications are designed to run specifically on smartphone devices, they must be built with extremely minimal, semantic HTML that is optimized for mobile connections. Mobile applications developed with Oracle Application Express are browser-based applications that run inside the browser on the mobile device. Therefore, these applications must have a connection in order to communicate with the Oracle Database and cannot operate in a disconnected environment.

Mobile devices that have HTML5 capabilities can utilize all of the capabilities that can be built into the applications, including HTML5 date-pickers, sub-types that display different keypads based on field definition, and so. Older devices will still render the application they will offer less advanced features. The major advantage of developing browser-based applications is that you only need to develop them once for the majority of mobile devices. However, one major limitation is accessing on-device features such as contact lists. This limitation can be alleviated by integrating with solutions such as PhoneGap that support the creation of hybrid solutions, which use a native application wrapper to display the web applications. Solutions such as Phonegap provide various APIs to access many of the native phone features not currently available using HTML5 or JavaScript. To learn more, see:

http://phonegap.com/

2.3.3 Understanding the Difference Between Mobile Design and Responsive Design

Oracle Application Express includes two approaches to developing applications for mobile devices:

  • Option 1: Create jQuery Mobile-based web pages.

  • Option 2: Use Theme 25 to create a responsive design in which the page layout fits the space regardless of the target device (for example, a desktop computer, laptop computer, tablet, or smartphone).

The main difference between these two approaches is that responsive design enables a single web page to display on any device. In contrast, developers building mobile applications with jQuery Mobile must create two sets of pages: one for desktop display and another for mobile devices. On the surface, creating a responsive design and having only a single page to maintain sounds more appealing than maintaining two separate pages. In practice, however, the up front cost of designing a truly responsive page are much higher and requires a much higher level of understanding of grid layout, HTML and CSS.

You should base your decision on whether to build separate mobile pages or create a responsive design based on the type of site or application you are developing. For example, applications that will be accessed by the general public, such as marketing sites, are well suited for responsive design. Productivity applications, such as customer tracker applications, are good candidates for building mobile pages where the native functionality of the smartphone can be utilized.