vegUI Tutorial 01 - Getting Started

A live example of this tutorial can be found here

This is the first tutorial of the vegUI tutorial series. These tutorials will be raw code examples, if you would like to know exactly what a certain function does or what a certain object is for, please go and consult the API documentation.

These tutorials assume that you have a basic knowledge of javascript, CSS and HTML.

Using the vegUI libraries with your website

In order to use the vegUI libraries with your website or web-application you need to include it in your html/php/asp/... file. You do this by using the script tag

The src attribute should point to the relative path of where the vegui.js file is located.

Compiling the vegui.js file

Not every web-application needs every widget that comes with the vegui package. In order to remove a module and recompile the vegui.js file go to the lib folder in the vegUI package and chose either the commented or compressed version of the library. In either of the folders you will find a compile.sh and a compile.bat file.

Both files join the different module files and create the vegui.js file in the compiled folder. The compile.sh file is a bash script that you can run on linux and the compile.bat file is a batch file that can be executed on windows boxes. In order to re-compile without certain modules simply open the appropriate compile file and remove the modules you do not wish to include in vegui.js then run the script.

When using vegUI on a website

If you intend to use vegui on a generic website - ie. not a web application - you want to set the ADJUST_BODY_SIZE variable to false. If it is true it will automatically resize the body element of the page to fit the current vegUI needs. It is true by default because of the fact that if you have only absolute positioned elements on the page the body does not resize to contain all the elements that are spawned. While this is not a problem in most browsers it is a problem in internet explorer 6, because it will bork text selection in elements that are positioned outside of the bodies proportions.

So my way to fix this issue was to automatically resize the body to always contain any vegUI elements.If you are using vegUI on a generic website though that already has other non-absolute positioned elements in its body you have to set this variable to false or else your page will get messed up, and vegUI will be fine anyways since body width and height should be 100%, thanks to the static elements on your page.

Creating the vegUI Manager object

Every vegUI element is handled by the vegUI manager. The manager keeps track of all elements spawned and handles certain mouse and keyboard events for the elements.

So lets create a new manager object for now.The Manager itself is already a vegUI element, and as any vegUI element it can control a HTML node. The manager's HTML node - when built - will be the node that holds all the other vegUI elements. That means that vegUI is only active inside the manager's HTML node. There is a way to make the Manager take control over the page's body node but we will get to that sometime down the road.

Before we build the manager node let me introduce you to a very important function that you will encounter for every vegUI element: set_node() or set(). This function sets the template variables for the element. The set function varies from element to element and is always targeting the most common template properties of the element. In case of the manager it targets the width, height, x and y template properties.

The set function works that way that you can skip properties by submitting invalid values to them - inmost cases null will do. If you skip a property that way it will not get (re)set. This is handy if you want to use the function to just set certain properties. Take note that you can alter any template property directly by accessing it over the element's T property. To get a list of template properties for any object please take a look at the API Documentation.Definition: Manager.set()

would be equal toGreat, we just set the manager's width and height to 800 * 600 and positioned it at the top left ofthe screen (0,0). Now lets make sure that - for testing purposes - we can see it too once it is built. In order to accomplish that we simply give it a gray background by setting the css property for it in the template property Css.Any property in T.Css will be copied over to the node's style property when it is built.

Seems its time to build the manager! Doing this is quite simple, we just call the manager's build methodand make sure it gets added as a child to the page's body element.
Definition: Manager.build()

If you load the page now there should be a black rectangle that is 800 pixels wide and 600 pixels high in the upper left corner of the page. Congratulations, your first vegUI element.

This concludes the first vegUI tutorial. The next tutorial we will take a look at the vegUI Node element,the most basic element of them all.

Related Posts

• vegUI Tutorial 02 - The vegUI Node

---

Your Comment

name:*
email-address:
Are you human?

Comments to this post: (6)

RSS Feed for comments

---

Armin Arizmendi
on 11 Feb, 2007 - 04:48:37

it's possible to build the manager, inside a div?

Report this comment

---

lavnish
on 06 Jun, 2007 - 09:04:27

hi
talking of
Manager.T.Css.backgroundColor = '#838383';
i was just wondering how can i give manager a SHADED color like ... light blue on top of screen and as one moves down it turns dark blue ??

Report this comment

---

vegu
on 06 Jun, 2007 - 12:24:47

Hey, if youre talking about a gradient effect (gradual color shift, like light blue to dark blue) you ll have to utilize a background image that you create with photoshop or paintshop pro for example. Simply check your favorite image editor for the gradient fill tool :)

Once youve created the image simply do

Manager.T.Css.backgroundImage = url(path_to_gradient_image.jpg);

for example :)

Report this comment

---

vegu
on 06 Jun, 2007 - 12:31:34

oops, that should be

Manager.T.Css.backgroundImage = 'url(path_to_gradient_image.jpg)';

with quotes

Report this comment

---

mat allen
on 20 Sep, 2007 - 20:06:58

I'd like to have the Manager take over the body, as in:

Manager.build(null, true);

But when I do this (in Firefox at least) it has trouble resizing and dragging windows (if the mouse goes to fast, or goes outside the bounds of the window shadow as it drags, it treats it like a mouseup and lets go of it. This doesn't happen if I do:

Manager.build(document.body);

But I'd much rather have the manager fill the whole body and not worry about sizing anything.

Any suggestions?

Report this comment

---

vegu
on 20 Sep, 2007 - 21:23:48

Hi mat,

When using Manager.build(null, true) make sure ADJUST_BODY_SIZE is TRUE. (It has been a recent change and is not yet reflected in this tutorial)

e.g.

ADJUST_BODY_SIZE = true;
Manager.build(null, true);

ALTERNATIVELY you can set ADJUST_BODY_SIZE to FALSE (if you dont ever want the manager to resize the body node, i.e. when using vegUI on a website filled with content) and artificially force the body height to be 100% via CSS

body {
height: 100%;
}

Either way should fix your problem :)

Report this comment

---

---