17. 如何在XPages里创建大纲/导航？

电玩女神 2022-04-14 04:14 217阅读 0赞

XPages自带的控件集最缺乏的恐怕就是类似于经典Notes开发的大纲了。虽然一个大纲/导航是一个Web应用几乎不可缺少的部分，但是截至8.5.3，IBM仍然没有为开发人员提供这个方便。接着，提供了一堆控件的UpgradePack 1来了，继承了大量在OpenNTF网站上已经发布的XPagesExtension Library的内容。其中，就有一个outline和一个navigator。但是这些控件的质量参差不齐，与设计器的结合和文档更是初级。往页面上放outline和navigator各一个，添加必要的属性和treeNodes。显示页面，结果相当令人失望。Outline控件被转换成一个单纯的HTML的UL，没有任何修饰，也就是左边带有黑色圆点的列表，甚至添加了list-style-type:none的style属性之后，转换成HTML时也丢失了。Navigator控件则消失在一个空白的DIV中。另外，即使显示效果能调节成IBM附带的XPages版本的Teamroom应用中的那样美观，这两个控件的功能也不完备，比如不能指定链接的target属性，treeNodes支持的事件也只有onItemClick。

幸好，我们可以像在《14. 如何在XPages中插入HTML》里说的，在XPage中添加HTML，再利用CSS和Javascript，做出想要的大纲效果：

<?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"
    	style="background-color: #F4F5F6;">
    	<xp:this.resources>
    		<xp:styleSheet href="/ui.css"></xp:styleSheet>
    	</xp:this.resources>
    <script language="Javascript">
    		XSP.addOnLoad(function () {
    		dojo.query(".menu li a").onclick(function (e){
    		dojo.query(".menu li a").removeClass("selected");
    		dojo.query(e.target).addClass("selected");
    		});
    		}
    		);
    </script>
    	<xp:br></xp:br>
    	<xp:panel style="width:100%">
    		<ul class="menu">
    			<li>
    				<xp:link escape="true" text="Access Record" id="link1"
    					target="right" value="/viewRecord.xsp" styleClass="selected">
    				</xp:link>
    			</li>
    			<li>
    				<xp:link escape="true" text="Exception" id="link2"
    					target="right" value="/viewException.xsp">
    				</xp:link>
    			</li>
    			<li>
    				<xp:link escape="true" text="Settings" id="link3" value="viewsettings.xsp"
    					target="right" rendered="#{javascript: //control the visibility}">
    				</xp:link>
    			</li>
    			<li>
    				<xp:link escape="true" text="Log" id="link6" value="/viewLogs.xsp"
    					target="right">
    					<xp:this.rendered><![CDATA[${javascript: //control the visibility}]]></xp:this.rendered>
    				</xp:link>
    			</li>
    		</ul>
    	</xp:panel>
    </xp:view>

整个页面放置在一个frames中作为导航之用。大纲由一个UL包含xp:link组成。显示效果由CSS和通过XSP.addOnLoad()执行的函数完成，控制大纲项目在默认、鼠标悬浮和选定状态下的属性。ui.css相关部分的内容如下：

ul.menu{
    	list-style-type: none;
    	margin: 0;
    	padding: 5px 0;
    	font-weight:bold;
    }
    
    .menu li a{
    	text-decoration: none;
    	display: block;
    	padding: 5px 0 5px 10px;
    }
    
    .menu li a.selected{
    	color:white;
    	background-color: #1384B8;
    }
    
    .menu li a:hover{
    	color:white;
    	background-color: #1384B8;
    }