How to Add an inputText Component

9-10 Web User Interface Developers Guide for Oracle Application Development Framework

9.3.2 How to Add the Ability to Insert Text into an inputText Component

The insertTextBehavior tag works with command components to insert given text into an inputText component. The text to be entered can be a simple string, or it can be the value of another component, for example the selected list item in a selectOneChoice component. To allow text to be inserted into an inputText component, add the insertTextBehavior tag as a child to a command component that will be used to insert the text. Before You Begin Before you add an insertTextBehavior tag, you need to create an inputText component as described in Section 9.3.1, How to Add an inputText Component. Set the clientComponent attribute to true. To add text insert behavior: 1. Add a command component that the user will click to insert the text. For procedures, see Section 18.2.1, How to Use Command Buttons and Command Links.

2. In the Component Palette, from the Operations panel, drag and drop an Insert

Text Behavior as a child to the command component. 3. In the Insert Text Behavior dialog, enter the following: ■ For : Use the dropdown arrow to select Edit and then navigate to select the inputText component into which the text will be inserted. ■ Value : Enter the value for the text to be inserted. If you want to insert static text, then enter that text. If you want the user to be able to insert the value of another component for example, the value of a selectOneChoice component, then enter an EL expression that resolves to that value. Example 9–3 shows page code for an inputText component into which either the value of a dropdown list or the value of static text can be inserted. Example 9–3 Using the insertTextBehavior Tag af:inputText clientComponent=true id=idInputText label=String value value={demoInput.value} rows=10 columns=60 af:selectOneChoice id=targetChoice autoSubmit=true value={demoInput.choiceInsertText} label=Select text to insert af:selectItem label=Some Text. value=Some Text. af:selectItem label=0123456789 value=0123456789 af:selectItem label=~ value=~ af:selectItem label=Two Lines value=\\nLine 1\\nLine 2 af:selectOneChoice Note: If you select inherit, and no ancestor components define the editable value, then the value always is used. Note: The insertTextBehavior tag cancels server-side event delivery automatically; actionListener or action attributes on the parent command component will be ignored. If you need to also trigger server-side functionality, you must add an custom client listener to deliver the server-side event. For more information, see Section 5.4, Sending Custom Events from the Client to the Server. Using Input Components and Defining Forms 9-11 af:commandButton text=Insert Selected Text id=firstButton partialTriggers=targetChoice af:insertTextBehavior for=idInputText value={demoInput.choiceInsertText} af:commandButton af:commandButton text=Insert Static Text af:insertTextBehavior for=idInputText value=Some Static Text. commandButton 4. By default, the text will be inserted when the action event is triggered by clicking the command component. However, you can change this to another client event by choosing that event from the dropdown menu for the triggerType attribute of the insertTextBehavior component in the Property Inspector.

9.4 Using the Input Number Components

The slider components present the user with a slider with one or two markers whose position on the slider corresponds to a value. The slider values are displayed and include a minus icon at one end and a plus icon at the other. The user selects the marker and moves it along the slider to select a value. The inputNumberSlider component has one marker and allows the user to select one value from the slider, as shown in Figure 9–8 in horizontal layout, and in Figure 9–9 in vertical layout. Figure 9–8 inputNumberSlider in Horizontal Layout Figure 9–9 InputNumberSlider in Vertical Layout The inputRangeSlider component has two markers and allows the user to pick the end points of a range, as shown in Figure 9–10 . Figure 9–10 inputRangeSlider in horizontal layout The inputNumberSpinbox is an input component that presents the user with an input field for numerical values and a set of up- and down-arrow keys to increment or decrement the current value in the input field, as shown in Figure 9–11 . 9-12 Web User Interface Developers Guide for Oracle Application Development Framework Figure 9–11 inputNumberSpinbox

9.4.1 How to Add an inputNumberSlider or an inputRangeSlider Component

When you add an inputNumberSlider or an inputRangeSlider component, you can determine the range of numbers shown and the increment of the displayed numbers. To add an inputNumberSlider or inputRangeSlider component: 1. In the Component Palette, from the Common Components panel, drag and drop an Input Number Slider or Input Range Slider onto the page. 2. In the Property Inspector, expand the Common section and for the inputRangeSlider component, also expand the Data section and set the following attributes: ■ Label : Specify a label for the component. ■ Minimum : Specify the minimum value that can be selected. This value is the begin value of the slider. ■ Maximum : Specify the maximum value that can be selected. This value is the end value of the slider. ■ MinimumIncrement : Specify the smallest possible increment. This is the increment that will be applied when the user clicks the plus or minus icon. ■ MajorIncrement : Specify the distance between two major marks. This value causes a labeled value to be displayed. For example, the majorIncrement value of the inputRangeSlider component in Figure 9–10 is 5.0. If set to less than 0, major increments will not be shown. ■ MinorIncrement : Specify the distance between two minor marks. If less than 0, minor increments will not be shown. ■ Value : Specify the value of the component. If the EL binding for value points to a bean property with a get method but no set method, the component will be rendered in read-only mode.

3. Expand the Appearance section and set Orientation to specify whether the

component will be in horizontal or vertical layout. For information about the other attributes in this section, see Section 9.3.1, How to Add an inputText Component.

9.4.2 How to Add an inputNumberSpinbox Component

The inputNumberSpinbox component allows the user to scroll through a set of numbers to select a value. To add an inputNumberSpinbox component: 1. In the Component Palette, from the Common Components panel, drag and drop an Input Number Spinbox onto the page. 2. Expand the Data section of the Property Inspector and set the following: ■ Value : Specify the value of the component. If the EL binding for value points to a bean property with a get method but no set method, the component will be rendered in read-only mode. Using Input Components and Defining Forms 9-13 ■ Minimum : Specify the minimum value allowed in the input field. ■ Maximum : Specify the maximum value allowed in the input field. ■ StepSize : Specify the increment by which the spinbox will increase or decrease the number in the input field. 3. Expand the Appearance section and set the attributes. For more information about setting these attributes, see Section 9.3.1, How to Add an inputText Component. 4. If you want the value of the spinbox to appear as read-only until the user hovers over it, expand the Other section and set Editable to onAccess. If you want the component to always appear editable, select always. If you want the value to be inherited from an ancestor component, select inherit.

9.5 Using Color and Date Choosers

The inputColor component presents a text input field for entering code for colors and a button for picking colors from a palette. The default color code format is the hexadecimal color format. However, you can override the format using a ColorConverter class. By default, the inputColor component opens the chooseColor component that allows users to pick the color from a a palette. Figure 9–12 shows the inputColor component with the chooseColor component in a popup dialog. Figure 9–12 inputColor Component with Popup chooseColor Component The inputDate component presents a text input field for entering dates and a button for picking dates from a popup calendar, as shown in Figure 9–13 . The default date format is the short date format appropriate for the current locale. For example, the default format in American English ENU is mmddyy. However, you can override the format using a date-time converter for more information about using converters, see Section 6.3, Adding Conversion . Note: If you select inherit, and no ancestor components define the editable value, then the value always is used.