 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
vegUISiteKit - Core Functionality
written by vegu on 14 Mar, 2007 08:37:53
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. Thereason 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.
There are two very important functions that you will use a lot while developing with VSK. They are the v() and V() functions.
The v() function can be used to create a new VSK_Node object and have it control an exiting node in the document by reference.
Example:
code: jsvar n = v(aNode);
In this example aNode points to some node in the document that you may have gotten by the getElementById function or something.
The V() function on the other hand is used to create a new VSK_Node object and have it control an existing node in the document by id.
Example:
code: jsvar n = V('aNode');
In this example we submit the id of a node that exists some where in the document.
Using the VSK_Node object
Once you have taken control over a node with VSK_Node you can do "stuff" to it - no not the nasty kind of stuff ;). For example you could move or resize it.
code: js/* take control of the node */
var n = v(aNode);
/* reposition the node (css position) */
n.set_pos('absolute');
/* move the node */
n.move(50,50);
/* resize the node */
n.resize(100, 100);
All in all fairly basic stuff. Now - since i wanted coding style of VSK to be fast paced - i decided to make it so that all node manipulating functions return the VSK_Node itself. This allows for some prototyping.
code: jsv(aNode).set_pos('absolute').move(50,50).resize(100,100);
Spying on the node
In addition manipulating the node you can also read its properties using various shortcut methods.
code: jsvar n = v(aNode);
alert('height: '+v.h());
alert('width: '+v.w());
alert('x-pos: '+v.x());
alert('y-pos: '+v.y());
Static properties
The b property of the VSK_Node object always points to the node it currently controls and the s property is a pointer to the style property of said node. So you can set the node's css rules directly by accessing the s property and the nodes attributes by accessing the b property.
code: jsv(aNode).s.backgroundColor = 'red';
v(aNode).b.className = 'someCSSclass';
For a reference of all manipulating and property retrieving functions functions of the VSK_Node object please check out the VSK's API documentation
Events
I decided to provide the VSK_Node object with a method that would allow for cross-browser use of the event listener model. The event listener model allows you add functions to events without overwriting existing functions that might already be active for a certain event on a certain node. This is useful when using different scripts of different developers so their events dont collide with each other.
To add an event to a node controlled with the VSK_Node object simply call the VSK_Node's event_add method.
code: jsv(aNode).event_add('click', function() { alert('hi'); });
Note that the first argument is the event label - click for onlick, mousedown for onmousedown etc - it is important that you leave out the 'on' part of the label. The second argument is the function that you would like to add to be executed when the event is triggered.
Internet Explorer Note
Alas microsoft's event listeners model comes with some weird behavior that has the this keyword in the function that you are adding point to the window object instead of the object that you are adding the event to. God knows why they decided to do it that way, but you can get around that little bugger by using closures (<3 javascript).
code: jsvar n = v(aNode);
/* this wont work correctly in internet explorer */
v.event_add('click', function() { alert(this.nodeName); });
/* this will */
v.event_add('click', function() { alert(n.b.nodeName); });
Global Functions of the Core Library
Additional to the VSK_Node object the core library also provides some global functions to make my - and now yours - life a bit easier.
For example you can quickly create and append new html nodes to the document using the vsk_html_node() function. This function also has a shortcut alias called vsk_h(), because i am kinda lazy.
code: js/* create a new div node, set it's css class, append it to the body of the document and
* set it's id to someID. Note that you can omit any of the arguments except the nodeName
*/
var n = vsk_h('div', 'someCSSclass', document.body, 'someID');
/* or combine it the v function */
var n = v(vsk_h('div'));
The same can be done for text nodes with the vsk_txt_node() / vsk_t() function.
code: js/* add a new text node holding the string 'some text' to the body of the page */
vsk_t('Some text', document.body);
Prototying HTML
You can use the vsk_h function in addition with the VSK_Nodes html_append() method to quickly add some simple html structures to your page.
code: jsv(vsk_h('table')).html_append(
v(vsk_h('tbody')).html_append(
v(vsk_h('tr')).html_append(
v(vsk_h('td')).html_append(
vsk_t('Some text'),
vsk_t(' I want to add to my node')
)
)
)
);
Related Posts
- No related posts
Your Comment
Comments
No comments yet.
