6.5 Modifying the UI Components and Bindings on a Form

Once you use the Data Control Palette to create a form, you can then delete attributes, change the order in which they are displayed, change the component used to display them, and change the attribute to which they are bound.

6.5.1 How to Modify the UI Components and Bindings

You can modify certain aspects of the default components dropped from the Data Control Palette. You can use the Structure window to change the order in which components are displayed, to add new components or change existing components, or to delete components. You can use the Property Inspector to change or delete bindings, or to change the label displayed for a component.

To modify default components and bindings:

Use the Structure window to do the following:
- Change the order of the UI components by dragging them up or down the tree. A black line with an arrowhead denotes where the UI component will be placed.
- Add a UI component for a new attribute. Right-click an existing UI component in the Structure window and choose to place the new component before, after, or inside the selected component. You then choose from a list of UI components.
  
  To bind the new component to an attribute, you need to use the Property Inspector. See the first bullet point in step 2 for details.
- Delete a UI component. Right-click the component and choose Delete. If you wish to keep the component, but delete just the binding, you need to use the Property Inspector. See the second bullet point in step 2.
With the UI component selected in the Structure window, you can then do the following in the Property Inspector:
- Add a binding for the UI component. Enter an EL expression, or click the ellipsis (...) button in the Value field to open the EL Expression Builder. To select a binding available from the data control, select the Bindings node. This node shows the operations, iterators, and attributes available from the collection currently bound, as well as the binding properties. For more information about using EL expressions, see Section 5.6, "Using ADF Databinding EL Expressions".
- Delete a binding for the UI component by deleting the EL expression.
- Change the binding. You can rebind the component to any other attribute, or any property on another attribute. For procedures, see Section 6.5.1.1, "Changing the Value Binding for a UI Component".
- Change the label for the UI component. By default, the label is bound to the binding's label property (for more information about this property, see Appendix B, "Reference ADF Binding Properties". This property allows you to change it once and have it appear the same on all pages that display the label.
  
  You can also change the label just for the current page. To do so, select the Label attribute. You can enter text or an EL expression to bind the label value to something else, for example, a key in a properties or resource file.
  
  For example, the inputText component used to enter the status of a service request would have the following for its Label attribute:
```
#{bindings.status.label}
```
  In this expression, status is the ID for the attribute binding in the page definition file.
  
  However, you could change the expression to instead bind to a key in a properties file, for example:
```
#{srproperties['sr.status']}
```
  In this example, srproperties is a variable defined in the JSF page used to load a properties file. The SREdit page uses a variable named res. The label for the request date has the following value:
```
#{res['sredit.createdOn.label']}
```
  For more information about using resource bundles, see Section 14.4, "Internationalizing Your Application".

6.5.1.1 Changing the Value Binding for a UI Component

Instead of modifying a binding, you can completely change the object to which the UI component in a form is bound.

To rebind a UI component:

From the Data Control palette, drag the collection or attribute that you now want the component to be bound to, and drop it on the component.

OR

Right-click the UI component in the Structure window and choose Edit Binding. Either the Attribute, Table, or List Binding Editor launches, depending on the UI component for which you are changing the binding.
In the context menu, select Bind existing <component name>.

6.5.1.2 Changing the Action Binding for a UI Component

When a component is bound to a built-in operation, you can change the action using the Action Binding Editor.

To rebind a UI Command component:

Right-click the command component in the Structure window and choose Edit Binding, which launches the Action Binding Editor.
In the editor, use the dropdown menu to select a different action.

6.5.2 What Happens When You Modify Attributes and Bindings

When you modify how an attribute is displayed by moving the UI component or changing the UI component, JDeveloper changes the corresponding code on the JSF page. When you use the binding editors to add or change a binding, JDeveloper adds the code to the JSF page, and also adds the appropriate elements to the page definition file.