14

Adding Functionality to Pages

Copyright 2008, Oracle. All rights reserved.

 Objectives

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

following:
Internationalize the user interface
Use component facets
Enable users to:
Select a value from a list
Select a date from a calendar
Display tabular data in tables
Display hierarchical data in trees
Display text or media with icons and images
Define search forms and display results
Display data graphically

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

 Internationalization

Internationalization is the support for multiple locales.

Localization is the process in which support for a specific
locale is added.
ADF Faces components provide automatic translation (into
28 languages).

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

 Resource Bundles

Resource bundles contain locale-specific strings used in an

application.
Translation strings can include parameters.
You do not need to load the base resource bundle on each
page of your application.
UIResources.properties
str.browserTitle=StoreFront Sample Application
str.about=About this sample
str.copyright=\u00a9 Oracle Corp, 2007
str.contact=Contact Us

UIResources_de.properties

str.browserTitle=StoreFront Beispielanwendung
str.about=ber dieses Beispiel
str.copyright=\u00a9 Oracle Corp, 2007
str.contact=Kontakt

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

 Steps to Internationalize an Application

1. Create a base resource bundle containing all text strings

that are not part of the components themselves.
2. Create a localized resource bundle for each locale
supported by the application.
3. Register the locales with the application.
Part of
4. Use the resource bundle on your page. the
component
CANCEL=Cancel
CANCEL=Annullieren

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

 Automatically Creating a Resource Bundle

Set project to create a resource bundle automatically:

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

 Automatically Creating a Text Resource

1 3

2 4

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

 Using Component Facets

Facets are:
Placeholders for subcomponents
Similar to detail elements
Used to specify subordinate elements such as toolbars,
headers, or footers
Displayed with the component

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

 Using ADF Faces Rich Client Components

This lesson discusses the following types of components:

Input components
List components
Dates
Table and tree components
Output components
Query components
Data visualization components

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

 Using ADF Faces Input Components

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

 Defining a List

You can define a list:

At the model layer
In the UI

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

 Defining Lists at the Model Layer

1 2

14 - 14 Copyright 2008, Oracle. All rights reserved.

 Selecting a Value from a List

Input select components:

Item: af:selectItem
List of values: af:inputListOfValues,
af:selectOneListBox, af:selectManyListbox
Combo Box: af:inputComboboxListOfValues
Check Box: af:selectBooleanCheckbox,
af:selectManyCheckbox
Menu: af:selectOneChoice, af:selectManyChoice
Radio group: af:selectBooleanRadio
Radio item: af:selectOneRadio
Shuttles: af:selectManyShuttle,
af:selectOrderShuttle

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

 Selecting a Date

Date attributes are automatically created as af:inputDate

components:

<af:inputDate value="#{bindings.OrderDate.inputValue}"
label="#{bindings.OrderDate.label}"
required="#{bindings.OrderDate.mandatory}">
<af:convertDateTime pattern="#{bindings.OrderDate.format}"/>
</af:inputDate>

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

 Using ADF Faces Table and Tree Components

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

 Using Tables

ADF Faces table component adds to JSF table by

providing:
Column sorting
and reordering

Data filtering
Row selection
(single or
multiple rows)

There are many formatting options for ADF tables.

14 - 19 Copyright 2008, Oracle. All rights reserved.

 Rendering (Stamping) the Table Data

Each child component of a column is stamped once per row, so

no embedded stamped components:
<af:table var="row" value="#{myBean.allEmployees}">
<af:column>
<af:outputText value="#{row.firstname}"/>
</af:column>
<af:column>
<af:outputText value="#{row.lastname}"/>
</af:column>
<af:table var="row" value="#{myBean.EmployeeManager}">
<af:column>
<af:outputText value="#{row.firstname}"/>
</af:column>
<af:column>
<af:outputText value="#{row.lastname}"/>
</af:column>
</af:table>
</af:table>

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

 Setting Table Attributes
Type Description Attribute(s) Setting(s)

Grid Lines Lines separating verticalGridVisible true or false

cells horizontalGridVisible
(table attribute)

Banding Alternating rowBandingInterval number of rows or

background columnBandingInterval columns you want to
(table attribute)
colors be in each band

Column or row Labels for header facet or headerText text to display in

headers columns or rows attribute header

rowHeader column attribute true or false

Column groups Common label for To group columns, nest af:column tags, using the
group of columns outer af:column tag as the group, and the inner tags
as the columns within the group.

Column Align, wrap, Align start,end,left,

formatting width, height right, center
nowrap true or false
width, height number or %

14 - 21 Copyright 2008, Oracle. All rights reserved.

 Using Trees

14 - 23 Copyright 2008, Oracle. All rights reserved.

 Using Tree Tables

Tree tables:
Display hierarchical data
in a table
Combine features of
trees and tables

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

 Providing Data for Trees

<af:tree
value="#{bindings.RootCategory1.treeModel}"
var="node">
<f:facet name="nodeStamp">
<af:outputText value="#{node}"/>
</f:facet>
</af:tree>

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

 Providing Data for Trees

A tree binding rule for the root tree node, with an additional level
for the child collection, provides the hierarchical data.

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

 Using ADF Faces Output Components

With output components, you can:

Display messages, text, icons, and
images
Play audio and video files
Source: <af:messages/>
<af:outputText value="Error icon:"/>
<af:icon name="error"
shortDesc="Error Icon"/>
<af:outputText value="Info icon:"/>
<af:icon name="info"/>
<af:outputText value="Media component: "/>
<af:media source="/Brian.wma"
Design time: standbyText="One moment please"/>

Run time:

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

 Using ADF Faces Query Components

14 - 29 Copyright 2008, Oracle. All rights reserved.

 Using the af:query Component

Advanced mode query with dynamically added search criterion

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

 Using the af:quickQuery Component

A quick query:
Has a selectable list of attributes to search on
Has a single search criterion input field
Can have a link to more advanced search capabilities, with
switching implemented in managed bean

Quick query component in horizontal layout

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

 Creating a Query Search Form

Drag a named criteria from the Data Controls panel:

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

 Modifying Query Behavior

You can set properties that affect query behavior:

On the models view criteria: On the query in the UI:

14 - 35 Copyright 2008, Oracle. All rights reserved.

 Using
ADF Data Visualization Components

Common features:
Design time creation by
using:
Data Controls panel
JSF visual editor
Property Inspector
Component Palette
Live data preview at
design time
Support for data binding

14 - 36 Copyright 2008, Oracle. All rights reserved.

 Visualizing Data

The following types of data visualization components are available:

Gauge
Graph

Gantt chart Pivot table Geographic

map

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

 Summary

In this lesson, you should have learned how to:

Internationalize the user interface
Use component facets
Enable users to:
Select a value from a list
Select a date from a calendar
Display tabular data in tables
Display hierarchical data in trees
Display text or media with icons and images
Define search forms and display results
Display data graphically

14 - 39 Copyright 2008, Oracle. All rights reserved.

 Practice 14 Overview:
Using ADF Faces Components

This practice covers the following topics:

Using a tree component
Creating a search page
Defining LOVs

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