First page Back Continue Last page Graphics

Binding the Navigation Pane to an XML Menu Model


Notes:

Binding the Navigation Pane

To display dynamic navigation controls similar to the one shown on the page at the right of the slide, you need to add a navigation pane for each level of the menu hierarchy. The navigation panes are identical except for the Level and Hint properties, so you can copy and paste them and change only those two properties. Set the following properties on the navigation panes:

Hint: Typical usage is buttons for level 0, tabs for level 1, and bar for level 2. The example in the slide shows a fourth level, level 3, which has Hint set to list.

Level: Top level is zero.

Value: Set to the EL expression for the root menu, such as #{root_menu}

Var (on the Data tab): Set to a name, such as menuInfo, that you refer to in the navigation item (added below) to get the needed data from the menu model

Now, add to the nodeStamp facet of the navigation pane a single navigation item. At run time, this stamps out the appropriate number of navigation items for the level of menu that is being displayed. The navigation items for all of the navigation panes should be identical, so you can copy and paste them. Set the following properties on the navigation item:

Rendered: #{<varvalue>.rendered} – for example, if the Var property on the navigation pane is set to menuInfo, then set Rendered to #{menuInfo.rendered}.

Text: #{menuInfo.label}

Icon: #{menuInfo.icon}