Adding input components to a JSF page

Adding input components to a JSF page

Input Components interact with a user and submit the results of the interaction back to the server for processing. 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.

Create a JSF enabled dynamic Web project.

Create a JSF page.

The method by which input components are added to a page varies based on the component:
Table 1. Adding input components to a JSF page
Input component¹ Tag Description How is component added to a page?
Input <h:inputText> Creates a single-line input control used to input text or formatted text such as a number, date, time, or formatted string. The control can be augmented with various kinds of input assist components including keystroke management, typeahead support and helper buttons. You can create an input field for the following types of data:

inputText

convertNumber

convertDateTime

convertMask
Drag the Input component from the palette onto the page.
Input - Text Area <h:inputTextarea> Creates a multi-line input control used to input lengthy unformatted text. Drag the Input - Text Area component from the palette onto the page.
Input - Rich Text Area <r:inputRichText> Inserts a rich text editor component. Like the Input - Text Area component, this component can have text on multiple lines. Unlike the Input Text Area, this component can contain different fonts and sizes, tables, links, and numbered and unordered lists. Drag the Input - Rich Text Area component from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Helper - DatePicker <hx:inputHelperDatePicker> Adds a date picker helper button to an inputText field. Clicking the helper button displays a pop-up containing a calendar that can be used to choose a date.

Drag the Input component from the palette onto the page.

On the h:inputText tab of the Properties view for the Input component, select
Date/Time in the
Format list.

Click
Show helper button.

Helper - Slider <hx:inputHelperSlider> Adds a numeric slider helper button to an inputText field. Clicking the helper button displays a pop-up containing a slider that can be used to choose a number.

Drag the Input component from the palette onto the page.

On the h:inputText tab of the Properties view for the Input component, select
Number in the
Format list.

Click
Show helper button then click
Slider from the
Type list.

Helper - Spinner <hx:inputHelperSpinner> Adds a pair of up/down spinner buttons to an inputText field. Clicking a spinner button increments/decrements a numeric or time value.

Drag the Input component from the palette onto the page.

On the h:inputText tab of the Properties view for the Input component, select
Number in the
Format list.

Click
Show helper button then click
Spinner from the
Type list.

*Input - Hidden <h:inputHidden> Inserts a hidden input component. This component is often used by developers to pass data between pages or controls on the page. Drag the Input - Hidden component from the palette onto the page.
Input - Password <h:inputSecret> Adds a password input field to the page. Text entered into the field is echoed back to the user in a modified form (usually as asterisks) and the browser tries to protect the password from being accessible as clear text to other programs. Drag the Input - Password component from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
File Upload <hx:fileupload> Displays an input field and associated Browse button for uploading a file. See Adding a file upload component to a Web page for more information on the file upload component. Drag the File Upload component from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Select - Calendar <h:inputMiniCalendar> Adds small calendar to the page. A user can select a date by clicking a day in the calendar. Drag the Select - Calendar component from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Check box <h:selectBooleanCheckbox> Creates an unlabeled boolean check box. See Adding selection lists to a Faces JSP file for more information on this component. Drag the Check Box component from the palette onto the page.
Check box group <h:hx:selectManyCheckbox> Creates a set of labelled check boxes. A user may select zero or more choices from the list of buttons. Refer to Adding selection lists to a Faces JSP file for more information on this component. Drag the Check Box Group component from the palette onto the page.
Radio Button Group <h:selectOneRadio> Creates a group of labelled radio buttons. A user may select one choice from the list of buttons. Refer to Adding selection lists to a Faces JSP file for more information on this component. Drag the Radio Button Group component from the palette onto the page.
Combo Box - Single Select <h:selectOneMenu> Displays a drop-down combo box from which the user chooses one item. The combo box input field is not directly editable. Refer to Adding selection lists to a Faces JSP file for more information on this component. Drag the Combo Box component from the palette onto the page.
Combo box - Multiple Select <h:selectManyMenu> Displays a drop-down combo box from which the user chooses one or more items. The combo box input field is not directly editable. Refer to Adding selection lists to a Faces JSP file for more information on this component. Drag the Combo Box - Multiple Select from the palette onto the page.

Note: This component is only available on the Standard Faces Components drawer of the palette.
Select Color <h:selectOneColor> Displays a drop-down combo box from which the user chooses a color. The combo box input field is not directly editable. Drag the Select - Color component from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
List Box - Single Select <h:selectOneListbox> Inserts a list box in which the user selects one item. Refer to Adding selection lists to a Faces JSP file for more information on this component. Drag the List Box - Single Select component onto the page.
List Box - Multiple Select <h:selectManyListbox> Inserts a list box in which the user can select multiple items. See Adding selection lists to a Faces JSP file for more information on this component. Drag the List Box - Multiple Select component onto the page.

¹ Click the link to see the component properties.

Input component¹	Tag	Description	How is component added to a page?
Input	<h:inputText>	Creates a single-line input control used to input text or formatted text such as a number, date, time, or formatted string. The control can be augmented with various kinds of input assist components including keystroke management, typeahead support and helper buttons. You can create an input field for the following types of data: inputText convertNumber convertDateTime convertMask	Drag the Input component from the palette onto the page.
Input - Text Area	<h:inputTextarea>	Creates a multi-line input control used to input lengthy unformatted text.	Drag the Input - Text Area component from the palette onto the page.
Input - Rich Text Area	<r:inputRichText>	Inserts a rich text editor component. Like the Input - Text Area component, this component can have text on multiple lines. Unlike the Input Text Area, this component can contain different fonts and sizes, tables, links, and numbered and unordered lists.	Drag the Input - Rich Text Area component from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Helper - DatePicker	<hx:inputHelperDatePicker>	Adds a date picker helper button to an inputText field. Clicking the helper button displays a pop-up containing a calendar that can be used to choose a date.	Drag the Input component from the palette onto the page. On the h:inputText tab of the Properties view for the Input component, select Date/Time in the Format list. Click Show helper button.
Helper - Slider	<hx:inputHelperSlider>	Adds a numeric slider helper button to an inputText field. Clicking the helper button displays a pop-up containing a slider that can be used to choose a number.	Drag the Input component from the palette onto the page. On the h:inputText tab of the Properties view for the Input component, select Number in the Format list. Click Show helper button then click Slider from the Type list.
Helper - Spinner	<hx:inputHelperSpinner>	Adds a pair of up/down spinner buttons to an inputText field. Clicking a spinner button increments/decrements a numeric or time value.	Drag the Input component from the palette onto the page. On the h:inputText tab of the Properties view for the Input component, select Number in the Format list. Click Show helper button then click Spinner from the Type list.
*Input - Hidden	<h:inputHidden>	Inserts a hidden input component. This component is often used by developers to pass data between pages or controls on the page.	Drag the Input - Hidden component from the palette onto the page.
Input - Password	<h:inputSecret>	Adds a password input field to the page. Text entered into the field is echoed back to the user in a modified form (usually as asterisks) and the browser tries to protect the password from being accessible as clear text to other programs.	Drag the Input - Password component from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
File Upload	<hx:fileupload>	Displays an input field and associated Browse button for uploading a file. See Adding a file upload component to a Web page for more information on the file upload component.	Drag the File Upload component from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Select - Calendar	<h:inputMiniCalendar>	Adds small calendar to the page. A user can select a date by clicking a day in the calendar.	Drag the Select - Calendar component from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Check box	<h:selectBooleanCheckbox>	Creates an unlabeled boolean check box. See Adding selection lists to a Faces JSP file for more information on this component.	Drag the Check Box component from the palette onto the page.
Check box group	<h:hx:selectManyCheckbox>	Creates a set of labelled check boxes. A user may select zero or more choices from the list of buttons. Refer to Adding selection lists to a Faces JSP file for more information on this component.	Drag the Check Box Group component from the palette onto the page.
Radio Button Group	<h:selectOneRadio>	Creates a group of labelled radio buttons. A user may select one choice from the list of buttons. Refer to Adding selection lists to a Faces JSP file for more information on this component.	Drag the Radio Button Group component from the palette onto the page.
Combo Box - Single Select	<h:selectOneMenu>	Displays a drop-down combo box from which the user chooses one item. The combo box input field is not directly editable. Refer to Adding selection lists to a Faces JSP file for more information on this component.	Drag the Combo Box component from the palette onto the page.
Combo box - Multiple Select	<h:selectManyMenu>	Displays a drop-down combo box from which the user chooses one or more items. The combo box input field is not directly editable. Refer to Adding selection lists to a Faces JSP file for more information on this component.	Drag the Combo Box - Multiple Select from the palette onto the page. Note: This component is only available on the Standard Faces Components drawer of the palette.
Select Color	<h:selectOneColor>	Displays a drop-down combo box from which the user chooses a color. The combo box input field is not directly editable.	Drag the Select - Color component from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
List Box - Single Select	<h:selectOneListbox>	Inserts a list box in which the user selects one item. Refer to Adding selection lists to a Faces JSP file for more information on this component.	Drag the List Box - Single Select component onto the page.
List Box - Multiple Select	<h:selectManyListbox>	Inserts a list box in which the user can select multiple items. See Adding selection lists to a Faces JSP file for more information on this component.	Drag the List Box - Multiple Select component onto the page.