 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
vegUI Tutorial 07 - The Button Widget
written by vegu on 18 Dec, 2006 10:15:19
A live example of this tutorial can be found here.The graphics used in this tutorial and the other vegUI tutorials can be downloaded here.
The button widget is the most basic vegUI widget there is (if we exclude the VegUINode, which isn't really a widget ;)). It is basically a vegui node with mouse-down and mouse-up event handling enabled by default.
Additionally a button can also be set up to change its appearance while it is being pressed.
The easies way to style a button is by using CSS classes, that way you can create both buttons that are based on an images (graphical buttons) or buttons that a based on styles.
In this tutorial i will have both a graphical and style-only button, so lets start by defining the css classes we will later use.
Code: CSS.button1_1 { background-image: url('btn_clickme_1.gif'); }
.button1_2 { background-image: url('btn_clickme_2.gif'); }
.button2_1 {
font: bold 10px Verdana;
background-color: #c8c8c8;
border-bottom: 1px #838383 solid;
border-right: 1px #838383 solid;
border-top: 1px #838383 solid;
border-left: 1px #838383 solid;
color: #838383;
padding: 5px;
}
.button2_2 {
font: bold 10px Verdana;
background-color: #9c9c9c;
border-top: 1px #838383 solid;
border-left: 1px #838383 solid;
border-bottom: 1px #838383 solid;
border-right: 1px #838383 solid;
color: #fff;
padding: 5px;
}
.txtlabel {
background-color: #9d9d9d;
color: #fff;
font: 10px Verdana;
}As you've probably figured out by looking at the css code, button1_n are the styles for the the graphical button for normal and pressed modes and button2_n are the styles for the style only button for normal and pressed modes.
The .txtlabel class is for the TextLabel node that i managed to keep to myself until now ;). Basically we will have a node called TextLabel that will serve as a target for our button experiment. Each of the button will set the content of the text label to something different, i know that we could simply have our buttons alert some messages, but that's so 90s.
So lets set up and build the TextLabel Node while were talking about it.
Code: Javascript/*
* set and build the label node that will hold the
* text that the buttons will set
*/
TextLabel = Manager.get_new(VUI_NODE);
TextLabel.set('div', 500, 18, 5, 5);
TextLabel.T.className = 'txtlabel';
Manager.build_element(TextLabel);
Time to set-up and build the buttons. As always the most common template properties for the button a set via its set_button() or set() method. Be aware that the first too arguments are the x and y position of the button and not the size. This might take a bit to get used to, and the reason that is this way is because i found myself often needing to only change the position of a button after cloning it.
Code: Javascript/*
* set and build the graphical button
*/
Button1 = Manager.get_new(VUI_BUTTON);
Button1.set(100,100,75,18,'button1_1','button1_2');
Button1.States[VUI_MOUSE_DOWN].Scripts.add(
function() {
TextLabel.clear(
document.createTextNode('VROOOOOOOOOOOOOOOOOOM!')
);
}
);
Manager.build_element(Button1);
/*
* set and build the style only button
*/
Button2 = Manager.get_new(VUI_BUTTON);
Button2.set(100,200,59,15,'button2_1','button2_2','Click me!');
Button2.States[VUI_MOUSE_DOWN].Scripts.add(
function() {
TextLabel.clear(
document.createTextNode('That\'s what a car sounds like!!!!')
);
}
);
Manager.build_element(Button2);
Definition: VegUIButton.set_button
Button1 is set up to use the classes button1_1 - for normal state - and button1_2 for pressed state. The size of the button needs to be the proportions of the image we set the background-image property to use in our css class. And in my case the image size 75x18.
You will notice that the set() call on Button2 has an additional argument, which is the caption of the button. Since Button2 is our style button and not a graphical button we need to set our caption via text node - which is not to say that you cant use the caption on a graphical button though, should you need to.
Having our buttons do something is pretty straightforward and similar to what we learned in the Mouse and Keyboard event tutorial by adding the functions we want the button to execute to its VUI_MOUSE_DOWN State.
If you load the page now you should have two buttons, and clicking them should have them both change their appearance while they're being pressed as well as fill our TextLabel node with some text.
In the next tutorial we will check out the VegUICheckBox widget.
Related Posts
Your Comment
Comments
No comments yet.
