**Creating Data-Driven UI Components in ADF**

1. Binding UI Components to Data

2. Adding UI Components to the Page You can create components on a page by: • Dragging a component from the Component Palette • Using the context menu in editor or Structure window • Dragging a data element from the Data Controls panel

3. Using the Component Palette • Drag the component from the Component Palette:

4. Using the Context Menu

5. Using the Data Controls Panel The Data Controls panel: • Is a visual representation of your business service that contains: – Methods – Parameters and results – Attributes – Collections – Built-in operations • Provides automatic data binding for any business service; for example, there automatically is a data control for every ADF BC application module

6. Describing the ADF Model Layer • Data controls describe the public interface of a business service. • Bindings connect UI components to data or actions. • Data controls and bindings are defined by using XML metadata.

7. Types of Data Bindings • Iterator Binding: Keeps track of the current row in a data collection • Value Binding: Connects UI components to attributes in a data collection; examples: attribute binding, tree binding, list binding, table binding • Action Binding: Invokes a method or operation

8. Using Expression Language (EL)

9. Expression Language and Bindings • Data binding expressions are written using EL. • They are evaluated at run time to determine what data to display. • ADF EL expressions typically have the form: #{bindingVariable.BindingObject.propertyName} – Example of an inputText component in a JSF page: <af:inputText value="#{bindings.Ename.inputValue}” label="#{bindings.Ename.label}” required="#{bindings.Ename.mandatory}">

10. Opening a Page Definition File The page definition file <pagename>PageDef.xml (for example, browseOrdersPageDef.xml): • Is created automatically when you add a databound component to a page • Contains all the binding definitions for a page To open a page definition, perform the following steps: • Right-click the page in the editor or Application Navigator. 2. Select Go to Page Definition.

11. Editing Bindings in a Page Definition File

12. Tracing Data Binding:From Database to Databound Components