The Navigator and Dynamic View Panel controls of the Extension Library

In this article I implement the Navigator and Dynamic View Panel controls of the XPages Extension Library in a similar way to the navigator and views in a frameset of a lotus database open using the lotus client.

1. create a lotus database with at least a form, two views and some documents
2. create a custom control cc_luni_view with the following code:

   <?xml version="1.0" encoding="UTF-8"?>
   <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
   	<xe:dynamicViewPanel id="dynamicViewPanel1">
   		<xe:this.data>
   			<xp:dominoView var="view1">
   				<xp:this.viewName><![CDATA[#{javascript:var currentView = compositeData.viewName;
   var defaultView = compositeData.defaultViewName;
   if(currentView==null)
   	return defaultView;
   else
   	return currentView;}]]></xp:this.viewName>
   			</xp:dominoView>
   		</xe:this.data>
   	</xe:dynamicViewPanel>
   </xp:view>
   

   compositeData.defaultViewName contains the name of the default view, compositeData.viewName contains the name of the view selected from menu (Navigator control)

3. in the custom control cc_luni_view add two properties viewName and defaultViewName of type string as in figure
   

   you can access to these properties with the object compositeData (see the code in the previous step)

4. create a custom control cc_luni_navigator with the following code

   <?xml version="1.0" encoding="UTF-8"?>
   <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
   	<xe:navigator id="navigator1">
   		<xe:this.treeNodes>
   			<xe:basicLeafNode label="[put the label of the first view]" submitValue="[put the label of the first view]" />
   			<xe:basicLeafNode label="[put the label of the second view]"
   				submitValue="[put the label of the second view]" />
   		</xe:this.treeNodes>
   		<xp:eventHandler event="onItemClick" submit="true"
   			refreshMode="partial" refreshId="dynamicViewPanel1" />
   	</xe:navigator>
   </xp:view>
   

   where in place of [put the label of the first view] and [put the label of the second view] you have to put the view names of your database;
   this custom control contains the Navigator control, in the tab Design -> Properties -> Navigation Items I created two items of type Basic Node and I set the properties:

   • label: displayed to the user
   • submitValue: in order to set the variable context.getSubmittedValue()

   I set an update of the dynamicViewPanel1 control (the view) as in figure
   

   but I have to replace the tag “xe” with “xp” as explained here to avoid the error “The unknown tag xe:eventHandler cannot be used as a control”

5. create the custom control cc_luni_layout with the following code

   <?xml version="1.0" encoding="UTF-8"?>
   <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex"
   	xmlns:xc="http://www.ibm.com/xsp/custom">
   	<xe:applicationLayout id="applicationLayout1">
   		<xp:callback facetName="facetMiddle" id="facetMiddle" />
   		<xe:this.facets>
   			<xp:callback facetName="facetLeft" id="facetLeft" xp:key="LeftColumn" />
   		</xe:this.facets>
   		<xe:this.configuration>
   			<xe:oneuiApplication>
   				<xe:this.footerLinks>
   					<xe:basicContainerNode label="Container 1">
   						<xe:this.children>
   							<xe:basicLeafNode label="Link 1" href="/" />
   							<xe:basicLeafNode label="Link 2" href="/" />
   						</xe:this.children>
   					</xe:basicContainerNode>
   					<xe:basicContainerNode label="Container 2">
   						<xe:this.children>
   							<xe:basicLeafNode label="Link 1" href="/" />
   							<xe:basicLeafNode label="Link 2" href="/" />
   						</xe:this.children>
   					</xe:basicContainerNode>
   				</xe:this.footerLinks>
   			</xe:oneuiApplication>
   		</xe:this.configuration>
   	</xe:applicationLayout>
   </xp:view>
   

   it is the Application Layout control of the Extension Library

6. create a xpage with code:

   <?xml version="1.0" encoding="UTF-8"?>
   <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
   	<xc:cc_luni_layout>
   		<xp:this.facets>
   			<xc:cc_luni_navigator xp:key="facetLeft" />
   			<xc:cc_luni_view xp:key="facetMiddle"
   				viewName="#{javascript:context.getSubmittedValue()}"
   				defaultViewName="[put the default view]" />
   		</xp:this.facets>
   	</xc:cc_luni_layout>
   </xp:view>
   

   where in place of [put the default view] you have to replace the name of the default view
   at Custom Properties of the custom control cc_luni_view I set the two properties passed to the Dynamic View Panel control