Adding navigation components to a JSF page

Adding navigation components to a JSF page

JSF Widget Library (JWL) components enable you do three things: (1) to create navigation based on logical actions that are encoded in the navigation rules rather than hard coding an HTML URI, (2) to create navigation by dynamically constructing a link when it is selected by the end user by wrapping it in HTML link functionality, and (3) to create compound navigation structures.

Create a JSF enabled dynamic Web project.

Create a JSF page.

With navigation components based on logical actions, the navigation component passes a command to the server where the action is sent to an action handler. After manipulation by the handler, the action is then evaluated against a set of navigation rules to determine which page is displayed next in the browser. HTML URIs are not hard-coded into a page, instead, logical actions are coded and the navigation logic is encoded in the navigation rules. Essentially the navigation structure is externalized into a separate model.
With navigation components based on dynamically constructing the link, the navigation component wrappers HTML link functionality, providing the ability to dynamically construct the link when it is emitted by the page.
Individual navigation components can be organized into more complex structures such as action bars (usually displayed as a row or column of buttons or links) or menu bars (an complex tree of menus of navigation components). A data table (or individual columns in a data table) can also be structured to contain navigation components.

Note: When selecting the forwarding option in the navigation map rules, the URL of the returned page is incorrect due to runtime implementation limitations. Because the URL is incorrect, you will not be able to refresh the page or use Back and Forward links. You are recommended to use the redirect navigation option.
The method by which page components are added to a page varies based on the component:
Table 1. Adding navigation components to a JSF page.
Navigation component¹ Tag Description How is component added to a page?
Button - Command <hx:commandExButton> Creates a push button that may have text and/or an image in it. If the button is of type submit, clicking the button submits the form and passes a command (action) to the server. The button may run an action. See Adding navigation rules to JSF components for information on actions and navigations rules. Drag
Button - Command from the palette onto the page.
Command row action <hx:commandExRowAction> Assigns a command (action) to a row of a data table. Clicking the row submits the page and passes a command (action) to the server along with the identity of the row that was clicked.

Click
Add an action that's performed when a row is clicked on the
Row actions tab of the
Properties view for the Data table - extended component.

Click
Clicking the row submits the form to the server. Parameters have to be set up manually. in the
Configure a RowAction dialog. Then click OK.

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

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:commandLink> Creates a hyperlink. Clicking the link submits the form and passes a command (action) to the server. The command determines the next page to display. See Adding hyperlinks to a Faces JSP file and Adding navigation rules to JSF components for information on hyperlinks, actions, and navigations rules. Drag
Link - Command from the palette onto the page.
Link <hx:outputLinkEx> Displays a hyperlink that goes to a specified URL. Drag
Link from the palette onto the page.
Panels - Menu bar <hx:panelActionbar> Inserts a panel that places commands into a menu bar. You can drag and drop buttons, hyperlinks, and horizontal rules to the panel or add them from within the Properties views of the components. You can also add a sub-menu bar within a menu bar. Drag
Panels - Menu bar from the palette onto the page.
Menu bar <hx:panelMenu> Displays a (hierarchical) menu bar of buttons and/or hyperlinks. Drag
Menu bar from the palette onto the page.
Link - Request <hx:requestLink> Displays a hyperlink. Clicking the link passes a command (action) to the server through the URL. The command determines the next page to display. Drag
Link - Request from the palette onto the page.
Request row action <hx:requestRowAction> Assigns a command (action) to a row of a data table. Clicking the row passes a command (action) to the server through the URL. The command/row clicked determines the next page to display.

Click
Add an action that's performed when a row is clicked on the
Row actions tab of the
Properties view for the Data table - extended component.

Click
Clicking the row sends a request to the server with row information sent as parameters. in the
Configure a RowAction dialog. Then click OK.

Once you have added a navigation component to your JSF page, configure the properties for the component. To open the Properties view, click

Window | Show View | Properties. For a description of the navigation component properties, refer to the specific navigation component listed.

¹ Click the link to see the component properties.

Navigation component¹	Tag	Description	How is component added to a page?
Button - Command	<hx:commandExButton>	Creates a push button that may have text and/or an image in it. If the button is of type submit, clicking the button submits the form and passes a command (action) to the server. The button may run an action. See Adding navigation rules to JSF components for information on actions and navigations rules.	Drag Button - Command from the palette onto the page.
Command row action	<hx:commandExRowAction>	Assigns a command (action) to a row of a data table. Clicking the row submits the page and passes a command (action) to the server along with the identity of the row that was clicked.	Click Add an action that's performed when a row is clicked on the Row actions tab of the Properties view for the Data table - extended component. Click Clicking the row submits the form to the server. Parameters have to be set up manually. in the Configure a RowAction dialog. Then click OK. Note: This component is only available on the Enhanced Faces Components drawer of the palette.
Link - Command 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:commandLink>	Creates a hyperlink. Clicking the link submits the form and passes a command (action) to the server. The command determines the next page to display. See Adding hyperlinks to a Faces JSP file and Adding navigation rules to JSF components for information on hyperlinks, actions, and navigations rules.	Drag Link - Command from the palette onto the page.
Link	<hx:outputLinkEx>	Displays a hyperlink that goes to a specified URL.	Drag Link from the palette onto the page.
Panels - Menu bar	<hx:panelActionbar>	Inserts a panel that places commands into a menu bar. You can drag and drop buttons, hyperlinks, and horizontal rules to the panel or add them from within the Properties views of the components. You can also add a sub-menu bar within a menu bar.	Drag Panels - Menu bar from the palette onto the page.
Menu bar	<hx:panelMenu>	Displays a (hierarchical) menu bar of buttons and/or hyperlinks.	Drag Menu bar from the palette onto the page.
Link - Request	<hx:requestLink>	Displays a hyperlink. Clicking the link passes a command (action) to the server through the URL. The command determines the next page to display.	Drag Link - Request from the palette onto the page.
Request row action	<hx:requestRowAction>	Assigns a command (action) to a row of a data table. Clicking the row passes a command (action) to the server through the URL. The command/row clicked determines the next page to display.	Click Add an action that's performed when a row is clicked on the Row actions tab of the Properties view for the Data table - extended component. Click Clicking the row sends a request to the server with row information sent as parameters. in the Configure a RowAction dialog. Then click OK.