vegUI.org home of the javascript based window manager and AJAX framework

vegUI Tutorial 20 - The Taskbar Widget

written by vegu on 25 Jun, 2007 01:56:53
Late, i know. This should be fairly quick though, the taskbar is not a very complicated widget.

First of you need to understand that once you set the Taskbar property of your Manager element to point to a taskbar that windows will automatically be added to the taskbar when they are first build. Of course there a methods to manually add and remove windows from the taskbar as well.

Okay, that out of the way, lets get going. We're going to assign the Taskbar property of the manager right away.

code: js
Manager.Taskbar = Manager.get_new(VUI_TASKBAR);
Manager.Taskbar.set(500,20,0,0,VUI_TB_HORIZONTAL,5);
Manager.build_element(Manager.Taskbar);

Let me explain the set() call. As with any vegUI widget it sets its template properties up before it is built by the manager.

The first argument is the width, the second argument the height. Arguments three and four are the coordinates on which the taskbar will positioned, in our case in the upper left corner of its parent element (the manager). The fifth argument is the alignment type of the taskbar. You can chouse between VUI_TB_HORIZONTAL - for traditional horizontal alignment of the taskbuttons - or VUI_TB_VERTICAL - for a vertical aligned taskbar. The last argument is the space between taskbuttons in pixels.

Of course in-between the set() call and the build_elment() call of the manager you can theme the taskbar as you would with any other vegUI widget. Since we do not want a transparent taskbar with transparent buttons with ugly font :) lets add some style.

code: js
Manager.Taskbar = Manager.get_new(VUI_TASKBAR);
Manager.Taskbar.set(500,20,0,0,VUI_TB_HORIZONTAL,5);

/* set up the taskbar */

Manager.Taskbar.T.Css.backgroundColor = '#d9d9d9';
Manager.Taskbar.T.Css.font = 'bold 10px Verdana, Helvetica';
Manager.Taskbar.T.Css.color = '#838383';

/* set up the TplButton child element of the taskbar. All
* taskbuttons added will be cloned from this element
*/


Manager.Taskbar.TplButton.T.Css.border = '1px white solid';
Manager.Taskbar.TplButton.set(0,3,100,18,0,0,'A button');

/* build the taskbar */

Manager.build_element(Manager.Taskbar);

Everytime you call the build_element() method on a window widget now a taskbutton will be automatically added to the taskbar that is linked to the window. Once the window is destroyed - eg. if VUI_KILL_ON_CLOSE is active on the window element and the window is closed - the taskbutton will be removed again.

To add or remove taskbuttons manually simply use the taskbutton_add and taskbutton_remove.

code: js
/* add taskbutton for myWin */
Manager.Taskbar.taskbutton_add(myWin);

/* remove taskbutton for my Win */

Manager.Taskbar.taskbutton_remove(myWin);

There are some effects too



If you want the taskbuttons the fade out when they are removed from the taskbar make sure that the fx engine has been initialized on the Manager.

code: js
Manager.init_fx(25);

Related Posts


Your Comment

name:*
email-address:

Are you human?



Comments

No comments yet.