#use wml::des::navbar
# explicitly write javascript code now
<navbar:jsfuncs>
# define a navigation bar
<navbar:define name=<name> [<options>]>
<navbar:header>...</navbar:header>
<navbar:footer>...</navbar:footer>
<navbar:prolog [<options>]>...</navbar:prolog>
<navbar:epilog [<options>]>...</navbar:epilog>
<navbar:button id=<id1> txt=... [<options>]>
:
<navbar:button id=<idN> txt=... [<options>]>
<navbar:filter>...</navbar:filter>
</navbar:define>
# debug the internal structure
<navbar:debug name=<name>>
# render the navigation bar
<navbar:render name=<name> [options]>
navbar ::= HEADER{0,1}
PROLOG{0,3} BUTTON{1,N} EPILOG{0,3}
FOOTER{0,1}
FILTER{0,1}
HEADER ::= navbar:header
PROLOG ::= navbar:prolog (type=N)
| navbar:prolog (type=S)
| navbar:prolog (type=SS)
BUTTON ::= navbar:button
EPILOG ::= navbar:epilog (type=N)
| navbar:epilog (type=S)
| navbar:epilog (type=SS)
FOOTER ::= navbar:footer
FILTER ::= navbar:filter
or in other words: navigation bar consists of an optional header and footer, up to three different (according to "type") prologs and epilogs for the navigation buttons and at least one actual navigation button. Additionally a filter can be applied. The "navbar:XXXX" names in the above grammar directly correspond to the existing tags you have to use.
After you have defined such a navigation bar (which is usually done inside an include file) you can create the corresponding HTML markup code by placing "<navbar:render>" at the point where this markup code should occur. This tag can be used more then once when you want (for instance inside a page header and its footer or once with graphics and once with the "txtonly" attribute for the textual version, etc.).
Always notice that "<navbar:render>" has no internal built-in knowledge of your navigation bar except its structure according to the above grammar. So, you only receive nice results when you define a nice grammar instance with the available "navbar:XXXX" tags. The "<navbar:render>" tag is not there to create nice things you usually couldn't do yourself. It is there to avoid the nasty compilation of one million prologs and epilogs for each button where each of these consists of similar HTML code. So, "<navbar:render>" is your workhorse, the intelligence is yours.
But how do we actually get navigation bars? Haven't we forgot something which is essential to navigation bars? Yes, we have. Navigation bars feature is that we can define them at one point for the underlaying hyperlink structure and use them at any point inside this structure while the hyperlinks are automatically aligned for the current location. But this feature the core of WML already provides through its adjustable path variables. So, this include file is useless without this feature. Or in other words: You really have to define some root-variable of your structure in a .wmlrc file and then use this variable when defining the hyperlinks inside the "<navbar:button>"'s "url" attribute. Never forget this point!
For complete examples see under "EXAMPLES" below.
Example:
<navbar:define imgstar=std:sel:ovr ...>
...
<navbar:button img=button-1-*.gif ...>
<navbar:button img=button-2-*.gif ...>
...
</navbar:define>
This is equivalent to the following:
<navbar:define ...>
...
<navbar:button img=button-1-std.gif:button-1-sel.gif:button-1-ovr.gif ...>
<navbar:button img=button-2-std.gif:button-2-sel.gif:button-2-ovr.gif ...>
...
</navbar:define>
This type is triggered by the "select=ID" and "subselected" attributes of "<navbar:render>".
<navbar:render name=main :img:class=nav
:a.N:class=nav-n :a.S:class=nav-s :a.SS:class=nav-ss />
attribute ``class=``nav'''' is added to all images, ``class=``nav-s'''' is added to anchor when button is selected (this is a dummy example, since when button is selected, there is no such anchor), ``class=``nav-ss'''' is added when button is subselected, and normal links have ``class=``nav-n''''.
When no "<navbar:filter>" tag is specified, no such filtering occurs. When
<navbar:filter> BODY </navbar:filter>
is specified, internally an anonymous Perl function is created and the HTML markup code is filtered through this function as follows:
$func = sub { BODY };
$markup_code = &{$func}($markup_code, $CFG, $select);
where $CFG is the internal configuration structure as seen with "<navbar:debug>" and $markup_code is a literal string holding the HTML markup code. In other words, when you want to apply a filter, you have to do it with the following skeleton:
<navbar:filter>
my ($mcode, $CFG, $select) = @_;
...
return $mcode;
</navbar:filter>
<en><navbar:render name=main></en> <fr><navbar:render name=main></fr>
javascript code only appears in English version. The correct solution is to put this tag outside of any slice:
<navbar:jsfuncs> <en><navbar:render name=main></en> <fr><navbar:render name=main></fr>
<navbar:define name=test
imgbase="img/" urlbase="$(ROOT)"
txtcol_normal="#000000" txtcol_select="#ffffff">
<navbar:header>
<table cellspacing=1 cellpadding=2 border=0>
<tr>
</navbar:header>
<navbar:prolog> <td bgcolor="#cccccc"> </navbar:prolog>
<navbar:prolog type=S> <td bgcolor="#cc3333"> </navbar:prolog>
<navbar:button id=foo txt="Foo" url="foo.html" hint="The Foo Page">
<navbar:button id=bar txt="Bar" url="bar.html" hint="The Bar Page">
<navbar:button id=baz txt="Baz" url="baz.html" hint="The Baz Page">
<navbar:epilog> </td> </navbar:epilog>
<navbar:footer>
</tr>
</table>
</navbar:footer>
</navbar:define>
<navbar:render name=$(name) select=$(select)>
File: .wmlrc
-DROOT~. -I.
File: foo.wml
#use wml::std::page #use wml::des::navbar <page indent=2> #include "nb.inc" name=test select=foo <h1>The Foo Page</h1> <p> Foo...
File: bar.wml
#use wml::std::page #use wml::des::navbar <page indent=2> #include "nb.inc" name=test select=bar <h1>The Bar Page</h1> <p> Bar...
<navbar:define
name=test imgbase="img/"
txtcol_normal="#000000" txtcol_select="#ffffff">
<navbar:header>
<ul>
</navbar:header>
<navbar:prolog><li></navbar:prolog>
<navbar:button id=foo txt="Foo" url="foo.html">
<navbar:button id=bar txt="Bar" url="bar.html" menu="nb-bar">
<navbar:footer>
</ul>
</navbar:footer>
</navbar:define>
<navbar:define name="nb-bar">
<navbar:header>
<ul>
</navbar:header>
<navbar:prolog><li></navbar:prolog>
<navbar:button txt="First bar item">
<navbar:button txt="Second bar item">
<navbar:footer>
</ul>
</navbar:footer>
</navbar:define>
<navbar:render name=test select=$(select)>
File: foo.wml
#use wml::std::page #use wml::des::navbar <page indent=2> #include 'nb.inc' select=foo <h1>The Foo Page</h1> <p> Foo...
File: bar.wml
#use wml::std::page #use wml::des::navbar <page indent=2> #include 'nb.inc' select=bar <h1>The Bar Page</h1> <p> Bar...
Ralf S. Engelschall rse@engelschall.com www.engelschall.com Denis Barbier barbier@engelschall.com
Internal: P1, P2, P3 External: --