The Splitter control allows you to divide the view into two resizable sections. The Splitter bar can either be aligned horizontally or vertically. In the applet above a Splitter control is embedded within another Splitter. One is aligned vertically while the child splitter is aligned horizontally. The Splitter control extends from 'Widget', thus inheriting all of the Widget control's properties. Refer to the Reference guide to view the list of Widget and/or Splitter properties.
In addition to the base Widget properties and methods the Splitter control has the following properites defined:
SetVertical requires a Boolean value. For example, setVertical=”false”. This property is used to set the alignment of the splitter. If 'true' then the bar is vertical, panel 1 is placed on the left and panel 2 is placed on the right. If 'false' then the bar is horizontal and panel 1 is placed on top and panel 2 is placed on the bottom.
setThumbBorder requires a border name. For example, setThumbBorder="roundraised". The complete list of borders provided in the Reference Guide. This property is used to set the border of the draggable thumb (the bar that splits the two views).
setThumbWidth="8" requires an integer. For example, setThumbWidth="8". This property allows setting the width of the bar that separates the two views.
The source for the applet above is shown below. (refer to the XML source below). First we create the root Widget control with the setSize="350,350". The border in this Widget is undefined, the default border for a widget is 'none'. Then we create the Splitter control setting its location and size with setShape="10,10,300,300". The Splitter control is 'contained' within the widget control at the location x=10, y=10 with the size of width=300, height=300. The default value for the the setVertical property is 'true'. We define two widgets for within the Splitter control. The first widget is displayed in the Splitter's first panel, (if setVertical is true then it would be the left panel) while the second widget is displayed in its second panel (if setVertical is true then it would be the right panel). We create a Widget with setSize="50,50" property (Only width is used to set the location of the Splitter's vertical bar) If we want only one vertical splitter bar in the application view, at this point we would define another Widget (instead of the second Splitter control). It is important to set the Border for these Widgets, otherwise the Widget would not be visible. Then we would close the Splitter and root Widget controls and the application view would be divided vertically.
The second Splitter control in the applet above is divided horizontally. The second Splitter has the setVertical property set to 'false' to display the horizontal bar. Then two widgets are embedded inside the second splitter. The height in the setSize property of the first Widget sets the location of the horizontal Splitter bar. Refer to the XML source below.
It was described above how to create the split views in an application. At this point you may add controls in the widgets to create the required application views. Refer to Reference for complete list of Controls and their Properties.