<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="/lib/xsl/devedge-1.00/article_en.xsl"?>
<nde:article url="/viewsource/2003/howto-multibar/"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:nde="http://devedge.netscape.com/2002/de"
xmlns:ent="http://devedge.netscape.com/2003/ent" xml:lang="en">
  <nde:header>
    <nde:title>How to Implement a Netscape MultiBar Sidebar Tab</nde:title>
    <nde:category>How to</nde:category>
    <nde:pubdate year="2003" month="05" day="13" />
    <nde:summary>Learn how to create your own version of DevEdge's MultiBar
    sidebar tab to reuse on your own site.</nde:summary>
    <nde:channels>
      <nde:channel id="viewsource" />
      <nde:channel id="tools" />
    </nde:channels>
    <nde:keywords>Netscape 6, Netscape 7, Mozilla, Gecko, Sidebar, Sidebar Tab,
    MultiBar, MultiBar sidebar</nde:keywords>
    <nde:authlist>
      <nde:author>
        <nde:authname>Doron Rosenberg</nde:authname>
        <nde:authtitle>Evangelist</nde:authtitle>
        <nde:authaffil>Netscape Communications</nde:authaffil>
      </nde:author>
    </nde:authlist>
  </nde:header>
  <nde:head></nde:head>
  <nde:content>
    <h2 id="introduction">Introduction</h2>
    <p>
      One disadvantage of Netscape Sidebars is the space taken up in the
      Sidebar panel by each distinct Sidebar. If you have dozens of related
      Sidebars, your Sidebar panel can grow to an unmanageable size.
    </p>
    
    <p>
      By creating a "MultiBar" you can package many different sidebar tabs into 
      a single sidebar tab. Each individual sidebar is selectable using a simple
      pull down list which is remembered each time you reopen the sidebar
      tab. You can also add new sidebars to the MultiBar and make them
      immediately available to your users without requiring them to 
      perform an additional installation.
    </p>

    <p>
      See the <a href="/toolbox/sidebars/">DevEdge Multibar</a>
      as an example of how several Sidebar Tabs for developers are grouped
      together.
    </p>

    <h2 id="manifest">Manifest</h2>
    <p>
      The MultiBar installation uses the following files:
    </p>

    <dl>
      <dt><a href="source/cookie.html">cookie.html</a></dt>
      <dd>
        <p>This hidden HTML document is used to manage the cookies
          used to remember the previously opened sidebar in the MultiBar.
        </p>
      </dd>
      <dt><a href="source/sidebar.html">sidebar.html</a></dt>
      <dd>
        <p>This HTML document that will be loaded into the sidebar panel
          during your user's first visit. Once it is displayed, it
        will be replaced by either the last viewed sidebar or the
        first sidebar in the sidebar-contents.xml list.</p>
      </dd>
      <dt><a href="source/sidebar.css">sidebar.css</a></dt>
      <dd>
        <p>
          CSS rules for styling your sidebar.
        </p>
      </dd>
      <dt><a href="source/sidebar.js">sidebar.js</a></dt>
      <dd>
        <p>the logic of MultiBar.</p>
      </dd>
      <dt><a href="source/sidebar.xul">sidebar.xul</a></dt>
      <dd>
        <p>defines the UI of the MultiBar in XUL.</p>
      </dd>
      <dt><a href="source/sidebar-contents.xml">sidebar-contents.xml</a></dt>
      <dd>
        <p>contains the list of sidebars to populate the dropdown.</p>
        <h3>Example</h3>
  <pre><![CDATA[
<?xml version="1.0"?>
<sidebar-contents>
  <sidebar-item>
    <name>DevEdge News</name>
    <url>http://devedge.netscape.com/viewsource/devedge-news_en.html</url>
  </sidebar-item>  
  <sidebar-item>
    <name>CSS2 Quick Reference</name>
    <url>http://devedge.netscape.com/toolbox/sidebars/2001/css2qr/prop-visual.html</url>
  </sidebar-item>
</sidebar-contents>
]]></pre>

      </dd>
      <dt><a href="source/README">README</a></dt>
      <dd>
        <p>
          A README and License for MultiBar.
        </p>
      </dd>
    </dl>
<p>A &lt;sidebar-item&gt; has 2 children - the &lt;name&gt; element which is
  the name to be displayed in the sidebar selection pull down list and the &lt;url&gt;
  element which is a URI to the sidebar's location.</p>
    <p>By default, the first &lt;sidebar-item&gt; is loaded. When a user
    chooses another item from the sidebar selection dropdown, a cookie is set
    (called "sidebarChoice") which contains the selected sidebar's position in
    the list.</p>

  <p>Since the list of sidebars is stored on your web site, it is easy  
    to add new sidebars to the list without requiring your user to
    install it individually.</p>

  <h2 id="installation">Installation</h2>

  <ol>
    <li>
      <p>
        <a href="source/multibar.zip">Download the source (multibar.zip)</a>
      </p>
    </li>
    <li>
      <p>
        Unzip multibar.zip into the location where you wish to set up 
        your MultiBar.
      </p>
    </li>
    <li>
      <p>
        Customize the sidebar-contents.xml file to contain information
        on each sidebar you wish to have loaded in your MultiBar.
      </p>
    </li>
    <li>
      <p>
        Create an installer for your sidebar tab.
      </p>
    </li>
  </ol>
<h2 id="license">License</h2>

<p>
  Netscape grants you a royalty free license to use, modify or distribute
  this software provided that the copyright notice appears on all copies.
   This software is provided "AS IS," without a warranty of any kind.
</p>

<h2 id="seealso">See also</h2>

<p>
  To learn more about Netscape Sidebars please see the following:
</p>

  <ul>
    <li><a href="/viewsource/2002/sidebar//">My Sidebar Developer's Guide</a></li>
    <li><a href="/toolbox/sidebars/">DevEdge Sidebars</a></li>
    <li><a href="/toolbox/">DevEdge Toolbox</a></li>
  </ul>

  </nde:content>

  <nde:related area="nde">
    <nde:item url="/toolbox/">DevEdge Toolbox</nde:item>
    <nde:item url="/toolbox/sidebars/">DevEdge Sidebars</nde:item>
    <nde:item url="/viewsource/2002/sidebar//">My Sidebar Developer's Guide</nde:item>
  </nde:related>
</nde:article>
