Navigations Trees

Under Dissemino a navtree always works in a different way to the standard navbar. The latter is strictly a pull down menu of links to pages, generally incorporated into most if not all the pages it can navigate. Selection from the navbar results in a new page being loaded and this action being reflected in the browser address window. By contrast, a navtree is hosted within a page arranged as a split screen. The tree makes up one side (usually the left) while content navigated by the tree makes up the other side. Selection of a tree item invokes an AJAX command to change the content and only the content. The address bar in the browser is not changed because the page is not changed. Accordingly the tree is only downloaded once.

This is facilited by loadArticle.js which is a standard Dissemino generated javascript. This loads the text into a <div> with the id of 'articlecontent'. It is imperative you include a <div> in your page with this exact id. In the configs, prior to the page declaration, the whole text is defined as a set of articles, each within an <xtreeItem> tag. Each xtreeItem contains a block of HTML and must only contain a block of HTML - It must not contain any nested <xtreeItem> tags. Then the <xtreectl> tag is used again within the <div id=\"articlecontent\"/> to set the initial text that will be served along with the page. This is a very simple way to put manuals together like this one. The articles need not be limited to those defined within an <xtreeItem> tag. They may be stored in a repository as is usually the case in forums.

The first step is to set up the series of articles uke this:-

<xtree name="mymanual">
    <xtreeItem id="mymanual.1.1" hdln="Introduction"><![CDATA[Some HTML]]></xtreeItem>
    <xtreeItem id="mymanual.1.1" hdln="Configuration"><![CDATA[Some HTML]]></xtreeItem>
    <xtreeItem id="mymanual.1.1" hdln="Operation"><![CDATA[Some HTML]]></xtreeItem>
    <xtreeItem id="mymanual.1.1" hdln="General Notes"><![CDATA[Some HTML]]></xtreeItem>
    <xtreeItem id="mymanual.1.1" hdln="Example 1"><![CDATA[Some HTML]]></xtreeItem>
    <xtreeItem id="mymanual.1.1" hdln="Example 2"><![CDATA[Some HTML]]></xtreeItem>
</xtree>

Then the tree to the left is set up as as a javascript as follows:-

<xscript name="mymanualtree.js">
var ntX=new Array();
ntX=[
    [1,"My Manual","mymanual.0"],
        [2,"My System",""],
            [0,"Introduction","mymanual.1.1"],
            [0,"Configuration","mymanual.1.2"],
            [0,"Operation","mymanual.1.3"],
            [0,"General Notes","mymanual.1.4"],
        [2,"Examples",""],
            [0,"Example 1","mymanual.2.1"],
            [0,"Example 2","mymanual.2.2"],
];
</xscript>

While the supporting page can be something like:-

<xpage path="/myManual" subject="Documents" title="My Manual" access="public">
    <desc>My Manual</desc>
    <xblock name="myInclude"/>
    <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="20%" valign="top">
            <div id="navlhs" class="navtree">
            <script type="text/javascript" src="/jsc/mymanualtree.js"></script>
            <script type="text/javascript" src="/jsc/tog.js"></script>
            <script type="text/javascript" src="/jsc/loadArticle.js"></script>
            <script type="text/javascript" src="/jsc/navtree-mymanual.js"></script>
            </div>
        </td>
        <td width="80%" valign="top">
        <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
        <tr height="44">
            <td align="center" class="title">
            <div id="articletitle">My System: Operation Manual</div>
            </td>
        </tr>
        <tr>
            <td valign="top" class="main">
            <div id="articlecontent" class="objpage"><xtreectl id="myman.0"/></div>
            </td>
        </tr>
        </table> 
        </td>
    </tr>
    </table>
</xpage>

Note you only need navtree-mymanual.js is a script automatically generated by Dissemino as a result of creating an article group called mymanual. If converts article ids in the tree to addresses of the form /articleGroup-articleName therby allowing the Dissemnino server to supply the article content to the browser.