 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
vegUI Tutorial 14 - The Tabbed Dialog Widget
written by vegu on 23 Dec, 2006 09:49:36
A live example of this tutorial can be found here.All image files used in this tutorial can be downloaded here
If you need to put lots of content into small space then the tabbed dialog widget is the way to go. It is made up of several tabs that can be brought to the foreground by clicking on them. A tab can hold a number of child elements, such as buttons, lists or just text.
This is not only useful if your space is limited but also if you want to keep related elements close together in order to build compact web applications.
The tabbed dialog widget is a pretty straight forward element of the vegUI family so lets get going :)
We start by creating the vegUI Manager element
Code: JavascriptManager = new VegUIManager('Manager');
Manager.set(800,600,0,0);
Manager.T.Css.backgroundColor = '#b2b2b2';
Manager.build(document.body);
Then we create tab element.
Code: JavascriptmyTab = Manager.get_new(VUI_TABBEDDIALOG);
Then we setup the tab element by calling its set() or set_tabdlg() method
Code: JavascriptmyTab.set(400,200,50,50);
Definition: VegUITabbedDialog.set_tabdlg()
The first two arguments are it's width and height, arguments 3 and 4 are its x and y positions. There is a 5th argument which we skip in this example that sets the space between the tabs (0 pixels by default).
The major part of setting up the tabbed dialog element happens by setting up its TplTab child. The TplTab child is a template VegUITab element and every tab we add to our tabbed dialog later on will be cloned from this template. The vegUITab is made up of three child elements.
- Tab, the tab button that can be clicked to give focus to the tab
- Panel, the panel where elements can be placed
- TabCaption, the element that holds the caption text of the tab
Lets start styling our template tab by assigning css classes to its elements, but first we need to create said css classes.
Code: CSS.tab_caption {
font: bold 10px Verdana, Arial, Helvetica;
color: #838383;
}
.tab_button {
background-color: #dedede;
border: 1px #838383 solid;
border-bottom: none;
}
.tab_bg {
background-color: #dedede;
border: 1px #838383 solid;
} Code: JavascriptmyTab.TplTab.Tab.T.className = 'tab_button';
myTab.TplTab.Panel.T.className = 'tab_bg';
myTab.TplTab.TabCaption.T.className = 'tab_caption';
Alright, we will come back here later, but for now this is sufficient.
Now we need to add a tab or two :) We add tabs using the add_tab() method of the our tabbed dialog. Tabs should be added before the element is built, and using the add_tab() method we can specify the tab name, caption and width of the tab. Lets add two tabs.
Code: JavascriptTab1 = myTab.add_tab('tab_1', 'Tab #1', 75);
Tab2 = myTab.add_tab('tab_2', 'Another Tab', 100);
Definition: VegUITabbedDialog.add_tab()
The first argument we passed to the function is the unique tab name of the tab, the second argument is the caption to use and the third optional argument is the tab's width. We made the second tab wider as it has more text in its caption. The child name of a created tab is it's name with the string 'Tab_' prepended to it, in other words our second tab would have the tab name 'tab_2' and the child name 'Tab_tab_2'
The add_tab() method returns the created tab, but if you can access a created tab at anytime over the tabbed dialog's Tabs property by using the tab's name.
Code: JavascriptTab1 = myTab.add_tab('tab_1', 'Tab #1', 75);
Tab2 = myTab.Tabs['tab_2']; // or
Tab2 = myTab.C['Tab_tab_2'];
Okay lets build our stuff and load the page to check it out :)
Code: JavascriptManager.build_element(myTab);
Okay, two things
a) our tabs are empty
b) the caption of each tab seems to be awkwardly positioned
Lets fix b first by going back to our setup of the TplTab element.
Since the caption text of a tab is held in it's TabCaption child we can easily fix our issue by moving it a bit towards the right and a bit towards the bottom.
Code: JavascriptmyTab.TplTab.TabCaption.T.x = 8;
myTab.TplTab.TabCaption.T.y = 3;
In order to modify the height of the tab button - which will do now just for the sake of demonstrating it - you need to be tricky. First we set the h template property of the Tab child.
Code: JavascriptmyTab.TplTab.Tab.T.h = 25;
If you would reload the page now the button element would have the correct height but would be positioned awkwardly on the y axis with the bottom of it breaking into the panel area of the tab. So in order to make it look proper we need to counter set the tab buttons y template property. In our case we would set it to -25 pixels.
Code: JavascriptmyTab.TplTab.Tab.T.y = -25;
Okay that should look much better. On two our other issue :)
Adding some elements to our tabs
Any elements that you want your tabs to hold should be added as child elements to the Panel child of the target tab. In our example we will add a button element to tab_1 and some text to tab_2. For our button we will use the by now familiar clickme button from our previous tutorials.
Code: CSS.btn_clickme_1 { background-image: url('btn_clickme_1.gif'); }
.btn_clickme_2 { background-image: url('btn_clickme_2.gif'); }
Code: JavascriptmyButton = Tab1.Panel.add_child('myButton', VUI_BUTTON);
myButton.set(50,50,75,18,'btn_clickme_1','btn_clickme_2');
I wont explain this further, as this should be part of your knowledge by now :)
The text element for the second tab is about as straight forward as this was.
Code: CSS.sometext {
font: 10px Verdana, Arial, Helvetica;
color: #838383;
} Code: JavascriptsomeText = Tab2.Panel.add_child('someText', VUI_NODE);
someText.set('div', 100, 100, 50, 50);
someText.set_marg(50,50);
someText.T.className = 'sometext';In order to fill someText with some text we simply append a textnode to it after our tabbed dialog element has been built
Code: JavascriptsomeText.clear(
document.createTextNode(
'If you need to cram lots of content into little space then thats '+
'where the tabbed dialog control will be a godsend :)'
)
);
We're done, load the page now and switch back and forth happily between the first tab and the second tab. Once you're done with that we'll check out the vegUIWindow!
Related Posts
Your Comment
Comments
No comments yet.
