What Happens When You Create a Form

Creating a Basic Databound Page 3-7 2. Drag the collection onto the page, and from the context menu choose the type of form that will be used to display or collect data for the object. For a form, you are given the following choices: – ADF Form : Launches the Edit Form Fields dialog that allows you to select individual attributes instead of having JDeveloper create a field for every attribute by default. It also allows you to select the label and UI component used for each attribute. By default, ADF inputText components are used for most attributes. Each inputText component has the label attribute populated. Attributes that are dates use the InputDate component. Additionally, if a control hint has been created for an attribute, or if the attribute has been configured to be a list, then the component set by the hint is used instead. InputText components contain a validator tag that allows you to set up validation for the attribute, and if the attribute is a number or a date, a converter is also included. – ADF Read-Only Form : Same as the ADF Form, but read-only outputText components are used. Since the form is meant to display data, no validator tags are added converters are included. Attributes of type Date use the outputText component when in a read-only form. All components are placed inside panelLabelAndMessage components, which have the label attribute populated. The panelLabelAndMessage components are placed inside a panelFormLayout component. – ADF Dynamic Form : Creates a form whose bindings are determined at runtime. For more information, see Section 3.8, Using a Dynamic Form to Determine Data to Display at Runtime. 3. In the Edit Form Fields dialog, configure your form. You can elect to include navigational controls that allow users to navigate through all the data objects in the collection. For more information, see Section 3.4, Incorporating Range Navigation into Forms. You can also include a Submit button used to submit the form. This button submits the HTML form and applies the data in the form to the bindings as part of the JSFADF page lifecycle. For additional help in using the dialog, click Help. All UI components are placed inside a panelFormLayout component. 4. If you are building a form that allows users to update data, you now need to drag and drop a method that will perform the update. For more information, see Section 3.6, Creating a Form to Edit an Existing Record.

3.3.2 What Happens When You Create a Form

Dropping an object as a form from the Data Controls panel has the same effect as dropping a single attribute, except that multiple attribute bindings and associated UI components are created. The attributes on the UI components such as value are bound to properties on that attribute’s binding object such as inputValue or to the values of control hints set on the corresponding service. Example 3–5 shows some of Tip: For more information about validators, converters, and other attributes of the inputText component, see the Using Input Components and Defining Forms chapter of the Oracle Fusion Middleware Web User Interface Developers Guide for Oracle Application Development Framework. 3-8 Java EE Developers Guide for Oracle Application Development Framework the code generated on the JSF page when you drop the suppliersFindAll accessor collection as a default ADF form to create the Edit Suppliers Details form. Example 3–5 Code on a JSF Page for an Input Form af:panelFormLayout id=pfl1 af:inputText value={bindings.supplierName.inputValue} label={bindings.supplierName.hints.label} required={bindings.supplierName.hints.mandatory} columns={bindings.supplierName.hints.displayWidth} maximumLength={bindings.supplierName.hints.precision} shortDesc={bindings.supplierName.hints.tooltip} id=it4 f:validator binding={bindings.supplierName.validator} af:inputText af:inputText value={bindings.email.inputValue} label={bindings.email.hints.label} required={bindings.email.hints.mandatory} columns={bindings.email.hints.displayWidth} maximumLength={bindings.email.hints.precision} shortDesc={bindings.email.hints.tooltip} id=it3 f:validator binding={bindings.email.validator} af:inputText af:inputText value={bindings.phoneNumber.inputValue} label={bindings.phoneNumber.hints.label} required={bindings.phoneNumber.hints.mandatory} columns={bindings.phoneNumber.hints.displayWidth} maximumLength={bindings.phoneNumber.hints.precision} shortDesc={bindings.phoneNumber.hints.tooltip} id=it1 f:validator binding={bindings.phoneNumber.validator} af:inputText af:inputText value={bindings.supplierStatus.inputValue} label={bindings.supplierStatus.hints.label} required={bindings.supplierStatus.hints.mandatory} columns={bindings.supplierStatus.hints.displayWidth} maximumLength={bindings.supplierStatus.hints.precision} shortDesc={bindings.supplierStatus.hints.tooltip} id=it2 f:validator binding={bindings.supplierStatus.validator} af:inputText . . . af:panelFormLayout

3.4 Incorporating Range Navigation into Forms