XWeb :: The Web to the Xth Degree

Article Links:

Article Home
API
Look and Feel
Demo

XWeb Toolbar

Note: The XWeb Toolbar is designed for MSIE 5.5+. Mozilla based browsers do not have a convention to create vertical text - a feature that is needed to properly display this widget. Once vertical text is supported in Mozilla, support for the browser will be added.

The XWeb Toolbar was inspired by the "View Bar" in Bradsoft's TopStyle 3. It is an object oriented system (there are many, many objects in this widget) and is very easy to set up and use.

XWeb DHTML API

The XWeb Toolbar uses the XWeb DHTML API extensively (as do all XWeb Widgets). Knowledge of the XWeb API is not required to use the Toolbar; however, the API must be included as the Toolbar uses the API extensively.

Limitations

Currently, the Toolbar is limited to being placed on the left side of the document. Plans to make it usable in any position are underway. For those that have used TopStyle 3, you will find that the Toolbar does not fully emulate the behavior and functionality of TS's View Bar. Plans are also underway to make the Toolbar as close a copy of the View Bar as possible.

Creating the Toolbar

As mentioned earlier, a Toolbar consists of many objects; however, only 4 are are worth mentioning:

Toolbar
Toolbar Item
Buttonbar
Buttons

The Toolbar system must be initialized. This is acheived by creating an instance of the XWeb_Toolbar class. Toolbar Items are then added by using the add() method. While adding Toolbar items, you can specify the Buttonbar that will show when the Toolbar item is activiated. After specifying the Buttonbar, Buttons can then be added to the Buttonbar. Sounds simple, right? Let's take a gander at the code:

We first initialize our Toolbar:

myToolBar = new XWeb_Toolbar(pg.y);

Do not worry about that parameter we passed. It will be explained in the API. Let's populate this thing.

myToolBar.add("Toolbar Item 1","item1","img/new_user_side.gif");
myToolBar.add("Toolbar Item 2","item2","img/new_news_side.gif");

See the middle argument that was passed? As you'll see from the API, that middle argument is the the object name of the Buttonbar that is assigned to the Toolbar item. The Buttonbar object is automatically created, so we can then start adding buttons to the Buttonbar:

myToolBar.item1.add("Button 1","img/new_user.png","http://www.wdonline.com");
myToolBar.item1.add("Button 2","img/edit_user.png","alert('Hello')",0);
myToolBar.item1.add("Button 3","img/delete_user.png","foo('This is a test')",0);
myToolBar.item1.add("Button 4","img/user_all.png","foo('XWeb Toolbar!')",0);
myToolBar.item1.add("Button 5","img/new_user.png","http://www.netscape.com");
myToolBar.item1.add("Button 6","img/edit_user.png","alert('Hi')",0);
myToolBar.item1.add("Button 7","img/delete_user.png","foo('Nice, eh?')",0);
myToolBar.item1.add("Button 8","img/user_all.png","foo('Welcome to my world!')",0);
myToolBar.item1.add("Button 9","img/new_user.png","http://www.wdonline.com");
myToolBar.item1.add("Button 10","img/edit_user.png","alert('Hello Again')",0);
myToolBar.item1.add("Button 11","img/delete_user.png","foo('Doh!')",0);

			
myToolBar.item2.add("Button 1","img/new_news.png","foo('Button 1 for Buttonbar 2')",0);
myToolBar.item2.add("Button 2","img/edit_news.png","http://www.microsoft.com");
myToolBar.item2.add("Button 3","img/archive_news.png","foo('Hello, World')",0);
myToolBar.item2.add("Button 4","img/delete_news.png","http://www.bradsoft.com");

As you have probably noticed, many of those methods are taking three parameters while others are taking four. Do not worry about this yet. It is all explained in the API.

As far as coding is concerned, you are done! The code automatically adds all HTML elements via the document.createElement() and the document.appendChild() DOM methods.

Now let's look at the API.