Developing Rich UIs with JSF--Introduction to ADF Faces/Trinidad
Introduction to ADF Faces/Trinidad Using JDeveloper
Purpose
This tutorial introduces the JavaServer Faces developer to
some of the more complex user interface components provided by Oracle ADF Faces
and the open source Trinidad component, which are available from the Apache
incubator. During this tutorial, you explore ADF Faces with Oracle JDeveloper.
Place
the cursor over this icon to load and view
all the screenshots for this tutorial . (Caution: This action loads all
screenshots simultaneously, so, depending on your Internet connection,
may result in a slow response time.)
Note: Alternatively, you can place the cursor
over an individual icon in the following steps to load and view only the screenshot
associated with that step. You can hide an individual screenshot by clicking
it.
Overview
You will explore ADF Faces with Oracle JDeveloper through
a series of independent topics. Starting from a prebuilt
application, you implement some complex UI components. The prebuilt workspace
also uses some advanced features such as Menus and Partial Page Rendering.
Have access to or have installed Oracle JDeveloper
(10.1.3.1.0) or Oracle JDeveloper (10.1.3.2.0). You can download it
from Oracle
Technology Network.
2.
Click here
to download the 10.1.3.1 version of the prebuilt application in a zip
file format onto your system.
or
Click here
to download the 10.1.3.2 version of the prebuilt application in a zip
file format onto your system.
3.
Unzip the jsftrinidad<version>.zip
file in the (<jdev_home>/jdev/mywork/)
directory.
4.
Start JDeveloper. Double-click the JDeveloper executable
jdeveloper.exe
found in the root directory (<jdev_home>)
where you unzipped it.
If the Migrate User Settings dialog box opens, click
NO.
Close the Tip of the Day window.
5.
The JDeveloper IDE should now be displayed.
6.
In JDeveloper select File | Open.
In the Open dialog, select the file jsftrinidad.jws
in the (<jdev_home>/jdev/mywork/jsftrinidad)
directory, then Open.
The ADF Faces Framework lets you enable a command
component to partially refresh another component.
1.
In JDeveloper, open the viewlayer
project, right click the viewlayer node and select
Open JSF Navigation from context.
The Diagram should look like this:
2.
Double click the Dialog.jspx icon
to open the Design editor for the page.
This page has predefined Input Text fields. You are going to add 2
dropdown lists.
3.
From the Component palette, drag a SelectOneChoice component
and drop it below the Address input text field. A dialog
displays that enables you to bind the SelectOneChoiceproperty
to the list source and the target value property.
4.
On the Select tab, press the Bind
button next to the Value field and search for the dialogbean
managed bean. In this bean, select the stateSelectItems
and click the
button to shuttle it in the expression pane, then click OK.
Closing the Expression Language builder creates the following binding
string: #{dialogbean.stateSelectItems} . Of course, you
can type the string directly into the value field if you don't need the
declarative editor.
On the Common Properties tab, enter the Label value
State and the Value as #{userbean.state}.
This will make sure that the value selected from the list is written to
the user bean, which represents the model for this project.
Select the Advanced Properties tab, then select the
Bindings property and press the
button to launch the binding dialog. In the dialog, select the dialogbean
entry in the Managed Bean section.
In the Property field, selectOneChoice1
then OK to get back to the Advanced
Properties tab.
5.
Still in the Advanced Properties
tab, set the following properties
Property
Value
AutoSubmit
true
Id
selectOneChoice1
Immediate
true
Click OK.
Note: Setting the immediate
property to true will bypass the JSF lifecycle as it is not needed for
the select operation.
6.
Drag and drop another SelectOneChoice
component below the State one.
7.
On the Select tab, add the value
to #{dialogbean.citySelectItems}
or use the ExpressionLanguage builder.
8.
On the Common Properties tab, set
the Label to City and the value to #{userbean.city}
9.
Select the Advanced Properties tab and choose the Binding
property. Press the
button.
In the Binding dialog, choose dialogbean from the list
of Managed Beans. In the Property value, select selectOneChoice2.
Press OK to create the new binding.
10.
Select the PartialTriggers property
and press the
button to bring the PartialTriggers dialog up.
Press the New button and click into the newly created
selection to bring up a dropdown list. From the dropdown list select
the selectOneChoice1 option.
Note: This setting will refresh the SelectOneChoice
component whenever the State SelectOneChoice changes its selected value.
You use partial page rendering in ADF Faces to create dependent listboxes
Close the SelectOneChoice dialog by pressing
OK.
11.
Right click the Dialog.jspx in the Applications
Navigator and select Run from context.
12.
The Dialog page is loaded in your default browser, showing 2 empty dropdown
lists for the fields you added.
13.
Select one state from the states list.
14.
Now select a city from the cities list.
Note: Partial Page Rendering is used when displaying
values for the City. The City list depends on the choice of state.
The ADF Faces Dialog Framework allows you to display
modal dialog windows for the user to search and select information, or to provide
information. Using the dialog's process scope, it is possible to create wizard
type of applications that can share values between pages. A return listener
can be registered for dialogs to notify the launching component about the user
closing the dialog. In response, values passed from the dialog to the calling
page can be read and used.
During this section, you create a JSF page that displays
a newly created user. To create a new user, a button is used to launch a data
entry form displayed in a dialog. The dialog's return value is a message string
containing the actual date and time of the user creation.
Back in JDeveloper, click the faces-config.xml
tab to open the page flow diagram.
2.
From the JDeveloper Component palette (Ctrl+shift+P),
select the JSF Navigation Case component and draw a
line from the Main.jspx page to the Dialog.jspx
page.
3.
Rename the navigation link
from success to dialog:open.
Using the prefix "dialog:" for a navigation case indicates
to ADF Faces that this page should be displayed in a dialog.
4.
Double-click the Dialog.jspx icon to open the Design
editor for the page.
5.
From the Component Palette in JDeveloper, add an
InputTextField below the second SelectOneChoice
(City) and set the following properties:
Label
Zipcode
Value
#{userbean.zipcode}
Required
false
6.
To create a reset and submit button, drag a PanelGroup
component from the component palette to the footer facet
of the PanelForm
7.
From the component palette, add a ResetButton
and a CommandButton component in the panelGroup.
In the property inspector, set the Text property of
the reset button to Reset and the Text
property of the submit button to Submit.
8.
Select the Submit button, and select
the Action property in the property inspector. Press
the button
and choose the dialogbean as the value for the Managed
Bean property. Select the submitDialogAction in the
Method selectbox.
In this section, you create an Action in the Main page that
calls the Dialog page. Then, by running the Main.jspx page, you can experiment
with changing the look and feel of your application by using the skinning feature.
1.
Open the Main.jspx file by either double-clicking the
file entry in the Applications Navigator or in the faces-config.xml visual
editor.
2.
Select the Create Customer button,
open the property inspector and set the following properties:
Property
Value
Comment
Action
dialog:open
Initiates the navigation to show the dialog
PartialSubmit
true
Prevents the page from reloading when pressing
the button
ID
createUserButton
This ID name is used later to refresh the page,
using partial page rendering
UseWindow
true
Opens dialog in a new Window
Select the ReturnListener property and press the
button. In the Managed Bean list, select the dialogbean,
in the Method field select the returnFromProcess
Press OK to close the dialog
3.
In the Structure Window, select the af:panelPage
element and open the property inspector
4.
Select the PartialTriggers property
and press the
button.
Note: the existing skinSelector entry, which is a
predefined partial trigger to dynamically change the page look and feel,
a feature called skinning. You explore the skinning feature when running
the Main.jspx page.
5.
Press the New button in the displayed
dialog. Select the new entry and select the createUserButton
from the dropdown list. This will make the panel page refreshing when
the button is pressed.
Click OK
6.
Navigate to the faces-config.xml
diagram and select Main.jspx icon.
7.
Right click and select the Run
option to test the application.
8.
The Main page opens up in your default browser.
9.
Click the dropdown list next to the Skin Selector item and choose OOW
Skin value. The page refreshes, displaying a new UI reflecting
the oow style sheet.
Note: The oow.css style sheet is
defined in the Web Content > skins folder.
10.
You can set the Skin Selector back to the original
Oracle Skin value.
Click the Create Customer button to call up the dialog.
11.
In the Dialog window fill in the form with values
of your choice.
Click Submit.
12.
The Main page reflects the values entered in the
dialog window with an information message at the bottom of the page.
During this exercise, you work with single and multi select table
components. In addition, you learn how to programmatically launch a dialog.
The first part of the exercise is to build a single select table with editing
functionality. The second part is to run the Table.jspx file and to explore
the multi select table components, which is pre-defined in the workspace.
1.
In the faces-config.xml editor, double-click the Table.jspx
icon to open the page.
2.
From the Component Palette, drag a table
component to the Single Row Select tab
3.
In the table binding wizard, press Next
to skip the Welcome page. In step 1, press the Bind
button next to the Value field. From the ExpressionLanguage
builder select singleselectionhandler > tableModel
and click the
button to shuttle it in the Expression pane.
Click OK.
4.
Set the Var field value to row.
Press the Browse button for the Data Type
Hint field and type Customer. Select the CustomerBean
class in the package oracle.adffaces.handson.model
from the list.
Click OK.
The Data Type Hint field should show oracle.adffaces.handson.model.CustomerBean.
This hint is required for the wizard to determine the table columns
as displayed on the next wizard page.
Click Next.
5.
In Step 2 of the table wizard, delete the column named Selected,
and order the columns so that they show in the following order : Full
Name, Address, Phone, Email,
Company .
Click Next.
6.
In Step 3 of the wizard, mark the column to be sortable. Sorting is an
integrated feature of the ADF Faces table component. Select each of the
columns and provide the following values
COLUMN
IS SORTABLE
SORT PROPERTY
Format Type
Full
Name
check
fullname
icon
Address
check
address
icon
Phone
check
phone
icon
Email
check
email
icon
Company
check
company
icon
Click Next.
7.
In Step 4 of the wizard, define the following values:
PROPERTY
VALUE
COMMENT
Include Range Navigation
5
Enter a number to represent the number of rows
displayed in the table per request. If more than that number of
rows is returned, the table displays active navigation links that
allow the user to retrieve the next or previous set of rows. If
the total number of rows is known, the table displays links that
allow the user to navigate to a particular row set.
Include Selection Column
Select "Single Selection"
Select to insert a left-most column that allows
the user to select a row to make it the current row, using the selection
facet. Select "Single Selection" to use radio buttons
that allow a user to select only one row. This inserts an af:tableSelectOne
tag inside the selection facet.
Include Table Banding
Rows
Select to insert alternating bands of background
color. This sets the af:table tag's banding attribute. Rows Select
to alternate row colors.
Banding Interval
1
Finish the dialog for the table to create.
8.
Select the table in the visual
editor (you can also select it in the Structure pane) and open the Property
Inspector. Select the Binding property and click onto
the button.
9.
In the ManagedBean field, select
the singleselectionhandler entry and in the Property
field select table1.
Close the dialogs by pressing OK
10.
Select the af:table component
in the Structure pane. Expand the table node to see
the Table facets and expand it.
11.
From the component palette, drag and drop a PanelButtonBar
component to the actions Facet in the Table
facets node.
12.
Drag and drop a CommandButton
component from the component palette into the PanelButtonBar
13.
Select CommandButton 1 and open
the property inspector. Set the Text property to Edit
and the PartialSubmit property to true.
14.
Select the ActionListener property
and press the
button. In the ActionListener dialog, select tablebean
from the dropdown list as the Managed Bean. Select the launchEditDialog
value in the Method field
Click OK.
15.
In the Property Inspector, still for the command
button, select the ReturnListener property and press
the button.
In the Managed Bean field, select the tablebean entry.
Select processReturnFromEdit as the Method.
Click OK.
16.
Select the Binding property and
press the
button. In the Managed Bean field select the tablebean
entry. In the Property field select commandButton1.
Click OK.
17.
Click the Run icon
to launch the Table page in your Browser.
In the Edit Customer page, select a customer and click Edit.
18.
The EditSingleTable Row page displays the selected
customer info. Make any change you want.
Click Submit to return to the Table page.
19.
Click the Multi Row Select link, and select more
than one Customer then click Edit.
20.
Update one or more of the Selected Customers and
click Commit to validate the changes.
This section shows how a master-detail relationship is built
between a hierarchical tree component and an ADF Faces table component. While
the underlying data model is pre-defined in the tutorial workspace, the tree
and table components are built during this section.
1.
From the faces-config.xml diagram, double click the
Tree.jspx icon to open the page to create the ADF Faces
hierarchical tree component and to bind it to the provided tree data model.
2.
From the Component Palette, drag the Tree component
onto the PanelPage component that already exists in the
page.
3.
In the opened dialog, provide the following values
PROPERTY
VALUE
Value
#{treehandler.treemodel}
Var
node
Node Stamp Component
af:outputText
Node Stamp Value
#{node.description}
Click OK.
4.
From the Component Palette, drag and drop a CommandLink
component next to the af:outputText Component. This can
be done in the visual editor or the StructureWindow. The command link
is only shown if the tree node is a department. Otherwise, the outputComponent
is displayed. The nodeType property of the tree node
allows you to determine the type of node.
5.
Open the Property Inspector and set the CommandLink Text
property to #{node.description}
6.
Set the Rendered property value to #{node.nodeType
== "department"}. To do this, click into the
Rendered property field and open the ExpressionBuilder by clicking onto
the database icon
in the Property Inspector toolbar. Type the EL #{node.nodeType == "department"}
into the expression field
Click OK.
7.
To wire-up the command link with a JSF action, select the ActionListener
property and press the
button
8.
Select treehandler
as the Managed Bean property. Select treeNodeSelected
as the Method.
Click OK.
9.
Select the af:outputText component
and open the Property Inspector.
10.
Set the Rendered property value to #{node.nodeType
!= "department"}. To do this, click into the
Rendered property field and open the ExpressionBuilder by clicking onto
the database icon
in the Property Inspector toolbar. Type the EL #{node.nodeType != "department"}
into the expression field
Click OK.
11.
Next, you develop the detail table. The master/detail behavior is
handled by the managed bean. In the Component palette, select the PanelBox
component and drag it below the af:tree component
12.
From the Component palette, select the Table component
and place it inside the PanelBox
13.
Click Next to skip the Welcome page of the Table wizard
and in the Binding Dialog, enter the following values
PROPERTY
VALUE
Value
#{treehandler.tableModel}
Var
row
Data Type Hint
oracle.adffaces.handson.model.EmployeeBean
Click Next.
14.
In step 2, order the table columns as follows: Ename,
Email, Phone, Hiredate,
Salary.
Click Next.
15.
Click Next on step 3 to keep the default settings.
16.
In step 4, set the Include Range Navigation option
and set the Row attribute to 5.
Click Finish to terminate the dialog.
17.
Select the af:table component in the Structure Window
and open the Property Inspector
18.
Select the Binding property and press the
button, then in the Binding dialog, select the treehandler
entry for the Managed Bean and in the Property field select detailTable
.
Click OK.
19.
Right click the Tree.jspx node in the Applications
Navigator and select the Run option from context.
20.
Expand the Root node and then expand the embedded nodes to experiment
with the Tree behavior.
In this tutorial , you used some of the most complex
user interface components provided by Oracle ADF Faces and the open source Trinidad
component such as:
button to shuttle it in the expression pane, then click OK.
button to launch the binding dialog. In the dialog, select the dialogbean
entry in the Managed Bean section.
to launch the Table page in your Browser.
in the Property Inspector toolbar. Type the EL #{node.nodeType == "department"}
into the expression field 
