II. GUI Basics
Chapter 6. Widgets - Using Widgets to Create Interfaces
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
The table size is set to be large enough to fit in all the Listbox controls
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.
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
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
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.
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?
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.