The Oracle Alta UI is both a visual design and a page layout approach. As a consequence, pre-Oracle Alta UI applications and services (such as those built on the ADF framework) should not attempt to merely auto-migrate to this new look-and-feel.

Prior to the Oracle Alta UI, all Oracle ADF 11gR1 applications could change their skin values (for example, between Fusion, FusionFX, or Skyros) without any other modifications to the application. This is not the case for the Oracle Alta UI.

Attempts to simply change the skin value to Oracle Alta UI without a rewrite will result in application pages that will not lay out properly. Key components, such as buttons, text fields, and body fonts, are larger in the Oracle Alta UI than in previous skins, which is one of several reasons that a complete rewrite is necessary.

Create new pages to use the Oracle Alta UI.

Characteristics of the Oracle Alta UI Page Layout

The following image presents the Oracle Alta UI Page Layout schematic.

A Page layout sketch that illustrates the attributes of an Alta application page: the Branding Area across the top, Content are in center of viewport, navigation are to left of content area.

The image below shows example content within an Oracle Alta UI page layout.

Illustration of Page layout sketch illustrates the decorative attributes of an Alta application page

This image presents example content in an Oracle Alta UI page layout on a tablet device.

a Page layout example as seen on a tablet device.

Example Layout Configurations

An Oracle Alta UI page layout can take on a number of different configurations, based on the use case a service aims to support.

The following image provides various page layout configurations; in each, the outer gray borders represent the browser viewport, and the inner blue lines represent key areas of the page layout.Samples of various Alta page layouts, featuring one-, two-, and three-column configurations.


Principle Areas of an Oracle Alta UI Page Layout

The key areas of the page layout are:

Each area of a page can contain specific Oracle Alta UI patterns, as illustrated below. No "Area" of a page has a fixed dimension but can accommodate any dimension options that is part of the pattern associated with it (such as Branding Area or Navigation Area). Note that the label in each area of the image provides a link to more details.links each element's description in pertinent UI Pattern documents. Branding Area Pattern Application Navigation Pattern Primary Navigation Pattern Ancillary Content Area Footer Pattern

Optional Auxiliary Content

What is often referred to as auxiliary content is presented in the Ancillary Area of the page. The Ancillary Area is the third column in a three column layout; the first two columns belong to the Navigation Area and the Content Area, respectively.

Auxiliary content falls into two categories.

Context-driven content is specific to a selected object within the Content Area. For example, selecting a customer name that appears in a table row may show related information about that customer in the Ancillary Area. This information often supplements the information that may appear as details of the selected record in a master-detail layout with in the Content Area. For example, in an order entry task flow, the details of the customer's record are most likely the items ordered, and they are shown in the Content Area. The auxiliary content could include the account balance, a list of customer representative log entries, or a list of prior orders.

Task-driven content is content which is relevant to the overall task and not limited to the currently-selected record. For example, in an order entry task flow, the auxiliary content, might include a list of promotions to mention to all customers, the current sales quota for the account representative, or a list of other available sales representatives to chat with about sales questions.

Both context-driven and task-driven content may appear together in the Ancillary Area. It is a good practice to locate different types of data in different sections of the Auxiliary Area. For example, all task-driven content could start at the top of the Ancillary Area, whereas, context-driven content would follow below.

If auxiliary content could appear to be miscellaneous information to the user, then it is best to clearly demarcate content. For example, task-driven content related to a sales event (such as "all orders placed today are 10% off") should be immediately distinguishable from context-driven information, such as a product promotion targeted at the currently-selected customer.

Illustration of auxillary content in content containers

Additional Resources