Adding output components to a JSF page

Adding output components to a JSF page

Output components are used to interact with a user and submit the results of the interaction back to the server for processing.

Create a JSF enabled dynamic Web project.

Create a JSF page.

The method by which output components are added to a page varies based on the component:
Table 1. Adding output components to a JSF page
Output component¹ Tag Description How is component added to a page?
Output <h:outputText> Creates output text that cannot be modified by the user. The text can be static or bound to a data source. Output components can display data from a data source as well as to display static text within most other Faces components (for example, as a label for an input field).
When you add an output component, choose one of the following formats on the Properties view for the Output component:

<outputText>

<convertNumber>

<convertDateTime>

<convertMask>
Drag the Output component from the palette onto the page.
Output - Formatted Text <h:outputFormat> Outputs a formatted message to the page. The message can be a combination of static text and dynamic data that comes from a data storage. Drag the Output - Formatted component from the palette onto the page.
Image <hx:graphicImageEx> Displays an image on the page. Can display an image from a data source as well. Refer to Displaying images for more information on images. Drag the Image component from the palette onto the page.
Error message <h:message> Inserts error text that is conditionally displayed. Errors are associated with a specific component. Refer to Managing errors in JavaServer Faces applications for more information on this component. Drag the Display Error component from the palette onto the page.
Error messages <h:messages> Inserts error messages that are conditionally displayed when an error has occurred on the page. Displays errors for entire page. Refer to Managing errors in JavaServer Faces applications for more information on error components. Drag the Display Errors component from the palette onto the page.
Label <h:outputLabel> Inserts an accessibility output label. Refer to Adding a label component for accessibility for more information on the label component. Drag the Label component from the palette onto the page.
Horizontal Rule

Remember: This tag is initially hidden on the Palette. To display this tag on the Palette right-click the Palette and deselect
Hide for this tag.
<hx:outputSeparator> Creates a horizontal line to visually separate information on the page. Drag the Horizontal Rule component from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Progress Bar <hx:outputProgressbar> Displays an (animated) progress bar. Drag the Progress Bar component from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Media Player Creates a media component on the page so that various kinds of media files can be played on the Web page. Refer to Adding media components for more information on media components.

Drag the Media Player component from the palette onto the page.

Select a media player from the list.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Media - Macromedia Flash Player

Remember: This tag is initially hidden on the Palette. To display this tag on the Palette right-click the Palette and deselect
Hide for this tag.
<hx:playerFlash> Creates a media component on the page so that various kinds of media files can be played on the Web page. Refer to Adding media components for more information on media components. This component plays Flash files on the Web page. There are two ways to add Flash Player to a page:

Drag the Media Player component from the palette onto the page then select Macromedia Flash Player from the Select Type dialog.

Drag Media - Macromedia Flash Player from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Media - Generic A/V Player

Remember: This tag is initially hidden on the Palette. To display this tag on the Palette right-click the Palette and deselect
Hide for this tag.
<hx:playerGenericPlayer> Creates a media component on the page so that various kinds of media files can be played on the Web page. Refer to Adding media components for more information on media components. There are two ways to add Generic Player to a page:

Drag the Media Player component from the palette onto the page then select Generic Player from the Select Type dialog.

Drag Media - Generic A/V Player from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Media - Windows® Media Player

Remember: This tag is initially hidden on the Palette. To display this tag on the Palette right-click the Palette and deselect
Hide for this tag.
<hx:playerMediaPlayer> Creates a media component on the page so that various kinds of media files can be played on the Web page. See Adding media components for more information on media components. There are two ways to add Windows Media Player to a page:

Drag the Media Player component from the palette onto the page then select Windows Media Player from the Select Type dialog.

Drag Media - Windows Media Player from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Media - Real Network RealOne Player

Remember: This tag is initially hidden on the Palette. To display this tag on the Palette right-click the Palette and deselect
Hide for this tag.
<hx:playerRealPlayer> Creates a media component on the page so that various kinds of media files can be played on the Web page. Refer to Adding media components for more information on media components. This component plays Real Network RealOne Player files on the Web page. These files can be either audio or video files. There are two ways to add RealPlayer to a page:

Drag the Media Player component from the palette onto the page then select RealPlayer from the Select Type dialog.

Drag Media - RealPlayer from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Media - Macromedia Shockwave Player

Remember: This tag is initially hidden on the Palette. To display this tag on the Palette right-click the Palette and deselect
Hide for this tag.
<hx:playerShockwave> Creates a media component on the page so that various kinds of media files can be played on the Web page. Refer toAdding media components for more information on media components. This component plays Macromedia Shockwave Player files on the Web page. There are two ways to add Shockwave Player to a page:

Drag the Media Player component from the palette onto the page then select Macromedia Shockwave Player from the Select Type dialog.

Drag Media - Macromedia Shockwave Player from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.

¹ Click the link to see the component properties.

Output component¹	Tag	Description	How is component added to a page?
Output	<h:outputText>	Creates output text that cannot be modified by the user. The text can be static or bound to a data source. Output components can display data from a data source as well as to display static text within most other Faces components (for example, as a label for an input field). When you add an output component, choose one of the following formats on the Properties view for the Output component: <outputText> <convertNumber> <convertDateTime> <convertMask>	Drag the Output component from the palette onto the page.
Output - Formatted Text	<h:outputFormat>	Outputs a formatted message to the page. The message can be a combination of static text and dynamic data that comes from a data storage.	Drag the Output - Formatted component from the palette onto the page.
Image	<hx:graphicImageEx>	Displays an image on the page. Can display an image from a data source as well. Refer to Displaying images for more information on images.	Drag the Image component from the palette onto the page.
Error message	<h:message>	Inserts error text that is conditionally displayed. Errors are associated with a specific component. Refer to Managing errors in JavaServer Faces applications for more information on this component.	Drag the Display Error component from the palette onto the page.
Error messages	<h:messages>	Inserts error messages that are conditionally displayed when an error has occurred on the page. Displays errors for entire page. Refer to Managing errors in JavaServer Faces applications for more information on error components.	Drag the Display Errors component from the palette onto the page.
Label	<h:outputLabel>	Inserts an accessibility output label. Refer to Adding a label component for accessibility for more information on the label component.	Drag the Label component from the palette onto the page.
Horizontal Rule Remember: This tag is initially hidden on the Palette. To display this tag on the Palette right-click the Palette and deselect Hide for this tag.	<hx:outputSeparator>	Creates a horizontal line to visually separate information on the page.	Drag the Horizontal Rule component from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Progress Bar	<hx:outputProgressbar>	Displays an (animated) progress bar.	Drag the Progress Bar component from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Media Player		Creates a media component on the page so that various kinds of media files can be played on the Web page. Refer to Adding media components for more information on media components.	Drag the Media Player component from the palette onto the page. Select a media player from the list. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Media - Macromedia Flash Player Remember: This tag is initially hidden on the Palette. To display this tag on the Palette right-click the Palette and deselect Hide for this tag.	<hx:playerFlash>	Creates a media component on the page so that various kinds of media files can be played on the Web page. Refer to Adding media components for more information on media components. This component plays Flash files on the Web page.	There are two ways to add Flash Player to a page: Drag the Media Player component from the palette onto the page then select Macromedia Flash Player from the Select Type dialog. Drag Media - Macromedia Flash Player from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Media - Generic A/V Player Remember: This tag is initially hidden on the Palette. To display this tag on the Palette right-click the Palette and deselect Hide for this tag.	<hx:playerGenericPlayer>	Creates a media component on the page so that various kinds of media files can be played on the Web page. Refer to Adding media components for more information on media components.	There are two ways to add Generic Player to a page: Drag the Media Player component from the palette onto the page then select Generic Player from the Select Type dialog. Drag Media - Generic A/V Player from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Media - Windows® Media Player Remember: This tag is initially hidden on the Palette. To display this tag on the Palette right-click the Palette and deselect Hide for this tag.	<hx:playerMediaPlayer>	Creates a media component on the page so that various kinds of media files can be played on the Web page. See Adding media components for more information on media components.	There are two ways to add Windows Media Player to a page: Drag the Media Player component from the palette onto the page then select Windows Media Player from the Select Type dialog. Drag Media - Windows Media Player from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Media - Real Network RealOne Player Remember: This tag is initially hidden on the Palette. To display this tag on the Palette right-click the Palette and deselect Hide for this tag.	<hx:playerRealPlayer>	Creates a media component on the page so that various kinds of media files can be played on the Web page. Refer to Adding media components for more information on media components. This component plays Real Network RealOne Player files on the Web page. These files can be either audio or video files.	There are two ways to add RealPlayer to a page: Drag the Media Player component from the palette onto the page then select RealPlayer from the Select Type dialog. Drag Media - RealPlayer from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Media - Macromedia Shockwave Player Remember: This tag is initially hidden on the Palette. To display this tag on the Palette right-click the Palette and deselect Hide for this tag.	<hx:playerShockwave>	Creates a media component on the page so that various kinds of media files can be played on the Web page. Refer toAdding media components for more information on media components. This component plays Macromedia Shockwave Player files on the Web page.	There are two ways to add Shockwave Player to a page: Drag the Media Player component from the palette onto the page then select Macromedia Shockwave Player from the Select Type dialog. Drag Media - Macromedia Shockwave Player from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.