Bambookit Home    Bambookit GUI Tutorial

Back    Next   

II. GUI Basics

Chapter 6. Widgets - Using Widgets to Create Interfaces




Splitter

The Splitter widget divides a viewable panel into two panes. The skeleton for creating a splitter is:
<Splitter> <Widget setName="pane1"/> <Widget setName="pane2"/> </Splitter>
As you can see "pane1" will become the left view, pane2 will become the right view. The splitter will have by default a vertical seperator. If you wished to split the panes horizontally then you would set the attribute, setVertical="false"

Outlook View using Splitter widget

How would I go about creating the 3 pane look as seen in Microsoft Outlook. The 3 panes are the "folder" pane, the "message" pane and the "preview" pane.

<Widget setSize="320,320"> <Splitter setShape="10,10,300,300"> <Widget setName="folder" setWidth="80"/> <Splitter setVertical="false"> <Widget setName="message" setHeight="100"/> <Widget setName="preview"/> </Splitter> </Splitter> </Widget>
The first pane "folder" will be placed on the left view. All we need to set is the width of the widget.

Instead of the ..Widget setName="folder" setWidth="80".., we will replace it with the xml snippet below. Now for simplicity we did not enclose the Listbox within a View tag, but ideally this would be required.

<Listbox setName="folder" setWidth="80"> <Item setLabel="Outlook Express"> <Item setLabel="Local Folders"> <Item setLabel="Inbox"> <Item setLabel="personal"/> <Item setLabel="newsletter"/> <Item setLabel="acme"/> <Item setLabel="widget"/> </Item> </Item> </Item> </Listbox>
The height of the 'folder' widget is managed by the splitter. In this case, the 'folder' Listbox, sets its width to 80.

Now the 'message' view needs to have its height defined. The splitter now divides the upper and lower views, ..Splitter setVertical="false".., embedded in the previous Splitter's right pane.

Let us make the 'message' a table, as shown below

<Widget setSize="100,100" setBorder="squarelowered"> <Table setLocation="2,2" setName="message" setAnchor="true,true,false,false" setSize="320,320" setOpaque="false" setShowHeader="true" setShowResize="true"> <Listbox setSize="15,320" setBorder="none" setShowResize="false"> <Header setBackground="D4D0C8" addImage="images/exc.gif,5,13"/> <Item/> </Listbox> <Listbox setSize="15,320" setLocation="15,0" setBorder="none" setShowResize="false"> <Header setBackground="D4D0C8" addImage="images/clip.gif,8,13"/> <Item/> </Listbox> <Listbox setSize="20,320" setLocation="30,0" setBorder="none" setShowResize="false"> <Header setBackground="D4D0C8" addImage="images/flag.gif,11,12"/> <Item/> </Listbox> <Listbox setName="list1" setLocation="50,0" setSize="80,320" setBorder="none"> <Header setBackground="D4D0C8" setLabel="From" setAlign="left"/> <Item setLabel="Len Morgan"/> </Listbox> <Listbox setName="list2" setLocation="130,0" setSize="80,320" setBorder="none" attachToWidget="list1,true,false,true,false"> <Header setBackground="D4D0C8" setLabel="Subject" setAlign="left"/> <Item setLabel="[Bambookit GUI]IDE questions"/> </Listbox> <Listbox setName="list3" setLocation="210,0" setSize="80,320" setBorder="none" attachToWidget="list2,true,false,true,false"> <Header setBackground="D4D0C8" setLabel="Received" setAlign="left"/> <Item setLabel="2003/05/30 11:49AM"/> </Listbox> </Table> </Widget>
The final 'preview' widget is a simple listbox.

<Listbox setName="preview" setShowHeader="true"> <Header setFontStyle="bold" setLabel="subject"/> <Item setLabel="subject"/> </Listbox>
What you should note is that everytime the splitter is resized it re-enforces the height (or width) of the embedded widget panes, to fit the new size.

How many levels of splitters can we define?
There is no limit other than physically what can be displayed by the various bars

Here is the xml script in full
<?xml version="1.0"?> <Widget setSize="320,320"> <Splitter setShape="10,10,300,300"> <Listbox setName="folder" setWidth="80"> <Item setLabel="Outlook Express"> <Item setLabel="Local Folders"> <Item setLabel="Inbox"> <Item setLabel="personal"/> <Item setLabel="newsletter"/> <Item setLabel="acme"/> <Item setLabel="widget"/> </Item> </Item> </Item> </Listbox> <Splitter setVertical="false"> <Widget setSize="100,100" setBorder="squarelowered"> <Table setLocation="2,2" setName="message" setAnchor="true,true,false,false" setSize="320,320" setOpaque="false" setShowHeader="true" setShowResize="true"> <Listbox setSize="15,320" setBorder="none" setShowResize="false"> <Header setBackground="D4D0C8" addImage="images/exc.gif,5,13"/> <Item/> </Listbox> <Listbox setSize="15,320" setLocation="15,0" setBorder="none" setShowResize="false"> <Header setBackground="D4D0C8" addImage="images/clip.gif,8,13"/> <Item/> </Listbox> <Listbox setSize="20,320" setLocation="30,0" setBorder="none" setShowResize="false"> <Header setBackground="D4D0C8" addImage="images/flag.gif,11,12"/> <Item/> </Listbox> <Listbox setName="list1" setLocation="50,0" setSize="80,320" setBorder="none"> <Header setBackground="D4D0C8" setLabel="From" setAlign="left"/> <Item setLabel="Len Morgan"/> </Listbox> <Listbox setName="list2" setLocation="130,0" setSize="80,320" setBorder="none" attachToWidget="list1,true,false,true,false"> <Header setBackground="D4D0C8" setLabel="Subject" setAlign="left"/> <Item setLabel="[Bambookit GUI]IDE questions"/> </Listbox> <Listbox setName="list3" setLocation="210,0" setSize="80,320" setBorder="none" attachToWidget="list2,true,false,true,false"> <Header setBackground="D4D0C8" setLabel="Received" setAlign="left"/> <Item setLabel="2003/05/30 11:49AM"/> </Listbox> </Table> </Widget> <Listbox setName="preview" setShowHeader="true"> <Header setFontStyle="bold" setLabel="subject"/> <Item setLabel="subject"/> </Listbox> </Splitter> </Splitter> </Widget>


Back    Next