Simple Navigator XPages Control

A new re-usable control has been posted on OpenNTF. This control is a simple navigator that can be used to display links in a flat list, e.g. in the left sidebar. The control has been implemented as custom XPages control which can easily be re-used in custom applications.

You can get it from the OpenNTF catalog and you can try it live here.

A picture named M2

How to re-use control in custom application

Copy the following design elements from navigator.nsf in your nsf or ntf:
• Custom control: ccSimpleNavigator
• Custom control: ccSimpleNavigatorConfig
• JavaScript library (client): SimpleNavigatorClient
• JavaScript library (server): SimpleNavigatorServer
• Resources-Themes: blue

Custom control: ccSimpleNavigator

This is the core custom control of the navigator. There are three properties to configure what links to show.

Property name	Type	Default	Description	Sample value
itemTitles	string	“”	Comma delimited string with potentially multiple values	“Navigator UI Test,Navigator Server API Test,Navigator Client API Test,Navigator URL Param Test, OpenNTF.org"
itemLinks	string	“”	Comma delimited string with potentially multiple values	“NavigatorTest.xsp,NavigatorServerAPITest.xsp,NavigatorClientAPITest.xsp,NavigatorURLParamTest.xsp?selection=3,http://www.openntf.org"
selection	int	0 (if used in Xpage) compositeDate.selection if ccSimpleNavigatorConfig is used	Index of to be selected navigator item (starting at '0')	0

Sample:<xc:ccSimpleNavigator selection="#{javascript:compositeData.selection}" itemTitles="Navigator UI Test,Navigator Server API Test,Navigator Client API Test,Navigator URL Param Test, OpenNTF.org"itemLinks="NavigatorTest.xsp,NavigatorServerAPITest.xsp,NavigatorClientAPITest.xsp,NavigatorURLParamTest.xsp?selection=3,http://www.openntf.org"> </xc:ccSimpleNavigator>

Custom control: ccSimpleNavigatorConfig

A navigator is typically used on multiple pages. To define its configuration only once there is a second custom control that should be used in custom XPages and that contains the core navigator custom control.

Property name	Type	Default	Description	Sample value
selection	int	0	Index of to be selected navigator item (starting at '0')	0

Sample:<xc:ccSimpleNavigatorConfigselection="0"> </xc:ccSimpleNavigatorConfig>

URL parameters

There is one URL parameter to define the navigator item that needs to be selected. This parameter overwrites the value that has been defined in the compositeData of either of the two custom controls.

Sample:
http://localhost/navigator.nsf/NavigatorURLParamTest.xsp?selection=3

A constant has been defined in the JavaScript library 'SimpleNavigatorServer'. var URL_PARAM_SELECTION = "selection";

Server side JavaScript library: SimpleNavigatorServer

Class SimpleNavigator

Methods	Input	Output	Description
`getItemCount`	-	int	`returns the count of navigator items as int`
`getItemTitle`	index:int	string	`returns the title as string of the navigator item at position 'index' (index starting at '0')`
`getItemLink`	index:int	string	`returns the link as string of the navigator item at position 'index' (index starting at '0')`
`getItems`	-	Array of strings	`returns an array of strings with the titles of all navigator items`
`getSelection`	context:XSPContext	int	`returns the index of the selected navigator item as int. returns '0' if nothing is selected (index starting at '0'). pass in 'context' (XSPContext) so that the parameter can be read from the URL`
`getSelectedItemTitle`	context:XSPContext	string	`returns the title of the selected navigator item as string. pass in 'context' (XSPContext) so that the parameter can be read from the URL`

The class SimpleNavigator is initialized automatically by the custom navigator control. To use it you need to obtain an instance of this class (singleton): SimpleNavigator navigator = getSimpleNavigatorInstance();
See the unit test XPage 'NavigatorServerAPITest' for more.

Client side JavaScript library: SimpleNavigatorClient

Class UISimpleNavigator

Methods	Input	Output	Description
`getSelectedItemTitle`	-	string	`returns the title of the selected navigator item as string`
`unselectAllItems`	-	-	`removes the selection in the navigator, if anything is selected`

The class UISimpleNavigator doesn't have to be initialized. To use the class simply create an instance:var navigator = new UISimpleNavigator();alert(navigator.getSelectedItemTitle());
See the unit test XPage 'NavigatorClientAPITest' for more.

User styles and themes

The theme 'blue' is used by the navigator control.

The following styles which come with Lotus Domino 8.5 out of the box (not in navigator.nsf) are used by the core custom control. They can be modified by copying and pasting them into the NSF with the navigator and refering to them in the theme 'blue' instead of refering to the default files. styleClass="lotusMenu" styleClass="lotusBottomCorner"id="lotusBottomCorner" styleClass="lotusInner"id="lotusInner" styleClass=”lotusSelected”

Additionally the following style is used by the core navigator which can be modified directly in ccSimpleNavigator:styleClass="lotusMenuSection2"

Furthermore the following styles from Lotus Domino 8.5 are used by the sample and unit test XPages:id="lotusFrame" class="lotusBanner" id="lotusMain" id="lotusColLeft"