Achieving the Required Layout

Copyright 2008, Oracle. All rights reserved.

 Objectives

After completing this lesson, you should be able to do the

following:
Use complex layout components
Explain how to use ADF Faces skins
Use dynamic page layout

16 - 2 Copyright 2008, Oracle. All rights reserved.

 Using ADF Faces Layout Components

You can use the following components to achieve the desired

layout:
af:spacer af:panelGroupLayout
af:separator af:panelCollection
af:panelSplitter af:panelHeader
af:panelStretchLayout af:showDetailHeader
af:panelAccordion af:group
af:panelFormLayout af:panelList
af:panelTabbed af:panelBox
af:showDetail af:panelBorderLayout

16 - 3 Copyright 2008, Oracle. All rights reserved.

 Adding Spaces and Lines

Output text on a page

No spacers With spacers and separator

<af:form>
<af:spacer width="10"/>
<af:outputText value="outputText1"/>
<af:spacer width="10"/>
<af:outputText value="outputText2"/>
<p><af:spacer height="10"/></p>
<af:separator/>
<p><af:spacer height="10"/></p>
<af:spacer width="10"/>
<af:outputText value="outputText3"/>
<af:spacer width="10"/>
<af:outputText value="outputText4"/>
</af:form>

16 - 4 Copyright 2008, Oracle. All rights reserved.

 Stretching Components

Enable stretching so that a component fills the designated area,

such as browser window:

16 - 5 Copyright 2008, Oracle. All rights reserved.

 Enabling Automatic Component Stretching:
Panel Splitter or Panel Stretch Layout

Table on page:

Same table within

stretched Panel Stretch
Layout component:

16 - 6 Copyright 2008, Oracle. All rights reserved.

 Stretching a Table Column

Table with no stretched columns:

Table with last column stretched :

16 - 7 Copyright 2008, Oracle. All rights reserved.

 Creating Resizable Panes
Panel Splitters
af:panelSplitter
Horizontal Vertical
orientation: Nested: orientation:

16 - 8 Copyright 2008, Oracle. All rights reserved.

 Printing Layout Panel Content

<af:commandButton text="Printable Page">

<af:showPrintablePageBehavior/>
</af:commandButton>

16 - 9 Copyright 2008, Oracle. All rights reserved.

 Creating Collapsible Panes
with the Panel Splitter Component

Attributes:
collapsed positionedFromEnd Behavior

true false First pane hidden; second pane

stretches
true true Second pane hidden; first pane
stretches
false true Both panes displayed, with
splitterPosition governing size
of 2nd pane and splitter arrow pointed
toward 2nd pane
false false Both panes displayed, with
splitterPosition governing size
of 1st pane and splitter arrow pointed
toward 1st pane

16 - 10 Copyright 2008, Oracle. All rights reserved.

 Creating Collapsible Panes
with the Panel Accordion
With default settings Characteristics of Panel
Accordion component:
Does not automatically
stretch it children
Panes cannot be resized
at run time only expand
or contract
Panes defined by
showDetailItem
<af:panelAccordion>
<af:showDetailItem text="This is a pane"/>
<af:showDetailItem text="This is another pane"/>
</af:panelAccordion>

16 - 11 Copyright 2008, Oracle. All rights reserved.

 Panel Accordion Overflow

Automatic overflow icons

to display
content out of view

16 - 12 Copyright 2008, Oracle. All rights reserved.

 Setting Panel Accordion Properties

<af:showDetailItem <af:showDetailItem
text="Browse Products" text="Selected Product"
inlineStyle="width:100%; inlineStyle="width:100%;
height:100%;" flex=1"> height:100%;" flex="2">

With discloseMany="true"
discloseNone="true"

16 - 13 Copyright 2008, Oracle. All rights reserved.

 Arranging Items in Columns or Grids

Use af:panelFormLayout with labels above or below the

text:

Use rows and maxColumns attributes to arrange items in the

form:

16 - 15 Copyright 2008, Oracle. All rights reserved.

 Creating Stacked Tabs

Use af:panelTabbed; use af:showDetailItem for each

tab:
<af:panelTabbed position="both">
<af:showDetailItem text=Categories">
<! Root categories table here -->
</af:showDetailItem>
<af:showDetailItem text=Subcategories">
<! Subcategories table here -->
</af:showDetailItem>
<af:showDetailItem text=Products">
<! Products table here -->
</af:showDetailItem>
</af:panelTabbed>

16 - 17 Copyright 2008, Oracle. All rights reserved.

 Hiding and Displaying Groups of Content

<af:showDetail>
<af:panelGroupLayout layout="vertical">
<af:outputText value="Indexed Child 1"/>
<af:outputText value="Indexed Child 2"/>
</af:panelGroupLayout>
</af:showDetail>

16 - 18 Copyright 2008, Oracle. All rights reserved.

 Arranging Items Horizontally or Vertically, with
Scrollbars

Panel group layout inside stretched

Panel group layout arrangements
panel splitter does not stretch its children

16 - 20 Copyright 2008, Oracle. All rights reserved.

 Displaying Table Menus, Toolbars, and Status
Bars

Use panelCollection for table with menus and toolbars:

16 - 22 Copyright 2008, Oracle. All rights reserved.

 Creating Titled Sections and Subsections

Panel header
component with
sections and
subsections:
af:panelHeader

Show detail header component with sections that expand or

collapse: af:showDetailHeader

16 - 24 Copyright 2008, Oracle. All rights reserved.

 Grouping Related Components

Use af:group to:

Add multiple components to a facet
Group related <af:panelFormLayout>
child components
</af:panelFormLayout>
<af:inputDate label="Pick a date"/>
<!-- first group -->
<af:group>
<af:selectManyCheckbox label=
"Select all that apply">
<af:selectItem label="Coffee" value="1"/>
//other select items
</af:selectManyCheckbox>
<af:inputText label="Special instructions"
rows="3"/>
</af:group>
<!-- Second group -->
<af:group>
<af:inputFile label="File to upload"/>
<af:inputText label="Enter passcode"/>
</af:group>
<af:inputText label="Comments" rows="3"/>
<af:spacer width="10" height="15"/>
<f:facet name="footer"/>

16 - 25 Copyright 2008, Oracle. All rights reserved.

 Displaying a Bulleted List

Use af:panelList to display a bulleted list in one or more

columns.
To create columns, nest inside af:panelFormLayout and set
the rows property:

Create a list hierachy with nested

af:panelList components:
Specify bullet style
by setting
list-style-type to:
disc decimal
square lower-alpha
circle upper-alpha

16 - 26 Copyright 2008, Oracle. All rights reserved.

 Displaying Items in a Content Container
Offset by Color

Use af:panelBox to display items in a content container

offset by color.

16 - 27 Copyright 2008, Oracle. All rights reserved.

 Arranging Content Around a Central Area:
Panel Border Layout
Panel Border Layout: Predefined named areas around a
central area where direct child content is displayed.

16 - 28 Copyright 2008, Oracle. All rights reserved.

 Arranging Content Around a Central Area:
Panel Stretch Layout

The panel stretch layout component:

Can arrange content around a central area
Does not render anything by itself
Has fewer facets than panel border, with no direct children

The panel stretch layout component at design time

16 - 30 Copyright 2008, Oracle. All rights reserved.

 Using ADF Faces Skins

ADF Faces skins:

Provide a global style sheet for an application
Use a CSS file to set styles
Use a resource bundle for text
Included skins:
Oracle
Minimal
Simple

16 - 31 Copyright 2008, Oracle. All rights reserved.

 Using Dynamic Page Layout

Dynamic page layout is made possible by using:

Expression Language (EL)
Partial Page Rendering (PPR)

16 - 32 Copyright 2008, Oracle. All rights reserved.

 Using Expression Language to Conditionally
Display Components

You can use EL for any of a components attributes.

Example of setting attributes with EL:
<af:selectOneChoice
value="#{bindings.CardTypeCode.inputValue}"
label="#{bindings.CardTypeCode.label}"
partialTriggers="PaymentType"
rendered="#{bindings.PaymentTypeCode.inputValue == 'CC'}">
<f:selectItems value="#{bindings.CardTypeCode.items}"/>
</af:selectOneChoice>

16 - 33 Copyright 2008, Oracle. All rights reserved.

 Characteristics of Partial Page Rendering (PPR)

PPR:
Is enabled by ADF Faces
Enables redrawing only a portion of a page
Requires server round-trip:
Rerenders only a portion of the server-side component tree
Downloads only the appropriate fragment of HTML
Currently certified on IE 7.0+ and Firefox 2.0.0.2 +
Supported (but not certified) on Firefox 3.0 and Safari 3.1.2
Implements certain ADF Faces patterns
Single component refresh
Cross-component refresh
Can be enabled declaratively or programmatically

16 - 34 Copyright 2008, Oracle. All rights reserved.

 Enabling PPR Declaratively

Triggering component:
(must have unique ID and
cause a Submit)

Target component:

(must specify triggering

component)
16 - 35 Copyright 2008, Oracle. All rights reserved.
 Native PPR Example

16 - 37 Copyright 2008, Oracle. All rights reserved.

 Declarative PPR Example

<af:commandToolbarButton <af:commandToolbarButton
id="updateToolbarButton" id="deleteToolbarButton"
text="Update Shopping Cart"/> text="Delete/>

<af:table
<af:commandMenuItem
//bindings
id="menuDelete" partialSubmit="true"
partialTriggers="deleteToolbarButton text="Delete"/>
menuDelete updateToolbarButton">
//list of columns
</af:table>

16 - 38 Copyright 2008, Oracle. All rights reserved.

 Enabling PPR Programmatically

Why?
Need logic to determine if component should refresh
Refresh should occur on only one of several events that a
triggering component may fire (for example, on row selection
in table, use a selection listener)
How? Use the addPartialTarget method.

16 - 40 Copyright 2008, Oracle. All rights reserved.

 Enabling Automatic PPR

To enable automatic PPR:

Select a binding in the
page definition file
Set ChangeEventPolicy
to ppr

16 - 41 Copyright 2008, Oracle. All rights reserved.

 Conforming to PPR Guidelines

Purposes of PPR:
Improve application performance
Improve the user experience
Guidelines for using PPR:
http://www.oracle.com/technology/tech/blaf/specs/ppr.html
PPR should not be used:
When navigating to another page
When response times may be long
When multiple sections of the page need to be redrawn
PPR may cause accessibility issues.

16 - 42 Copyright 2008, Oracle. All rights reserved.

 Summary

In this lesson, you should have learned to:

Use complex layout components
Explain how to use ADF Faces skins
Use dynamic page layout

16 - 43 Copyright 2008, Oracle. All rights reserved.

 Practice 16 Overview:
Using ADF Faces Layout Components

This practice covers the following topics:

Modifying the layout of pages
Defining partial page rendering

16 - 44 Copyright 2008, Oracle. All rights reserved.