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:
<![CDATA[
<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.
<![CDATA[
<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.
<![CDATA[
<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
<![CDATA[
<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.
<![CDATA[
<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
<![CDATA[
<?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