13.1 Introduction to Adding ADF Bindings to Existing Web Pages

While the Data Control Palette enables you to design and create bound components in a single drag and drop action, in some cases, it may be necessary to create the UI first and add the bindings later. For example, if a development team includes UI designers, the designers can create the basic pages using more traditional techniques and the developers can add the page functionality afterwards, including bindings on ADF data controls.

You can add ADF bindings to the following types of UI components:

• Text fields

• Tables

• Buttons or links

• Selection lists

• Trees and tree tables

Read this chapter to understand:

• How to design a page for easy insertion of ADF bindings

• Which UI components you can add ADF bindings to

• How to use the Data Control Palette to add ADF bindings to existing page components

• What happens to your components when ADF bindings are added

13.1.1 How to Add ADF Bindings to Components Using the Data Control Palette

After creating a page, you can use the Data Control Palette to add ADF bindings to the existing UI components. The procedures for adding an ADF binding to an existing UI component slightly different depending on the component and are described later in this chapter. The following procedure is a high-level description of how to use the Data Control Palette to add ADF bindings to an existing component displayed in the Structure window.

To add ADF bindings to existing UI components using the Data Control Palette:

1. With the page displayed in the Design page of the visual editor, open the Structure window.

   
   

   Tip: You can drop the data control object on the component displayed in the Design page of the visual editor, but using the Structure window provides greater accuracy and precision. For example, if you try dropping a data control object on a component in the visual editor and do not get the Bind Existing <component name> option in the context menu, this means you did not drop the data control on the correct tag in the visual editor. In this case, try using the Structure window where each tag is clearly delineated.

   
   

2. In the Design page of the visual editor, select the UI component to which you want to add ADF bindings. The component must be one of the tags listed in Table 13-1. When you select a component in the visual editor, JDeveloper simultaneously selects that component tag in the Structure window, as shown in Figure 13-1. Use the Structure window to verify that you have selected the correct component. If the incorrect component is selected, make the adjustment in the Structure window.

   Figure 13-1 Structure Window with Tag Selected

   
   

3. Drag the appropriate data control object from the Data Control Palette to the Structure window and drop it on the selected UI component. (For information about the nodes on the Data Control Palette, see Section 5.2.1, "What You See on the Data Control Palette".)

   
   

   Tip: As you position the data control object over the UI component in the Structure window, a line with an up or down arrow appears at the top or bottom of the component, as shown in Figure 13-2. Whenever either of these lines appears, you can drop the data control object: it does not matter which direction the arrow is pointing.

   
   

   Figure 13-2 Dropping a Data Control Object on a UI Component in the Structure Window

   
   

4. From the Data Control Palette context menu, choose the Bind Existing <component name> option, where <component name> is the name of the component, such as text field or table, as shown in Figure 13-3.

   
   

   Tip: If the context menu does not display a Bind Existing <component name> option, you have not dropped the data control object on the correct tag in the Structure window. You can add bindings only to the tags shown in Table 13-1.

   
   

   Figure 13-3 Context Menu for Binding to an Existing Component

   
   

13.1.2 What Happens When You Use the Data Control Palette to Add ADF Bindings

While you could manually enter the ADF binding expressions for each component on a page, Oracle recommends using the Data Control Palette. The main advantage to using the Data Control Palette is that all required ADF objects are automatically created for you:

• The DataBindings.cpx file is created and a corresponding entry for the page is added to it.

• The ADF binding filter is registered in the web.xml file.

• The ADF phase listener and ADF render kit are registered in the faces-config.xml file.

• A page definition file is created and configured with the binding object definitions for component on the page.

All of these objects are required for a component with ADF bindings to be rendered correctly on a page. If you do not use the Data Control Palette, you will have to create these things manually. For more information about these objects, see Chapter 5, "Displaying Data in a User Interface".