Oracle Application Express



User Interface

Oracle Application Express 4.2 introduced the ability to define multiple user interfaces for desktop and mobile devices. The sections below provide an overview of different design considerations:

User Interface Design

The optimal user interface design principles have continually changed and evolved as new architectures are introduced. Old mainframe applications screen design was based on keyboard input only and the order of items on a page was critically important. However, with client server applications user interface design generally placed multiple items on a single line and everything had to fit into a single screen with no scrolling. With Web applications the principle design changed again to very few items on a single line, instead using vertical scrolling as required. Now with mobile and tablet applications the user interface principles have changed again to display minimal information with very easy to navigate screens that utilize touch instead of pointing devices.

Application Express 4.2 introduced the ability to declaratively define mobile applications using jQuery Mobile. The Application Builder has been enhanced to support multiple user interfaces, both desktop and mobile, within a single application. Therefore, developers can choose to build an application only for the desktop, only for mobile, or for both. Each user interface defined for an application has its own theme, login page, home page, and global page (formerly Page 0). When defining a page within an application, you must specify which user interface is associated with that page. Based on the user interface selected the available page and region types varies, and the options available through the create page and region wizards varies accordingly. For example, maps, data loading and other page types and interactive report regions are only supported on desktop pages. Similarly on mobile pages the most common construct is list and form, instead of report and form.

Mobile Applications

Mobile applications are those designed to run specifically on smartphone devices. To facilitate this applications need to be built with extremely minimal, semantic HTML that is optimized for mobile connections. Oracle Application Express 4.2, and above, incorporates jQuery Mobile to allow developers to rapidly build mobile applications. jQuery Mobile based web pages use a framework that was specifically built for mobile devices. jQuery Mobile is a lightweight framework that enables you to create compact and minimal web sites that include only a few images and CSS files. jQuery Mobile is also aware of and able to respond to mobile device specific events, such as orientation change and touch events. The look and feel of jQuery Mobile based applications can be easily modified via CSS using tools such as theme-roller, thanks to it's relatively static HTML structure.

Mobile applications developed with 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. Using jQuery Mobile, these applications can run on any mobile operating system including iOS, Android, Blackberry, and Windows. Mobile devices that have HTML5 capabilities will be able to 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, etc. Older devices will still render the application but with 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 allow for creating hybrid solutions, which use a native application wrapper to display the web app.

Responsive Design

One of the recent user interface design principles being adopted is responsive design. Responsive design is a way to design websites so that the layout fits the available space on differently sized desktop or laptop browsers as well as tablets and smartphones. On larger screens, the user get's the full experience. On smartphones and tablets, the layout adopts itself to the size of the device's screen. This is done by having certain elements shift position, re-size or become hidden entirely. The goal is to make all essential content available in a user-friendly and pleasing way on any device. Oracle Application Express 5.0 intorduces the Universal Theme which is truely responsive 'out-of-the-box' theme, without requiring the developer to design pages in any special way to be responsive. This is a large improvement over Oracle Application Express 4.2 Theme 25. Theme 25 provided the building blocks and templates that allow for achieving a responsive layout. However, it was up to the developer to use those templates and to arrange the page content in such a way that the end result is truly responsive. Also note that converting an existing application to Theme 25 requires you to review the pages of the application to ensure the appropriate template and layout are defined.

Review how Demand-Analysis have utilized Responsive Design to deliver their commercial application on multiple devices.

Responsive versus Mobile Design

The main difference between the two approaches is that responsive design allows for using a single web page with any device, while developers building mobile applications with jQuery Mobile should do so in addition to the desktop-oriented pages. Having only a single page to maintain using responsive design techniques might sound more appealing than maintaining two separate pages. However, jQuery Mobile based pages are generally very small and load a minimal amount of static content. Responsive sites on the other hand always load the full page, including content that is best suited to desktop browsers. Using CSS sprites, minified JavaScript code and other techniques may help reduce the page size. However, content such as larger headers, sidebars, rich page content, etc. would still have to be loaded, only to be selectively hidden on the client later.

The main deciding factor should be the type of site or application that is being developed and the content that is being presented. A marketing site for instance, such as a company's homes page, catalogs, libraries, and wikis are well suited for responsive design. Productivity applications, such as customer management applications, business intelligence tools, and inventory applications are good candidates for a jQuery Mobile based user interface. These types of applications require quick response time, easy to use data entry forms, and would benefit from utilizing the device's native controls. Customers who are used to quickly flipping through data using touch controls in native applications will get much the same experience with their jQuery Mobile applications, such as paginating through content using swipe, orientation change to make better use of space and context sensitive soft-keypads. Ideally of course, these type of applications would still have their desktop-orientated pages be somewhat responsive so that they work well on desktops as well as tablets.