Developing Ajax-Based User Interfaces with JSF: An Introduction to ADF Faces Rich Client Components

Purpose

In this tutorial, you learn how to create JSF pages using Oracle ADF Faces Rich Client (RC). Oracle ADF Faces Rich Client is a set of standard JSF components that include built-in Ajax functionality. While Ajax allows rich client-like applications to run on standard internet technologies, JSF provides server-side control, which reduces the dependency on an abundance of JavaScript often found in typical Ajax applications.

Time to Complete

60 minutes

Topics

The tutorial covers the following topics:

	Overview
	Scenario
	Prerequisites
	Open the Startup Application
	Create the Page Flow
	Use Layout Components to Design the Page
	ADF Table Component and ADF Binding
	Test the Main Page
	Work with the Image and Gauge components
	Work with Menus
	Work with Input Components
	Implement Partial Page Rendering
	Add Pop up Functionality to the Main Page
	Add Drag and Drop Functionality to the Main Page
	Use Skins to Change the Look and Feel of the Application
	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 response time may be slow depending on your Internet connection.)

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

This tutorial shows how to create ADF Rich Client JSF pages and exposes some easy to implement facilities such as Drag and Drop, Pop up and images.

Back to Topic List

Scenario

Starting from an existing application, you create a page flow diagram with two pages.

The main page holds the content of a shopping cart on one side and displays the available products on the other side. You implement a drag and drop functionality enabling you to fill your shopping cart by moving a selected product in the shopping cart area. You also create Tabs and Accordions and add a pop up window.

The Edit page displays the product details and enables you to update the characteristics of the selected product.

Back to Topic List

Prerequisites

Before starting the tutorial, you should:

Back to Topic List

Opening the Startup Application

Before you create any component, you must first open the startup application. To do this, perform the following steps:

1.	In the Application Navigator, click Open Application.
2.	In the Select Application to add dialog, locate the directory where you unzipped the Tutorial.zip file and select Tutorial.jws. Click Open. If prompted with a migration warning message, accept the migration.
3.	The application is loaded up in the Application Navigator.
4.	Expand the adffacesrc node. The Application Navigator should look like this:

Back to Topic List

Creating the Page Flow

You are going to use JDeveloper’s JSF Navigation Modeler to diagrammatically plan and create your application’s pages and the navigation between them.

1.	In the Application Navigator, expand the Web Content | WEB-INF nodes and double click the faces-config.xml file to open the page flow diagram.
2.	The empty diagram opens. Notice the Component Palette to the right of the diagram editor. You use this to create components for the JSF Navigation Model.
3.	In the JSF Navigation Diagram page of the Component Palette, select JSF Page , and click where you want the page to appear in the diagram. Rename the page main.jspx
4.	In the JSF Navigation Diagram page of the Component Palette, select JSF Page, and click next to the previous page. Rename the page edit.jspx
5.	Select JSF Navigation Case in the Component Palette. Click the icon for the source JSF page (main), and then click the icon for the destination JSF page (edit) for the navigation case.
6.	Modify the default label, 'success', by clicking it and typing edit over it.
7.	Select JSF Navigation Case in the Component Palette. Click the icon for the source JSF page (edit), and then click the icon for the destination JSF page (main) for the navigation case.
8.	Modify the default label, 'success', by clicking it and typing save over it.
9.	Your diagram should now look something like the image below.
10.	Click Save All icon on the JDeveloper menu bar, or select File | Save All from the menu to save the diagram.

Back to Topic List

Using Layout Components to Design the Page

To create the main page and a data control, perform the following steps:

Back to Topic List

ADF Table Component and ADF Binding

To create a data control and bind it to ADF table component, perform the following steps:

Back to Topic List

Testing the Main Page

To test the main page, perform the following steps:

Back to Topic List

Working with the Image and Gauge components

You can display images of your products in the JSF pages. These images are provided as part of the startup application. To enhance image display in your JSF pages, perform the following steps:

1.	Back to JDeveloper, in the Structure pane, expand af:panelTabbed | af:showDetailItem | af:panelCollection | af:table and expand the af:column of the fifth column (the image one) then select af:outputText. Notice that the image column is set to a text type of value. To be able to display an image, you need to convert the structure of the column.
2.	In the Structure pane, for the selected component, right click and select Convert from context.
3.	In the Convert Output Text dialog, select the Image component. Click OK. In the Confirm Convert dialog, click OK.
4.	In the Property Inspector, for the af:image component, set the source field to #{row.image}.
5.	In the Structure pane, expand the af:column component corresponding to the rating column (it is the following one in the list).
6.	From the Component palette, select ADF Data Visualization , then in the Gauge list select the Gauge component and drag and drop it above the outputText.
7.	In the Property Inspector for the Gauge component, in the Common tab set the Value field to #{row.rating}.
8.	Select the Appearance tab. Make sure the Gauge Type is set to <default> and in the Image section, set the ImageHeight to 100 and ImageWidth to 100.
9.	Right click in the page design and choose Run from context to run the page in your browser.
10.	The page loads up in your browser now displaying an image for each product. Scroll to the right to display the rating column.
11.	Close the browser window.

Back to Topic List

Working with Menus

To implement menu functionality on your page, perform the following steps:

Back to Topic List

Working with Input Components

Now you want to create an Edit page that displays product details and allows you to update it. To create the Edit page, perform the following steps:

1.	Click the faces-config.xml tab to display the page flow diagram.
2.	Double click the edit.jspx icon to create the edit page.
3.	In the Create JSF Page dialog, leave the File Name to the default value, use the simple page template and check the Create as XML Document check box. Click OK.
4.	The new page opens up with the template characteristics.
5.	From the Data Controls pane, drag and drop products onto the center facet.
6.	From the dynamic menu, choose Forms --> ADF Form...
7.	In the Edit Form Fields, check Include Navigation Controls and Include Submit Button options Click OK.
8.	Select the Submit button on the page and using the Property Inspector, set the Action field to save from the drop down list.
9.	Back on the page, right click the rating item and select convert from context.
10.	From the Convert dialog, select Input Number Slider. Click OK. In the Confirm Convert dialog, click OK to accept default.
11.	Using the Property Inspector, for the Input Number Slider component, set the Minimum field to 1.
12.	Back on the page design select the category item and remove it.
13.	From the Data Controls, expand products and drag and drop category above the cost item.
14.	From the dynamic menu, select Single Selections --> ADF Select One Choice ...
15.	In the Edit List Binding dialog, click the Fixed List option, select category as the Base Data Source Attribute from the drop down list. In the Set of Values pane, enter the following values: Electronics Computers Software Click OK
16.	From the Component Palette, from the ADF Faces Common Components, select the Image component and drag and drop it below the image item.
17.	In the Insert Image dialog, select the Expression Builder option next to the Source field.
18.	In the Expression Builder dialog that opens up, bind the component to the following data. Expand ADF Binding | bindings | image | inputValue, then click Insert Into Selection to shuttle the selection in the expression field. Click OK.
19.	Back to the Insert Image dialog, click Finish.
20.	Reopen the page flow diagram, right click the main.jspx icon and select Run from context.
21.	Expand the Admin menu and select Edit Items to call the Edit page.
22.	The Edit page displays.
23.	Try the LOV next to the category field and choose a new value.
24.	Display the Calendar next to the manufactured field and choose a new value.
25.	Change the name of the image file (i.e. switch from nano to classic or vice versa). Notice that even if the reference to the file has changed, the image remains unchanged. This is what we will solve in the next section about partial page rendering.
26.	Close your Browser to return to JDeveloper.

Back to Topic List

Implementing Partial Page Rendering

In order to have a refresh of the page when, for example, you change the name of the image file in the Edit page, we need to set the Partial Rendering behavior. To implement this function, perform the following steps:

Back to Topic List

Adding Pop up Functionality to the Main Page

Now you want to create a pop up window that enhance the properties of a specific product. To create this Pop up functionality, perform the following steps:

1.	Open the main page in the Design editor and select the Specials tab.
2.	From the Component palette, from the ADF Faces | Layout, select the Panel Box component and drag and drop it onto the Specials tab. In the Property Inspector, type Today's Special in the Text field.
3.	Click the Shopping Carts tab to select it and in the Component Palette, drag and drop a Panel Box component inside the Shopping Carts panel
4.	In the Property Inspector, type Your Shopping Cart in the Text field for the panelBox.
5.	In the Component Palette, from the ADF Faces Common Components library, drag and drop an Output Label on Today's Specials component. In the Property Inspector type Special Promotion for the Value field.
6.	In the Component Palette, from the ADF Faces Common Components library, drag and drop an Output Text next to the Special Promotion Label.
7.	In the Property Inspector remove the value in the Value field and click the down arrow icon next to the Value field. Select Expression Builder from the list.
8.	In the Expression Dialog, clear out the Expression field then in the Variable pane, expand JSF Managed Beans | backing_dnd | todaySpecialProduct and select name. Click the Insert into Selection button to shuttle the selection in the Expression field. Click OK. This shows Oracle JDeveloper as being the value for the name variable in the backing bean.
9.	From the ADF Faces Common Components, drag and drop a Button component next to the Oracle JDeveloper output text.
10.	In the Property Inspector, type More Info in the Text field.
11.	From the Component Palette ADF Faces | Operations, drag and drop a Show popup Behavior on the More Info button.
12.	In the Property Inspector, type popmore in the PopupId field, and set the Align field to afterEnd from the drop down list.
13.	From the Component Palette ADF Faces| Common Components, drag and drop a Popup underneath the outputText component in the structure pane.
14.	In the Structure Pane, right click the af:popup component and from context select Insert inside af:popup --> Panel Window.
15.	From the Component Palette, drag and drop an Output Text onto the panel window.
16.	From the Component Palette, drag and drop an image component so that it goes above the previous output text in the structure pane.
17.	In the Insert Image dialog, select the Expression Builder option by the Source field. In the Expression Builder dialog, expand JSF Managed Beans | backing_dnd | todaySpecialProduct and select image. Click the Insert into Selection button to shuttle the selection in the Expression field. Click OK, then Finish.
18.	Select the output text in the Structure pane and using the Property Inspector, click the down arrow next to the Value field, and select Expression Builder from the list.
19.	In the Expression Builder dialog, clear out the Expression value and type Special Price. Then expand JSF Managed Beans | backing_dnd | todaySpecialProduct and select cost. Click the Insert into Selection button to shuttle the selection in the Expression field. Click OK.
20.	Click Save All icon on the JDeveloper menu bar, or select File | Save All from the menu.

Back to Topic List

Adding Drag and Drop Functionality to the Main Page

Now we want to create a Drag and Drop between Today's Specials and the shopping cart allowing you to fill the cart from the Today's Specials articles using a simple drag and drop operation. To realize this Drag and Drop, perform the following steps:

1.	Select the outputText component that binds to todaySpecial backing bean. From the Component Palette ADF Faces | Operations, drag and drop a Client Attribute component underneath the output text component of the Special Promotion in the Structure Pane. In the Property Inspector type Item as the Name and click the down arrow next to the Value field and select Expression Builder from the list.
2.	In the Expression Builder dialog, clear out the Expression value, then expand JSF Managed Beans | backing_dnd | todaySpecialProduct and select name to bind it to a backing bean. Click the Insert into Selection button to shuttle the selection in the Expression field. Click OK.
3.	From the Component Palette ADF Faces | Operations, drag and drop an Attribute Drag Source component below the af:clientAttribute in the Structure pane.
4.	In the Insert Attribute Drag Source dialog, type Item in the Attribute field. Click Finish.
5.	Click Save All icon on the JDeveloper menu bar, or select File | Save All from the menu.
6.	Now, working on the shopping cart panel side, from the Component Palette, drag and drop a Data Flavor component onto the Shopping Carts pane.
7.	In the Insert Data Flavor dialog type java.lang.String in the Flavor Class. Click Next then Finish.
8.	Right click the af:dataFlavor in the Structure pane and select Surround With... In the Surround With dialog, select Drop Target, then OK.
9.	In the Insert Drop Target dialog click the dotted button next to the DropListener field.
10.	In the Edit Property dialog from the drop down list, select backing_dnd for the Managed Bean field and handleDrop as the Method. Click OK, then Finish.
11.	In the Structure pane, select the af:popup component within the second pane tag and in the In the Property Inspector enter popmore in the Id field of the Common tab.
12.	In the Structure Pane, select the first tag to re sync the page editor. In order to display what is in the cart, from the Component palette using the ADF Faces | Common Components, select an Output Text component and drop it onto on the Shopping Carts pane underneath Your Shopping Cart panelBox.
13.	In the Property Inspector click the down arrow next to the Value field and select Expression Builder from the list. Remove the text in the Expression pane, then in the Variables section, select JSF Managed Beans | backing_dnd | dndValue and click the Insert Into Selection button. Click OK. In the Property Inspector, for the Output Text tag, select the Style tab and enter color:Green in the InlineStyle field. This displays the Cart is Empty message in the page.
14.	Click Save All icon on the JDeveloper menu bar, or select File | Save All from the menu.
15.	Back to the page diagram, right click the Main.jspx icon and select Run from context.
16.	The page loads up in your browser.
17.	Click the Specials tab. Click the more info button that displays the special product as a popup. Close the popup window.
18.	Now select the Today's Specials label and drag and drop it onto Your Shopping Cart section in the left hand pane.
19.	The shopped product is now appearing in your shopping cart.