How-to Run the ADF Faces Rich Client Components Demo 12.2

Introduction

To explore the ADF Faces components at runtime, the ADF Faces development team at Oracle created a component demo that showcases the various components and framework capabilities and allows you to try different property settings on the selected component. The components demo is provided with full source code and is a great way to learn how to work with the components in general.

This how-to explains how to setup and launch the ADF Faces component demo locally on your machine using the Oracle JDeveloper 12c integrated Oracle WebLogic Server.

You can download a WAR file with all the source code of this demo from the ADF Download page.

For older versions of the ADF Faces Components Demo see instructions here

Importing and Running the Demo in Oracle JDeveloper 12c

The rich client component runtime demo can be started from inside Oracle JDeveloper using the integrated Oracle Weblogic Server. Download the demo's WAR file to a location on your machine and then follow these steps:

1. From the New Gallery, create an application with a single project by double-clicking Custom Application.
2. In the Create Custom Application wizard, leave the default values unchanged and click Finish.
3. In the Applications window, right-click the project node and choose Delete Project.
4. In the Confirm Delete Project dialog, select Remove project and delete all of its contents.
5. From the New Gallery, import the demo WAR for the new project by double-clicking Project from WAR File.
6. In the Create Project from WAR File wizard, browse to the location of the saved WAR file download and click Finish.
7. In the Applications window, right-click the project and choose Project Properties.
8. In the Project Properties dialog, make the following changes:

- Select Compiler -> JSP and uncheck Compile JSP Before Deploying to Integrated WebLogic Server (saves time compiling pages).
- Select Libraries and Classpaths -> Click Add Library and choose JSF 2.2 (addresses a compiler requirement for classes in the javax.faces package).
- Select Libraries and Classpaths -> Click Add Library and select ADF Model Runtime (addresses an ADF runtime requirement for Groovy script evaluation)
9. From the main menu, choose Build-Clean All.
10. In the Applications window, right-click the project and choose Rebuild.
11. Expand the Web Content node of the project, locate and right-click index.jspx and choose Run.

What's in the demo

The demo starts with an index page showing all categories for which samples are available

The Tag Guide is the entry link to the component demo and shows a list of ADF Faces components that you can select to further explore. Each component demo is launched in a browser that has a split screen layout. The split screen's right content area has a property inspector functionality that you can use to set properties for the individual component. Note that the right content area might be closed so that you have to drag it open before using it. Also of interest is that in addition to the rich client components, the data visualization components which allow you to graphically represent your data are also present in this listing.

The Feature Demos include a variety of demonstrations for the frameworks capabilities including a rich set of demos for the data visualization components, active data services, drag and drop and other client behaviors.

A demo of interest should be the Styles demo. Users frequently get confused by which part of a component is styled by the inlineStyle attribute and which part is styled by the contentStyle attribute. The demo also contains a skinning demonstration that allows developers to play with various skin definitions per component.

Demo Source Code

The war file also contains the demo source files for developers to study and learn from. All JSPX files and Java sources can be looked at in the Oracle JDeveloper project that is created when importing the WAR file.