Fusion Middleware Documentation
Advanced Search


Developing Web User Interfaces with Oracle ADF Faces
Close Window

Table of Contents

Show All | Collapse

1 Introduction to ADF Faces

This chapter introduces ADF Faces, providing an overview of the framework functionality and each of the different component types found in the library.

This chapter includes the following sections:

1.1 About ADF Faces

ADF Faces is a set of over 150 Ajax-enabled JavaServer Faces (JSF) components as well as a complete framework, all built on top of the JSF 2.0 standard. In its beginnings, ADF Faces was a first-generation set of JSF components, and has since been donated to the Apache Software Foundation. That set is now known as Apache MyFaces Trinidad (currently available through the Apache Software Foundation), and remains as the foundation of today's ADF Faces.

With ADF Faces and JSF 2.0, you can implement Ajax-based applications relatively easily with a minimal amount of hand-coded JavaScript. For example, you can easily build a stock trader's dashboard application that allows a stock analyst to use drag and drop to add new stock symbols to a table view, which then gets updated by the server model using an advanced push technology. To close new deals, the stock trader could navigate through the process of purchasing new stocks for a client, without having to leave the actual page. Much of this functionality can be implemented declaratively using Oracle JDeveloper, a full-featured development environment with built-in support for ADF Faces components, allowing you to quickly and easily build the view layer of your web application.

Note:

Because ADF Faces adheres to the standards of the JSF technology, this guide is mostly concerned with content that is in addition to, or different from, JSF standards. Therefore, you should have a basic understanding of how JSF works before beginning to develop with ADF Faces. To learn more about JSF, see http://www.oracle.com/technetwork/java/javaee/javaserverfaces-139869.html.

1.2 ADF Faces Framework

ADF Faces framework offers complete rich functionality, including the following;

  • Built to the JSF 2.0 specification

    ADF Faces supports JSF 2.0, including Facelets. Several of the new JavaServer Faces 2.0 features have parallel functionality in ADF Faces. To understand the new functionality introduced in JSF 2.0 and the functional overlap that exists between ADF Faces and JSF 2.0, see the JavaServer Faces 2.0 Overview and Adoption Roadmap in Oracle ADF Faces and Oracle JDeveloper 11g whitepaper on OTN at http://www.oracle.com/technetwork/developer-tools/adf/learnmore/adffaces-jsf20-190927.pdf.

  • Large set of fully featured rich components that are optimized to run in browsers on a desktop or a tablet device.

    The library provides over 150 Rich Internet Application (RIA) components, including geometry-managed layout components, text and selection components, sortable and hierarchical data tables and trees, menus, in-page dialogs, and general controls. For more information, see Section 1.3, "ADF Faces Components." For more information about running ADF Faces on tablets, see Appendix D, "Creating Web Applications for Touch Devices Using ADF Faces."

  • Widespread Ajax support

    Many ADF Faces components have ajax-style functionality implemented natively. For example, the ADF Faces table component lets you scroll through the table, sort the table by clicking a column header, mark a row or several rows for selection, and even expand specific rows in the table, all without requiring the page to be submitted to the server, and with no coding needed. In ADF Faces, this functionality is implemented as partial page rendering (PPR). For more information, see Chapter 8, "Rerendering Partial Page Content."

  • Limited need for developers to write JavaScript

    ADF Faces hides much of the complex JavaScript from you. Instead, you declaratively control how components function. You can implement a rich, functional, attractive web UI using ADF Faces in a declarative way that does not require the use of any JavaScript at all.

    That said, there may be cases when you do want to add your own functionality to ADF Faces, and you can easily do that using the client-side component and event framework. For more information, see Chapter 4, "Using ADF Faces Client-Side Architecture."

  • Enhanced lifecycle on both server and client

    ADF Faces extends the standard JSF 2.0 page request lifecycle. Examples include a client-side value lifecycle, a subform component that allows you to create independent submittable regions on a page without needing multiple forms, and an optimized lifecycle that can limit the parts of the page submitted for processing. For more information, see Chapter 5, "Using the JSF Lifecycle with ADF Faces."

  • Event handling

    ADF Faces adheres to standard JSF event handling techniques, as well as offering complete a client-side event model. For more information about events, see Chapter 6, "Handling Events."

  • Partial page navigation

    ADF Faces applications can use PPR for navigation, which eliminates the need to repeatedly load JavaScript libraries and stylesheets when navigating between pages. For more information, see Section 8.5, "Using Partial Page Navigation."

  • Client-side validation, conversion, and messaging

    ADF Faces validators can operate on both the client and server side. Client-side validators are in written JavaScript and validation errors caught on the client-side can be processed without a round-trip to the server. For more information, see Chapter 7, "Validating and Converting Input."

  • Server-side push and streaming

    The ADF Faces framework includes server-side push that allows you to provide real-time data updates for ADF Faces components. For more information, see Chapter 38, "Using the Active Data Service with an Asynchronous Backend."

  • Active geometry management

    ADF Faces provides a client-side geometry management facility that allows components to determine how best to make use of available screen real-estate. The framework notifies layout components of browser resize activity, and they in turn are able to resize their children. This allows certain components to stretch or shrink, filling up any available browser space. For more information, see Section 9.2.1, "Geometry Management and Component Stretching."

  • Advanced templating and declarative components

    You can create page templates, as well as page fragments and composite components made up of multiple components, which can be used throughout your application. For more information, see Chapter 10, "Creating and Reusing Fragments, Page Templates, and Components."

  • Advanced visualization components

    ADF Faces includes data visualization components, which are Flash- and PNG-enabled components capable of rendering dynamic charts, graphs, gauges, and other graphics that provide a real-time view of underlying data. For more information, see Part V, "Using ADF Data Visualization Components".

  • Skinning

    You can create your own look and feel by implementing skins for ADF Faces components. Oracle provides a stand-alone skin editor, where you can declaratively create and modify your skins. For more information, see Chapter 31, "Customizing the Appearance Using Styles and Skins."

  • Output modes

    You can make it so that pages that normally display in an HTML browser can be displayed in another mode, such as email or print view. For more information, see Chapter 37, "Using Different Output Modes."

  • Internationalization

    You can configure your JSF page or application to use different locales so that it displays the correct language based on the language setting of a user's browser. For more information, see Chapter 32, "Internationalizing and Localizing Pages."

  • Accessibility

    ADF Faces components have built-in accessibility that work with a range of assistive technologies, including screen readers.ADF Faces accessibility audit rules provide direction to create accessible images, tables, frames, forms, error messages, and popup windows using accessible HTML markup. For more information, see Chapter 33, "Developing Accessible ADF Faces Pages."

  • User-driven personalization

    Many ADF Faces components allow users to change the display of the component at runtime. By default, these changes live only as long as the page request. However, you can configure your application so that the changes can be persisted through the length of the user's session. For more information, see Chapter 35, "Allowing User Customization on JSF Pages."

  • Drag and drop

    The ADF Faces framework allows the user to move data from one location to another by dragging and dropping one component onto another. For more information, see Chapter 36, "Adding Drag and Drop Functionality."

  • Integration with other Oracle ADF technologies

    You can use ADF Faces in conjunction with the other Oracle ADF technologies, including ADF Business Components, ADF Controller, and ADF data binding. For more information about using ADF Faces with the ADF technology stack, see Developing Fusion Web Applications with Oracle Application Development Framework.

  • Integrated declarative development with Oracle JDeveloper

    JDeveloper is a full-featured development environment with built-in declarative support for ADF Faces components, including a visual layout editor, a Components window that allows you to drag and drop an ADF Faces component onto a page, and a Properties window where you declaratively configure component functionality. For more information about using JDeveloper, see Chapter 3, "Getting Started with ADF Faces and JDeveloper."

1.3 ADF Faces Components

ADF Faces components generally fall into the following categories:

  • Layout components

    Layout components act as containers to determine the layout of the page, ADF Faces layout components also include interactive container components that can show or hide content, or that provide sections, lists, or empty spaces. JDeveloper provides prebuilt quick-start layouts that declaratively add layout components to your page based on how you want the page to look. For more information about layout components and geometry management, see Chapter 9, "Organizing Content on Web Pages."

    In addition to standard layout components, ADF Faces also provides the following specialty layout components:

    • Explorer-type menus and toolbar containers: Allow you to create menu bars and toolbars. Menus and toolbars allow users to select from a specified list of options (in the case of a menu) or buttons (in the case of a toolbar) to cause some change to the application. For more information, see Chapter 16, "Using Menus, Toolbars, and Toolboxes."

    • Secondary windows: Display data in popup windows or dialogs. The dialog framework in ADF Faces provides an infrastructure to support building pages for a process displayed in a new popup browser window separate from the parent page. Multiple dialogs can have a control flow of their own. For more information, see Chapter 15, "Using Popup Dialogs, Menus, and Windows."

    • Core structure components and tags: Provide the tags needed to create pages and layouts, such as documents, forms and subforms, and resources. These tags are discussed in various chapters.

  • Text and selection components

    These components allow you to display text, from a simple output text component to input components, including selection components, to a complex list of value component.

    • Output components: Display text and graphics, and can also play video and music clips. ADF Faces also includes a carousel component that can display graphics in a revolving carousel. For more information, see Chapter 18, "Using Output Components."

    • Input components: Allow users to enter data or other types of information, such as color selection or date selection. ADF Faces also provides simple lists from which users can choose the data to be posted, as well as a file upload component. For more information about input components, see Chapter 11, "Using Input Components and Defining Forms."

    • List-of-Values (LOV) components: Allow users to make selections from lists driven by a model that contains functionality like searching for a specific value or showing values marked as favorites. These LOV components are useful when a field used to populate an attribute for one object might actually be contained in a list of other objects, as with a foreign key relationship in a database. For more information, see Chapter 13, "Using List-of-Values Components."

  • Data Views

    ADF Faces provides a number of different ways to display complex data.

    • Table and tree components: Display structured data in tables or expandable trees. ADF Faces tables provide functionality such as sorting column data, filtering data, and showing and hiding detailed content for a row. Trees have built-in expand/collapse behavior. Tree tables combine the functionality of tables with the data hierarchy functionality of trees. For more information, see Chapter 12, "Using Tables, Trees, and Other Collection-Based Components."

    • Data visualization components: Allow users to view and analyze complex data in real time. ADF Data Visualization components include graphs, gauges, pivot tables, timelines, geographic and thematic maps, Gantt charts, hierarchy viewers, and treemap and sunbursts that display row set and hierarchical data, for example an organization chart. For more information, see Chapter 22, "Introduction to ADF Data Visualization Components."

    • Query components: Allow users to query data. The query component can support multiple search criteria, dynamically adding and deleting criteria, selectable search operators, match all/any selections, seeded or saved searches, a basic or advanced mode, and personalization of searches. For more information, see Chapter 14, "Using Query Components."

    • Specialty display components: The calendar component displays activities in day, week, month, or list view. You can implement popup components that allow users to create, edit, or delete activities. For more information, see Chapter 17, "Using a Calendar Component." The carousel component allows you to display a collection of images in a scrollable manner. For more information, see Section 12.11, "Displaying Images in a Carousel."

  • Messaging and help: The framework provides the ability to display tooltips, messages, and help for input components, as well as the ability to display global messages for the application. The help framework allows you to create messages that can be reused throughout the application.You create a help provider using a Java class, a managed bean, an XLIFF file, or a standard properties file, or you can link to an external HTML-based help system. For more information, see Chapter 19, "Displaying Tips, Messages, and Help."

  • Hierarchical menu model: ADF Faces provides navigation components that render items such as tabs and breadcrumbs for navigating hierarchical pages. The framework provides an XML-based menu model that, in conjunction with a metadata file, contains all the information for generating the appropriate number of hierarchical levels on each page, and the navigation items that belong to each level. For more information, see Chapter 20, "Working with Navigation Components."

  • General controls

    General controls include the components used to navigate, as well as to display images and icons,

    • Navigation components: Allow users to go from one page to the next. ADF Faces navigation components include buttons and links, as well as the capability to create more complex hierarchical page flows accessed through different levels of menus. For more information, see Chapter 20, "Working with Navigation Components."

    • Images and icon components: Allow you to display images as simple as icons, to as complex as video. For more information, see Chapter 18, "Using Output Components."

  • Operations

    While not components, these tags work with components to provide additional functionality, such as drag and drop, validation, and a variety of event listeners. These operational tags are discussed with the components that use them.