We will demonstrate how XML can leverage otherwise complicated WEB projects, we will implement a generic reusable menu bar in JavaScript and XML.

Please send us your feedback!

Scenario

• I need a menu bar to ease navigation through my web pages, for example financial reports. Advantage of menu bar is that it is user friendly and does not occupy much space on a page.
• Coding menu bar is quite an effort. It would be nice to write JavaScript code once and keep it separately from the menu items data
• I want even deeper level of encapsulation. Some menu items are repeated in different menu-driven web sites. (such as tax schedules lines, months of the year, etc.). I want to keep this items separately and make their data reusable by any menu bar

As soon as I formulated the problem using XML as a data source for menu bars came in obvious.

In this tutorial we will implement XML Bar in

• IE 5 with native MSXML parser and behavior scriplets

Every sample XML Bar in this tutorial has a help menu from which you can view components of this project

• XMLBarIE5.htm - this file.
• XMLBar.htc - the main Behavior Scriplet module that turns XML script into XML Bar.
• XML script for XMLBar
• XML Schema for XMLBar

XML behind XML Bars

XML Bar is implemented in three layers:

• main HTML page
• DHTML behavior scriplet
JavaScript module
• XML data source

The core functionality of the bar is buried inside the DHTML behavior JavaScript code and exposed to the HTML page through its methods, properties and events.

XMLBar menus hierarchy along with menu stylesheets, description and image are stored in XML. XML is parsed and cashed into DOM by MSXML parser inside the behavior scriplet. Submenus are rendered only when parent menu is activated.

XML also stores the action to fire on a menu click event. Action can be a Link to a web page or a chunk of JavaScript code. It can also be a Sub-Action. In the later case child menu inherits parent's action.

Action can be parameterized.

For example in the following fragment

XML-DEV Archive has two parameters: year and month .

The PAR elements will be substituted with content of corresponding SUB elements.

So when clicked two leaf submenus will have links:

• http://www.lists.ic.ac.uk/hypermail/xml-dev/9901/index.html

and

• http://www.lists.ic.ac.uk/hypermail/xml-dev/9902/index.html

Notice that the 12 months fragment can be reused someplace else. For example, to browse MIND archives the top Link element should be:

And for WebTechniques archives:

Browse throw Archives menu of the sample bar to test it.

Wouldn't it be great to allow for reusable submenu groups? A group of 12 SUBMENU - months is an example of a fragment that can be used for most of magazines and monthly publications. 12 months for X years for Y publications ... Isn't it to much to type, to transfer, to parse?... To optimize XML Bar let's create XML file that will serve as a data source for reusable submenu groups. We will define url of the reusable groups collection through MGREF child of the BAR root. rgsn attribute stands for "reusable groups source name".

Future versions of XML Bar will allow more then one rgsn . For example, one can be for accounting reports and tax schedules, another for magazine publications. Submenu groups from both rgsn can be referred if needed.

The last optional attribute of SUBMENUGROUP element is XQL query string. It selects only months January through March of the current year. This filter is not hard to implement because DOM selectNodes and selectSingleNode methods support XSL XSL pattern-matching syntax. In fact the complete XQL query string is

• ./SUBMENU[SUBACTION/SUB[@name = "mm" $and$ text() $le$ "03"]]

It selects only months January through March of the current year. It is equivalent to cogx:select="mm<=3", but in the later case I would have to compile this pattern internally to XSL or XQL syntax.

XMLBar Properties, Methods and Events

XMLBar Properties, Methods and Events

JavaScript Xplained

Coming soon...

Please send us your feedback!