Splitter

Displays a splitter control that allows the user to resize the docked frames present in the page.

Syntax

HTML	<div cordysType="wcp.library.ui.Splitter" id="splitter" type=sType> ... </div>

where, sTypedenotes the type of the splitter provided in the page. The splitter control can be added to any page, but must be always present between two HTML elements. The following example shows two SPAN tags separated into two halves with a splitter between them.

HTML	<div> <div style="background-color:white"> ... </div> <div cordysType="wcp.library.ui.Splitter" id="splitter" type="top"/> <div style="background-color:grey"> ... </div> </div>

The splitter component (if specified as dynamic) enables resizing of frames, and facilitates optimization of the working area. When the user passes the mouse pointer over the splitter, the cursor changes to indicate that the frames docked to the splitter component can be resized. The direction in which the pointer is going to point will be determined by thetypeattribute set for the component.

The splitter component enables the user to resize the docked frame that is immediately before it in the docking order. Thus, to enable the user to resize a docked frame from another frame, dock the frame the user wants to resize, and place the next frame immediately below it.

It is also possible to hide a frame completely from view, and load/show it whenever required. This is possible by double-clicking on the splitter in the HTM page. The splitter component comes up with a tooltip whenever the cursor is brought near the splitter. The tooltip indicates which side of the application will be hidden. For example, if the type attribute is set to top, then the mouse pointer points in the upward direction indicating that the frame can be hidden in that direction.

To dynamically add and initialize this component, you can use the initializeHTMLElements or addType methods of the Application object.

The properties, methods and events defined on the splitter component are as follows:

Table 1. List of Attributes

Attribute	Property	Description
dynamic	N/A	Boolean that determines whether the splitter is dynamic or static onload. The default value is 'true' (=dynamic) and enables resizing of the splitter component.
gridSize	gridSize	String that denotes the size of the grid area in multiples of which the splitter has to move. This property is actually the size of each square of the grid that is drawn while moving the splitter. By default, this is 0.
restoreOffset	restoreOffset	Integer that denotes the previous known offset set before the splitter is hidden. This property is READ-ONLY.
type	N/A	String that denotes the type of the splitter used to split the frames. It contains one or more of the following values: left: Default. Splitter divides the frames into two vertical halves, and the offset is set on the left part of it. right: Splitter divides the frames into two vertical halves, and the offset is set on the right part of it. top: Splitter divides the frames into two horizontal halves, and the offset is set on the top part of it. bottom: Splitter divides the frames into two horizontal halves, and the offset is set on the bottom part of it. horizontal: Splitter divides the frames into two horizontal halves, and the offset is set on its first half. vertical: Splitter divides the frames into two vertical halves, and the offset is set on its first half.
offset	N/A	Sets theoffsetproperty, which is a string that contains the distance the splitter component is offset or pulled away from its default location. The value of the offset can be set in pixels or in percentage. The offset made depends upon the type of the splitter set on the splitter component. For example, if the type property is set to 'bottom' then offset denotes the distance by which the first available docked frame on the application is pulled comparative to the position of the second frame below it.
statusOnLoad	N/A	String that determines the status of the splitter onload. Possible values are: minimized: splitter is initially minimized. maximized: splitter is initially maximized. hidden: splitter is initially hidden; can be shown with the restore() method. visible: Default value; splitter is visible at start-up.

Table 2. List of Methods

Method	Description
hide(sSide)	Hides the splitter and minimizes the area on the specified side of the splitter. The parametersSideis optional and refers to the area (with respect to the splitter) to be minimized.sSidecan have the following string values -top,right,bottom, andleft.When the splitter is hidden, the page appears to have a single frame. To again display the splitter, use therestore()method.
maximize	Maximizes one side of the splitter based on the type attribute set on it. For e.g. If thetypeattribute is set to 'bottom' then the splitter is maximized to the bottom side. After minimizing, the splitter remains visible on the top of the application. A restore method call or a double-click the item will restore the application back. This method can be used when the user wants to maximize the window after it is hidden.
minimize	Minimizes one side of the splitter based on the type attribute set on it. For e.g. If thetypeattribute is set to 'bottom' then the splitter is minimized to the bottom side. After minimizing, the splitter remains visible on the top of the application. A restore method call or a double-click the item will restore the application back. This method can be used when the user wants to minimize the window after it is hidden.
restore	Restores the splitter on its last known offset position before a hide/maximize/minimize operation. This method uses the restoreOffset property to determine the splitter's last known position.
getDynamic	Returns 'true' when the splitter is dynamic; the splitter is movable and not static.
getOffset	Gets the value of the offset property.
getType()	Returns the type of splitter
setOffset	Sets the offset property, which is a string that contains the distance the splitter component is offset or pulled away from its default location. The value of the offset can be set in pixels or in percentage. The offset made depends upon the type of the splitter set on the splitter component. For example, if the type property is set to "bottom" then offset denotes the distance by which the first available docked frame on the application is pulled comparative to the position of the second frame below it.
setType()	Denotes the type of the splitter used to split the frames. It contains one or more of the following values: left: Default. Splitter divides the frames into two vertical halves, and the offset is set on the left part of it. right: Splitter divides the frames into two vertical halves, and the offset is set on the right part of it. top: Splitter divides the frames into two horizontal halves, and the offset is set on the top part of it. bottom: Splitter divides the frames into two horizontal halves, and the offset is set on the bottom part of it. horizontal: Splitter divides the frames into two horizontal halves, and the offset is set on its first half. vertical: Splitter divides the frames into two vertical halves, and the offset is set on its first half.
setDynamic(bSelect)	Sets the dynamic property of the splitter. Possible values for bSelect are: If true, it sets the splitter as dynamic. If false, it sets the splitter as static.

Table 3. List of Events

Event	Description
onstartmove	Fires the moment you start dragging the splitter.
onstopmove	Fires the moment you stop dragging the splitter.

Example

The following example shows the use of the splitter in an HTML page: