 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
vegUI Tutorial 08 - The Checkbox Widget
written by vegu on 18 Dec, 2006 10:15:28
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 check-box widget is the first VegUI Widget that combines multiple vegUI elements. It has a button element that serves as the actual check-box that changes it appearance when it checked or unchecked, and a label element that can display some text.
Lets get things started by spawning the checkbox element we will be working with. We will use the same manager element that we've used in the previous tutorials, so i will skip that part.
Code: JavascriptmyCheckBox = Manager.get_new(VUI_CHECKBOX);
To set-up our checkbox we will use the - by now familiar - function set() or set_cb()
Code: JavascriptmyCheckBox.set(5,25,150,18,'Check me!',0,'btn_check_2','btn_check_1');
Definition: VegUICheckBox.set_cb
The first two arguments are the x and y position of the checkbox, argument 3 and 4 are width and height. The fifth parameter is the label text that shall be displayed in the Label child of the checkbox. Argument 5 defines whether the checkbox is checked by default or not - in this case it is not. The last two arguments are the CSS classes to use for the button when the checkbox is either checked or unchecked.
Lets define those css classes quickly before we move on.
Code: CSS.btn_check_1 {
background-image: url('btn_cbox_unchecked.gif');
}
.btn_check_2 {
background-image: url('btn_cbox_checked.gif');
}
.checkbox_label {
font: bold 10px Verdana;
color: #383838;
padding: 2px;
}
As i have stated earlier the checkbox has two child elements. A button element by the name of BtnCheck and a label node by the name of Label. You can always access either of those two directly as a property of the checkbox or over the checkbox's C property. Like this for example:
Code: JavascriptmyCheckBox.BtnCheck // same as
myCheckBox.C['BtnCheck']
So, since the widget has several elements we can set them up as well. In this case we need to as we need to set the proportions of BtnCheck and have Label use a css class so its more readable.
Let's start by setting up BtnCheck.
Code: JavascriptmyCheckBox.BtnCheck.set(0,0,18,18);
In my case the button's width and height is 18 pixels. We can ignore the other arguments as the css classes to use have already been set by us when we passed them to the set() method of our checkbox.
If we would built the checkbox now its label would have the default text set for the page, which would be invisible in our example because it would be black text on black background. Let's fix that by defining a css class for it and having it use that css class.
Code: CSS.checkbox_label {
font: bold 10px Verdana;
color: #383838;
padding: 2px;
} Code: JavascriptmyCheckBox.Label.T.className = 'checkbox_label';
Only thing left to do now is to build the checkbox
Code: JavascriptManager.build_element(myCheckBox);
Great, if we load our page now , we should have a checkbox that can be checked or unchecked. But its doing nothing :(. Lets grab our TextLabel from the previous tutorial (including it's CSS class) and add it to our page.
Code: CSS.txtlabel {
background-color: #9d9d9d;
color: #fff;
font: 10px Verdana;
}
Code: JavascriptTextLabel = Manager.get_new(VUI_NODE);
TextLabel.set('div', 500, 18, 5, 5);
TextLabel.T.className = 'txtlabel';
Manager.build_element(TextLabel);
OK! What we're going to do is to have our checkbox set the text of TextLabel to mirror the checkbox's state. It should display 'Checked!' when the checkbox is checked and 'Unchecked!' when it is not checked. We do this by setting the onchange event of the checkbox. This event fires everytime its state changes.
You can check the current state of the checkbox by checking it's isChecked property, which will be true when the checkbox is checked and false when it is not. We add the event using the event_add() method, if you specify the first parameter (i named it a for arguments in this case) its an array and the first element in the array is always the vegui element that the event was fired for (in our case the checkbox).
Code: JavascriptmyCheckBox.event_add('onchange', function(a) {
if(a[0].isChecked)
TextLabel.clear(document.createTextNode('Checked!'));
else
TextLabel.clear(document.createTextNode('Un-Checked!'));
});Defintion: VegUINode.event_add()
Okay, if you reload the page now and check or uncheck the checkbox it should set the text of TextLabel (which should be gray box in the upper left corner of the page if you added it correctly)
Flexibility meet coder, coder meet flexibility
I figure since this is the first multi element widget were dealing with it would be a good time to introduce you to the flexibility of vegUI. Since you have control over ever element a widget is made up off that means you can alter them all. For instance by default the checkbox arranges that the Label element will be displayed right of and in-line with the BtnCheck element.
But who says we need to stick to standards ;)
In order to start this little experiment we remove the line were we call Manager.buil_element(myCheckBox) so we can use it as a template as we will clone our new funky checkbox from it.
Code: JavascriptfunkyCheckBox = Manager.get_clone(myCheckBox);
Okay, basically we want to switch the Label element and the BtnCheck element around, so we end up with the Label on the left side and the box on the right side. The first thing we do is reposition the Labele element to the position 0,0 which will put it on the left side, we do this over its set() or set_node() method.
Code: Javascript
funkyCheckBox.Label.set(null,null,null,0,0);
Now we need to set the right margin of the label to 18 so it is always sized that it leaves a 18 pixel gap to the right border of the checkbox node - the gap will be filled by our button later on. We will also set the Label's bottom margin to 0pixels, this isnt required but cant hurt.
Code: JavascriptfunkyCheckBox.Label.set_marg(18,0);
Were almost done with the label, but we want the text of it to be aligned to the right side instead of the default left, since we dont want to define another css class for our funky checkbox we just set the css template attribute directly
Code: JavascriptfunkyCheckBox.Label.T.Css.textAlign = 'right';
Okay now we move the BtnCheck element to the right side, we do this by setting its noresize margins to 0,0. Which means it will always be in the lower right corner of the checkbox's node, effectively filling the gap we left with the Label's margin earlier.
Code: JavascriptfunkyCheckBox.BtnCheck.set_marg(null,null,0,0);
Lastly we reposition the checkbox itself so it isnt positioned at the same spot as myCheckbox as we intend to build both elements. Lets build them right now - as were done.
Code: JavascriptfunkyCheckBox.set(5,50);
Manager.build_element(myCheckBox);
Manager.build_element(funkyCheckBox);
Reload the page and you will find two checkboxes, the upper one should have the box on the left and the label on the right side and the lower one should be inverted. Both should alter the text of TextLabel when theyre checked or unchecked by the user.
The cool thing is, would you - instead of building funkyCheckbox - use it as a template instead and clone another checkbox from it, the cloned checkbox would have the exact same layout as funkyCheckbox effectively taking over all properties that we changed.
Okay that's it for the checkbox element, coming up next: the content box widget and scrollbars
Related Posts
Your Comment
Comments
No comments yet.
