Adding page components to a JSF page

Page components are used to mark a JSF page with tags that correspond to the major HTML structuring elements.

  1. Create a JSF enabled dynamic Web project.

  2. Create a JSF page.

    Note: When you create a JSF page, <f:view> is automatically added to the page.

All JSF pages (that are not fragments) normally include an <f:view> tag (corresponding to the HTML HTML tag which in turn contains an <hx:scriptCollector> tag. The HTML HTML, HEAD and BODY tags are also required in a JSF page. Thus a normal JSF page consists of the following tags: 

<HTML>
	<HEAD>
	</HEAD>
	<f:view>
		<BODY>
			<hx:scriptCollector id="scriptCollector1">
				<h:form styleClass="form" id="form1">
				</h:form>
			<hx:scriptCollector>
		</BODY>
	</f:view>
</HTML>

In addition, a pair of tags <f:subview> and <hx:viewFragment> can be used to mark out sub-namespaces within a page when including JSP or JSF fragments.

The method by which page components are added to a page varies based on the component:

Table 1. Adding page components to a JSF page.
Page component1 Tag Description How is component added to a page?
Form

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.

<h:form> A container tag that demarcates the area of the page that is submitted when the JavaScript submit is called or the Submit button is clicked.

  • Form is automatically added to the page when an input component is added to the page.

  • Drag the

    Form component from the palette onto the page.

Script collector <hx:scriptCollector> Similar to the HTML <body> tag. Script collector renders the HTML <body> tag, organizes page required JavaScript, and provides a point in the lifecycle where onPageLoad event can be served. Script collector is automatically added to the page when a JSF component is dropped on the page from the palette.
Subview <f:subview> A container tag for JSF tags. It is used in a nested page. Subview is automatically added to the page when pages are nested using jsp:include or any custom action that dynamically includes another page from the same Web application.
View <f:view> Similar to the HTML <html> tag. View is the container for all JSF tags. View is automatically added to the page when the JSP is created.
View fragment <hx:viewFragment> A container tag for JSF and HTML tags. It is used in a nested page. View fragment is automatically added to a JSP fragment. To create a JSP fragment, right-click your JSF enabled Web project and select

New | Web page. In the first page of the

New Web Page wizard, select JSP Fragment from the Template list.

Once you have added the page component to your JSF page, you can configure the component properties in the Properties view. To open the Properties view, click

Window | Show View | Properties.

1 Click the link to see the component properties.