Bambookit Home    Bambookit GUI Tutorial

Back   

II. GUI Basics

Chapter 6. Widgets - Using Widgets to Create Interfaces




Table

The creation of a table is a simple composition of Listboxes, or so you would think. To create a table all we need to do is defined the following

<Table setAnchor="true,true,false,false" setOpaque="false" setShowHeader="true" setShowResize="true" setLocation="1,1" setSize="440,30" setName="table"> <Listbox setBorder="none" setLocation="0,0" setWidth="40" setShowResize="false" setName="list1" attachToContainer="table,true,false,true,false"/> <Listbox setBorder="none" setLocation="40,0" setWidth="80" setName="list2" attachToWidget="list1,true,false,true,false" attachToContainer="table,true,false,true,false"/> <Listbox setBorder="none" setLocation="120,0" setWidth="80" setName="list3" attachToWidget="list2,true,false,true,false" attachToContainer="table,true,false,true,false"/> <Listbox setBorder="none" setLocation="200,0" setWidth="80" setName="list4" attachToWidget="list3,true,false,true,false" attachToContainer="table,true,false,true,false"/> <Listbox setBorder="none" setLocation="280,0" setWidth="80" setName="list5" attachToWidget="list4,true,false,true,false" attachToContainer="table,true,false,true,false"/> <Listbox setBorder="none" setLocation="360,0" setWidth="80" setName="list6" attachToWidget="list5,true,false,true,false" attachToContainer="table,true,false,true,false"/> </Table>
The table size is set to be large enough to fit in all the Listbox controls
..setSize="440,30"..
The height of the table is Only 30 pixels high. As in the previous examples the listbox height is NOT set, this makes them auto-expand as we add items to the list, however since they are contained in the Table, they would automatically get cropped.

The listbox contains an attachment that manages the size of the table.
..attachToContainer="table,true,false,true,false"..
The above attribute states that the widget is attached to the table container. Thus whenever the widget gets resize along the x-axis then the table equally gets modified by the same displacement amount. The attribute is read as attachToContainer="widgetname,left,top,right,bottom". What if we set the attribute
..attachToContainer="table,true,true,true,true"..
Now whenever the Listbox expands heightwise (when we add items), so will the table also be adjusted. A word of warning though. If all the Listboxes were ALL set to adjust for their height, then whenever a row is added (a height of 22 pixels) the table expands by 132 pixels (22 x 6 listboxes = 132). So ensure that only a single listbox adjusts the height of the table container. In our example we ignore the height.

Adding Scrollbars to the Table

To add scrollbars to ANY widget we wrap it in a View widget. The view widget contains both the horizontal and vertical scrollbars. These by default are created and appended to the View widget, they can however be EXPLICITLY set. If you wished to modify the border, height, width, color, thumb border, images then you explicitly describe them in the XML script

For now we will create a simple default view

<View> <Table setAnchor="true,true,false,false" setOpaque="false" setShowHeader="true" setShowResize="true" setLocation="1,1" setSize="440,30" setName="table"> <Listbox setBorder="none" setLocation="0,0" setWidth="40" setShowResize="false" setName="list1" attachToContainer="table,true,false,true,false"/> <Listbox setBorder="none" setLocation="40,0" setWidth="80" setName="list2" attachToWidget="list1,true,false,true,false" attachToContainer="table,true,false,true,false"/> <Listbox setBorder="none" setLocation="120,0" setWidth="80" setName="list3" attachToWidget="list2,true,false,true,false" attachToContainer="table,true,false,true,false"/> <Listbox setBorder="none" setLocation="200,0" setWidth="80" setName="list4" attachToWidget="list3,true,false,true,false" attachToContainer="table,true,false,true,false"/> <Listbox setBorder="none" setLocation="280,0" setWidth="80" setName="list5" attachToWidget="list4,true,false,true,false" attachToContainer="table,true,false,true,false"/> <Listbox setBorder="none" setLocation="360,0" setWidth="80" setName="list6" attachToWidget="list5,true,false,true,false" attachToContainer="table,true,false,true,false"/> </Table> </View>

Setting the Header attributes

What if we wished to change the label of the headers, how is that done. Well you simply define them in the XML document to override the default settings.

<Table setAnchor="true,true,false,false" setOpaque="false" setShowHeader="true" setShowResize="true" setLocation="1,1" setSize="440,30" setName="table"> <Listbox setBorder="none" setLocation="0,0" setWidth="40" setShowResize="false" setName="list1" attachToContainer="table,true,false,true,false"> <Header setLabel="id"/> </Listbox> <Listbox setBorder="none" setLocation="40,0" setWidth="80" setName="list2" attachToWidget="list1,true,false,true,false" attachToContainer="table,true,false,true,false"> <Header setLabel="firstname"/> </Listbox> <Listbox setBorder="none" setLocation="120,0" setWidth="80" setName="list3" attachToWidget="list2,true,false,true,false" attachToContainer="table,true,false,true,false"> <Header setLabel="lastname"/> </Listbox> <Listbox setBorder="none" setLocation="200,0" setWidth="80" setName="list4" attachToWidget="list3,true,false,true,false" attachToContainer="table,true,false,true,false"> <Header setLabel="title"/> </Listbox> <Listbox setBorder="none" setLocation="280,0" setWidth="80" setName="list5" attachToWidget="list4,true,false,true,false" attachToContainer="table,true,false,true,false"> <Header setLabel="notify"/> </Listbox> <Listbox setBorder="none" setLocation="360,0" setWidth="80" setName="list6" attachToWidget="list5,true,false,true,false" attachToContainer="table,true,false,true,false"> <Header setLabel="DOB"/> </Listbox> </Table>
The Header is just a button that manages the events for sorting the listbox. Also responsible for that tiny arrow in the right hand corner of the widget.

The same applies to the resize button. If you wish to modify its look, then explicitly define it. Since defaults are automatically defined it helps to keep the code set to a minimal.

Adding Rows to a Table

As you may have noticed the table is defined a column at a time, this goes against the grain of the databases that define them a row at a time. How is this managed?

<Table setAnchor="true,true,false,false" setOpaque="false" setShowHeader="true" setShowResize="true" setLocation="1,1" setSize="440,30" setName="table"> <Listbox setBorder="none" setLocation="0,0" setWidth="40" setShowResize="false" setName="list1" attachToContainer="table,true,false,true,false"> <Header setLabel="id"/> </Listbox> <Listbox setBorder="none" setLocation="40,0" setWidth="80" setName="list2" attachToWidget="list1,true,false,true,false" attachToContainer="table,true,false,true,false"> <Header setLabel="firstname"/> </Listbox> <Listbox setBorder="none" setLocation="120,0" setWidth="80" setName="list3" attachToWidget="list2,true,false,true,false" attachToContainer="table,true,false,true,false"> <Header setLabel="lastname"/> </Listbox> <Listbox setBorder="none" setLocation="200,0" setWidth="80" setName="list4" attachToWidget="list3,true,false,true,false" attachToContainer="table,true,false,true,false"> <Header setLabel="title"/> </Listbox> <Listbox setBorder="none" setLocation="280,0" setWidth="80" setName="list5" attachToWidget="list4,true,false,true,false" attachToContainer="table,true,false,true,false"> <Header setLabel="notify"/> </Listbox> <Listbox setBorder="none" setLocation="360,0" setWidth="80" setName="list6" attachToWidget="list5,true,false,true,false" attachToContainer="table,true,false,true,false"> <Header setLabel="DOB" addActionTarget="null,table,addRow='1,2,3,4,5,6'"/> </Listbox> </Table>
The last Header defines an addActionTarget event that listens in on the null event. A null event is just a shorthand way of saying execute the method now (as soon as it is parsed).
..Header setLabel="DOB" addActionTarget="null,table,addRow='1,2,3,4,5,6'"..
This adds the row "1,2,3,4,5,6" to the table.



Back