Oracle ???

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.

Time to Complete:

Approximately 45 minutes

Topics

The tutorial covers the following topics:

Overview
Prerequisites
Partial Page Rendering
ADF Faces dialog framework

Single and multi selection tables
Tree component
Summary

Viewing Screenshots

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.

Back to Topic List

Prerequisites

Before you begin this tutorial, you should:

1.

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.

Back to Topic List

Partial Page Rendering

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 SelectOneChoice property 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.

Close your Browser window.

Back to Topic List

ADF Faces Dialogs Framework

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.

Creating the Dialog Window
Building the Call to the Dialog Window

Creating the Dialog Window

1.

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.

Click OK.

Back to List

Building the Call to the Dialog Window

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.

 

13.

Close the Browser window.

 

Back to Topic List

Single and Multi Selection Tables

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.

 

21.

The updates are reflected in the Table page.

 

22.

Close your browser window.

Back to Topic List

Working with Trees

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.

Back to Topic List

Summary

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:

Partial Page Rendering

ADF Faces dialog framework

Single and multi selection tables

Tree component

Back to Topic List

Place the cursor over this icon to hide all screenshots.