How to set Xpages Navigation Bar (Bootstrap) basic

问题:

I am trying to use the Responsive Navigation Bar in the latest version of the Xpages Extension Library. It seems to work well but I cannot figure out how to set a link to active.

Below is part of my code. What should I do to make a leaf node be active (i.e. look selected)?

<?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:navbar
        id="custom-navbar1"
        fixed="unfixed-top"
        pageWidth="fluid"
        inverted="true"
        headingStyle="font-weight:bold;">

        <xe:this.navbarBeforeLinks>
            <xe:basicLeafNode label="Scoular">
                <xe:this.onClick><![CDATA[window.open("http://www.scoular.com","_blank")]]></xe:this.onClick>
            </xe:basicLeafNode>
            <xe:basicLeafNode label="PC Checklist">
                <xe:this.onClick><![CDATA[var url = "http://kc1/Bryan/PCCheckList2.nsf/xpHome.xsp"
window.location = url]]></xe:this.onClick>
            </xe:basicLeafNode>
            <xe:basicLeafNode label="Help Desk">
                <xe:this.onClick><![CDATA[var url = "http://kc1/Bryan/HelpDesk.nsf/xpHome.xsp";
window.location = url]]></xe:this.onClick>
            </xe:basicLeafNode>     
        </xe:this.navbarBeforeLinks>
    </xe:navbar>
</xp:view>

I have changed from using the Native Control to using pure Bootstrap. It works well, except I cannot get the log in that I grabbed from the excellent To Do application to align properly.

It looks like this:

The "Welcome, null" doesn't look like the other controls. I will put my code in below and maybe you can point out what is wrong.

I also am wondering how to make the decision to use Xpage controls or native? I know I read in Stack Overlow some people who said that as their application grew they ran into some limitations with the Xpages nabber. Maybe I should just go back to using it and fix the highlighting problem as you suggested?

The solution I eventually settled on was to put two Basic Leaf Nodes in and render one depending on whether it should be highlighted or not.

> <xe:basicLeafNode
>               title="PC"
>               label="PC"
>               style="color:rgb(255,255,255)">
>               <xe:this.rendered><![CDATA[#{javascript:if (database.getFileName() == "PCCheckList2.nsf") {return true} else {return false}}]]></xe:this.rendered>
>               <xe:this.href><![CDATA[#{javascript:var url = "notes://KC1/Bryan/PCCheckList2.nsf/xpHome.xsp?OpenXpage"; var url2 =
> "http:apps.scoular.com/Bryan/PCCheckList2.nsf/xpHome.xsp?OpenXpage";
> url2}]]></xe:this.href>           </xe:basicLeafNode>             <xe:basicLeafNode
>               href="xpMain.xsp"
>               title="PC"
>               label="PC"
>               enabled="false">
>               <xe:this.rendered><![CDATA[#{javascript:if (database.getFileName() != "PCCheckList2.nsf") {return true} else {return
> false}}]]></xe:this.rendered>             </xe:basicLeafNode>

回答1:

The XPages Navbar control doesn't have this capability automatically built into it. Though it could be something to raise as an enhancement request via the Issues tab on the Github repository of the Extension Library.

In Bootstrap the way to do it is to add the "active" class to the li element that is active/selected, as in the first example from http://getbootstrap.com/components/#navbar-default

If you try to compute the styleClass of a basicLeafNode, it will apply the class to the anchor element, instead of the li element, and you don't get the active appearance.

So I think a custom implementation will be needed. In the Todo.nsf application that is inside the Extlib release zip, and also available as a boilerplate on Bluemix, there is such a custom implementation. On each XPage in the application, the root xp:view has a custom styleClass added, e.g. styleClass="homeStyle" or styleClass="todoStyle". Then in the CSS of the application it has this:

/* Styles for indicator colouring on navbar menu */
.homeStyle .glyphicon-home.utilIcon,
.todoStyle .glyphicon-th-list.utilIcon,
.completeStyle .glyphicon-ok.utilIcon,
.urgentStyle .glyphicon-exclamation-sign.utilIcon,
.overdueStyle .glyphicon-warning-sign.utilIcon {
    color: white;
}

This changes the style of the navbarAfterLinks so that one link looks selected/active at any one time depending on the XPage loaded. If you use that idea as a starting point, you could put together your own version with custom CSS to style the active link appropriately.

回答2:

In your bootstrap-oneui-navbar-pagetreenode, just add this script to your "Style" property as SSJS (Diamond):

if(context.getUrl().getSiteRelativeAddress(context) == "/Yourpage.xsp")
{
    return "background-color: #e7e7e7;";
}
else
{
    return "background-color: #f8f8f8;";
}

This will "fake" the active property as good as the bootstrap itself? In my page it looks nice..

(Thanks Brad for writing so much good xpages stuff: http://xcellerant.net/2014/09/05/getting-the-base-url-of-the-current-database-with-ssjs/)

/Ben