 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
Comment has been reported, thanks for helping to improve the quality of this website
vegUI Tutorial 06 - The Bounding Box
written by vegu on 18 Dec, 2006 10:15:11
A live example of this tutorial can be found at hereThe vegUINode and hence every other vegUI element has a BBox property which holds a VegUIBBox object.
Definition: VegUIBBox
What is a bounding box?
A bounding box limits where the element can go, it frames it, sort of. If the bounding box of an element is enabled and set up then the element can not be moved outside of the bounding box's borders. Setting up and enabling the bounding box is pretty much straight forward, and the BBox itself is virtual, it does not control a HTML node.
In order to set up the bounding box of your node simply call it's set function
Code: JavascriptmyNode.BBox.set(0,0,500,500,true,true);
Definition: VegUIBBox.set()
The first 2 arguments are the coordinates of the bounding box, arguments 3 and 4 are the size of the bounding box, argument 5 enables the bounding box if set to true, and argument 6 enables auto correct mode if set to true.
If auto correct mode is on the bounding box automatically corrects it's element's position should it pass the borders of the bounding box.
Thats pretty much it, however because i wanted to have some fun and to spice things up a little we will do a little example, if you feel comfortable and think you know how this works you can continue on to the next tutorial now.
Our little example
This example should also give you a little taste on how to create something more interactive with vegUI, it will use some of the stuff weve learned in the previous tutorial, which handled mouse and keyboard events. Basically we will have a node that we can drag with the mouse, but the bounding box prevents it to leave a perimeter.
First things first we set up our Manager and our node, i will not explain what does what anymore as you should know that from the previous tutorials you've read i hope :)
Code: Javascript/*
* set and build the manager
*/
Manager = new VegUIManager('Manager');
Manager.set(800,600,0,0);
Manager.T.Css.backgroundColor = '#b2b2b2';
Manager.build(document.body);
/*
* set the node up
*/
myNode = Manager.get_new(VUI_NODE);
myNode.set('div', 100, 100, 100, 100);
myNode.T.Css.backgroundColor = '#fff';
myNode.flags |= VUI_HMOUSE_DOWN;
Next we set up the mouse event handlers on the nod, which just like in the previous tutorial give the node focus on mouse down and take it's focus away again on mouse up. Additionally the bDrag property of the node is set to true on mouse down and to false on mouse up. This is a custom tracking property so the manager will no when the node is being dragged (in other words when the mouse is being held down on it) and when not.
Now we need to add a mouse move event handler to the manager. We dont actually need to enable the VUI_HMOUSE_MOVE flag on the manager as the manager handles this event by default. Current mouse coordinates are stored in the global variables mouseX and mouseY, and they get updated everytime the mouse is moved.
Code: Javascript/*
* add a mouse move event handler to the manager node
*/
Manager.States[VUI_MOUSE_MOVE].Scripts.add(
function() {
if(myNode.bDrag && !isNaN(myNode.lastY)) {
myNode.move(
myNode.x() - (myNode.lastX - mouseX),
myNode.y() - (myNode.lastY - mouseY)
);
myNode.lastX = mouseX;
myNode.lastY = mouseY;
}
},
'drag_mynode'
);
So what does this function do exactly. It repositions myNode in sync to the mouse movement. It does the dragging ;)
Okay, the last thing to do is to set up the bounding box and build our node
Code: Javascript/*
* set bounding box
*/
myNode.BBox.set(
0, 0, 400, 400, true
);
/*
* build myNode
*/
Manager.build_element(myNode);
Note: In vegUI 2.0 there is a bug with the bounding box that causes it not to work correctly if its coordinates are anything but 0,0 - this issue will be fixed in vegUI2.01
If you load the page now there should be a white square that you can drag by clicking the mouse on it and holding mouse button - just as you would drag a file in windows. The bounding box will prevent the node from going past seemingly invisible borders :)
Anyways, that concludes the bounding box tutorial. In the next tutorial its widget time, and ill introduce the button widget to you ;)
Related Posts
Your Comment
Comments to this post: (1)
RSS Feed for commentsaaaaaaaaaaaaaa
on 31 Jan, 2008 - 18:16:27
a
Report this comment
