13 Getting Started with Your Web Interface

This chapter provides information that you may need before you begin developing your web pages. It introduces the UI Shell page template and UI patterns and features that are available in JDeveloper.

This chapter includes the following sections:

Section 13.1, "Introduction to Developing a Web Application"
Section 13.2, "Oracle Fusion Guidelines, Patterns, and Standards"
Section 13.3, "Basic Building Blocks"
Section 13.4, "Introduction to the UI Shell"
Section 13.5, "Applications UI Patterns and Features"

13.1 Introduction to Developing a Web Application

To help you get started with your web interface, this chapter discusses information about how to create a page, what the wizard settings should be, as well as information about patterns, such as UI Shell.

For more information about how to get started with your web interface, see the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework (Oracle Fusion Applications Edition).

13.2 Oracle Fusion Guidelines, Patterns, and Standards

There are some basic guidelines for defining how an Oracle Fusion application's web interface is constructed. These guidelines are universally shared by all pages built for Oracle Fusion Applications. There are two types of pages - Dashboards and Work Areas. A dashboard is a collection of information summaries (high-level data views) that enable users to monitor different objects and data within a subdomain or functional area of interest. A Work Area is the complete set of tasks, reports, business intelligence, searches and other content that a user needs to accomplish the tasks associated with a business goal. Depending on the type of page you have, the construction can differ.

For more information about Standards and Guidelines, see Chapter 1, "Getting Started with Oracle Fusion Applications."

13.3 Basic Building Blocks

Dashboards and Work Areas define the basic structure of a page. Oracle Fusion Guidelines, Patterns and Standards (GPS) defines a set of design patterns. Design patterns are common flow or page designs that are used across all product families. By using design patterns in all phases of product development, valuable development time may be spent innovating other areas in the product, consistency is ensured across the entire enterprise, and users only have to learn the interaction once with the expectation that their experience will be the same in any product they encounter.

Dashboard

There are two types of dashboards: Home Based Dashboards and Transaction Dashboards. A Home Based Dashboard consists of one or more tabs. Each tab is a container for a set of configurable regions displaying content that a user may want to monitor. Transaction Dashboards are built with a specific role in mind. The basic building blocks are the individual regions. Every dashboard can choose which regions it wants to include. In Figure 13-1, these are the Watchlist, Reports and Analytics, Worklist, and Gallery. Each of these is built as Oracle Application Development Framework (Oracle ADF) Bounded Task Flows.

Figure 13-1 Home Based Dashboard Example

Work Area

A Work Area, as shown in Figure 13-2, consists of a Regional Area, a Local Area and a Contextual Area. Each area is intended to have content for a specific purpose.

Figure 13-2 Work Area example

The Regional Area is the collapsible region on the left of the page that contains a column of panels that provides information and actions that drive the business process that a work area supports. The Local Area is the focus of the users work. The contents of it should contain all of the information and actions required to accomplish the task.

The Contextual Area is the collapsible region on the right-hand side of the page that is filled with a column of panels. It provides additional space above the fold of the page to present actions and information, based on the information and state of the local area, that can assist the user in the task.

Designing Your UI

Your web user interface will be designed using the Oracle Fusion GPS concepts and design patterns. Many of these designs are delivered through the Oracle Fusion Middleware Extensions for Applications (Applications Core). Dashboards and Work Areas are built using the UI Shell. A set of design-time wizards and components that help support many of the Oracle Fusion GPS design patterns is also provided. These components, in conjunction with those provided by Oracle ADF and WebCenter, provide the basis for all web interfaces.

13.4 Introduction to the UI Shell

The UI Shell is a page template containing default information, such as a logo, menus and facets. To supplement the UIShell template, there also is a UIShellMainArea template. Because you can load information into dynamic tabs, the Main area cannot be a part of the page itself since it is loaded dynamically. The UIShellMainArea template helps you create the flows that run within the tabs.

The UI Shell design supports task-based and user-based navigation and way-finding, and organizes screen real estate more effectively by collating tasks, providing dedicated spaces for primary-task supporting information, and maintains general order and appropriate hierarchy between various elements on the screen.

The UI Shell for Applications User Experience (Applications UX) patterns provides a system of containers that fulfill common layout and navigational requirements in a structured, consistent manner. The UI Shell focuses on providing detailed design for defining and organizing various types of navigation and other functionality such as search and auxiliary information for Oracle Fusion alone.

In particular, the UI Shell template supports:

Global Search
Navigation menus
Cross-application navigation

For more information, see Chapter 14, "Implementing the UI Shell."

13.5 Applications UI Patterns and Features

Applications UI Patterns are high-level UI composite components that encapsulate standards and guidelines for common layouts, behaviors and flows across Oracle Fusion Applications, as set forth by the Applications User Experience group. The objective is to provide applications development teams with a higher level starting point and reduce duplication of effort in building the UI for their applications, while adhering to Oracle Fusion standards. The standards and guidelines are tightly integrated with JDeveloper.

Patterns can be implemented as custom components, declarative components or task flows. Patterns that are implemented as declarative components wrap the mandatory and pattern-specific UI components within the declarative component.

The UI patterns components provide several key benefits for developers when they are building pages and fragments:

Enforcement of patterns.
Faster development.
Changes can be made to one component definition rather than to each instance in every application.

Supported patterns are:

Applications Tables
Applications Panels
Applications Master-Detail
Applications Detail On Demand
Applications Tree
Applications Tree Tables
Applications Dialog Details
Using the Custom Wizard with Applications Popups

Applications Tables

Applications tables are UI components that already contain an ADF table, a menu bar, a toolbar, and related popups. Developers do not need to create and assemble all these components separately.

Applications Panels

Applications Panels help you create the following UI components as part of the UI applications patterns:

Page title
Form title
Page button bar (including navigation bar)
Facets for page-specific UI components

You must use Applications Panels to standardize layout and appearance for all your page forms and buttons, including read-only pages.

Applications Master-Detail

Master-Detail refers to the interaction of selecting an object from a master list, and refreshing the details in an adjacent area. It is not the relationship of the data.

The Master-Detail composite is used in situations where the information is too large, dynamic, or complex to show in a flat table. The user can see the Master, or summary, information in one area, and the corresponding details in a separate area. This can be achieved using different master and detail components, such as table, tree table, and tree.

For instance, when the user selects an employee from the master table, the corresponding employee details are displayed in the region below in a label/data format.

Applications Detail On Demand

Dialog details are appropriate for use when information needs to be accessed quickly and then dismissed. The details are shown in a modeless dialog window.

Dialog details are accessed by clicking a details icon in a row in a table.

Applications Tree

The Applications Tree component provides these basic capabilities:

Tree toolbar with default buttons
Facets for adding ADF tree, custom toolbar buttons, and so on
Default implementations for tree actions

Applications Dialog Details

The Applications Dialog Details component provides a user interface for launching a popup that contains detail information. Popups are an option when editing rows. The UI can be a detail icon, a link, or a button.

Using the Custom Wizard with Applications Popups

af:popup is a generic function documented in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework (Oracle Fusion Applications Edition).

While the standard af:popup component does not provide buttons or data binding, the Applications Popup wizard provides the base af:popup with:

a title
standard buttons
customized button capability
data binding
code that developers can use to invoke the popup
design-time support
popup facets and properties that can be customized

Popups can be used as standalone components or with certain patterns.

Applications Tree Tables

The Application Tree Table component provides these basic capabilities:

Tree Table toolbar with default buttons
Facets for adding items such as ADF tree table and custom toolbar buttons
Default implementations for tree actions

For more information, see: