Binding UI Components to Data

Copyright 2008, Oracle. All rights reserved.

 Objectives

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

following:
Create a JSF page
Add ADF Faces UI components to a page
Include databound components on a page
Create and edit data bindings

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

 Creating a JSF Page

Use New Gallery

OR task flow
diagram.

<?xml version='1.0' encoding='UTF-8'?>

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF8"/>
<f:view>
<af:document>
<af:form/>
</af:document>
</f:view>
</jsp:root>

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

 Adding UI Components to the Page

You can create components on a page by:

Dragging a component from the Component Palette
Using the context menu in editor or Structure window
Dragging a data element from the Data Controls panel

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

 Using the Component Palette

Drag the component from the Component Palette:

Component category
pop-up list

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

 Using the Context Menu

Context menu of
Structure
window

Context menu of
editor

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

 Using the Data Controls Panel
The Data Controls panel:
Is a visual representation of your
business service that contains:
Methods
Parameters and
results
Attributes
Collections
Built-in operations
Provides automatic data binding for
any business service; for example,
there automatically is a data control
for every ADF BC application
module

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

 Describing the ADF Model Layer

Data controls describe

the public interface of a
business service.
Bindings connect UI Bindings Bindings
components to data or
actions.
Data controls and
bindings are defined
Data Control
by using XML metadata.

Business service

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

 Types of Data Bindings

Iterator Binding: Keeps track of the current row in a data

collection.
Iterator Accessor iterator
Method iterator Variable iterator

Value Binding: Connects UI components to attributes in a

data collection; examples: attribute binding, tree binding,
list binding, table binding
Action Binding: Invokes a method or operation

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

 Using Expression Language (EL)

Use Expression Builder

to declaratively create EL
expressions.

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

 Expression Language and Bindings

Data binding expressions are written using EL.

They are evaluated at run time to determine what data to
display.
ADF EL expressions typically have the form:
#{bindingVariable.BindingObject.propertyName}
Example of an inputText component in a JSF page:

<af:inputText
value="#{bindings.Ename.inputValue}
label="#{bindings.Ename.label}
required="#{bindings.Ename.mandatory}">

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

 Creating and Editing Data Bindings

Data Bindings:
Are created automatically when you drag them from the
Data Controls panel to a page or panel
Can also be created and edited in the editor, the Property
Palette, or the Structure window

Quantity: 7

Price: $3.49

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

 Rebinding: Example

In the visual editor or its Structure window, perform the

following steps:
1. Right-click the component.
2. Select Rebind to Another ADF Control.
3. Select a different control to bind to.

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

 Opening a Page Definition File

The page definition file <pagename>PageDef.xml (for

example, browseOrdersPageDef.xml):
Is created automatically when you add
a databound component to a page
Contains all the binding definitions
for a page
To open a page definition, perform the
following steps:
1. Right-click the page in the editor or
Application Navigator.
2. Select Go to Page Definition.

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

 Editing Bindings in a Page Definition File

2 3 4

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

 Editing Bindings from a Page

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

 Tracing Data Binding:
From Database to Databound Components

Database table ADF BC ADF BC ADF BC

Entity Object View Object Application
Module

ADF Model
Databound components on a JSP Binding Container Data Control

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

 Tracing Data Binding:
From AM to Data Control

JDeveloper creates data

controls for each ADF
BC application module.

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

 Tracing Data Binding:
Creating Databound Components
Data Control

Page

Example: Drag OrderVO1 to a page and

create as an ADF Form with navigation.

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

 Tracing Data Binding:
From Data Control to Databound Components
Data Control
Binding
container
Page

The OrderId field is bound to the OrderId

attribute, using an attribute (value) binding.
The iterator binding ensures that the current
row is displayed.

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

 Tracing Data Binding:
From Data Control to Databound Components
Data Control
Binding
container
Page

The OrderShippedDate field is bound to the

OrderShippedDate attribute, also using
an attribute binding.

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

 Tracing Data Binding:
From Data Control to Databound Components
Data Control
Binding
container
Page

The Next button uses an action binding to

call the Next operation, which increments
the current row in the iterator binding.

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

 Examining Data Binding Objects
and Metadata Files

Structure
Page definition
Binding Data file
definition
Container Control
file
*.xml
*PageDef.xml

Binding Context Data

Controls
definition
Binding file
context DataControls.dcx
definition file

DataBindings.cpx

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

 Binding Existing Components to Data

You can add data binding to existing components:

1. Right-click the component and select Bind to ADF Control.
2. Select a data control object from the Bind to ADF Control
dialog box.

1 2

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

 Accessing Data Controls and Bindings
Programmatically

Use methods in DCBindingContainer.

Example of accessing an ADF BC application module:
DCBindingContainer bc = getBindingContainer();
MyAppModule
myAM = (MyAppModule)bc.findDataControl
("MyAppModuleDataControl").getDataProvider();
//Now use myAM to call app module methods.

Example of getting an attribute from an iterator binding:

DCBindingContainer bc = getBindingContainer();
String empname = (String)bc.findIteratorBinding("empIter")
.getCurrentRow().getAttribute("EmpName");

Access binding container with convenience API:

BindingContainer bc =
BindingContext.getCurrent().getCurrentBindingsEntry();

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

 Running and Testing the Page

1 2

1. Run the page.

2. Test the functionality.

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

 Summary

In this lesson, you should have learned how to:

Create a JSF page
Add ADF Faces UI components to a page
Include databound components on a page
Create and edit data bindings

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

 Practice 12 Overview:
Creating Databound Pages

This practice covers the following topics:

Creating simple JSF pages
Creating and editing data bindings
Examining metadata files
Changing the file name of a JSP
Editing metadata files to maintain data binding

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