How to Use the Separator Component

9-2 Web User Interface Developers Guide for Oracle Application Development Framework Figure 9–1 Form Uses Input Components In addition to standard input components used to input text, number, date, or color, ADF Faces includes input type components that provide additional functionality. The inputFile component allows users to browse for a file to load. The richTextEditor component provides rich text input that can span many lines and can be formatted using different fonts, sizes, justification, and other editing features. The richTextEditor component can also be used with command components to insert given text into the component. The inserted text can be preformatted. Additionally, you can customize the buttons that appear in the editor’s toolbar. The selection components allow the user to make selections from a list of items instead of or in addition to typing in values. For example, the selectOneChoice component lets the user select input from a dropdown list and the selectOneRadio component lets a user pick from a group of radio buttons. You can use either selection or list-of-values LOV components to display a list. LOV components should be used when the selection list is large. LOV components are model-driven using the ListOfValueModel class and may be configured programmatically using the API. They present their selection list inside a popup window that may also include a query panel. Selection lists simply display a static list of values. For more information about using LOV components, see Chapter 11, Using List-of-Values Components. The selectItem component is used within other selection components to represent the individual selectable items for that component. For example, a selectOneRadio component will have a selectItem component for each of its radio buttons. If the radio button selections are coffee, tea, and milk, there would be a selectItem component for coffee, one for tea, and one for milk. The form components provide a container for other components. The form component represents a region where values from embedded input components can be submitted. Form components cannot be nested. However, the subform component provides additional flexibility by defining subregions whose component values can be submitted separately within a form. The resetButton component provides an easy way for the user to reset input values within a form or subform to their previous state. All the input and selection components deliver the ValueChangeEvent and AttributeChangeEvent events. You can create valueChangeListener and attributeChangeListener methods to provide functionality in response to the corresponding events. Using Input Components and Defining Forms 9-3 All input components, selection components except selectItem, and the rich text editor component have a changed attribute that when set to true enables a change indicator icon to be displayed upon changes in the value field. This indicator allows the user to easily see which input value has changed, which can be helpful when there are multiple components on the page. By default, the change indicator usually is displayed to the left of the component. If the value in a field automatically changes due to a change in another field’s value, such as an automatically generated postal code when the city is entered, the postal code field will also display a change indicator. Figure 9–2 shows changed indicators present for the checkbox and input components. Figure 9–2 Changed indicators for two components Most input components also have the capability of displaying only the label, and not appearing capable of changing value until the user mouses over or hovers over the component. Once the user changes the value, that new value displays as read-only. Figure 9–3 shows a selectManyChoice component configured to be editable only on access. Figure 9–3 Input Components Can Appear Not Editable Input components can also display tooltips, error and validation messages, and context-sensitive help. For more information, see Chapter 17, Displaying Tips, Messages, and Help. Tip: You can change the icon or the position of the icon using skins. For more information, see Chapter 20, Customizing the Appearance Using Styles and Skins. 9-4 Web User Interface Developers Guide for Oracle Application Development Framework All input components have JavaScript client APIs that you can use to set or get property values. For more information, see the ADF Faces JavaScript API documentation.

9.2 Defining Forms

A form is a component that serves as a container for other components. When a submit action occurs within the form, any modified input values are submitted. For example, you can create an input form that consists of input and selection components, and a submit command button, all enclosed within a form. When the user enters values into the various input fields and clicks the Submit button, those new input values will be sent for processing. By default, when you create a JSF page in JDeveloper, it automatically inserts a form component into the page. When you add components to the page, they will be inserted inside the form component. Example 9–1 shows two input components and a Submit button that when clicked will submit both input values for processing. Example 9–1 ADF Faces Form as a Container for Input Components af:form af:panelFormLayout af:inputText value={myBean.firstName} label={First Name} af:inputText af:inputText value={myBean.lastName} label={Last Name} af:inputText f:facet name=footer af:commandButton text=Submit f:facet af:panelFormLayout af:form Because there can be only one form component on a page, you can use subforms within a form to create separate regions whose input values can be submitted. Within a region, the values in the subform will be validated and processed only if a component inside the subform caused the values to be submitted. You can also nest a subform within another subform to create nested regions whose values can be submitted. For more information about subforms, see Section 4.5, Using Subforms to Create Regions on a Page. Example 9–2 shows a form with two subforms, each containing its own input components and Submit button. When a Submit button is clicked, only the input values within that subform will be submitted for processing. Example 9–2 ADF Faces Subform Within a Form af:form af:subform af:panelFormLayout Tip: If you do not already have an af:form tag on the page, and you drag and drop an ADF Faces component onto the page, JDeveloper will prompt you to enclose the component within a form component.