 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
vegUI Tutorial 02 - The vegUI Node
written by vegu on 18 Dec, 2006 10:14:09
A live example of this tutorial can be found hereWhat is the VegUINode?
The vegUI node is the most basic vegUI element that you will encounter. It is the base of every other vegUI widget or element including the manager object that we've learned about in the previous tutorial. So what is the vegUI node? The vegUI node basically is a control object that control one HTML node at a time. It has function to move, resize and style the HTML node. It can either take control over an existing node or can build a html node of its own using the template properties that you've set up for it.
The most common thing you will do with the vegUI node is to set its template properties and then build the HTML node it will control. We've just done that with the manager in tutorial 1, but lets re-do it with a node to refreshen our memory and to prepare ourselves for the next steps.
First thing we need to do is to create vegUINode object, instead of directly creating it using the new keyword as we did with the manager we will spawn it via the manager itself. All vegUI elements should be spawned from another vegUI element except for the initial manager object.
We do this by calling the managers get_new() method.
Code: Javascriptvar myNode = Manager.get_new(VUI_NODE);
Definition: Manager.get_new()
The VUI_NODE variable holds the type identifier of the vegUI node, by passing it to the get_new method we tell the anager what type of vegUI element we want to spawn, in this case a node. So now that we have our vegUINode object lets set its template properties. We use the set_node() or set() methods to do that.
Here is the thing about the set() method, the set() is always an alias for the set_xxx method of the current element, so set_node and set are identical for vegUINode. The vegUIManager object extends the vegUINode objects and thereby inherits all its methods, so it also has access to the set_node() method, but its set() method points to the set_manager() method. Confused yet? Dont worry we will worry about it later, right now all you need to know is that you use the set() method to set the most common template properties for any vegUI element, so lets do that.
Code: JavascriptmyNode.set('div',100,100,50,50);Definition: VegUINode.set_node()
You can check out all the template properties of the vegUINode object here.
The first argument of the set_node method is the type of HTML node you want to build, if you skip this argument it will build a DIV node by default, but for sake of completeness i passed it anyways. The other four arguments are familiar to us already from the last tutorial, the set the width, height, x and y template properties of the node. Lets make our node white, as that will go well with our dark grayish background :)
Instead of assigning the CSS template attributes directly this time lets use a css class instead. You can tell the vegUINode which Css class to use by setting it's className template property.
Code: CSSdiv.mynode {
background-color: #fff;
border: 1px #000 solid;
} Code: JavascriptmyNode.T.className = 'mynode'
Okay, lets build it and check out what we've got.
Code: JavascriptManager.build_element(myNode);
Definition: VegUIManager.build_element()
Whoops, stop right there. You probably noticed we did not call the node's build() method directly as we did with the manager in the previous tutorial. You could do it that way, but using the build_element() method of the manager it will handle the correct parentNode selection automatically, ie it will append the built HTML node it to the manager's HTML node.
Okay, load the page and you should see our manager node holding a blue box with a white border that is 100 * 100 pixels heigh and positioned slightly offset of the manager's upper left corner. I can see you are very excited by this.. no really.
Controlling the built node
After the node has been built you can control it using its control functions.
You can change it's size with the resize() function or you can move it with the move() function. You can also alter its transparency using the set_transparency() function.
Code: JavascriptmyNode.resize(150,150);
myNode.move(200,200);
myNode.set_transparency(50);
Definition: VegUINode.resize()
Definition: VegUINode.move()
Definition: VegUINode.set_transparency()
Definition: VegUINode.set_pos()
Definition: VegUINode.hide()
There are some other control function, you can read more about them in the API documentation.
Also, you can access the HTML node's style property over the Css property of the vegUINode object. The HTML node itself can be accessed over the Base property.
Code: Javascriptwindow.document.title = myNode.Base.nodeName;
myNode.Css.backgroundColor = '#000';
In order to get/read the node's current properties, such as width and height and position there are functions to help you out.
Here are the ones i most commonly use:
Code: JavascriptmyNode.width() // returns width
myNode.height() // returns height
myNode.x() // returns x position
myNode.y() // returns y position
myNode.x2() // returns x position of right border
myNode.y2() // returns y position of bottom border
myNode.abs_x() // returns absolute x position
myNode.abs_y() // returns absolute y position
myNode.is_hidden() // returns true if the node is current hidden
Destroying the element
Any vegUI element can be destroyed by calling its kill() method.
Code: JavascriptmyNode.kill(1)
Definition: VegUINode.kill()
If the first argument is passed as true that means that the element is removed completely from the manager as well as that its HTML nodes will be destroyed. If the first argument is skipped or set to false then only the HTML node of the element and the HTML nodes of its child elements will be removed from the document.
This concludes the second tutorial of the vegUI tutorial series, in the next tutorial we will take a look child elements.
Related Posts
Your Comment
Comments
No comments yet.
