Adding input components to a Faces JSP page

Adding input components to a Faces JSP page

The input components you add to a Faces JSP page provide a way for users to create and update data for your Web application. Input components on the Faces Components drawer of the palette include Input, Input Text Area, Rich Text Area, Input - Password, and Input - Hidden.

To add an Input component to your page:
Drag an Input component from the palette to the page. The Properties view displays properties for the Input component.
In the Properties view for the Input component (inputText), you can set the following properties: You can also bind the component to a record in the Value field To bind a control, you can either click the Bind To button located next to the value field on the basic tab of the properties view or drop a property from the Page Data view directly onto the control. These two methods work only if a data source has already been defined.
Optionally, change the ID that was automatically generated for the input component
Set the style properties (font, font size, layout, color) and style classes (style sheets).
In the Value field, bind the component to a record. To bind the component, you can either click the Bind To button located next to the Value field or you can drag a property from the Page Data view directly onto the component. Note that these two methods work only if a data source has already been defined.

Choose a Format from the list:

Option Description
String This is the default format. Allows users to enter alphanumeric text strings.
Number Allows users to enter numbers. If you choose Number, you can set the following number properties on the panel:
Type: Choose Decimal, Currency, Percent, or Custom. If you choose Custom, you can customize the number style. For example, with 0.00%, you can use decimals in percentages.
Input assistance - Show helper button: Check Show helper button if you want to add a spinner or a slider to help the user choose a number. A spinner lets the user select a value by using arrows to increase or decrease the value. A slider lets the user enter a value within a range. For both helpers, you can also specify an Increment. For example, if you enter 10 as the increment, the slider or spinner increments the number by 10. This option is useful if you have large numbers. You can also specify upper and lower boundaries for the for both spinner and slider
Show prompt character: Enables automatic formatting of input numbers on the browser. For example, if the user enter a number such as 1234567, the comma is automatically inserted in the appropriate places: 1,234,567. You can choose from among several prompt characters. Checking this property also causes a prompt character to be displayed when you run on server.
Note that automatic formatting does not work for percent numbers and for custom formatting.

Date/Time Allows users to enter a date, time, or both. If you choose Date/Time, you can set the following attributes:
Type: Choose Date only, Time only, or Both from the list.
Date style: Sets the style for the date. For example: Apr 2, 2004. If you choose Custom, you can set a custom date style pattern in the Pattern field.
Time style: Sets the style for the date. For example: 11:29:48 PM. If you choose Custom, you can set a custom time style pattern in the Pattern field.
Input assistance: Check Show helper button to add a calendar helper (if you chose Date) or clock helper (if you chose Time) for the user. If you add a clock helper, you can also set an increment.
Show prompt character: Enables automatic formatting of input dates on the browser. For example, the input date may be shown as "__/__/____". The underscore character ( _ ) is replaced as the user enters the date.
Prompt character: Replace the default underscore character ( _ ) with the character that you specify here.

Mask Sets up a mask to filter the alphanumeric input the user enters. If you choose Mask, you can set the following attributes:
Mask: Choose a pre-defined mask or enter your own. The pound character (#) represents a number and the question mark character (?) represents a letter. Masks can help users enter input such as telephone numbers or badge numbers (which can be a mix of letters and numbers).
Input assistance - Show prompt character: Enables automatic formatting of input data on the browser. For example, if you specified the Mask, "###-##-####", the input fields is shown as "___-__-____". The underscore characters ( _ ) are replaced as the user enters the numbers.

On the Validation tab (under inputText), you can set the validation on the server when the user input is submitted. You can require the user to enter input by checking Value is required. You can set minimum and maximum values. For strings, you can set constraints so that only alphabetic or only numeric strings are allowed. Check Display validation error messages in an error message control to create a Display Error component automatically that displays an error message if validation fails on the input component. Click Click to create/edit custom validation code to switch to the Quick Edit view and create custom code.
On the Behavior tab (under inputText), you set behavior and validation for the Input component on the client. You can disable the component for the user, make the component read-only for the user, advance to the next component when the user finishes entering input, or set a maximum length for the component when it is submitted to the server. You can also enable validation on the client and choose actions if validation succeeds or if it fails. For example, you can disable the input field once the user succeeds. (Note that if you want "Auto-advance to next control" to work for Date/Time components, also have selected "Display prototype mask in the field" on the Validation tab.
On the Accessibility tab (under inputText), you can set a keyboard key as an access key (clicking this key at run time causes the component to gain focus), a tabbing order for the component, and a title (which can give the user a tip at run time).
In addition to adding an Input component to a page, you can drag the following input components to the page:

Option Description
Input - Text Area A text input field of multiple lines. You can set the number of lines on the Properties panel. Most of the other properties are similar to the ones for the Input component.
Rich Text Area A rich text field that allows users to create and edit rich text documents.
Input - Password A text input field in which the user enters a password.
Input - Hidden An input field that is hidden. Input - Hidden components are often used by developers to pass data between pages or controls on the page.

To view several limitations on Faces Web applications, see Limitations: Faces JSP applications.

Related concepts
JavaServer Faces

Related tasks
Creating Faces applications - overview
Creating a Faces JSP file
Adding validation to Faces input components
Creating an input form

Related reference
Faces components reference
Attributes for Faces components

Option	Description
String	This is the default format. Allows users to enter alphanumeric text strings.
Number	Allows users to enter numbers. If you choose Number, you can set the following number properties on the panel: Type: Choose Decimal, Currency, Percent, or Custom. If you choose Custom, you can customize the number style. For example, with 0.00%, you can use decimals in percentages. Input assistance - Show helper button: Check Show helper button if you want to add a spinner or a slider to help the user choose a number. A spinner lets the user select a value by using arrows to increase or decrease the value. A slider lets the user enter a value within a range. For both helpers, you can also specify an Increment. For example, if you enter 10 as the increment, the slider or spinner increments the number by 10. This option is useful if you have large numbers. You can also specify upper and lower boundaries for the for both spinner and slider Show prompt character: Enables automatic formatting of input numbers on the browser. For example, if the user enter a number such as 1234567, the comma is automatically inserted in the appropriate places: 1,234,567. You can choose from among several prompt characters. Checking this property also causes a prompt character to be displayed when you run on server. Note that automatic formatting does not work for percent numbers and for custom formatting.
Date/Time	Allows users to enter a date, time, or both. If you choose Date/Time, you can set the following attributes: Type: Choose Date only, Time only, or Both from the list. Date style: Sets the style for the date. For example: Apr 2, 2004. If you choose Custom, you can set a custom date style pattern in the Pattern field. Time style: Sets the style for the date. For example: 11:29:48 PM. If you choose Custom, you can set a custom time style pattern in the Pattern field. Input assistance: Check Show helper button to add a calendar helper (if you chose Date) or clock helper (if you chose Time) for the user. If you add a clock helper, you can also set an increment. Show prompt character: Enables automatic formatting of input dates on the browser. For example, the input date may be shown as "__/__/____". The underscore character ( _ ) is replaced as the user enters the date. Prompt character: Replace the default underscore character ( _ ) with the character that you specify here.
Mask	Sets up a mask to filter the alphanumeric input the user enters. If you choose Mask, you can set the following attributes: Mask: Choose a pre-defined mask or enter your own. The pound character (#) represents a number and the question mark character (?) represents a letter. Masks can help users enter input such as telephone numbers or badge numbers (which can be a mix of letters and numbers). Input assistance - Show prompt character: Enables automatic formatting of input data on the browser. For example, if you specified the Mask, "###-##-####", the input fields is shown as "___-__-____". The underscore characters ( _ ) are replaced as the user enters the numbers.

Option	Description
Input - Text Area	A text input field of multiple lines. You can set the number of lines on the Properties panel. Most of the other properties are similar to the ones for the Input component.
Rich Text Area	A rich text field that allows users to create and edit rich text documents.
Input - Password	A text input field in which the user enters a password.
Input - Hidden	An input field that is hidden. Input - Hidden components are often used by developers to pass data between pages or controls on the page.