Work with page builder navigation
Learn how the Page builder navigation widgets work and how to configure them.
Page builder navigation
There are two levels of navigation shown in the Page builder theme. Both are instances of the same iWidget, but are parameterized to use different pages and CSS styles.
- Banner navigation
location: list of links at the top of the page
file: PORTAL_HOME/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/PageBuilder2/bannerNav.jsp
level: 1
- Tabbed navigation
location: row of tabs beneath the banner navigation
file: PORTAL_HOME/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/PageBuilder2/tabNav.jsp
level: 2
Navigation rendering
Each of the iWidgets is rooted at a navigation level, and displays the children of its root. The Banner navigation is rooted at level 0, or Content Root, and so displays the first level of pages. The Tabbed navigation is rooted at level 1, and shows the pages at level 2 that are under its root node.
The JSP files shown above print out the markup shown by the navigation iWidgets, along the iWidget definition. On page load, the iWidget is initialized and consumes the markup generated by the JSP. See Page Builder iWidgets for more information about iWidgets.
The markup is generated by the JSP, so the user does not need to wait until the iWidget initializes to see the navigation.
Navigation attributes
Some attributes of the navigation iWidgets can be configured.
strings
attachNode
ID of the HTML node that holds the navigation markup
class
CSS class added to the HTML node that holds the navigation markup
tabListClass
CSS class added to the UL containing the list of pages
tabClass
CSS class added to every page
firstItemClass
CSS class added to the first page in the navigation
selectedClass
CSS class added to the selected page
varyLevelCondition
JavaScript executed to determine if the navigation root is one level deeper in the selection model than its configured level numbers
level
navigation level at which to root the iWidget, out of box this is 0 for the Banner navigation and 1 for the Tabbed navigation
levels
number of navigation levels to show beyond the start level (start level is set by the "level" attribute). If this is not specified, all levels are shown.
openDelay
milliseconds to wait after hovering over a tab before opening a popup menu of its children
popupDelay
milliseconds to wait before opening a sub menu off a child menu
closeDelay
milliseconds to wait before closing a menu after it loses focus booleans
showInlineEditor
true if a link to create a page is to be shown in page edit mode
dndOperable
true if the pages are to be drag and drop enabled in page edit mode
Configure the navigation
The navigation attributes are passed into the iWidgets by putting them in the "iw-ItemSet" markup of the definition.
<div class="iw-iWidget iw-Standalone" id="navigationContainer">
<a class="iw-Definition" href="/someurl/widget-catalog/ControlledNavWidget.xml"></a>
<span class="iw-ItemSet" style="display:none" title="attributes">
<a class="iw-Item" href="#level">1</a>
<a class="iw-Item" href="#tabListClass">lotusTabs</a>
</span>
</div>
The previous code shows tabbed navigation rooted at level 1. You can edit the iw-Items or add new ones in the JSP.
Navigation configuration examples
Make Banner navigation edits in PORTAL_HOME/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/PageBuilder2/bannerNav.jsp
Make Tabbed navigation edits in PORTAL_HOME/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/PageBuilder2/tabNav.jsp
Remove the New Page link
Remove the "#showInlineEditor" iw-Item.
Disable drag and drop
Remove the "#dndOperable" iw-Item.
Change the level of navigation
Remove the child page drop-down menus
Set the "#levels" iw-Item to 0.
<a class="iw-Item" href="#levels">0</a>
If adding or removing levels of navigation and navigation priming is enabled there is one additional configuration. In the config.jsp there is a navigation priming container with the ID "selectionPathPrimer". There is a loop within this container that out-of-box starts with a value of 1. If you remove the banner navigation, you should start this loop at 0.
Navigation iWidget details
Both navigation elements are instances of the ControlledNavWidget iWidget. The widget listens and responds to events to refresh its markup or switch to a new page.
When a page link is clicked in server-side mode, there is a full page refresh, therefore the iWidgets are destroyed and re-created. In client-side mode, there is no page refresh, so the navigation widgets simply refresh their markup to indicate the page switch.
The ControlledNavWidget uses a singleton instance of the NavigationController JavaScript class. This class provides a tree model of the navigation by using the Enabler run time APIs. See Enabler_API_Quick_Reference for more information about Enabler APIs.
The NavigationController also provides the current selection path. A selection path is a list of pages from the root, down the navigation tree to the currently selected page.
If adding or removing an instance of the navigation widget, also add or remove the container ID from the navigation priming attribute. To do this open theme.html and find the JavaScript object named "com.ibm.pb.themes.commonInit" set in an onload handler. Remove the nav widget container ID from the attribute named "navPrimingContainers". Out-of-box it looks like the following:
navPrimingContainers: ["selectionPathPrimer","topNavLinks","navTabsRoot"]
Parent Work with Page Builder
Related
Page builder menus
Page builder iWidgets
Previous
Create top level page tabs
Move page tabs
Create child pages
Move child pages
Add content
Change page style
Change page layout
Hide content
Share pages
Use a different Dojo version
Related reference
Page builder drag-and-drop
Hints and tips for page builder
Related information
Enabler API Quick Reference
|