ADF Faces Advanced Features

Copyright 2008, Oracle. All rights reserved.

Objectives
After completing this lesson, you should be able to do the following: Describe the use of Application Development Framework (ADF) Rich Client components Use Partial Page Rendering (PPR) on a JavaServer Faces (JSF) page Compare different task flow strategies Work with ADF components to enhance a page

8-2

Copyright 2008, Oracle. All rights reserved.

Agenda
Overview of ADF Rich Client Components Partial Page Rendering Task Flow Strategies Enhancing Pages:
Print Page Editable Boolean Check Box Data-Bound Graph Pop-Up Window

8-3

Copyright 2008, Oracle. All rights reserved.

What Does ADF Faces Bring to JSF?

ADF Faces provides: Complete JavaScript API Support for a variety of clients ADF data binding support Rich components, layouts, and render kits:
Over 100 AJAX-enabled components Data visualization components

Powerful run-time features:

Partial page rendering Dialog and pop-up framework Look-and-feel skinning Advanced data streaming

8-4

Copyright 2008, Oracle. All rights reserved.

ADF Faces Components

Common components Operations

Layout components

8-5

Copyright 2008, Oracle. All rights reserved.

Using ADF Data Visualization Components

Common features: Design time creation by using:
Data Control Palette JSF Visual Editor Property Inspector Component Palette

Live data preview at design time Support for data binding

8-6

Copyright 2008, Oracle. All rights reserved.

Visualizing Data
Some of the data visualization components that are available:

Gauge

Graph

Gantt chart

Pivot table

Geographic map

8-7

Copyright 2008, Oracle. All rights reserved.

Agenda
Overview of ADF Rich Client Components Partial Page Rendering Task Flow Strategies Enhancing Pages:
Print Page Editable Boolean Check Box Data-Bound Graph Pop-Up Window

8-9

Copyright 2008, Oracle. All rights reserved.

Partial Page Rendering

PPR uses AJAX technology. You can update the page without refreshing the whole page.
Select a value from a list and filter a result table by that value. Scroll through a results table. Expand a tree control.

PPR in ADF Faces is mostly transparent:

Expand a tree node.

Nothing special needs to be done.

PPR has explicit PPR attributes:

partialSubmit: Used by command components autoSubmit: Used by input items, lists, and so on partialTriggers: Used by all components

8 - 10

Copyright 2008, Oracle. All rights reserved.

PPR: partialSubmit
Enables a command item to execute server code without posting the whole page:

<af:commandLink text="#{row.SupplierId}" action="updateSupplier" partialSubmit="true"/>

In this case, the link navigates to an edit page for a supplier that is selected in a read-only table.

8 - 11

Copyright 2008, Oracle. All rights reserved.

PPR: autoSubmit
For a value holder (such as inputText or check box), posts the change to the server as soon as it is made (for example, on navigation out or selection elsewhere)

<af:selectOneChoice value="#{bindings.OrderStatus.inputValue}" label="#{bindings.OrderStatus.label}" autoSubmit="true" id="status">

Common uses:
A change to the UI based on a field value Instant validation

8 - 12

Copyright 2008, Oracle. All rights reserved.

PPR: partialTriggers
Add autoSubmit or partialSubmit and a unique ID to the item that initiates the change. Add the partialtrigger attribute to items that watch.
A single component can watch multiple components. Multiple components can watch a single component.

Note: Sometimes the parent container must watch the component itself, for example, menus.

8 - 13

Copyright 2008, Oracle. All rights reserved.

Agenda
Overview of ADF Rich Client Components Partial Page Rendering Task Flow Strategies Enhancing Pages:
Print Page Editable Boolean Check Box Data-Bound Graph Pop-Up Window

8 - 14

Copyright 2008, Oracle. All rights reserved.

Exploring Task Flow Strategies

The task flow options are:
Single .jspx page that contains regions Multiple .jspx pages in different bounded task flows Multiple .jspx pages in an unbounded task flow

You can use a combination of strategies.

8 - 15

Copyright 2008, Oracle. All rights reserved.

Using a Single .jspx with Regions

Considerations: Task flows that are displayed as regions:
Must contain page fragments (.jsff)

Cannot be run on their own

This increases the reusability of task flows. You cannot use the browsers Back button for navigation. You may need to use contextual events to coordinate regions.

8 - 16

Copyright 2008, Oracle. All rights reserved.

Using .jspx in Bounded Task Flows

Considerations: Call by using task flow call activities. Use parameters to pass values.

8 - 17

Copyright 2008, Oracle. All rights reserved.

Putting All Pages in a Single Task Flow

Considerations for using multiple .jspx pages in an unbounded task flow: It is easy to pass values with pageFlowScope.

Dependencies may decrease reusability.

8 - 18

Copyright 2008, Oracle. All rights reserved.

Agenda
Overview Partial Page Rendering Task Flow Strategies Enhancing Pages:
Print Page Editable Boolean Check Box Data-Bound Graph Pop-Up Window

8 - 19

Copyright 2008, Oracle. All rights reserved.

ADF Faces: Printable Pages

A page is printable if it fits on a physical page and shows only the printable text.

To create a printable page, insert

showPrintablePageBehavior

into the command component.

8 - 20

Copyright 2008, Oracle. All rights reserved.

Agenda
Overview of ADF Rich Client Components Partial Page Rendering Task Flow Strategies Active Data Service Enhancing Pages:
Print Page Editable Boolean Check Box Data-Bound Graph Pop-Up Window

8 - 21

Copyright 2008, Oracle. All rights reserved.

Editable Check Box in the ADF Faces Table

How is a check box used to toggle between two values? Constraints support an editable check box in an ADF Faces table to allow toggling a persistent status flag on or off. SQL does not have a native Boolean data type; most use a number data type. A status attribute may have two possible values: 0 representing false and 1 representing true. You can introduce a transient Boolean-valued attribute named StatusAsBoolean to work with the numerical true/false value as a Boolean.

8 - 22

Copyright 2008, Oracle. All rights reserved.

Model Requirements: Business Components

A SETTINGS table contains two columns: Code and Status. Create default EO and VO from the table. Add a transient attribute, StatusAsBoolean (set its Label to Status).

8 - 23

Copyright 2008, Oracle. All rights reserved.

Model Requirements: Custom Code

Generate a Java class for ViewRowImpl: Declare variables:
private static Number ONE = new Number(1); private static Number ZERO = new Number(0);

Modify accessors for the transient attribute:

getStatusAsBoolean to convert the numerical value to a Boolean when reading it

public Boolean getStatusAsBoolean() { return ONE.equals(getStatus()); }

setStatusAsBoolean to convert a Boolean value to the numerical value when writing it

public void setStatusAsBoolean(value) { setStatus((value) ? ONE : ZERO); }

8 - 24

Copyright 2008, Oracle. All rights reserved.

User Interface Modifications

Declaratively bind af:selectBooleanCheckbox to the StatusAsBoolean attribute in the current row.

8 - 25

Copyright 2008, Oracle. All rights reserved.

Run-Time Behavior
If the check box is already selected, deselect it, and vice versa. After this, click Commit. Verify that the changed Boolean check box states have been correctly saved as 0 or 1.

8 - 26

Copyright 2008, Oracle. All rights reserved.

Agenda
Overview of ADF Rich Client Components Partial Page Rendering Task Flow Strategies Active Data Service Enhancing Pages:
Print Page Editable Boolean Check Box Data-Bound Graph Pop-Up Window

8 - 27

Copyright 2008, Oracle. All rights reserved.

Creating Data-Bound Graphs

To create a data-bound graph, perform the following: 1. Drag a data collection to a page. 2. Choose to create it as a graph. 3. Set graph properties in the Create Graph dialog box, including:
Graph type Data points:

Typed attributes or name/value pairs Usage, attribute, and label The way to group data for the graph, with attribute and label

4. Preview in the preview tab. 5. Set other properties (such as titles) in Property Palette.
8 - 28

Copyright 2008, Oracle. All rights reserved.

Agenda
Overview of ADF Rich Client Components Partial Page Rendering Task Flow Strategies Active Data Service Enhancing Pages:
Print Page Editable Boolean Check Box Data-Bound Graph Pop-Up Window

8 - 29

Copyright 2008, Oracle. All rights reserved.

Displaying a Pop-Up Window

Use af:showPopupBehavior and af:popup:

Right-click to invoke a pop-up window.

8 - 30

Copyright 2008, Oracle. All rights reserved.

Summary
In this lesson, you should have learned how to: Describe the use of ADF Rich Client components Use PPR on a JSF Page Compare different task flow strategies Work with ADF components to enhance a page

8 - 31

Copyright 2008, Oracle. All rights reserved.

Practice 8 Overview: Using ADF Faces

These practices cover the following topics: Creating a data-bound graph Using partial page rendering to refresh the graph Implementing an active data service for the graph Using pop-up pages

8 - 32

Copyright 2008, Oracle. All rights reserved.