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

vegUI Tutorial 15 - The Window Element

written by vegu on 23 Dec, 2006 12:33:00
A live example of this tutorial can be found here.

All image files used in this tutorial can be downloaded here

The vegUI image element is basically a drag-able, resize-able panel that you can add elements to. It is pretty similar to the windows that you're used to from your typical operating system. The window, as a module, is deeply integrated into the vegui core. What does that mean? That means the manager keeps track of window elements additionally in it's W property.

This is needed so that all the window elements know of each other in order to allow gimmicks like proper z-sorting when a window gains focus. On focus the window will move to the foreground and all the other windows are moved to the back in their current order.

Additionally windows have built in support to maximize and minimize, also windows can be set to be destroyed when they are closed. Needless to say there is quite a bit to learn about the VegUIWindow, so lets get started with the basic stuff :)

As always we start with the manager element

Code: Javascript
Manager = new VegUIManager('Manager');
Manager.set(800,600,0,0);
Manager.T.Css.backgroundColor = '#b2b2b2';
Manager.build(document.body);


Next we create the window.

Code: Javascript
myWin = Manager.get_new(VUI_WIN);


Then we set the window up by calling its set() or set_win() method.

Code: Javascript
myWin.set('My Window', 300, 150, 50, 50);

Defintion: VegUIWindow.set_win()

The first argument is the title (caption) of the window. Arguments 2 and 3 are width and height, and the last two arguments define its position on the x and y axis.

Lets break it up for a second


The vegUI window is made up of several child elements


  1. Skin, the skin node, any skin nodes should be append to this node, it's size spans the whole window by default

  2. Ui, any vegUI elements that you want the window to hold should be added as children to this node

  3. Header, child of Ui, the header toggles the drag-mode when clicked

  4. Caption, child of Header, the node that holds the title text of the window

  5. BtnClose, child of Ui, button that closes the window

  6. BtnMinimize, child of Ui, button that minimizes the window

  7. BtnMaximize, child of Ui, button that maximizes the window



There are some other elements that should be transparent to you though and will not be part of this tutorial. Basically there are some additional nodes which handle the mouse resizing of the window, they are positioned right at the border of the window and will toggle the resize mode when clicked.

Lets start styling our window by assigning some css classes to its elements.

Code: CSS
.win_header {
  background-color: #838383;
}

.win_caption {
  color: #fff;
  font: bold 10px Verdana, Arial, Helvetica;
}

.win {
  background-color: #d9d9d9;
  border: 1px #838383 solid;
}


Code: Javascript
myWin.Header.T.className = 'win_header';
myWin.Caption.T.className = 'win_caption';
myWin.T.className = 'win';


Next we set up the buttons. First let me explain what each button does exactly when it is clicked. BtnClose closes the window, if the VUI_KILL_ON_CLOSE flag is set on the window then the window will also be destroyed. BtnMinimize minimizes the window, in effect it hides it. This can be combined nicely with the taskbar element - which we will discuss in a different tutorials. BtnMaximize maximizes the window.

The Css classes for the buttons.

Code: CSS
.btn_close_1 { background-image: url('btn_close_0.gif'); }
.btn_close_2 { background-image: url('btn_close_1.gif'); }
.btn_minimize_1 { background-image: url('btn_minimize_0.gif'); }
.btn_minimize_2 { background-image: url('btn_minimize_1.gif'); }
.btn_maximize_1 { background-image: url('btn_maximize_0.gif'); }
.btn_maximize_2 { background-image: url('btn_maximize_1.gif'); }


Then we set the buttons up.

Code: Javascript
myWin.BtnClose.set(null,2,18,18,'btn_close_1','btn_close_2');
myWin.BtnClose.set_marg(null,null,5);

myWin.BtnMaximize.set(null,2,18,18,'btn_maximize_1','btn_maximize_2');
myWin.BtnMaximize.set_marg(null,null,25);

myWin.BtnMinimize.set(null,2,18,18,'btn_minimize_1','btn_minimize_2');
myWin.BtnMinimize.set_marg(null,null,45);


By combining set_marg with their x,y positions we make sure that the buttons are positioned in the upper right corner of the window inline with the header element.

Additional Setup


In order to utilize the maximize function of the window we need to set the maxX, maxY, maxW and maxH template properties of the window. The define where the window will be positioned and how big it will be when it is maximized.

Code: Javascript
myWin.T.maxY = 0;
myWin.T.maxX = 0;
myWin.T.maxH = 600;
myWin.T.maxW = 800;


maxW and maxH also limit the maximum size of the window, if set it can not be made bigger than the specified limit.

This can also be done for minimum size, but minimum size has nothing to do with the minimize mode of the window it just defines the minimum size of the window and when set the window can not be made smaller than the limit.

Code: Javascript
myWin.T.minW = 150;
myWin.T.minH = 100;


Flags flags flags



There are multiple flags that you can set on the window to manipulate it's behavior. These flags are all explained in the API documentation, but for completeness sake i will explain them here as well.

Code: Javascript
 * VUI_NORESIZE_W - Window's width can not be resized
 * VUI_NORESIZE_H - Window's height can not be resized
 * VUI_NORESIZE - Window can not be resized
 * VUI_NOMOVE_X - Window cannot be moved along the x axis
 * VUI_NOMOVE_Y - Window cannot be moved along the y axis
 * VUI_NOMOVE - Window cannot be moved
 * VUI_MOMAXIMIZE - Window cannot be maximized
 * VUI_NOMINIMIZE - Window cannot be minimized
 * VUI_NOTASK - Window will not be added to taskbar if there is one


Copied straight from the API docs because i am a lazy bastard :)

First check


Time to check our window out, lets build it and reload the page.

Code: Javascript
Manager.build_element(myWin);


That doesn't look so bad does it? However there is something missing, when you drag or resize the window there should be an indicator that indicates the new position or size of the window. In order to make this indicator visible all we need to do is to create a css class by the name of win_shad. The element exists already so we simply add this to our style.

Code: CSS
.win_shad {
  border: 2px #838383 solid;
}


Skinning the window


The window is one of the few vegUI elements that provide a skin node that should be used to do all the skinning. We will add a fairly simple skin, right now our window has a dark gray border, we will use the skin node to add a white inner border to our window.

First we need to define the css class for the skin. Keep in mind that this is a fairly simply skin were doing here for complex skins you can utilize the add_skin() method, which we discussed in the contentbox tutorial when we skinned the scrollbar buttons.

Css class for window skin:

Code: CSS
.win_skin {
  border: 1px #fff solid;
}

Code: Javascript
myWin.Skin.T.className = 'win_skin';


Were not done yet, we need to reposition some of our elements in order to make the white border look like its an inner border of our window. We move the header to the left and to the right 2 pixels and set its right marg to 2 pixels so the header now has a margin of 2 pixels to all sides except the bottom side.

The skin node has its margins updated to make up for its borders as well. For some reason the browsers add the borders to the elements as outer borders meaning actual element size will be bordersize + element size. If a node is 200 pixels wide and you add a left and right border of one pixels it will take up 202 pixels on the screen. The only reason i am explaining this is so you understand we have to change the margin of the skin node.

Code: Javascript
myWin.Skin.set_marg(2,2);
myWin.Header.set(2,2);
myWin.Header.set_marg(2);

Adding elements to the Window


Empty windows are of no use to anyone so lets add a button element to our window. As i have stated earlier additional elements should always be added to the window's Ui child.

Code: CSS
.btn_clickme_2 { background-image: url('btn_clickme_2.gif'); }

Code: Javascript
myButton = myWin.Ui.add_child('myButton', VUI_BUTTON);
myButton.set(50,50,75,18,'btn_clickme_1','btn_clickme_2');

Window Focus


When a window is clicked that is currently not focused (in other words a window in the background) then focus is set on it and it is brought to the foreground. When a window is brought to the foreground its ontofront event is called when it is moved to the back again (caused by another window being moved to the front) the ontoback event is called. I utilized those events to create the transparency effect on windows that are currently not focused in the demonstration.

I figure some people might be interested on how to do this so ill explain it here quickly.

First we need to initialize the fx engine of vegUI we do this by calling the init_fx method on the manager. The argument were passing to the function is the interval of the fx timer. (ms)

Code: Javascript
Manager.init_fx(30)


Now we set the ontoback event to set the transparency of the window to 50%.

Code: Javascript
myWin.event_add('ontoback', function(a) { a[0].set_transparency(50); });


And the ontofront event will utilize the fx engine to smoothly fade the window back in when it is focused.

Code: Javascript
myWin.event_add(
  'ontofront', 
  function(a) { 
    a[0].Manager.FX.effect_add(a[0], new VegUIFXFadeIn(1000)); 
  }
);

Related Posts

Your Comment

name:*
email-address:

Are you human?

Comments to this post: (5)

RSS Feed for comments RSS Feed for comments
 Dan
on 23 Dec, 2006 - 16:34:36

Very nice, the only thing I notice is that if I hover over an element that was placed inside of the window, it causes the window to lose focus, and then lose it's transparency.

I eventually changed the button into a content box, and it still loses transparency whenever I hover over the scrollbar or the actual content. :/

Oh and by the way, is there anyway to get the content box to resize along with the window?

Thanks :) Dan.

Report this comment
vegu
on 23 Dec, 2006 - 20:29:36

Hi!
Argh, thanks for pointing that out :) i used the wrong events. You actually want to use the events ontofront and ontoback. ontofront fires when the window is actually brought to the foreground and ontoback fires when the window is moved to the back, ie it really loses focus.

Ill fix it in the tutorial too.

To your second question, yes use the set_marg method on the content box element. It alows you to set a margin to its parent right and bottom border. Ie CBox.set_marg(0,0) would glue the right and bottom border of the content box to the right and bottom border of its parent element (in your case the window)



Report this comment
vegu
on 23 Dec, 2006 - 21:03:24

I also added it to the live example if you want to check it out :) The effect thing that is!

Report this comment
Dan
on 23 Dec, 2006 - 23:55:28

Ah! That explains thing!
Haha, I managed to figure out the content box thing by looking through the documentation.

Haha, I'm still looking up the FX Engine :o
Thanks for the help! Awesome work on it and the tutorials you've done so far.
Best of holiday wishes!

Report this comment
vegu
on 24 Dec, 2006 - 03:29:07

Thanks ;) Happy holidays to you as well!

Report this comment
copyright 2006, 2007 by Stefan Pratter, all rights reserved.

Terms of Use | Privacy Policy | Valid XHTML 1.0
newsletterNewsletter downloadDownload hot tutorialsHot Tutorials searchSearch recent articlesBlog ยป New DonateDonate SyndicationSyndication