Adding panel components to a JSF page

Adding panel components to a JSF page

Panel components contain collections of JSF Widget Library (JWL) tags much like the HTML table and div tags are used to organize tags in HTML.

Create a JSF enabled dynamic Web project.

Create a JSF page.

JSF tags, excluding the page tags, may only contain other JSF tags. Panel tags can be used to work around this restriction.
The method by which panel components are added to a page varies based on the component:
Table 1. Adding panel components to a JSF page
Panel component¹ Tag Description How is component added to a page?
Panel - Group Box Creates a panel component, a container in which you can group other components, on the page. You have the following options for this component:

Group

Box

Layout

Grid

JSP

Drag the Panel - Group Box component from the palette onto the page.

Select a panel type from the list.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Panel - Form Box <hx:panelFormBox> Creates an block panel contains a header area and one or more form items (label/field pairs).

Drag the Panel - Form Box component from the palette onto the page.

Panel - Form Box is automatically added to the page when a Form Item is added to the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Form Item <hx:formItem> Within a Form Box, creates a label/field pair along with associated info, error and/or help processing. Drag the Form Item component from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Form Messages Area <hx:formMessagesArea> Within a Form Box, creates a common area for the display of error messages.

Drag the Panel - Form Box component from the palette onto the page.

On the hx:panelFormBox tab of the Properties view for the Panel - Form Box component, select one or more of the
Show facet check boxes. The
Show messages area is enabled.

Select
Show messages area.

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

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:jspPanel> This component inserts a panel that can contain any other HTML, JSP, or Faces components within it. Most Faces components can contain other Faces tags but not HTML tags. However, this jspPanel component can contain both Faces and HTML tags. For example, you cannot usually create an HTML table within a column of a Faces data table. However, if you drag this component to the column, you can create an HTML table within it. In addition, the HTML table can also contain Faces tags. Drag the Panel - JSP component from the palette onto the page.

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

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:panelBox> Creates a one row or one column table with one JSF tag per cell. Drag the Panel - Box component from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Panel - Dialog <hx:panelDialog> Creates an block panel that behaves like a modal or modeless dialog box. The panel floats above the main page, displays an appropriate title bar, can be moved, and normally has a pair of OK and Cancel buttons. Drag the Panel - Dialog component from the palette onto the page.

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

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:panelGrid> Creates an table with x rows and y columns with one JSF tag per cell. Drag the Panel - Grid component from the palette onto the page.
Panel - Group

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:panelGroup> Creates an inline panel, that is, corresponds to an HTML SPAN. The panel may only contain JSF tags. Drag the Panel - Group component from the palette onto the page.
Panel - Layout

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:panelLayout> Snap to border that organizes components along the sides of the panel. Creates a five cell table with 3 rows where the top and bottom row are one cell and the middle row is three cells. JSF tags are organized into the five cells. Drag the Panel - Layout component from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Panel - Section <hx:panelSection> Creates a block panel that has a header that can be used to expand/collapse the display of the panel's content. Drag the Panel - Section component from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Panels - Tabbed <odc:tabbedPanel> Creates a set of overlapping, tabbed pages. Each page can contain a set of components. The user clicks a tab to show the contents of that page. Refer to Event handlers for tabbed panels for more information on the events that you can use with tabbed panels. Drag the Panel - Tabbed component from the palette onto the page.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Tabbed SubPanel <odc:bfPanel> Creates a subpanel (a tab) within a tabbed panel.

Drag the Panel - Tabbed component from the palette onto the page.

Add, reorder, and remove subpanels (tabs) on the
Panel List tab in the Properties view for the Panel - Tabbed.

Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Tabbed ButtonPanel <odc:buttonPanel> Creates a subpanel for buttons within a tabbed panel.

Drag the Panel - Tabbed component from the palette onto the page.

Click
Display custom contents in the button area on the odc:tabbedPanel tab of the Panel - Tabbed Properties view.

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

¹ Click the link to see the component properties.

Panel component¹	Tag	Description	How is component added to a page?
Panel - Group Box		Creates a panel component, a container in which you can group other components, on the page. You have the following options for this component: Group Box Layout Grid JSP	Drag the Panel - Group Box component from the palette onto the page. Select a panel type from the list. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Panel - Form Box	<hx:panelFormBox>	Creates an block panel contains a header area and one or more form items (label/field pairs).	Drag the Panel - Form Box component from the palette onto the page. Panel - Form Box is automatically added to the page when a Form Item is added to the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Form Item	<hx:formItem>	Within a Form Box, creates a label/field pair along with associated info, error and/or help processing.	Drag the Form Item component from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Form Messages Area	<hx:formMessagesArea>	Within a Form Box, creates a common area for the display of error messages.	Drag the Panel - Form Box component from the palette onto the page. On the hx:panelFormBox tab of the Properties view for the Panel - Form Box component, select one or more of the Show facet check boxes. The Show messages area is enabled. Select Show messages area. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Panel - JSP 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:jspPanel>	This component inserts a panel that can contain any other HTML, JSP, or Faces components within it. Most Faces components can contain other Faces tags but not HTML tags. However, this jspPanel component can contain both Faces and HTML tags. For example, you cannot usually create an HTML table within a column of a Faces data table. However, if you drag this component to the column, you can create an HTML table within it. In addition, the HTML table can also contain Faces tags.	Drag the Panel - JSP component from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Panel - Box 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:panelBox>	Creates a one row or one column table with one JSF tag per cell.	Drag the Panel - Box component from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Panel - Dialog	<hx:panelDialog>	Creates an block panel that behaves like a modal or modeless dialog box. The panel floats above the main page, displays an appropriate title bar, can be moved, and normally has a pair of OK and Cancel buttons.	Drag the Panel - Dialog component from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Panel - Grid 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:panelGrid>	Creates an table with x rows and y columns with one JSF tag per cell.	Drag the Panel - Grid component from the palette onto the page.
Panel - Group 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:panelGroup>	Creates an inline panel, that is, corresponds to an HTML SPAN. The panel may only contain JSF tags.	Drag the Panel - Group component from the palette onto the page.
Panel - Layout 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:panelLayout>	Snap to border that organizes components along the sides of the panel. Creates a five cell table with 3 rows where the top and bottom row are one cell and the middle row is three cells. JSF tags are organized into the five cells.	Drag the Panel - Layout component from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Panel - Section	<hx:panelSection>	Creates a block panel that has a header that can be used to expand/collapse the display of the panel's content.	Drag the Panel - Section component from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Panels - Tabbed	<odc:tabbedPanel>	Creates a set of overlapping, tabbed pages. Each page can contain a set of components. The user clicks a tab to show the contents of that page. Refer to Event handlers for tabbed panels for more information on the events that you can use with tabbed panels.	Drag the Panel - Tabbed component from the palette onto the page. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Tabbed SubPanel	<odc:bfPanel>	Creates a subpanel (a tab) within a tabbed panel.	Drag the Panel - Tabbed component from the palette onto the page. Add, reorder, and remove subpanels (tabs) on the Panel List tab in the Properties view for the Panel - Tabbed. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Tabbed ButtonPanel	<odc:buttonPanel>	Creates a subpanel for buttons within a tabbed panel.	Drag the Panel - Tabbed component from the palette onto the page. Click Display custom contents in the button area on the odc:tabbedPanel tab of the Panel - Tabbed Properties view. Note: This component is only available on the Enhanced Faces Components drawer of the palette.