Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

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 a Page Template
Create a Page Using the Page Template
ADF Table Component and ADF Binding
Test the Page
Work with Image and Graphic components
Implement Partial Page Rendering
Work with Menus
Add Pop up Functionality to the Page
Add Drag and Drop Functionality to the Page
Work with ADF Data Visualization Components
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 template and use it to build your page.

The page holds the content of a shopping cart on one side and displays the available products on the other side. An other pane
displays the product details. 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.

1 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Back to Topic List

Prerequisites

Before starting the tutorial, you should:

1. Have access to or have installed Oracle JDeveloper 11g Version 11.1.1.2.0. You can download it from Oracle Technology
Network.

2. Download the startup application. Right click the following link and choose Save Link As.. from context to download the
Tutorial.zip file on a local directory of your choice.

3. Unzip the Tutorial.zip file on a local directory of your choice.

4. Start JDeveloper by selecting Start > All Programs > Oracle Fusion Middleware 11.1.1.2.0 > JDeveloper Studio
11.1.1.2.0

If the Migrate User Settings dialog box opens, click NO.

If prompted for a User Role, choose Default.

Close the Tip of the Day window.

2 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

5. The JDeveloper IDE should now be displayed.

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 folder where unzipped the application and select Tutorial.jws.

3 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Click Open. If prompted with a migration warning message, accept the migration operation.

3. The application is loaded up in the Application Navigator, showing the adffacesrc project.

Back to Topic List

Creating a PageTemplate

In this section, you are going to create a page template that will be used for the pages of your application. To create the page template
perform the following steps:

1. In the Application Navigator, right click the adffacesrc project and select New from context.

2. In the New Gallery, in the Categories pane, select Web Tier | JSF, then select the JSF Page Template item.

4 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Click OK.

3. In the Create JSF Page Template, type simple for the Page Template Name.

In the Facet Definitions tab, click the Add button and type center as the Name.

Click the Attributes tab, click the Add button , then type title as the Name and Default Title as the Default
value.

Click OK.

5 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

4. The simple.jspx template page opens up in the design editor.

5. From the Component Palette, using the ADF Faces | Layout library, drop a Decorative Box onto the empty page.

Using the Property Inspector, in the Style and Theme tab, set the Theme property to light from the list.

6. Drag and drop a Panel Group Layout onto the top facet.

6 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

In the property inspector, set the Layout property to horizontal.

7. In the Application Navigator, expand the Web Content | images nodes and drag and drop the brandingImage.gif
node onto the Panel Group Layout. In the context menu select ADF Faces Image.

8. From the ADF Faces | Layout, drop a Spacer next to the image.

7 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Set the Width property to 100.

9. From the ADF Faces | Common Components, drop an Output Text under the spacer component.

In the Value field, choose Expression Builder from the drop down list.

8 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

In the Expression Builder, clear out the existing expression and select JSP Objects | attrs | title.

Click OK.

10. From the Component Palette, drag and drop a Facet Ref onto the center facet.

In the Insert Facet Ref dialog, select center as the facet name.

Click OK.

11. The structure and the design of the template page should now look like this:

9 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

12.
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

Create a Page Using the Page Template

To create a page that uses the template previously created, you'll see how to:

Design the Basic Layout for the Page

Customize the Page Title

Back to Topic List

Designing the Basic Layout for the Page

To create the basic layout for the page, perform the following steps:

1. Right click the adffaces project and select New from context.

2. In the New Gallery, in the categories pane, select Web Tier | JSF. Select JSF Page as the item.

10 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Click OK.

3. In the Create JSF Page dialog, leave the file name to the untitled1.jspx default value and ensure the Create as XML
Document (*.jspx) check box is selected. Select simple from the drop-down list for the Use Page Template field.

Click OK.

11 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

4. The untitled1.jspx appears as a new node in the Application Navigator and it opens up in the Design editor using the
simple.jspx template.

5. From the component palette, using the ADF Faces | Layout library, drag and drop a Panel Splitter component onto the
center facet.

6. Drag and drop another Panel Splitter component onto the 'second' facet of the panel splitter.

12 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

In the Structure pane, expand the panelSplitter component and select the showDetailItem one. Using the property inspector,
set the Orientation to vertical.

7. Drag and drop a Panel Accordion component onto the 'first' facet on the left hand side of the panel splitter.

In the Structure pane, select the showDetailItem component and using the property inspector, set the Text to My Cart.

8. Click within the accordion you just created, then right-click and from context select Insert after Show Detail Item --> Show
Detail Item.

13 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

For the show detail item that you just added, using the Common tab of the Property Inspector, change the Text field to More
Info.

9. Drag and drop a Panel Collection component onto the right hand side 'first' facet.

10. Drag and drop a Panel Tabbed component onto the right hand side 'second' facet.

14 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

In the Structure pane, select the af:showDetailItem component you just created and In the Property Inspector, enter Product
Details in the Text field.

11. Right click the Product Details tab and select Insert After Show Detail Item | Show Detail Item from context.

In the Structure pane, select the af:showDetailItem component you just created and In the Property Inspector, enter Rating in
the Text field.

15 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

12. The page should look like this:

13.
Click Save All icon on the JDeveloper menu bar, or select File | Save All from the menu to save the diagram.

14. Right click within the page design editor and select Run from context to load the page in your default browser.

16 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

15. The page loads up in your browser.

16. Try to move the Panel borders and experiment working with the tabs.

17 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

17. Try the accordion by clicking the More Info plus sign (located at the bottom of the page).

18. Leave the browser window open and switch back to JDeveloper.

Back to Topic

Back to Topic List

Customizing the Page Title

In the following steps, you customize the page title component defined in the page template.

1. Back in JDeveloper, click the simple.jspx tab to open the page template in the design editor.

18 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

2. In the page design, select the title component.

3. In the Property Inspector, expand the Style node, and using the Text tab, in the Color field click the color drop down
list and select the color of your choice (Aqua in our example).

In the Size field, select large from the drop down list.

19 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

4.
Click Save All icon on the JDeveloper menu bar, or select File | Save All from the menu.

5. Switch back to your browser window where your application is running and click the Reload/Refresh button.

Note that after saving your JDeveloper application, refreshing your browser window reflects the new changes made
to your application as long as you haven't updated any binding component. In that case you will need to reRun the
page from JDeveloper in order to have the changes reflected in your browser.

6. The page refreshes with the new generic title characteristics.

7. Leave the browser window open and switch back to JDeveloper.

8. Open the untitled1 page in the design editor.

20 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

9. In the Structure pane, select the pageTemplate tag and in the Property Inspector, set the title property to Store
Front.

10.
Click Save All icon on the JDeveloper menu bar, or select File | Save All from the menu.

11. Switch back to your browser window where your application is running and click the Reload/Refresh button.

12. The page refreshes with the new title characteristics.

13. Close the browser window open and switch back to JDeveloper.

Back to Topic

Back to Topic List

ADF Table Component and ADF Binding

21 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

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

1. From an existing POJO Class, we now create the data control using the ADF Data Binding facility.
In the Application Navigator, expand the Application Sources node and right-click StoreProducts.java in the Application Sources |
tutorial.model path and select Create Data Control from context.

The Application Navigator should look like this:

2. In the Application Navigator, open the Data Controls accordion and expand the StoreProducts node. The Data Controls pane should
look like this:

22 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

3. Drag and drop the StoreProducts | products data control onto the af:panelCollection in the design editor of the untitled1 page. From
the pop up menu, select Tables --> ADF Read-only Table...

4. From the Edit Table Columns dialog, select Row Selection and Sorting options.

23 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Click OK.

5. With the table selected in the Structure pane, on the Behavior tab of the Property Inspector, set the Column Selection property to
single from the drop-down list.

6. For the Table component, in the Property Inspector type edit to look for a property containing this word.

If necessary, use the Down Arrow icon until you locate the EditingMode property, then select clickToEdit from the drop down list.

24 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

7. From the Data Controls pane, drag and drop products onto the Product Details component.

8. From the menu, select Form --> ADF Form

25 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

In the dialog, select the Include Submit Button checkbox.

Click OK.

9. Your page should now look like this:

26 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

10.
Click Save All icon on the JDeveloper menu bar, or select File | Save All from the menu.

11. Right click in the page and select Run from context.

27 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Back to Topic List

Testing the Page

To test the page, perform the following steps:

1. Once loaded in your default web browser, the page displays, showing the existing products data.

28 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

2. Select one of the column header to move the column to another location.

29 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

3. Experiment column resizing on the Description column.

With the Description column selected, click the Wrap menu option.

Notice that multiple word fields are now displayed on more than one line.

Click the Wrap button again to revert to the previous layout.

30 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

4. Selecting the name column, click the Freeze menu option

then use the horizontal scroll bar again to visualize the right most located columns.

Notice that the name column remains visible.

5. Click the Detach menu option to isolate the content of the panel in the browser.

Click the Detach button again to go back to the previous layout.

31 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

7. Explore the Menu options for View, allowing you to hide some of the columns (description for example).

8. Sort by ascending and descending order on product name or category by clicking on the column header. The arrows may only appear
when you move your cursor over the column heading.

32 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

9. You can also explore the Menu options for Format, allowing you to resize columns.

Close your browser window.

Back to Topic List

Working with Image and Graphic components

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

1. Back to JDeveloper, in the Product Details pane, right click the cost field and select Convert To from context.

In the Convert dialog, select Input Number Spinbox.

Click OK. Click OK on the Confirm Convert dialog.

2. 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. In the Product Details pane, right click the image field and select Convert To from context.

33 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

In the Convert dialog, select Image.

Click OK. Click OK on the Confirm Convert dialog.

3. For the new image field created, next to the source field, select Expression Builder from the drop down list.

34 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

4. In the Expression Builder dialog, select ADF Bindings | bindings | image | inputValue.

Click OK.

5. In the Structure pane underneath the image component, delete the validator component to remove the error
appearing on the design of the page.

6. In the Product Details pane, right click the rating field and select Convert To from context.

35 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

In the Convert dialog, select Input Number Slider.

Click OK. Click OK on the Confirm Convert dialog.

7. In the Product Details pane, right click the description field and select Convert To from context.

In the Convert dialog, select Rich Text Editor.

36 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Click OK. Click OK on the Confirm Convert dialog.

8. In the Structure pane underneath the richTextEditor component, delete the validator component to remove the
error appearing on the design of the page.

9. The Product Details pane should look like this:

37 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

10.
Click Save All icon on the JDeveloper menu bar, or select File | Save All from the menu.

11. Switch back to the Browser window and reload the page.

12. Experiment moving the Rating slider.

38 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

13. Try changing the cost using the number spinbox.

14. Experiment entering a wrong date value for the manufactured date field.

Reenter a valid date using the pop up calendar.

39 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

15. Try the Rich Text editor, select a word in the description text field.

Click the arrow next to the color box and select a color from the palette.

Increase the size of the selected text.

40 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

16. Move on the Product table and double click on any of the rows.

Notice that the Product Details pane doesn't reflect the change of product you've made. To implement this
synchronization, we need to add a Partial Page Rendering functionality.

17. Switch back to JDeveloper.

Back to Topic List

Implementing Partial Page Rendering

In order to have a refresh of the Product Details when you select another row in the Product table, we need to set the Partial
Rendering behavior. To implement this function, perform the following steps:

1. Back to JDeveloper, in the Structure pane, select the panelFormLayout within the Product Details component.

41 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

2. Using the Property Inspector, in the Behavior tab, using the down arrow next to the Partial Trigger field and select
Edit.

3. In the Edit Property dialog, expand the panelCollection component, and using the right arrow button, shuttle table* -
t1 in the Selected pane.

42 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Click OK.

4.
Click Save All icon on the JDeveloper menu bar, or select File | Save All from the menu.

5. Switch back to the browser window and reload the page.

43 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

6. Select another row in the table to change the product details.

You can see that Product Details are now synchronized with the selected row.

44 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

7. Leave your browser window open and return to JDeveloper.

Back to Topic List

Working with Menus

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

1. Back into JDeveloper, in the second panel, right-click within the menu component facet and from context, select Insert inside
Facets menus --> Menu

2. Using the Property Inspector, set the Text fields to My Options.

In the Behavior tab, set the Detachable property to true.

3. Right click the Menu and select Insert inside Menu --> Menu Item from context.

45 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

In the Property Inspector, type Export to Excel in the Text field.

4. In the Structure Window, right-click the af:commandMenuItem component and select Insert after af:commandMenuItem -
Export to Excel --> Menu Item from context.

In the Property Inspector, type Show Specials in the Text field.

5. From the Component Palette, from the ADF Faces | Operations library, select Export Collection Action Listener component
and drop it under the Export to Excel menu item in the Structure pane.

46 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

In the Insert Export Collection dialog, type t1 as the ExportedId and select excelHTML for the Type.

Click OK.

6.
Click Save All icon on the JDeveloper menu bar, or select File | Save All from the menu.

7. Switch back to your browser window and reload the page.

8. Click My Options menu option.

47 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Notice that you can detach the menu options from the menu bar.

9. Select the Export to Excel option.

10. Your browser may prevent you from downloading files, accept to download. A dialog prompts you for an action to perform with the
file, allowing you to open it with Excel or save it.

48 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Click Cancel. Leave the browser window open and switch back to JDeveloper.

Back to Topic List

Adding Pop up Functionality to the 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. In the Structure pane, select the form component. In the Component Palette, in the Common Components library, select
the Popup one and drop it onto the form one.

2. Right click the popup component and select Insert inside Popup --> Dialog from context.

3. From the Component Palette, select the Image component and drop it within the Dialog.

49 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

In the Insert Image dialog, from the drop down list, select the JDeveloper.gif image as the source.

Click OK.

4. Click outside the image to get rid of the dialog.

5. From the Component Palette, from the Operations library, select the Show Popup Behavior component and drop it onto
the second commandMenuItem.

50 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

6. In the Property Inspector, for the PopupId field, select Edit from the drop down list.

In the Edit Property dialog, select the popup component, and press Enter.

Click OK.

51 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

7.
Click Save All icon on the JDeveloper menu bar, or select File | Save All from the menu.

8. Switch back to your browser window and reload the page.

9. Click My Options menu option, and select Show Specials.

10. The Dialog pops up the JDeveloper image.

Click Cancel. Leave the browser window open and switch back to JDeveloper.

52 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Back to Topic List

Adding Drag and Drop Functionality to the Page

Now we want to create a drag and drop between Product Details and the shopping cart allowing you to fill the cart from the Product
Details using a simple drag and drop operation. To realize this drag and drop, perform the following steps:

1. Back in JDeveloper, select the OutputText component and drop it onto the My Cart pane.

In the Property Inspector type No Item Selected as the Value for the Output Text.

2. In the Component Palette, from the ADF Faces | Operations library, select the Attribute Drag Source component and drop
it onto the name field of the Product Details pane.

53 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

In the Insert Attribute Drag Source dialog, select value from the drop down list.

Click OK.

3. From the Component Palette ADF Faces | Operations, drag and drop an Attribute Drop Target component onto the No
Item Selected text field.

4. In the Insert Attribute Drop Target dialog, select value in the Attribute field.

54 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Click OK.

5.
Click Save All icon on the JDeveloper menu bar, or select File | Save All from the menu.

6. Switch back to your browser window and reload the page, then select an item in the table to display the corresponding
Product Details.

7. In the Product Details pane, select the name field

and drag and drop it onto My Cart.

8. The product is added to the cart.

9. Don't close your browser window, and switch back to JDeveloper.

55 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Back to Topic List

Working ADF Data Visualization Components

Now you want to create a gauge representation of the rating value. To create the gauge component, perform the following steps:

1. Back into JDeveloper, click the Rating tab.

2. In the Component Palette, from the ADF Data Visualization | Gauge library, drag and drop the Gauge component onto the
Rating pane.

3. In the Create Gauge dialog, select the Dial category, then Dial with Thresholds as the gauge type and finally pick up the left
most quick start layout proposal.

56 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Click OK.

4. The new gauge appears in the rating pane.

5. In the Property Inspector, for the Value field, select Expression Builder from the drop down list.

57 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

6. In the Expression Builder dialog, select ADF Bindings | bindings | rating | inputValue as the Expression.

Click OK.

7. In the Structure pane, select the gauge component and in the property Inspector, set the Gauge Data | Max Value field to 10.

58 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Click OK.

8. In the Structure pane, expand the gauge | thresholdSet component.

9. In the Structure pane, select the first threshold and in the Property Inspector, for the FillColor select Edit from the drop down list.

In the Edit Property dialog, select a 'reddish' color from the palette and click OK.

59 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Enter 4 as the ThresholdMaxValue.

10. In the Structure pane, select the second threshold and repeat the last step with a 'yellowish' color for the FillColor field and a
ThresholdMaxValue set to 7.

11. In the Structure pane, select the third threshold and repeat the last step with a 'greenish' color for the FillColor field and a
ThresholdMaxValue set to 10.

60 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

12. The Rating pane should look like this:

13. Right click within the page and select Run from context.

61 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

14. The page loads up in the browser. Notice the rating value.

Then click the Rating tab.

15. The gauge displays the current rating value.

16. Click the Product Details tab and move the slider to change the rating value.

62 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

17. Click the Rating tab to see the change reflected in the gauge.

18. Don't close the browser window and switch back to JDeveloper.

Back to Topic List

Using Skins to change the Look and Feel of the Application

Finally in this section you see how to change the Look and Feel of the whole application using a parameterized css file. To implement
this functionality, perform the following steps:

1. In the Application Navigator, expand the Web Content | WEB-INF node and double-click the trinidad-config.xml file to open the file
in the editor.

63 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

2. The file contains a parameter enabling you to use a different css file.

3. In the Application Navigation, notice that there is a princess.css file in the skins | princess folder.

4. In the browser window, remove the last part of the URL (after the untitled1.jspx page name).

5. Append the following string ?skin=princess at the end of the URL and press Enter.

6. Notice the changes in the look and feel of the pages.

64 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

7. Colors, Tabs and Accordions are now using the princess css.

65 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

66 of 67 10/19/2010 10:01 AM
Use JDeveloper 11g ADF to build a JSF Faces Rich Client Application http://st-curriculum.oracle.com/obe/jdev/obe11jdev/ps1/adf_richclient/ad...

Experiment the new look of the page.

Close your browser window. You have now successfully performed this OBE.

Back to Topic List

Summary

In this tutorial, you've seen how to create ADF Rich Client JSF Pages and use some advanced features like:

Create a Page Template

Create a Page Using the Page Template
Use ADF Table Component and ADF Binding
Work with Image and Graphic components
Implement Partial Page Rendering
Work with Menus
Add Pop up Functionality to the Page
Add Drag and Drop Functionality to the Page
Work with ADF Data Visualization Components
Use Skins to Change the Look and Feel of the Application

Back to Topic List

Place the cursor over this icon to hide all screenshots.

67 of 67 10/19/2010 10:01 AM