# Working with Oracle ADF Faces

ADF Faces rich client (known also as ADF Faces) is a set of JavaServer Faces (JSF) components that include built-in Asynchronous JavaScript and XML (AJAX) functionality. While AJAX brings rich client-like functionality to browser-based applications, using JSF provides server-side control, which reduces the amount of JavaScript code that application developers need to write in order to implement AJAX-based applications. In addition to providing a rich set of JSF components, the ADF Faces rich client framework (RCF) provides a client-side programming model familiar to developers accustomed to the JSF development model.

For more information on Oracle ADF Faces, see the "Introduction to ADF Faces Rich Client" chapter in Developing Fusion Web Applications with Oracle Application Development Framework.

## About ADF Faces Configuration Files

A JSF web application requires a specific set of configuration files, namely, web.xml and faces-config.xml. ADF applications also store configuration information in the adf-config.xml and adf-settings.xml files. Because ADF Faces shares the same code base with MyFaces Trinidad, a JSF application that uses ADF Faces components for the UI also must include a trinidad-config.xml file, and optionally a trinidad-skins.xml file.

For more information on ADF Faces configuration files, see the "ADF Faces Configuration" appendix in Developing Fusion Web Applications with Oracle Application Development Framework.

For more information on all Oracle ADF XML files generated by OEPE, see Appendix A Oracle ADF XML Files.

## About ADF Data Visualization Components

The ADF Data Visualization components provide significant graphical and tabular capabilities for displaying and analyzing data, and support the use of ADF data controls.

For more information regarding ADF Data Visualization Components, see the Introduction to ADF Data Visualization Components" chapter in Developing Fusion Web Applications with Oracle Application Development Framework.

## Working with ADF tags in JSP Pages

You can create JSP pages.

To create a JSP page:

1. In the Project Explorer, In your dynamic web project, right-click the WebContent node, and select New > JSP File. Alternatively, from the main menu, click New > Other, and choose JSP File under the Web node.

2. In the New JSP File dialog, enter or select the parent folder, and enter a file name, for example, `login.jspx`, in the File name field. Then click Next.

3. On the Select JSP Template page, select a template and view the statements generated for it in the Preview pane. A variety of JSP templates are available for JSP, JSF, and ADF development. For ADF applications, you will need to select a JSP template that supports XML style syntax, for example, New ADF Rich Faces Page - Basic (xhtml, xml syntax).

4. Optionally, you can click the JSP Templates link at the bottom to customize existing templates or create new ones.

5. Click Next. The page opens in the Web Page Editor.

## Support for ADF Components in the Palette

The Palette pane displays all the available library components. You can click on an item in the palette to expand it.

The ADF Data Visualizations node shows all the GUI components available to represent data, for example, Bars, Pies, or Gauges. You can drag an item from the Palette and drop it on the JSP page. The following figure shows the ADF Data Visualizations node in the Palette.

The last item in the Palette is the Data Palette. Expand it to see content related to the available variables. Variables displayed in the Data Palette range from local Page Variables declared within the current JSP page to JSF Managed Beans available to the whole application. The Data Palette enables easy navigation to variable and class declarations as well as Drag and Drop onto the page.

## Using the Tag Drop Editor for ADF Faces Components

You can set properties for ADF components.

To set properties for ADF components using the tag drop editor:

1. Select an ADF Faces component in the Palette, for example, Form.

2. Drag the selected component and drop it on to your JSP file.

3. In the dialog that opens, set properties for the ADF component. For example, if you dropped the Form tag, you can specify the type of form to create, as well as select properties that will be used as form fields.

## Using the Smart Editor for ADF Components

The Properties pane provides a smart editor for ADF components where you can review and update the properties of ADF tags and attributes.

To use the smart editor for an ADF component:

1. Click an ADF component, for example, `af:form`, either in the source view or design view of the JSPX file.

2. Click the Properties pane.

3. In the Properties pane, you click any of the property categories, and review or update the attributes. For example, if you are viewing the properties for the af:form tag, you can click Common and edit the `Id` attribute. If you want to view all attributes together, click All.

4. You can click on a hyperlinked field to open its value in the editor.

5. For documentation on a particular tag, press F1 from within the Properties pane.