vegUISiteKit Tutorials

« Previous Entries

Archive

Next Entries »

vegUISiteKit - Effect: Fade The fade effect library adds an effect to the VSK_Node object that let's you fade a node in or out of few in a smooth transition.

The effect itself is fairly easy to use. You simply call the fx_fade_in or fx_fade_out methods.

Both work exactly the same, except for the difference that one fades the node into view and the other one fades the node out of few ;).

The arguments of the method are the speed of the effect (ms) - as in the time the effect takes before it is completed - and an optional limit.

When the limit argument is submitted (percentage value) then the effect will be stopped when the submitted amount of transparency is reached.


vegUISiteKit - The Effect Framework The effect framework library of the VSK is the foundation library that adds certain methods to the VSK_Node object that enable the development of cool effects that you can use on your html nodes.

Effects themselves are processed by a timer that runs at a fairly short interval. I decided to have a global timer that would handle all effects on all nodes instead of creating a new timer object for every effect, this should solve problems with timer limitations on certain systems.

You can specify the interval of that timer by setting the VSK_FX_INTERVAL global variable somewhere in your code. By default it is set to 25 ms which means the effects are processed about 40 times a second. Depending on the amount of effects you are including at the same time it might be wise to up the number to 50 (20 times per second) which still allows for fairly smooth animation.


vegUISiteKit - Using the VegUIBridge The VegUIBridge was originally developed for the original vegUI web-application framework. But it also works stand alone and therefor i could take it over to the VSK package as well. It is the AJAX frame work of vegUI allowing you to send requests to the server and to deal with the server's response.

It also handles time outs and latency (time between request and response) , but more on that further down in the tutorial.


vegUISiteKit - The cookie functions library The VSK cookie functions library allows to set, unset and read cookies comfortably using javascript.

I used to do all the cookie setting via PHP / ajax whatever, kind of a mental black out i guess :) It's much more convenient to just do it using javascript once you have set up a couple functions for it.


VegUISiteKit - The Window Functions Library The window functions library was made for one reason and that reason is cross-browser access to certain attributes of the window object. The problem is - depending on doctype - that internet explorer uses the documentElement or the body element to retrieve certain attributes while the other browsers get them directly from the window object.

As i write this little tutorial [Thursday 15th March, 2007] the window functions library has 4 functions , two functions to retrieve the scroll offset of the screen and two to retrieve it's inner height and width.


vegUISiteKit - Setting it up This is outdated as you may now use the compiled download function to confortably download any vsk library including it's dependencies , please go read this tutorial on how to do this.

In order to use the VSK on your project you need to include all the required libraries in the head of your HTML - or somwhere in your page but ultimately before any code dealing with VSK is executed.

There are different modules for the VSK, and some of them depend on other modules. If you go to the page of any module you will see a list of it's dependencies. Dependencies are files that are required to be included in your page for the module to work correctly.


vegUISiteKit - Using the Debug Console I used alert messages to debug my javascript code for a long time. I always wanted to make a little debug console that i can just blend in in some convenient place that i could use to print my various debug messages to, but i kept pushing it back.

With development of the VSK i finally decided to give it a go, because using alert to debug your js code has certain disadvantages like it messing up any timers you may have running in the background, or it getting stuck in an infinite loop - because youre coding at 5 AM running on 5 hours of sleep ;) - without you getting out of it short of killing the browser's process.

And finally the debug message is gone once you close the alert popup.


vegUISiteKit - Core Functionality When i started the development process on the VSK project i had to define some concepts i would stick to. It would need to be easy and fast to use and it should be very compact. The
reason the VSK idea was born in the first place was the fact that i wanted the ability to easily add dynamic features to my websites without having to include vegUI's relatively large code-base. (Relative to what we want to do)

While it is possible to do everything that you can do with VSK with the original vegUI web-application framework as well - doing so is hardly efficient as there is a lot of stuff that you wont need that you will have to include anyways as it is a library that was developed for 100% web-application development.

The main library of the VSK is the core library. Most of the other libraries build on it as it provides the most important object of the VSK code-base, which is the VSK_Node object. The VSK_Node is basically an object that can take control over any HTML node in the document and once it is in control of it it can manipulate the node's appearance and behavior.

« Previous Entries

Show Overview

Next Entries »

---