Introduction
Once in a while you move back in time and understand why you have forgotten certain rules. Mostly because you have stopped using them or you experience the same pitfalls as others do and you just want to forget them to move ahead.
navigationPath and selection properties
One of those things are the navigationPath from the Application Layout control and the selection property in it’s navigation nodes.
navigationPath
The navigationPath allows you to control the currently selected titlebar Tab and the selection appearance of any Navigator control on the XPage.
selection
The selection property is nothing more than a regular expression used to select an item. The expression is matched against the navigationPath, described above.
selected
Selected is a property that indicates if a node is selected or not. This property often causes confusion.
Mix them together
So if you mix these properties above you can establish some nice usability improvement for your app-user. It can visualize (via style classes) when a certain titlebar should be highlighted or not.
Example Aap Noot Mies
The follwoing example will demonstrate it’s basic feature (and shows some oddness in the Dutch education system while Mies is nothing more than a cat).
As titlebar tabs I have: Aap, Noot and Mies.
As Navigator nodes I have Aap, Noot, Mies and Apes/Gorilla, Apes/Chimp.
Each Navigator links points to an individual XSP but the last two nodes belong to the Aap titlebar tab.
ccLayout
I have a custom control with the application layout control on it. For the navigationPath property I have set up a propery definition so I can adjust it for eac XSP:
<xe:this.configuration>
<xe:oneuiApplication
navigationPath=”#{javascript:compositeData.navigationPath}”
The titlebar nodes are defined as follwed:
<xe:this.titleBarTabs>
<xe:pageTreeNode label=”Aap” selection=”/Aap/.*”
page=”/aap.xsp” selected=”true”>
</xe:pageTreeNode>
<xe:pageTreeNode label=”Noot” selection=”/Noot/.*”
page=”/noot.xsp” selected=”true”>
</xe:pageTreeNode>
<xe:pageTreeNode label=”Mies” selection=”/Mies/.*”
page=”/mies.xsp” selected=”true”>
</xe:pageTreeNode>
</xe:this.titleBarTabs>
Here I have set a regex for the selection property.
Navigator control
On the same custom control I also have a Navigator control:
<xe:navigator id=”navigator1″>
<xe:this.treeNodes>
<xe:pageTreeNode label=”Aap” page=”/aap.xsp”></xe:pageTreeNode>
<xe:pageTreeNode label=”Noot” page=”/noot.xsp”></xe:pageTreeNode>
<xe:pageTreeNode label=”Mies” page=”/mies.xsp”></xe:pageTreeNode>
<xe:basicContainerNode label=”Apes”>
<xe:this.children>
<xe:pageTreeNode label=”Gorilla”
page=”/gorilla.xsp”>
</xe:pageTreeNode>
<xe:pageTreeNode label=”Chimp” page=”/chimp.xsp”></xe:pageTreeNode>
</xe:this.children>
</xe:basicContainerNode>
</xe:this.treeNodes>
</xe:navigator>
Here I do not have to define anything. The control will know itself when a selected node needs to be highlighted.
Gorilla XPage
In the app I have multiple XPages, in the gorilla xpage I have set the navigationPath property as follwed:
<?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:ccLayout navigationPath=”/Aap/Gorilla”>
<xp:this.facets>
<xp:image url=”/aap.jpg” id=”image1″ xp:key=”facet_1″></xp:image>
</xp:this.facets>
</xc:ccLayout></xp:view>
As a result the Aap titlebar Tab is highlighted:
Not really something that opens your mind but at least I have written it down (with a repo) in the hope I won’t have to re-learn it next time I have to use the application layout control.
Kwintessential Notes 