 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
vegUI Tutorial 09 - The Content Box Widget
written by vegu on 19 Dec, 2006 03:24:25
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.
I contemplated for a while if i should do a separate tutorial for the vegUI Scrollbar element, but considering that the scrollbar currently only handles the scrolling of content, and does not have the features of a slider (something that lets you increase or decrease a certain value, like volume) yet, i figured it would be sufficient to just combine the content box and scrollbar tutorials :)
So what is a content box exactly? The VegUIContentBox element can be likened to the iframe element, with the exception that it cannot render HTML pages that are not on the same server as the content box, which is not its purpose anyways.
Its purpose is to render local content in a scroll-able environment. The Content-box is made up of several child elements
1. The CHolder Element
The CHolder element is the frame, and CHolder is an abbreviation of Content Holder. It holds the content
2. The Content Element
The Content element is the element that will hold the content later on. It is the surface that will get moved by the scrollbars
3. ScrollX
The x-axis scroll bar
4. ScrollY
The y-axis scroll bar
All child elements can be accessed directly as a property of the Content Box or over the Content Box's C property
Code: JavascriptCBox.ScrollX // same as
CBox.C['ScrollX']
As always we will be using the Manager element from the previous tutorials. So lets start by creating and setting up our Content Box element. We set it up using the set() or set_cbox() method.
Code: JavascriptCBox = Manager.get_new(VUI_CBOX);
CBox.set(200,150,100,100);
Definition: VegUIContentBox.set_cbox
Before we continue with the content-box lets take a look at the scroll bar element first.
The Scrollbar
The VegUIScrollbar allows the scrolling of content. In order to scroll content the scrollbar needs to be linked to both the element that holds the content and the content node itself. The content node should always be a child node (DOM-wise) of the content holder node.
The scrollbar itself is made up of 3 child elements
1. Btn1
the button that scrolls up or left
2. Btn2
the button that scrolls down or right
3. Btn3
the button that can be dragged to scroll
The scroll-bars of the content box are linked automatically, so we dont need to do that in this tutorial. What we do need to do though is setting up the scrollbars themselves including their buttons. So lets do that and start by setting up the scrollbars.
Code: JavascriptCBox.ScrollY.set('y',null,null,18);
CBox.ScrollX.set('x',null,null,null,18);Definition: VegUIScrollbar.set_scroll
The first argument we pass to the set method is the type of the scroll bar. 'y' for the scrollbar that scrolls the content on the y-axis and 'x' for the scrollbar that scrolls the content on the x-axis. The next two arguments are the position of the scrollbar which we can skip by passing null to them as the content box positions the scrollbars automatically. The last two parameters are the width and the height of the scrollbar.
The widget can be skipped on ScrollX as it will be set by the content box and the height can be skipped on ScrollY as it will be set by the content box as well.
The values for width and height respectively should be the same as the height/width of Btn1, in our case 18.
Before we proceed to setting up the buttons of the scrollbar we need to define their css classes.
Code: CSS.btn_scroll_left_0 { background-image: url(btn_arrow_left_0.gif); }
.btn_scroll_left_1 { background-image: url(btn_arrow_left_1.gif); }
.btn_scroll_right_0 { background-image: url(btn_arrow_right_0.gif); }
.btn_scroll_right_1 { background-image: url(btn_arrow_right_1.gif); }
.btn_scroll_down_0 { background-image: url(btn_arrow_down_0.gif); }
.btn_scroll_down_1 { background-image: url(btn_arrow_down_1.gif); }
.btn_scroll_up_0 { background-image: url(btn_arrow_up_0.gif); }
.btn_scroll_up_1 { background-image: url(btn_arrow_up_1.gif); }
.btn_scroll_drag { background-color: #8bb1be; }
.scroll_bar { background-color: #838383; }If you have done the button tutorial it should be pretty obvious which classes are for what buttons. If you have not done it - do it and come back :P
The scroll_bar class is for the scroll bars themselves.
Code: JavascriptCBox.ScrollY.T.className = 'scroll_bar';
CBox.ScrollX.T.className = 'scroll_bar';
Okay, lets set up the buttons. This is straightforward like you would set up any other buttons. You do not need to bother with the positioning of the buttons though as that will be handled by the scrollbar automatically. The buttons i use for this example are 18x18 pixels big.
Code: JavascriptCBox.ScrollY.Btn1.set(0,0,18,18,'btn_scroll_up_0','btn_scroll_up_1');
CBox.ScrollY.Btn2.set(0,0,18,18,'btn_scroll_down_0','btn_scroll_down_1');
CBox.ScrollY.Btn3.set(0,0,18,18,'btn_scroll_drag','btn_scroll_drag');
CBox.ScrollX.Btn1.set(0,0,18,18,'btn_scroll_left_0','btn_scroll_left_1');
CBox.ScrollX.Btn2.set(0,0,18,18,'btn_scroll_right_0','btn_scroll_right_1');
CBox.ScrollX.Btn3.set(0,0,18,18,'btn_scroll_drag','btn_scroll_drag');
Alright, were done with the scrollbars for now, lets pay attention to the content box itself for a bit
Setting up the content box, and filling it with content
Actually, the header of this part of the article is a bit misleading as we've already set up the content box in regards to size and position earlier.
However it would be a good thing to assign some css classes to its CHolder and Content elements.
In my example i want the CHolder element to have a border in order to represent a frame. I also want the Content element to have a padding of 5 pixels so that the text that it holds wont be glued to its borders and hence the content holders borders. Additionally we set the font on the content element so that the content we will put in the content box later on will take over that text style.
Code: CSS.cbox_cholder {
border: 1px #838383 solid;
background-color: #fff;
}
.cbox_content {
padding: 5px;
font: bold 10px Verdana, Arial, Helvetica;
color: #838383;
} Code: JavascriptCBox.CHolder.T.className = 'cbox_cholder';
CBox.Content.T.className = 'cbox_content';
Manager.build_element(CBox);
If you load the page now you should have an empty frame-like object with two disabled scrollbars glued to its borders.
There are two things we want to change about that
- Move the scrollbars away from the borders a bit so its more appealing to the eye
- Fill it with some content to scroll
In order to move the scrollbars away from the borders we need to manually set their bmarg_nr and rmarg_nr properties. bmarg_nr for the the scroll bar on the x-axis and rmarg_nr for the scroll bar on the y axis. We will set both to -5 pixels which should produce a 5 pixel gap between scrollbar and content holder element.
Code: JavascriptCCBox.ScrollY.T.rmarg_nr = -5;
CBox.ScrollX.T.bmarg_nr = -5;
There are two ways to fill the content box with content. The first way is to feed it an existing node on the page. That node will be removed from its current parent node and become a child of the Content element's node.
This will be our test node:
Code: HTML<div id="some_text" >
This is some random text that goes
over multiple lines in order to
make the element high enough to
produce content overflow in the content box<br /><br />
1 another line<br />
2 another line<br />
3 another line<br />
4 another line<br />
5 another line<br />
6 another line<br />
7 another line<br />
8 another line<br />
9 another line<br />
10 another line<br />
11 another line<br />
12 another line<br />
13 another line<br />
14 another line<br />
15 another line<br />
16 another line<br />
17 another line<br />
18 another line<br />
19 another line<br />
20 another line<br />
</div>
In order to fill the content box with the node above we simply call it's fill method. This needs to happen after the content box is built obviously.
Code: JavascriptCBox.fill(document.getElementById('some_text'));Defintion: VegUIContentBox.fill
The second way to fill the content box is by loading a file into it. If the file contains HTML elements those will be rendered correctly, so theoretically you could use the content box as an iframe replacement so long as the file youre displaying is located on the same server as the content box.
We do this by calling the fill_remote method. Before you can use the fill_remote() method though you need to initialize the vegui bridge on the manager.
The vegui bridge allows the client-server communication via XMLHttpRequest. You can initialize the common vegui bridge that will be used by all elements that require it by calling init_bridge() on the manager itself.
Code: JavascriptManager.init_bridge();
CBox.fill_remote('some_file.html');
Defintion: VegUIContentBox.fill_remote
Okay, reload the page and everything was in order your content box should be holding the contents of our 'some_text' div and you should be able to scroll it.
The x-axis scrollbar will be disabled since there is no need for it. The only way to enable the x-axis scrollbar is by setting a fixed width to the element that the content box is filled with. You could give the div we create a width of 300 , which would enable the scrollbar. I find myself hardly ever making use of ScrollX though (only case that comes to mind is when the contentbox holds an image) so most of the time i just hide it.
You can hide either of the scrollbars by flagging the content box accordingly.
Code: JavascriptCBox.flags |= VUI_HIDE_SCROLLX;
This needs to happen before the Content box is built.
Styling the drag button
You could consider our little example done - if you ignore the drab looking drag button of our scrollbar. Lets give it a skin so it looks a bit like the other two buttons. Skinning elements happens by using the add_skin method. add_skin is a combination of add_child, set and set_marg methods. It is a wrapper function so to say.
Before we get to the coding let me explain how we will skin Btn3 of ScrollY. Since the drag button is sized in sync with the content overflow of the contentbox it changes either its height (y-axis scrollbar) or its width (x-axis scrollbar) the skin needs to be flexible to size.
In order to accomplish it the skin will be made up of three nodes
- the 'top' node which will be fixed at 0,0 coordinate , with fixed size (18x4)
- the 'fill' node which will be fixed at 0,4 coordinate , with fixed width and a bottom margin of 4 pixels
- the 'bottom' node which will have fixed size and a bottom margin noresize of 0 pixels
Because of the fact that those three nodes will be image nodes we will need a fourth blank node that is positioned over them on the z-axis. This is to prevent firefox from going into drag mode when the mouse is clicked and moved on the button.
Illustration:
Code: JavascriptCBox.ScrollY.Btn3.add_skin('t',18,4,0,0,0,null,null,null,null,'img','btn_drag_y_top.gif');
CBox.ScrollY.Btn3.add_skin('f',18,1,0,4,0,null,3,null,null,'img','btn_drag_y_fill.gif');
CBox.ScrollY.Btn3.add_skin('b',18,4,0,0,0,null,null,null,-1,'img','btn_drag_y_bottom.gif');
CBox.ScrollY.Btn3.add_skin('p',1,1,0,0,'blank',0,0,null,null); Definition: VegUINode.add_skin
The first argument passed to the add_skin method is the unique name of the child. Argument 2 and 3 is width and height of the node, arguments 4 and 5 are x and y position of the node, argument 6 is the css class to use for the node, arguments 7,8,9 and 10 are the margin properties of the node, arguments 11 is the html node type - div by default - and argument 12 is the image source to use if argument 11 is 'img'.
Again, all this should happen before the elements are built :)
As weve hidden the x-axis scrollbar we will only skin the y-axis scrollbar ...i am one lazy mofo.
Thats pretty much it, coming up next: The VegUIList widget :)
Related Posts
Your Comment
Comments
No comments yet.
