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

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;
}