9 July 2003

4 UI Controls


Contents


 

4.1 Introduction

dSVG contains the following four basic types of  UI controls:

Some of these UI controls are composite controls--composed of multiple UI controls. The comboBox, for example, is composed of textBox, button and contextMenu controls.

4.2 Common Attributes

<!ENTITY % stdUIAttrs
"
id			ID		#IMPLIED
label			%Text		#IMPLIED
x			%Coordinate;	'0'
y			%Coordinate;	'0'
width			%Length;	#IMPLIED
height			%Length;	#IMPLIED
preserveAspectRatio	%Boolean;	'false'
xmlns:xlink		CDATA		#FIXED 'http://www.w3.org/1999/xlink'
xlink:href		%URI;		#IMPLIED
labelX			%Coordinate;	#IMPLIED
labelY			%Coordinate;	#IMPLIED
disabled		%Boolean;	'false'
autoScale		%Boolean;	'false'
stateHover		ID;		#IMPLIED
stateFocus		ID;		#IMPLIED
stateUp			ID;		#IMPLIED
stateDown		ID;		#IMPLIED
stateDisabled		ID;		#IMPLIED" >

id = "name"
Standard XML attribute for assigning a unique name to an element. Refer to the "Extensible Markup Language (XML) 1.0" Recommendation [XML10].
label = '<string>'
The text associated with the UI control, the position of which is determined by the skin, unless overridden by the 'labelX' and 'labelY' attributes.
x = "<coordinate>"
The x-axis coordinate of the side of the UI control, which has the smaller x-axis coordinate value in the current user coordinate system. Usually, this means the left side.
If the attribute is not specified, the effect is as if a value of "0" were specified.
y = "<coordinate>"
The y-axis coordinate of the side of the UI control, which has the smaller y-axis coordinate value in the current user coordinate system. Usually, this means the top.
If the attribute is not specified, the effect is as if a value of "0" were specified.
width = "<length>"
The width of the UI control.
If the attribute is not specified, the width is determined from the skin.
A negative value is an error. A value of zero disables rendering of the control.
height = "<length>"
The height of the UI control.
If the attribute is not specified, the height is determined from the skin.
A negative value is an error. A value of zero disables rendering of the control.
preserveAspectRatio = "(true | false)"
If true, and 'width' or 'height' is supplied, the other dimension is automatically calculated so as to preserve the UI control's aspect ratio.
If both 'width' and 'height' are supplied, this attribute is ignored.
If the attribute is not specified, it is assumed to be false.
xlink:href = "<uri>"
A reference to the skin's parent element, stored either internally in the <defs> block, or in an external file.
If the attribute is not specified, the control is not rendered.
labelX = "<coordinate>"
The x-axis coordinate of the side of the label, which has the smaller x-axis coordinate value in the current user coordinate system (usually the left side), relative to the (x,y) coordinates of the UI control.
If the attribute is not specified, the label's x-position is determined by the skin.
labelY = "<coordinate>"
The y-axis coordinate of the side of the label, which has the smaller y-axis coordinate value in the current user coordinate system (usually the top), relative to the (x,y) coordinates of the UI control.
If the attribute is not specified, the label's y-position is determined by the skin.
disabled = "(true | false)"
If true, the UI control is set to its disabled state and cannot be used.
autoScale = "(true | false)"
If true, the UI control is scaled to account for the difference between the transforms on the main document and the skin document, due to the 'viewBox' and 'preserveAspectRatio' attributes on each document's root 'svg' element. The resulting UI control will appear exactly the same size in the main document as it appeared in the skin document.
stateHover = "name"
The ID of the UI control's child element 'state', which refers to a skin to be used for the 'hover' state's appearance.
If the attribute is not specified, the skin's default 'hover' state appearance is used.
stateFocus = "name"
The ID of the UI control's child element 'state', which refers to a skin to be used for the 'focus' state's appearance.
If the attribute is not specified, the skin's default 'focus' state appearance is used.
stateUp = "name"
The ID of the UI control's child element 'state', which refers to a skin to be used for the 'up' state's appearance.
If the attribute is not specified, the skin's default 'up' state appearance is used.
stateDown = "name"
The ID of the UI control's child element 'state', which refers to a skin to be used for the 'down' state's appearance.
If the attribute is not specified, the skin's default 'down' state appearance is used.
stateDisabled = "name"
The ID of the UI control's child element 'state', which refers to a skin to be used for the 'disabled' state's appearance.
If the attribute is not specified, the skin's default 'up' state appearance is used.

4.3 The 'button' element

The 'button' element defines a control that can be clicked to trigger an action. It can be a push button, a checkbox (same as a sticky/toggle button) or a radiobutton, depending on its attributes.

<!ENTITY % buttonExt "" >
<!ELEMENT dsvg:button (dsvg:state|%behaviors;)* >
<!ATTLIST dsvg:button
  %stdDSVGAttrs;
  %stdUIAttrs;
  toggle	%Boolean;	#IMPLIED
  group		%Text;		#IMPLIED
  selected	%Boolean;	#IMPLIED >

Attribute definitions:

toggle = "(true | false)"
Specifies whether the button is a "toggle" (i.e. "sticky") button, meaning that it toggles between "up" and "down" states when clicked on. A checkbox has toggle="true".
If the attribute is not specified, the default is 'false'.
group = '<string>'
The name of the radio group that the button belongs to.
If the attribute is specified, the button behaves as a radio button, in which only one of the buttons associated with this radioGroup can be checked at a time.
If the attribute is not specified, the button behaves as either a push button or a toggle button.
selected = "(true | false)"
Specifies the initial state of the button as being down/checked (true) or up/unchecked (false). This attribute is automatically updated to reflect the current state of the control whenever the user clicks on the button, so that its state can be referenced externally.
If the attribute is not specified, the default is 'false'.

Skin template:

<?xml version="1.0"?>
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g id="">
		<g id="label">
			<text x="" y=""> </text>
		</g>
		<g id="up" display="all"/>
		<g id="down" display="none"/>
		<g id="hover" display="none"/>
		<g id="focus" display="none"/>
<g id="disabled" display="none"/> </g> </svg>

Example 101_button shows several push and toggle buttons of varying sizes, with no associated behaviors.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="450px" width="744px" onload="init(evt)" viewBox="0 0 744 450">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>

	<!-- Adding Template -->
	<g id="template">
		<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="rect_Title"/>
		<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id= "TITLE">dSVG sample: Button
		element</text>
		<line y2="350" x2="744" y1="350" opacity="1.0" stroke-width="2" stroke="#5F86B1" fill="#5F86B1" id="bottomLine"/>
		<text y="370" x="20" font-size="12" id= "defaut_ex">Default button - This button has all of its attributes set to default
		values.</text>
		<text y="395" x="20" font-size="12" id="group_ex"> Grouped buttons - Buttons can belong to a group. If grouped, and toggle= "true", this results in the functionality of a radio 
		button.</text>
		<text y="420" x="20" font-size="12" id= "large_ex">Small and large buttons - Change the size of a control by specifying new values for the height and width
		attributes.</text>
		<text y="60" x="50" id= "default_text">Default button: (Default
		attributes)</text>
		<text y="60" x="350" id="grouped">Grouped buttons: (group= one - buttons will behave with a sticky
		state)</text>
		<text y="160" x="50" id="small">Small button: (h=15, w=
		80)</text>
		<text y="160" x="350" id="large">Large button: (h=50, w=
		300)</text>
		<text y="340" x="20" font-weight="bold" font-size="10" fill="black" id= "Note">*Note: The red outlines are not part of the controls. They are used to identify the dimensions for each
		control.</text>
	</g>

	<!-- adding controls -->
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="70" x="50" label="Default button" id="default"/>
	<rect height="22" width="104" y="68" x="48" stroke="red" fill="none" id="rect_default"/>

	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" group="one" height="18" width="100" y="70" x="350" label="Button 1" id="default_g1"/>
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" group="one" height="18" width="100" y="95" x="350" label="Button 2" id="default2_g1"/>


	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="15" width="80" y="170" x="50" label="Small button" id="small_1"/>
	<rect height="19" width="84" y="168" x="48" stroke="red" fill="none" id="rect_small"/>

	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="50" width="300" y="170" x="350" label="Large button" id="large_button"/>
	<rect height="54" width="304" y="168" x="348" stroke="red" fill="none" id="rect_large"/>
</svg>

Example 101_button
Example 101_button - multiple buttons

View this example as SVG (SVG-enabled browsers only)  

3.4 The 'checkBox' element

The 'checkBox' element defines a sticky/toggle button that can be clicked to trigger an action.

<!ENTITY % checkBoxExt "" >
<!ELEMENT dsvg:checkBox (dsvg:state|%behaviors;)* >
<!ATTLIST dsvg:checkBox
  %stdDSVGAttrs;
  %stdUIAttrs;
  selected	%Boolean;	#IMPLIED >

Attribute definitions:

selected = "(true | false)"
Specifies the initial state of the checkBox as being checked (true) or unchecked (false). This attribute is automatically updated to reflect the current state of the control whenever the user clicks on the checkBox, so that its state can be referenced externally.
If the attribute is not specified, the default is 'false'.

Skin template:

<?xml version="1.0"?>
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g id="">
		<g id="label">
			<text x="" y=""> </text>
		</g>
		<g id="up" display="all"/>
		<g id="down" display="none"/>
		<g id="hover" display="none"/>
		<g id="focus" display="none"/>
<g id="disabled" display="none"/> </g> </svg>

Example 102_checkBox shows several checkBoxes of various sizes, with no associated behaviors.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="450px" width="744px" onload="init(evt)" viewBox="0 0 744 450">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>

	<!-- Adding Template -->
	<g id="template">
		<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="rect_Title"/>
		<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id= "TITLE">dSVG sample: CheckBox
		element</text>
		<line y2="350" x2="744" y1="350" opacity="1.0" stroke-width="2" stroke="#5F86B1" fill="#5F86B1" id="bottomLine"/>
		<text y="370" x="20" font-size="12" id= "defaut_ex">Default check box - When you select the check box, it toggles between true (selected) and false
		(deselected).</text>
		<text y="395" x="20" font-size="12" id= "small_ex">Small and large check boxes - Change the size of a control by specifying new values for the height and width
		attributes.</text>
		<text y="340" x="20" font-weight="bold" font-size="10" fill="black" id= "Note">*Note: The red outlines are not part of the controls. They are used to identify the dimensions for each
		control.</text>
	</g>
	<!-- adding controls -->
	<dsvg:checkBox xlink:href="dsvg11/skinCheckbox_Default.svg#skinCheckBox" autoScale="true" height="12" width="12" y="70" x="50" label="Default check box: (h=12, w=12)" id="default"/>
	<rect height="16" width="16" y="68" x="48" stroke="red" fill="none"/>
	<dsvg:checkBox xlink:href="dsvg11/skinCheckbox_Default.svg#skinCheckBox" autoScale="true" height="10" width="10" y="160" x="50" label="Small check box: (h=10, w=10)" id="small"/>
	<rect height="14" width="14" y="158" x="48" stroke="red" fill="none"/>
	<dsvg:checkBox xlink:href="dsvg11/skinCheckbox_Default.svg#skinCheckBox" autoScale="true" height="40" width="40" y="250" x="50" label="Large check box: (h=40, w=40)" id="large"/>
	<rect height="44" width="44" y="248" x="48" stroke="red" fill="none"/>
</svg>

Example 102_checkBox
Example 102_checkBox - several checkBoxes of various sizes

View this example as SVG (SVG-enabled browsers only)  

3.5 The 'comboBox' element

The 'comboBox' element defines a comboBox control, used to display a list of items, from which only one can be selected. It is a composite control, utilizing 'textBox', 'button', 'contextMenu' and 'slider' controls.

<!ENTITY % comboBoxExt "" >
<!ELEMENT comboBox (dsvg:state|%behaviors;|dsvg:item)*>
<!ATTLIST comboBox
  %stdDSVGAttrs;
  %stdUIAttrs;
  editable	%Boolean;	#IMPLIED
  rows		%Integer;	#IMPLIED
  value		%Text;		#IMPLIED
  data		%Text;		#IMPLIED
  sort		%Text;		#IMPLIED >

Attribute definitions:

editable = "(true | false)"
Specifies whether the comboBox is editable (true) or not (false). If editable, typing text and pressing Enter results in a new 'item' element being created as a child of the 'comboBox' element. Its 'label' attribute gets set to the text just entered, which results in the new item being displayed at the bottom of the list.
If the attribute is not specified, the default is 'true'.
rows = "<integer>"
Specifies the number of rows to be displayed in the dropdown list.
If the attribute is not specified, the dropdown list will show all items, if possible.
value = '<string>'
The value of the currently selected item's 'value' attribute, which is displayed.
If the attribute is specified, the item whose 'value' attribute matches the 'comboBox' element's 'value' attribute is the initially-selected item.
If the attribute is not specified, the item whose 'data' attribute matches the'comboBox' element's 'name' attribute is the initially-selected item.
If neither 'value' nor 'name' is specified, and 'editable' is set to 'false', the first item in the list is the initially-selected item.
If neither 'value' nor 'name' is specified, and 'editable' is set to 'true', there is no initially-selected item.
data = '<string>'
The value of the currently selected item's 'name' attribute, which is not displayed.
If the 'value' attribute is specified, this attribute is not used to specify the initially-selected item.
If the attribute is specified, and 'value' is not, the item whose 'name' attribute matches the 'comboBox' element's 'name' attribute is the initially-selected item.
If neither 'name' nor 'value' is specified, and 'editable' is set to 'false', the first item in the list is the initially-selected item.
If neither 'name' nor 'value' is specified, and 'editable' is set to 'true', there is no initially-selected item.
sort = "(ascending | descending | none)"
The type of sorting to be done on the items in the list.
If the 'sort' attribute is not specified, the default is 'none'.

Skin template (composite):

<?xml version="1.0"?>
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="">
<use id="TextBoxSkin" xlink:href="" x="" y=""/>
<use id="ButtonSkin" xlink:href="" x="" y=""/>
<use id="DropDownSkin" xlink:href="" x="" y=""/>
<g id="label">
<text id="skinComboBoxDefault_bodyText" x="" y=""> </text> </g> </g> </svg>

Example 103_comboBox shows four comboBoxes of various sizes, with no associated behaviors.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="450px" width="744px" onload="init(evt)" viewBox="0 0 744 450">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/combobox.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/textbox.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/contextMenu.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/slider.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/listBox.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/scrollbar.js"/>
	
	<!-- Adding Template -->
	<g id="template">
		<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="rect_Title"/>
		<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id= "TITLE">dSVG sample: ComboBox element</text>
		<line y2="350" x2="744" y1="350" opacity="1.0" stroke-width="2" stroke="#5F86B1" fill="#5F86B1" id="bottomLine"/>
		<text y="370" x="20" font-size="12" id= "defaut_ex">Default combo box - The default combo box has 3 child item elements: Apple, Banana, Grapes.</text>
		<text y="395" x="20" font-size="12" id= "small_ex">Fixed-size combo box - This combo box displays a maximum of 4 items. If the number of items exceeds 4, a scrollbar is enabled.</text>
		<text y="420" x="20" font-size="12" id= "large_ex">Small and large combo boxes - Change the size of a control by specifying new values for the height and width.</text>
		<text y="340" x="20" font-weight="bold" font-size="10" fill="black" id= "Note">*Note: The red outlines are not part of the controls. They are used to identify the dimensions for each control.</text>
	</g>
	
	<!-- adding controls -->
	<dsvg:comboBox selected="false" xlink:href="dsvg11/skinComboBox_Composite.svg#skinComboBox" autoScale="true" disabled="false" rows="4" height="17" width="217" y="70" x="50" label= "Default combo box: (default attributes)" id="comboBox_default">
<dsvg:item value="Apple" data="plu_1" id="item_1"/>
<dsvg:item value="Banana" data="plu_2" id="item_2"/>
<dsvg:item value="Grapes" data="plu_3" id="item_3"/> </dsvg:comboBox> <rect height="21" width="221" y="68" x="48" stroke="red" fill="none" id="rect_default"/> <dsvg:comboBox selected="false" xlink:href="dsvg11/skinComboBox_Composite.svg#skinComboBox" autoScale="true" disabled="false" editable="true" rows="4" height="17" width="217" y="70" x="350" label="Fixed-size combo box: (rows=4)" id="comboBox_fixed"> <dsvg:item value="Apple" data="plu_1" id="item_1"> <dsvg:itemData value="red" name="color"/> <dsvg:itemData value="$1.27" name="price"/> </dsvg:item> <dsvg:item value="Banana" data="plu_2" id="item_2"> <dsvg:itemData value="yellow" name="color"/> <dsvg:itemData value="$0.59" name="price"/> </dsvg:item> <dsvg:item value="Grapes" data="plu_3" id="item_3"> <dsvg:itemData value="purple" name="color"/> <dsvg:itemData value="$2.19" name="price"/> </dsvg:item> <dsvg:item value="Kiwi" data="plu_4" id="item_4"> <dsvg:itemData value="brown" name="color"/> <dsvg:itemData value="$0.89" name="price"/> </dsvg:item> <dsvg:item value="Orange" data="plu_5" id="item_5"> <dsvg:itemData value="orange" name="color"/> <dsvg:itemData value="$1.99" name="price"/> </dsvg:item> <dsvg:item value="Watermelon" data="plu_6" id="item_6"> <dsvg:itemData value="green" name="color"/> <dsvg:itemData value="$2.39" name="price"/> </dsvg:item> <dsvg:item value="Coconut" data="plu_7" id="item_7"> <dsvg:itemData value="brown" name="color"/> <dsvg:itemData value="$3.99" name="price"/> </dsvg:item> <dsvg:item value="Peach" data="plu_8" id="item_8"> <dsvg:itemData value="peach" name="color"/> <dsvg:itemData value="$2.39" name="price"/> </dsvg:item> </dsvg:comboBox> <dsvg:comboBox selected="false" xlink:href="dsvg11/skinComboBox_Composite.svg#skinComboBox" autoScale="true" disabled="false" height="16" width="80" y="180" x="50" label="Small combo box: (h=16, w=80)" id="comboBox_small">
<dsvg:item value="Apple" data="plu_1" id="item_1"/>
<dsvg:item value="Banana" data="plu_2" id="item_2"/>
<dsvg:item value="Grapes" data="plu_3" id="item_3"/> </dsvg:comboBox> <rect height="20" width="84" y="178" x="48" stroke="red" fill="none" id="rect_small"/> <dsvg:comboBox selected="false" xlink:href="dsvg11/skinComboBox_Composite.svg#skinComboBox" autoScale="true" disabled="false" height="50" width="300" y="180" x="350" label="Large combo box: (h=50, w=300)" id="comboBox_large">
<dsvg:item value="Apple" data="plu_1" id="item_1"/>
<dsvg:item value="Banana" data="plu_2" id="item_2"/> </dsvg:comboBox> <rect height="54" width="304" y="178" x="348" stroke="red" fill="none" id="rect_large"/> </svg>

Example 103_comboBox
Example 103_comboBox - Four comboBoxes of various sizes, with no default value.

View this example as SVG (SVG-enabled browsers only)  


3.6 The 'contextMenu' element

The 'contextMenu' element defines a menu that is associated with a particular element or group of elements via the 'contextMenu' attribute. The contextMenu appears at the position of the mouse pointer when right-clicking on an element.

<!ENTITY % contextMenuExt "" >
<!ELEMENT contextMenu (dsvg:state|%behaviors;|dsvg:item)*>
<!ATTLIST contextMenu
  %stdDSVGAttrs;
  %stdUIAttrs;
  value		%Text;		#IMPLIED
  data		%Text;		#IMPLIED
  cols		%Integer;	#IMPLIED
  colSpace	%Integer;	#IMPLIED
  eventSource	ID;		#IMPLIED
  sort		%Text;		#IMPLIED >

Attribute definitions:

cols = "<integer>"
The number of columns to be displayed in the contextMenu.
colSpace = "<integer>"
The number of user units to separate each column.\
value = '<string>'
The value of the selected item's 'value' attribute, which is displayed.
data = '<string>'
The value of the selected item's 'data' attribute, which is not displayed.
eventSource = name
The ID of the element that triggered the contextMenu to appear. This attribute gets automatically populated for reference purposes. It should never be set via markup.
If the attribute is not specified, the default is 'true'.
sort = "(ascending | descending | none)"
The type of sorting to be done on the items in the list.
If the 'sort' attribute is not specified, the default is 'none'.

Skin template:

<?xml version="1.0"?>
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG">
<g id="">
<g id="skinContextMenu_top" display="all">
</g>
<g id="skinContextMenu_middle" display="all"> <text id="label" x="" y=""> </text>
</g>
<g id="skinContextMenu_middle_hover" display="none">
<text id="label" x="" y=""> </text>
</g>
<g id="skinContextMenu_middle_selected" display="none">
<text id="label" x="" y=""> </text>
</g>
<g id="skinContextMenu_bottom" display="all"> </g> </g> </svg>

Example 104_contextMenu shows a contextMenu associated to a circle, with no associated behaviors.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" height="450px" width="744px" onload="init(evt)" viewBox="0 0 744 450">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/contextMenu.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/attributeContextMenu.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/attributeNativeContextMenu.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/listbox.js"/>
	
	<!-- Begin Template-->
	<g id="template">
		<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="rect_Title"/>
		<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="TITLE">dSVG sample: ContextMenu element</text>
		<line y2="350" x2="744" y1="350" opacity="1.0" stroke-width="2" stroke="#5F86B1" fill="#5F86B1" id="bottomLine"/>
		<text y="370" x="20" font-size="12" id="defaut_ex">Default context menu - Right-click within the circle to display the context menu.</text>
		<text y="395" x="20" font-size="12" id="additional_ex">The list consists of items which can be added directly as child elements of the context menu.</text>
		<text y="420" x="20" font-size="12" id="Final_ex">The context menu is associated with the circle by adding a dsvg:contextMenu attribute to the circle which references the context menu.</text>
		<text y="60" x="20" id="regular">Default Context Menu:</text>
		<text y="60" x="150" font-size="10" id="regular_desc">(default attributes) - right-click within the circle and the Context Menu should appear.</text>
	</g>
	
	<!--adding the controls-->
	<dsvg:contextMenu xlink:href="dsvg11/skinContextMenu_Default.svg#skinContextMenu" autoScale="true" label="Red Circle Menu" id="contextMenu1">
		<dsvg:item value="Apple" data="plu_1" id="item_1">
			<dsvg:itemData value="red" name="color"/>
			<dsvg:itemData value="$1.27" name="price"/>
		</dsvg:item>
		<dsvg:item value="Banana" data="plu_2" id="item_2">
			<dsvg:itemData value="yellow" name="color"/>
			<dsvg:itemData value="$0.59" name="price"/>
		</dsvg:item>
		<dsvg:item value="Grapes" data="plu_3" id="item_3">
			<dsvg:itemData value="purple" name="color"/>
			<dsvg:itemData value="$2.19" name="price"/>
		</dsvg:item>
		<dsvg:item value="Kiwi" data="plu_4" id="item_4">
			<dsvg:itemData value="brown" name="color"/>
			<dsvg:itemData value="$0.89" name="price"/>
		</dsvg:item>
	</dsvg:contextMenu>
	<circle dsvg:contextMenu="contextMenu1" r="50" cy="130" cx="130" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="circle_blue"/>
</svg>

Example 104_contextMenu
Example 104_contextmenu - contextMenu associated to a circle.

View this example as SVG (SVG-enabled browsers only)  


3.7 The 'item' element

The 'item' element defines a selectable item in a contextMenu, comboBox, listBox or listView control.

<!ENTITY % itemExt "" >
<!ELEMENT item (dsvg:itemData)*>
<!ATTLIST item
  id		ID;		#IMPLIED
  value		%Text;		#IMPLIED
  data		%Text;		#IMPLIED >

Attribute definitions:

id = "name"
Standard XML attribute for assigning a unique name to an element. Refer to the "Extensible Markup Language (XML) 1.0" Recommendation [XML10].
value = '<string>'
The value of the selected item's 'value' attribute, which is displayed.
data = '<string>'
The value of the selected item's 'data' attribute, which is not displayed.

3.8 The 'itemData' element

The 'itemData' element defines extra information for an item in a contextMenu, comboBox, listBox or listView control.

<!ENTITY % itemDataExt "" >
<!ELEMENT itemData (dsvg:itemData)*>
<!ATTLIST itemData
  id		ID;		#IMPLIED
  value		%Text;		#IMPLIED
  name		%Text;		#IMPLIED >

Attribute definitions:

id = "name"
Standard XML attribute for assigning a unique name to an element. Refer to the "Extensible Markup Language (XML) 1.0" Recommendation [XML10].
value = '<string>'
The value of the selected item's 'value' attribute, which is displayed.
data = '<string>'
The value of the selected item's 'data' attribute, which is not displayed.

3.9 The 'listBox' element

The 'listBox' element defines a single-column list of selectable items.

<!ENTITY % listBoxMenuExt "" >
<!ELEMENT listBox (dsvg:state|%behaviors;|dsvg:item)*>
<!ATTLIST listBox
  %stdDSVGAttrs;
  %stdUIAttrs;
  rows		%Integer;	#IMPLIED
  value		%Text;		#IMPLIED
  data		%Text;		#IMPLIED
  sort		%Text;		#IMPLIED >

Attribute definitions:

rows = "<integer>"
The number of rows to be displayed in the listBox.
value = '<string>'
If an 'item' child element exists with a matching 'value' attribute, that item is considered to be selected. The 'data' attribute is automatically set to match the 'data' attribute of that 'item' element, overriding the existing 'data' attribute, if provided. When an item is selected, this attribute is automatically updated to match the value of the selected item's 'value' attribute. If this attribute is modified, the item with a matching 'value' attribute is selected.
data = '<string>'
If an 'item' child element exists with a matching 'data' attribute, and the listView element's 'value' attribute is not provided, that item is considered to be selected. The 'value' attribute is automatically set to match the 'value' attribute of that 'item' element. When an item is selected, this attribute is automatically updated to match the value of the selected item's 'data' attribute. If this attribute is modified, the item with a matching 'data' attribute is selected.
sort = "(ascending | descending | none)"
The type of sorting to be done on the items in the list.
If the 'sort' attribute is not specified, the default is 'none'.

Skin template:

<?xml version="1.0"?>
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG">
<g id="">
<g id="skinContextMenu_top" display="all">
</g>
<g id="skinContextMenu_middle" display="all">
</g>
<g id="skinContextMenu_middle_hover" display="none">
</g>
<g id="skinContextMenu_middle_selected" display="none">
</g>
<g id="skinContextMenu_bottom" display="all"> </g> </g> </svg>

Example 105_listBox shows a listBox with three items, with no associated behaviors.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="450px" width="744px" onload="init(evt)" viewBox="0 0 744 450">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/listbox.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/contextMenu.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/scrollbar.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/slider.js"/><!-- Adding Template -->
	<g id="template">
		<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="rect_Title"/>
		<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id= "TITLE">dSVG sample: ListBox
		element</text>
		<line y2="350" x2="744" y1="350" opacity="1.0" stroke-width="2" stroke="#5F86B1" fill="#5F86B1" id="bottomLine"/>
		<text y="370" x="20" font-size="12" id="defaut_ex">Default list box - This list box has 3 child item elements: Apple, Banana, Grapes.
		</text>
		<text y="395" x="20" font-size="12" id="fixed_ex">Fixed-size list box - This list box displays a maximum of 4 items. If the number of items exceeds 4, a scrollbar is enabled.
		</text>
		<text y="420" x="20" font-size="12" id="large_ex">Small and large list boxes - Change the size of a control by specifying new values for the height and width.
		</text>
		<text y="340" x="20" font-weight="bold" font-size="10" fill="black" id="Note">*Note: The red outlines are not part of the controls. They are used to identify the dimensions for each control.
		</text>
	</g><!-- adding controls -->
	<dsvg:listBox xlink:href="dsvg11/skinListBox_Composite.svg#skinListBox" autoScale="true" height="60" width="198" y="70" x="50" label="Default list box: (default attributes)" id="listbox_default">
		<dsvg:item value="Apple" data="plu_1" id="item_1">
		</dsvg:item>
		<dsvg:item value="Banana" data="plu_2" id="item_2">
		</dsvg:item>
		<dsvg:item value="Grapes" data="plu_3" id="item_3">
		</dsvg:item>
	</dsvg:listBox>
	<rect height="64" width="202" y="68" x="48" opacity="0.5" stroke="red" fill="none" id="rect_default"/>
	<dsvg:listBox xlink:href="dsvg11/skinListBox_Composite.svg#skinListBox" autoScale="true" rows="4" height="60" width="198" y="70" x="350" label="Fixed-size list box: (rows=4)" id="listbox_fixed">
		<dsvg:item value="Apple" data="plu_1" id="item_1">
		</dsvg:item>
		<dsvg:item value="Banana" data="plu_2" id="item_2">
		</dsvg:item>
		<dsvg:item value="Grapes" data="plu_3" id="item_3">
		</dsvg:item>
		<dsvg:item value="Kiwi" data="plu_4" id="item_4">
		</dsvg:item>
		<dsvg:item value="Orange" data="plu_5" id="item_5">
		</dsvg:item>
		<dsvg:item value="Watermelon" data="plu_6" id="item_6">
		</dsvg:item>
		<dsvg:item value="Coconut" data="plu_7" id="item_7">
		</dsvg:item>
		<dsvg:item value="Peach" data="plu_8" id="item_8">
		</dsvg:item>
	</dsvg:listBox>
	<dsvg:listBox selected="true" xlink:href="dsvg11/skinListBox_Composite.svg#skinListBox" autoScale="true" disabled="false" value="val1" rows="4" height="25" width="70" y="170" x="50" label="Small list box: (h=25, w=70)" id="listbox_small">
		<dsvg:item value="Apple" data="plu_1" id="item_1">
		</dsvg:item>
		<dsvg:item value="Banana" data="plu_2" id="item_2">
		</dsvg:item>
		<dsvg:item value="Grapes" data="plu_3" id="item_3">
		</dsvg:item>
	</dsvg:listBox>
	<rect height="29" width="74" y="168" x="48" opacity="0.5" stroke="red" fill="none" id="rect_small"/>
	<dsvg:listBox selected="true" xlink:href="dsvg11/skinListBox_Composite.svg#skinListBox" autoScale="true" disabled="false" height="80" width="300" y="170" x="350" label="Large list box: (h=80, w=300)" id="listbox_large">
		<dsvg:item value="Apple" data="plu_1" id="item_1">
		</dsvg:item>
		<dsvg:item value="Banana" data="plu_2" id="item_2">
		</dsvg:item>
		<dsvg:item value="Grapes" data="plu_3" id="item_3">
		</dsvg:item>
	</dsvg:listBox>
	<rect height="84" width="304" y="168" x="348" opacity="0.5" stroke="red" fill="none" id="rect_large"/>
</svg>

Example 105_listBox
Example 105_listbox - multiple listBoxes of various sizes.

View this example as SVG (SVG-enabled browsers only)  


3.10 The 'listView' element

The 'listView' element defines a multi-column list of selectable items.

<!ENTITY % listViewMenuExt "" >
<!ELEMENT listView (dsvg:state|%behaviors;|dsvg:item)*>
<!ATTLIST listView
  %stdDSVGAttrs;
  %stdUIAttrs;
  rows		%Integer;	#IMPLIED
  cols		%Integer;	#IMPLIED
  colSpace	%Integer;	#IMPLIED
  value		%Text;		#IMPLIED
  data		%Text;		#IMPLIED
  sort		%Text;		#IMPLIED >

Attribute definitions:

rows = "<integer>"
The number of rows to be displayed in the listBox.
cols = "<integer>"
The number of columns to be displayed in the listBox.
colSpace = "<integer>"
The number of user units to separate each column.
value = '<string>'
If an 'item' child element exists with a matching 'value' attribute, that item is considered to be selected, in which case the 'data' attribute is automatically set to match the 'data' attribute of that 'item' element, overriding the existing 'data' attribute, if provided. When an item is selected, this attribute is automatically updated to match the value of the selected item's 'value' attribute. If this attribute is modified, the item with a matching 'value' attribute is selected.
data = '<string>'
If an 'item' child element exists with a matching 'data' attribute, and the listView element's 'value' attribute is not provided, that item is considered to be selected, in which case the 'value' attribute is automatically set to match the 'value' attribute of that 'item' element. When an item is selected, this attribute is automatically updated to match the value of the selected item's 'data' attribute. If this attribute is modified, the item with a matching 'data' attribute is selected.
sort = '<string>'
If an 'item' child element exists with a matching 'data' attribute, and the listView element's 'value' attribute is not provided, that item is considered to be selected, in which case the 'value' attribute is automatically set to match the 'value' attribute of that 'item' element. When an item is selected, this attribute is automatically updated to match the value of the selected item's 'data' attribute. If this attribute is modified, the item with a matching 'data' attribute is selected.
sort = "(ascending | descending | none)"
The type of sorting to be done on the items in the list.
If the 'sort' attribute is not specified, the default is 'none'.

Skin template:

<?xml version="1.0"?>
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="">
<use id="MenuSkin" xlink:href="" x="" y=""/>
<use id="ScrollSkin" xlink:href="" x="" y=""/>
<g id="label">
<text id= "skinListBox_label" x="" y=""> </text> </g> </g> </svg>

Example 106_listView shows a listView with three rows and 3 columns, with no associated behaviors.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="450px" width="744px" onload="init(evt)" viewBox="0 0 744 450">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/listview.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/scrollbar.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/listbox.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/slider.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/contextMenu.js"/>
	
	<!-- Adding Template -->
	<g id="template">
		<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="rect_Title"/>
		<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="TITLE">dSVG sample: ListView element
		</text>
		<line y2="350" x2="744" y1="350" opacity="1.0" stroke-width="2" stroke="#5F86B1" fill="#5F86B1" id="bottomLine"/>
		<text y="370" x="20" font-size="12" id="defaut_ex">Default list view - This list view has 3 child item elements: Apple, Banana, and Orange.
		</text>
		<text y="395" x="20" font-size="12" id="fixed_ex">Fixed-size list view - This list view displays a maximum of 4 items. If the number of items exceeds 4, a scrollbar is enabled.
		</text>
		<text y="420" x="20" font-size="12" id="large_ex">Small and large list views - Change the size of the control by specifying new values for the height and width attributes.
		</text>
		<text y="340" x="20" font-weight="bold" font-size="10" fill="black" id="Note">*Note: The red outlines are not part of the controls. They are used to identify the dimensions for each control.
		</text>
	</g>
	
	<!-- adding controls -->
	<dsvg:listView selected="false" xlink:href="dsvg11/skinListView_Composite.svg#skinListView" autoScale="true" disabled="false" colSpace="5;50;130" cols="data;value;price" height="60" width="198" y="70" x="50" label="Default list view: (default attributes)" id="default">
		<dsvg:item value="Apple" data="plu_1" id="item_1">
			<dsvg:itemData value="red" name="color"/>
			<dsvg:itemData value="$1.27" name="price"/>
		</dsvg:item>
		<dsvg:item value="Banana" data="plu_2" id="item_2">
			<dsvg:itemData value="yellow" name="color"/>
			<dsvg:itemData value="$0.59" name="price"/>
		</dsvg:item>
		<dsvg:item value="Orange" data="plu_3" id="item_3">
			<dsvg:itemData value="orange" name="color"/>
			<dsvg:itemData value="$1.99" name="price"/>
		</dsvg:item>
	</dsvg:listView>
	<rect height="64" width="202" y="68" x="48" stroke="red" fill="none" id="rect_default"/>
	<dsvg:listView selected="false" xlink:href="dsvg11/skinListView_Composite.svg#skinListView" autoScale="true" disabled="false" colSpace="5;50;130" cols="data;value;price" rows="4" height="60" width="198" y="70" x="270" label="Fixed-size list view: (rows=4)" id="fixed">
		<dsvg:item value="Apple" data="plu_1" id="item_1">
			<dsvg:itemData value="red" name="color"/>
			<dsvg:itemData value="$1.27" name="price"/>
		</dsvg:item>
		<dsvg:item value="Banana" data="plu_2" id="item_2">
			<dsvg:itemData value="yellow" name="color"/>
			<dsvg:itemData value="$0.59" name="price"/>
		</dsvg:item>
		<dsvg:item value="Grapes" data="plu_3" id="item_3">
			<dsvg:itemData value="purple" name="color"/>
			<dsvg:itemData value="$2.19" name="price"/>
		</dsvg:item>
		<dsvg:item value="Kiwi" data="plu_4" id="item_4">
			<dsvg:itemData value="brown" name="color"/>
			<dsvg:itemData value="$0.89" name="price"/>
		</dsvg:item>
		<dsvg:item value="Orange" data="plu_5" id="item_5">
			<dsvg:itemData value="orange" name="color"/>
			<dsvg:itemData value="$1.99" name="price"/>
		</dsvg:item>
		<dsvg:item value="Watermelon" data="plu_6" id="item_6">
			<dsvg:itemData value="green" name="color"/>
			<dsvg:itemData value="$2.39" name="price"/>
		</dsvg:item>
		<dsvg:item value="Coconut" data="plu_7" id="item_7">
			<dsvg:itemData value="brown" name="color"/>
			<dsvg:itemData value="$3.99" name="price"/>
		</dsvg:item>
		<dsvg:item value="Peach" data="plu_8" id="item_8">
			<dsvg:itemData value="peach" name="color"/>
			<dsvg:itemData value="$2.39" name="price"/>
		</dsvg:item>
		<dsvg:item value="Mango" data="plu_9" id="item_9">
			<dsvg:itemData value="dark red" name="color"/>
			<dsvg:itemData value="$2.09" name="price"/>
		</dsvg:item>
	</dsvg:listView>
	<dsvg:listView selected="false" xlink:href="dsvg11/skinListView_Composite.svg#skinListView" autoScale="true" disabled="false" colSpace="5;50;130" cols="data;value;color" height="25" width="100" y="170" x="50" label="Small list view: (h=25, w=100)" id="listview_small">
		<dsvg:item value="Grapes" data="plu_1" id="item_1">
			<dsvg:itemData value="purple" name="color"/>
			<dsvg:itemData value="2.19" name="price"/>
		</dsvg:item>
		<dsvg:item value="Kiwi" data="plu_2" id="item_2">
			<dsvg:itemData value="brown" name="color"/>
			<dsvg:itemData value="0.89" name="price"/>
		</dsvg:item>
		<dsvg:item value="Strawberries" data="plu_3" id="item_3">
			<dsvg:itemData value="purple" name="color"/>
			<dsvg:itemData value="1.99" name="price"/>
		</dsvg:item>
	</dsvg:listView>
	<rect height="29" width="104" y="168" x="48" stroke="red" fill="none" id="rect_small"/>
	<dsvg:listView selected="false" xlink:href="dsvg11/skinListView_Composite.svg#skinListView" autoScale="true" disabled="false" colSpace="5;50;100;140" cols="data;value;color;price" height="100" width="440" y="170" x="270" label="Large 4 column list view; (h=100, w=440)" id="listview_large">
		<dsvg:item value="Apple" data="plu_1" id="item_1">
			<dsvg:itemData value="red" name="color"/>
			<dsvg:itemData value="$1.27" name="price"/>
		</dsvg:item>
		<dsvg:item value="Banana" data="plu_2" id="item_2">
			<dsvg:itemData value="yellow" name="color"/>
			<dsvg:itemData value="$0.59" name="price"/>
		</dsvg:item>
		<dsvg:item value="Grapes" data="plu_3" id="item_3">
			<dsvg:itemData value="purple" name="color"/>
			<dsvg:itemData value="$2.19" name="price"/>
		</dsvg:item>
	</dsvg:listView>
	<rect height="104" width="444" y="168" x="268" stroke="red" fill="none" id="rect_large"/>
</svg>

Example 106_listView
Example 106_listview - multiple listView controls of various sizes.

View this example as SVG (SVG-enabled browsers only)  


3.11 The 'radioButton' element

The 'radioButton' element defines a sticky/toggle button, belonging to a group of other radioButtons, that can be clicked to trigger an action. Only one radioButton per group can be selected. Selecting a radioButton that is already selected does nothing. Selecting a deselected radioButton automatically deselects the currently selected radioButton in the group.

<!ENTITY % radioButtonExt "" >
<!ELEMENT dsvg:radioButton (dsvg:state|%behaviors;)* >
<!ATTLIST dsvg:radioButton
  %stdDSVGAttrs;
  %stdUIAttrs;
  selected	%Boolean;	#IMPLIED >

Attribute definitions:

selected = "(true | false)"
Specifies the initial state of the radioButton as being checked (true) or unchecked (false). This attribute is automatically updated to reflect the current state of the control whenever the user clicks on the radioButton, so that its state can be referenced externally. If this attribute is modified, the control's state is updated to match.
If the attribute is not specified, the default is 'false'.

Skin template:

<?xml version="1.0"?>
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g id="">
		<g id="label">
			<text x="" y=""> </text>
		</g>
		<g id="up" display="all"/>
		<g id="down" display="none"/>
		<g id="hover" display="none"/>
		<g id="focus" display="none"/>
<g id="disabled" display="none"/> </g> </svg>

Example 107_radiobutton shows two radioButtons belonging to the same group.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="450px" width="744px" onload="init(evt)" viewBox="0 0 744 450">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	
	<!-- Adding Template -->
	
	<g id="template">
		<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="rect_Title"/>
		<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="TITLE">dSVG sample: SpinBox element
		</text>
		<line y2="350" x2="744" y1="350" opacity="1.0" stroke-width="2" stroke="#5F86B1" fill="#5F86B1" id="bottomLine"/>
		<text y="370" x="20" font-size="12" id="defaut_ex">Default, grouped radio buttons - Default radio buttons 1 and 2 belong to the same group.
		</text>
		<text y="395" x="20" font-size="12" id="small_ex">Small and large radio buttons - Change the size of a control by specifying new values for the height and width attributes.
		</text>
		<text y="420" x="20" font-size="12" id="large_ex">The default, small, and large radio buttons all belong to their own group. By default the group attribute is set to default.
		</text>
		<text y="340" x="20" font-weight="bold" font-size="10" fill="black" id="Note">*Note: The red outlines are not part of the controls. They are used to identify the dimensions for each control.
		</text>
	</g>
	
	<!-- adding controls -->
	
	<dsvg:radioButton xlink:href="dsvg11/skinRadioButton_Default.svg#skinRadioButton" autoScale="true" group="default" height="14" width="14" y="70" x="50" label="Default radio button 1: (default attributes)" id="default1"/>
	<rect height="18" width="18" y="68" x="48" stroke="red" fill="none" id="rect_default"/>
	<dsvg:radioButton xlink:href="dsvg11/skinRadioButton_Default.svg#skinRadioButton" autoScale="true" group="default" height="14" width="14" y="90" x="50" label="Default radio button 2: (default attributes)" id="default_2"/>
	<dsvg:radioButton xlink:href="dsvg11/skinRadioButton_Default.svg#skinRadioButton" autoScale="true" group="smallGroup" height="10" width="10" y="150" x="50" label="Small radio button: (h=10, w=10, group=smallGroup)" id="dsvgUniqueID_2"/>
	<rect height="14" width="14" y="148" x="48" stroke="red" fill="none" id="rect_small"/>
	<dsvg:radioButton xlink:href="dsvg11/skinRadioButton_Default.svg#skinRadioButton" autoScale="true" group="largeGroup" height="25" width="25" y="230" x="50" label="Large radio button: (h=25, w=25, group=largeGroup)" id="dsvgUniqueID_3"/>
	<rect height="29" width="29" y="228" x="48" stroke="red" fill="none" id="rect_large"/>
</svg>

Example 107_radioButton
Example 107_radiobutton - multiple radioButtons of various sizes

View this example as SVG (SVG-enabled browsers only)  

3.12 The 'slider' element

The 'slider' element defines a slider control, used to to select a value from a range of allowed values by dragging its 'thumb' along its track.

<!ENTITY % sliderExt "" >
<!ELEMENT dsvg:slider (dsvg:state|%behaviors;)* >
<!ATTLIST dsvg:slider
  %stdDSVGAttrs;
  %stdUIAttrs;
  min			%Number;	#IMPLIED
  max			%Number;	#IMPLIED
  value			%Number;	#IMPLIED
  increment		%Number;	#IMPLIED
  pageIncrement		%Number;	#IMPLIED
  ticksMajor		%Number;	#IMPLIED
  ticksMinor		%Number;	#IMPLIED
  continuousCallback	%Boolean;	'false' >

Attribute definitions:

min = "<number>"
The minimum value of the slider.
max = "<number>"
The maximum value of the slider.
value = '<string>'
The initial value of the slider. As the thumb is dragged, this attribute is automatically updated to match. If this attribute is modified, the displayed value is updated to match.
increment = "<number>"
The allowed values that the slider can create, i.e. only 'min' + multiples of 'increment' are allowed.
pageIncrement = "<number>"
The amount that the thumb should move, in whatever units the slider represents (i.e. not in pixels), when clicking to the left or right of it. If defined as zero, or not defined at all, the thumb will snap to wherever the user clicks.
ticksMajor = "<number>"
The interval at which major tick marks (whose appearance is defined in the skin) are displayed, in whatever units the slider represents.
ticksMinor = "<number>"
The interval at which minor tick marks (whose appearance is defined in the skin) are displayed, in whatever units the slider represents.
rotate = "<number>"
The rotation angle of the slider, in degrees clockwise. When provided, the the slider will rotate but the label will remain unchanged and the tick mark labels will move appropriately but will remain unrotated. The top-left corner of the bounding box of the rotated slider, not including the label and tick mark labels, will be positioned at the specified (x, y) coordinates.
If the attribute is not specified, the default is 0.
continuousCallback = "(true | false)"
Specifies whether the slider's associated behaviors should be executed whenever the thumb has been dragged (true) or whenever the thumb has been dragged and released (i.e. the user has let go of the mouse button).

Skin template:

<?xml version="1.0"?>
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG">
	<g id="">
		<g id="label">
			<text x="" y=""> </text>
		</g>
		<g id="up" display="none">
			<g id="body">
				<rect id="skinSliderBar" x="" y="" width="" height=""/>
			</g>
			<g id="skinSliderThumb"/>
			<g id="tickMajor" display="none">
				<text id="tickLabelMajor" x="" y="" xml:space="preserve"> </text>
			</g>
			<g id="tickMinor" display="none">
				<text id="tickLabelMinor" x="" y="" xml:space="preserve"> </text>
			</g>
		</g>
		<g id="down" display="none">
			...same as for 'up' state...
</g> <g id="hover" display="none"> ...same as for 'up' state... </g> <g id="focus" display="none"> ...same as for 'up' state... </g> <g id= "disabled" display="none"> ...same as for 'up' state... </g> <g id="mask"> <rect id="skinSliderMask" x="" y="" width="" height="" pointer-events="fill"/> </g> </g> </svg>

Example 108_slider shows several sliders of various sizes and rotations.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="450px" width="744px" onload="init(evt)" viewBox="0 0 744 450">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/slider.js"/>
	
	<!-- Adding Template -->
	<g id="template">
		<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="rect_Title"/>
		<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="TITLE">dSVG sample:Slider element
		</text>
		<line y2="350" x2="744" y1="350" opacity="1.0" stroke-width="2" stroke="#5F86B1" fill="#5F86B1" id="bottomLine"/>
		<text y="370" x="20" font-size="12" id="defaut_ex">Default slider - Represents the default set of attributes.
		</text>
		<text y="395" x="20" font-size="12" id="small_ex">Small and large sliders - Change the size of the control by specifying new values for the height and width attributes.
		</text>
		<text y="420" x="20" font-size="12" id="large_ex">Rotated sliders - The rotate attribute is set the number of degrees specifed in the label.
		</text>
		<text y="340" x="20" font-weight="bold" font-size="10" fill="black" id="Note">*Note: The red outlines are not part of the controls. They are used to identify the dimensions for each control.
		</text>
	</g>
	
	<!-- adding controls -->
	
	<dsvg:slider selected="false" continuousCallback="true" xlink:href="dsvg11/skinSlider_Default.svg#skinSlider" autoScale="true" disabled="false" ticksMinor="5" ticksMajor="25" rotate="0" pageIncrement="0" increment="5" value="50" max="100" min="0" height="19" width="200.5" y="70" x="20" label="Default slider: (default attributes)" id="default"/>
	<dsvg:slider selected="false" continuousCallback="true" xlink:href="dsvg11/skinSlider_Default.svg#skinSlider" autoScale="true" disabled="false" ticksMinor="0.05" ticksMajor="0.25" rotate="0" pageIncrement="0" increment="0.05" value="0.5" max="1" min="0" height="30" width="100" y="135" x="20" label="Small slider: (h=30, w=100)" id="small"/>
	<rect height="30" width="100" y="135" x="20" stroke="red" fill="none" id="small1"/>
	<dsvg:slider selected="false" continuousCallback="true" xlink:href="dsvg11/skinSlider_Default.svg#skinSlider" autoScale="true" disabled="false" ticksMinor="0.05" ticksMajor="0.25" rotate="0" pageIncrement="0" increment="0.05" value="0.5" max="1" min="0" height="70" width="300" y="225" x="20" label="Large slider: (h=30, w=300)" id="large"/>
	<rect height="70" width="300" y="225" x="20" stroke="red" fill="none" id="large1"/>
	<dsvg:slider selected="false" continuousCallback="true" xlink:href="dsvg11/skinSlider_Default.svg#skinSlider" autoScale="true" disabled="false" ticksMinor="0.05" ticksMajor="0.25" rotate="0" pageIncrement="0" increment="0.05" value="0.5" max="1" min="0" height="30" width="200" y="70" x="350" label="rotate=0, h=30, w=200" id="rotated0"/>
	<rect height="30" width="200" y="70" x="350" stroke="red" fill="none" id="rotated_a"/>
	<dsvg:slider selected="false" continuousCallback="true" xlink:href="dsvg11/skinSlider_Default.svg#skinSlider" autoScale="true" disabled="false" ticksMinor="0.05" ticksMajor="0.25" rotate="15" pageIncrement="0" increment="0.05" value="0.5" max="1" min="0" height="30" width="200" y="225" x="350" label="rotate=15, h=30, w=200" id="rotated15"/>
	<rect height="30" width="200" y="228" x="354" transform="rotate(15 365 240)" stroke="red" fill="none" id="rotated"/>
	<rect height="81" width="201" y="225" x="350" stroke="red" fill="none" id="rotated_b"/>
	<dsvg:slider selected="false" continuousCallback="true" xlink:href="dsvg11/skinSlider_Default.svg#skinSlider" autoScale="true" disabled="false" ticksMinor="0.05" ticksMajor="0.25" rotate="180" pageIncrement="0" increment="0.05" value="0.5" max="1" min="0" height="30" width="200" y="150" x="350" id="rotated180"/>
	<rect height="30" width="200" y="150" x="350" stroke="red" fill="none" id="rotated_c"/>
	<dsvg:slider selected="false" continuousCallback="true" xlink:href="dsvg11/skinSlider_Default.svg#skinSlider" autoScale="true" disabled="false" ticksMinor="0.05" ticksMajor="0.25" rotate="90" pageIncrement="0" increment="0.05" value="0.5" max="1" min="0" height="30" width="235" y="70" x="595" label="rotate=90" id="rotated90"/>
	<rect height="235" width="30" y="70" x="595" stroke="red" fill="none" id="rotated_d"/>
	<dsvg:slider selected="false" continuousCallback="true" xlink:href="dsvg11/skinSlider_Default.svg#skinSlider" autoScale="true" disabled="false" ticksMinor="0.05" ticksMajor="0.25" rotate="270" pageIncrement="0" increment="0.05" value="0.5" max="1" min="0" height="30" width="235" y="70" x="675" label="rotate=270" id="rotated270"/>
	<rect height="235" width="30" y="70" x="675" stroke="red" fill="none" id="rotated_e"/>
	<text y="130" x="350" id="text_180">rotate=180, h=30, w=200
	</text>
</svg>

Example 108_slider
Example 108_slider - sliders of various sizes and rotation

View this example as SVG (SVG-enabled browsers only)  

3.13 The 'spinBox' element

The 'spinBox' element defines a spinBox control, used to select a value from a range of allowed values by pressing the 'up' or 'down' buttons, or by entering numbers directly in its textBox component.

<!ENTITY % spinBoxExt "" >
<!ELEMENT dsvg:spinBox (dsvg:state|%behaviors;)* >
<!ATTLIST dsvg:spinBox
  %stdDSVGAttrs;
  %stdUIAttrs;
  min			%Integer;	#IMPLIED
  max			%Integer;	#IMPLIED
  value			%Integer;	#IMPLIED
  increment		%Integer;	#IMPLIED >

Attribute definitions:

min = "<integer>"
The minimum value of the spinBox.
max = "<integer>"
The maximum value of the spinBox.
value = '<string>'
The initial value of the spinBox. As the displayed value is changed via the buttons or textBox, this attribute is automatically updated to match. If this attribute is modified, the displayed value is updated to match.
increment = "<integer>"
The allowed values that the spinBox can create, i.e. only 'min' + multiples of 'increment' are allowed.

Skin template:

 <?xml version="1.0"?>
			<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG"
		xmlns:xlink=
		"http://www.w3.org/1999/xlink"> <g id=""> <use
			id="TextBoxSkin" xlink:href="" x="" y=""/> <use
			id="ButtonSkinUp" xlink:href="" x="" y=""/>
			<use id="ButtonSkinDown" xlink:href="" x=""
			y=""/> <g id="label"> <text
			x="0" y="-6"> </text>
		</g>
	</g>
</svg>

Example 109_spinBox shows several spinBoxes of various sizes and rotations, without associated behaviors.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="450px" width="744px" onload="init(evt)" viewBox="0 0 744 450">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/spinBox.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/textbox.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	
	<!-- Adding Template -->
	
	<g id="template">
		<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="rect_Title"/>
		<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="TITLE">dSVG sample: SpinBox element
		</text>
		<line y2="350" x2="744" y1="350" opacity="1.0" stroke-width="2" stroke="#5F86B1" fill="#5F86B1" id="bottomLine"/>
		<text y="370" x="20" font-size="12" id="defaut_ex">Default spin box - This spin box has values of 1 to 10 in increments of 1. The initial value is 1.
		</text>
		<text y="395" x="20" font-size="12" id="small_ex">Small and large spin boxes - Change the size of the control by specifying new values for the height and width attributes.
		</text>
		<text y="340" x="20" font-weight="bold" font-size="10" fill="black" id="Note">*Note: The red outlines are not part of the controls. They are used to identify the dimensions for each control.
		</text>
	</g>
	
	<!-- adding controls -->
	
	<dsvg:spinBox xlink:href="dsvg11/skinSpinBox_Composite.svg#skinSpinBox" autoScale="true" increment="1" value="1" max="10" min="0" height="18" width="118" y="70" x="50" label="Default spin box: (default attributes)" id="default_spin"/>
	<rect height="22" width="122" y="68" x="48" stroke="red" fill="none" id="default_rect"/>
	<dsvg:spinBox xlink:href="dsvg11/skinSpinBox_Composite.svg#skinSpinBox" autoScale="true" increment="1" value="-5" max="0" min="-10" height="15" width="40" y="150" x="50" label="Small spin box: (h=15, w=40, min= -10, max=0, value= -5, increment=1)" id="small_spin"/>
	<rect height="19" width="44" y="148" x="48" stroke="red" fill="none" id="small_rect"/>
	<dsvg:spinBox xlink:href="dsvg11/skinSpinBox_Composite.svg#skinSpinBox" autoScale="true" increment="10" value="0" max="100" min="-100" height="36" width="236" y="230" x="50" label="Large spin box: (h=36, w=236, min= -100, max= 100, value=0, increment=10)" id="large_spin"/>
	<rect height="40" width="240" y="228" x="48" stroke="red" fill="none" id="large_rect"/>
</svg>

Example 109_spinBox
Example 109_spinBox - spinBoxes of various sizes

View this example as SVG (SVG-enabled browsers only)  

3.14 The 'state' element

The 'state' element defines an alternate skin to be available for the parent UI control to use to override the appearance of any of its states. It must be a child of a UI control element.

<!ENTITY % stateExt "" >
<!ELEMENT dsvg:state EMPTY >
<!ATTLIST dsvg:state
  id		ID	#IMPLIED
  xmlns:xlink	CDATA	#FIXED 'http://www.w3.org/1999/xlink'
  xlink:href	%URI;	#IMPLIED
  type		%State;	#IMPLIED >

Attribute definitions:

id = "name"
Standard XML attribute for assigning a unique name to an element. Refer to the "Extensible Markup Language (XML) 1.0" Recommendation [XML10].
xlink:href = "<uri>"
A reference to the skin's parent element, stored either internally in the <defs> block, or in an external file.
If the attribute is not specified, the UI control's skin is not overridden.
state = "(up | down | hover | focus | disabled)"
The state whose appearance the referenced skin will be used to override.

Example 012_state shows 12 regular buttons used to override the appearance of the custom button.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG" xmlns:xlink="http://www.w3.org/1999/xlink" height="450px" width="780px" onload="init(evt)" viewBox="0 0 780 450">
	<script type="text/ecmascript" xlink:href="dsvg/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg/button.js"/>
	<script type="text/ecmascript" xlink:href="dsvg/setAttribute.js"/>
	<script type="text/ecmascript" xlink:href="dsvg/alert.js"/>
	
	<!-- adding template -->
	<g id="template">
		<rect height="40" width="780" y="0" x="0" fill="#5f86B1" id="rect_Title"/>
		<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="TITLE">dSVG sample: State element</text>
		<line y2="350" x2="744" y1="350" opacity="1.0" stroke-width="2" stroke="#5F86B1" fill="#5F86B1" id="bottomLine"/> 
		<text y="365" x="20" font-size="12" id="content">The state element defines an alternate skin to be available for the parent UI control.</text>  
		<text y="380" x="20" font-size="12" id="expected"> This sample uses state to override the appearance of the custom button in the top left corner of the slide. </text>  
		<text y="395" x="20" font-size="12" id="depend">Pressing a query button returns the current state value to an alert.</text>
	</g>

	<!-- adding controls -->
	<defs>
		<g id="skinButton">   
			<g id="label">
				<text y="12" x="9" font-weight="normal" font-size="10" font-family="Verdana" fill="#000000"> </text>
			</g>
			<g id="up">
				<rect height="50" width="100" stroke-width="2" stroke="darkblue" fill="blue"/>
			</g>
			<g id="down">
				<rect height="50" width="100" stroke-width="15" stroke="darkblue" fill="blue"/>
			</g>
			<g id="hover">
				<rect height="50" width="100" stroke-width="7" stroke="darkblue" fill="blue"/>
			</g>
			<g id="focus">
				<rect height="50" width="100" stroke-width="0" stroke="darkblue" fill="blue"/>
			</g>
			<g style="opacity:0.5" id="disabled">
				<rect height="50" width="100" stroke-width="5" stroke="darkgrey" fill="grey"/>
			</g>
		</g>
		<g id="supgreen">
			<rect height="50" width="100" stroke-width="2" stroke="darkgreen" fill="green"/>
		</g>
		<g id="supred">
			<rect height="50" width="100" stroke-width="2" stroke="darkred" fill="red"/>
		</g>
		<g id="sdowngreen">
			<rect height="50" width="100" stroke-width="15" stroke="darkgreen" fill="green"/>
		</g>
		<g id="sdownred">
			<rect height="50" width="100" stroke-width="15" stroke="darkred" fill="red"/>
		</g>
		<g id="shovergreen">
			<rect height="50" width="100" stroke-width="7" stroke="darkgreen" fill="green"/>
		</g>
		<g id="shoverred">
			<rect height="50" width="100" stroke-width="7" stroke="darkred" fill="red"/>
		</g>
		<g id="sfocusgreen">
			<rect height="50" width="100" stroke-width="0" stroke="darkgreen" fill="green"/>
		</g>
		<g id="sfocusred">
			<rect height="50" width="100" stroke-width="0" stroke="darkred" fill="red"/>
		</g>
		<g id="skinButton2">   
			<g id="label2">
				<text y="12" x="9" font-weight="normal" font-size="10" font-family="Verdana" fill="#000000"> </text>
			</g>
			<g id="up2">
				<path d="M56 18l-52 0 0 -15 52 0 0 15z" fill="#CCCCCC"/>
				<path d="M54 15l-53 0 0 -15 53 0 0 15z" stroke="#0083C4" fill="#FFFFFF"/>
			</g>
			<g id="down2">
				<path d="M56 18l-52 0 0 -15 52 0 0 15z" fill="#CCCCCC"/>
				<path d="M54 15l-53 0 0 -15 53 0 0 15z" stroke-width="2" stroke="#0083C4" fill="#EDAF0D"/>
			</g>
			<g id="hover2">
				<path d="M56 18l-52 0 0 -15 52 0 0 15z" fill="#CCCCCC"/>
				<path d="M54 15l-53 0 0 -15 53 0 0 15z" stroke-width="2" stroke="#0083C4" fill="#FFFFFF"/>
			</g>
			<g style="opacity:0.5" id="disabled2">
				<path d="M56 18l-52 0 0 -15 52 0 0 15z" fill="#CCCCCC"/>
				<path d="M54 15l-53 0 0 -15 53 0 0 15z" stroke="#CCCCCC" fill="#FFFFFF"/>
			</g>
		</g>
	</defs>
	<dsvg:button xlink:href="#skinButton" autoScale="true" toggle="false" y="50" x="50" label="state" id="but1">
		<dsvg:state xlink:href="#sdowngreen" type="down" id="downgreen"/>
		<dsvg:state xlink:href="#sdownred" type="down" id="downred"/>
		<dsvg:state xlink:href="#supgreen" type="up" id="upgreen"/>
		<dsvg:state xlink:href="#supred" type="up" id="upred"/>
		<dsvg:state xlink:href="#shovergreen" type="hover" id="hovergreen"/>
		<dsvg:state xlink:href="#shoverred" type="hover" id="hoverred"/>
		<dsvg:state xlink:href="#sfocusgreen" type="focus" id="focusgreen"/>
		<dsvg:state xlink:href="#sfocusred" type="focus" id="focusred"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_windows.svg#skinButton" autoScale="true" height="18" width="100" y="50" x="250" label="down green">
		<dsvg:setAttribute value="downgreen" attribute="state_down" elementID="but1"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_windows.svg#skinButton" autoScale="true" height="18" width="100" y="80" x="250" label="down red">
		<dsvg:setAttribute value="downred" attribute="state_down" elementID="but1"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_windows.svg#skinButton" autoScale="true" height="18" width="100" y="110" x="250" label="down query">
		<dsvg:alert message="%but1@state_down%"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_windows.svg#skinButton" autoScale="true" height="18" width="100" y="50" x="375" label="up green">
		<dsvg:setAttribute value="upgreen" attribute="state_up" elementID="but1"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_windows.svg#skinButton" autoScale="true" height="18" width="100" y="80" x="375" label="up red">
		<dsvg:setAttribute value="upred" attribute="state_up" elementID="but1"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_windows.svg#skinButton" autoScale="true" height="18" width="100" y="110" x="375" label="up query">
		<dsvg:alert message="%but1@state_up%"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_windows.svg#skinButton" autoScale="true" height="18" width="100" y="50" x="500" label="hover green">
		<dsvg:setAttribute value="hovergreen" attribute="state_hover" elementID="but1"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_windows.svg#skinButton" autoScale="true" height="18" width="100" y="80" x="500" label="hover red">
		<dsvg:setAttribute value="hoverred" attribute="state_hover" elementID="but1"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_windows.svg#skinButton" autoScale="true" height="18" width="100" y="110" x="500" label="hover query">
		<dsvg:alert message="%but1@state_hover%"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_windows.svg#skinButton" autoScale="true" height="18" width="100" y="50" x="625" label="focusgreen">
		<dsvg:setAttribute value="focusgreen" attribute="state_focus" elementID="but1"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_windows.svg#skinButton" autoScale="true" height="18" width="100" y="80" x="625" label="focus red">
		<dsvg:setAttribute value="focusred" attribute="state_focus" elementID="but1"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_windows.svg#skinButton" autoScale="true" height="18" width="100" y="110" x="625" label="focus query">
		<dsvg:alert message="%but1@state_focus%"/>
	</dsvg:button>
	<text y="210" x="50">States should have the following shapes, but colored appropriately.</text>
	<text y="230" x="50">Up:</text>
	<text y="230" x="175">Down:</text>
	<text y="230" x="300">Hover:</text>
	<text y="230" x="425">Focus:</text>
	<rect height="50" width="100" y="250" x="50" stroke-width="2" stroke="gray" fill="lightgray"/>        
	<rect height="50" width="100" y="250" x="175" stroke-width="15" stroke="gray" fill="lightgray"/>    
	<rect height="50" width="100" y="250" x="300" stroke-width="7" stroke="gray" fill="lightgray"/>        
	<rect height="50" width="100" y="250" x="425" stroke-width="0" stroke="gray" fill="lightgray"/>    
</svg>

Example 012_state
Example 012_state - overriding the appearance of a button for its various states

View this example as SVG (SVG-enabled browsers only)  

3.15 The 'textBox' element

The 'textBox' element defines a text input field.

<!ENTITY % textBoxExt "" >
<!ELEMENT dsvg:textBox (dsvg:state|%behaviors;)* >
<!ATTLIST dsvg:textBox
  %stdDSVGAttrs;
  %stdUIAttrs;
  lines			%Integer;	#IMPLIED
  maxLines		%Integer;	#IMPLIED
  value			%Integer;	#IMPLIED
  maxLength		%Integer;	#IMPLIED
  editable		%Boolean;	'true'
  wrap			%Boolean;	'false'
  secret		%Boolean;	'false' >

Attribute definitions:

lines = "<integer>"
The number of lines that will be visible in the text area. The available space will be divided up into this many lines for display.
maxLines = "<integer>"
The maximum number of lines the textBox will hold. If greater than 'lines', the textBox will scroll vertically automatically while typing or using manually with the up and down arrow keys.
value = '<string>'
The initial value (i.e. text data) of the textBox. As the displayed content is modified by the user, this attribute is automatically updated to match. If this attribute is modified, the displayed content is updated to match.
maxLength = "<integer>"
The maximum number of characters the textBox will hold. Once this limit is reached, the user will not be able to enter any more characters.
editable = (true | false)
Specifies whether the textBox is editable or not.
If this attribute is not provided, the default value is 'true'.
wrap = (true | false)
Specifies whether the contents of the textBox should automatically wrap or not.
If this attribute is not provided, the default value is 'false'.
secret = (true | false)
Specifies whether each character in the contents of the textBox should be displayed by an asterisk ('*') or not.
 If this attribute is not provided, the default value is 'false'.

Skin template:

<?xml version="1.0"?>
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG">
<g id="skinTextBox">
<g id="up" display="all"/>
<g id="hover" display="none"/>
<g id="down" display="none"/>
<g id="disabled" display="none"/> <g id="label">
<text x="" y=""> </text>
</g>
<clipPath id="skinTextBox_textView"> <rect id="skinTextBox_textArea" x="" y="" width="" height=""/> </clipPath>
<g id="skinTextBox_cursor" display="none"/>
<text clip-path="url(#skinTextBox_textView)" id="skinTextBox_text" xml:space="preserve" x="" y=""></text> <rect id="skinTextBox_mask" x="" y="" width="" height="" display="none"/> </g> </g>
</svg>

Example 110_textBox shows several textBoxes of various sizes, without associated behaviors.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="450px" width="744px" onload="init(evt)" viewBox="0 0 744 450">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/textbox.js"/>
	
	<!-- Adding Template -->
	
	<g id="template">
		<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="rect_Title"/>
		<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="TITLE">dSVG sample: TextBox Element
		</text>
		<line y2="350" x2="744" y1="350" opacity="1.0" stroke-width="2" stroke="#5F86B1" fill="#5F86B1" id="bottomLine"/>
		<text y="370" x="20" font-size="12" id="defaut_ex">Default text box - This text box uses all of the default attribute settings.
		</text>
		<text y="395" x="20" font-size="12" id="small_ex">Small text boxes - This text box has the editable attribute set to false which disables the entry of text into the text box.
		</text>
		<text y="420" x="20" font-size="12" id="large_ex">Large text boxes - Change the size of a control by specifying new values for the height and width attributes.
		</text>
		<text y="340" x="20" font-weight="bold" font-size="10" fill="black" id="Note">*Note: The red outlines are not part of the controls. They are used to identify the dimensions for each control.
		</text>
	</g>
	
	<!-- adding controls -->
	
	<dsvg:textBox xlink:href="dsvg11/skinTextbox_Default.svg#skinTextBox" autoScale="true" height="36" width="228" y="70" x="50" label="Default text box: (default attributes)" id="default_textboxl"/>
	<rect height="40" width="232" y="68" x="48" opacity="0.5" stroke="red" fill="none" id="default_1"/>
	<dsvg:textBox xlink:href="dsvg11/skinTextbox_Default.svg#skinTextBox" autoScale="true" editable="false" value="Read Only!" height="18" width="80" y="150" x="50" label="Small text box: (h=18 w=80, editable=false)" id="small_textbox"/>
	<rect height="22" width="84" y="148" x="48" opacity="0.5" stroke="red" fill="none" id="small1"/>
	<dsvg:textBox xlink:href="dsvg11/skinTextbox_Default.svg#skinTextBox" autoScale="true" lines="3" height="63" width="346" y="230" x="50" label="Large text box: (h=63, w=346, lines=3)" id="large_textbox"/>
	<rect height="67" width="350" y="228" x="48" opacity="0.5" stroke="red" fill="none" id="large_1"/>
</svg>

Example 110_textBox
Example 110_textBox - textBoxes of various sizes

View this example as SVG (SVG-enabled browsers only)  

3.16 The 'window' element

The 'window' element defines a window.

<!ENTITY % windowExt "" >
<!ELEMENT dsvg:window (%UIControls;|%behaviors;|
desc|title|metadata|defs|path|text|rect|circle|ellipse|line|polyline|polygon|
use|image|svg|g|view|switch|a|altGlyphDef|script|style|symbol|marker|clipPath|
mask|linearGradient|radialGradient|pattern|filter|cursor|font|animate|set|
animateMotion|animateColor|animateTransform|color-profile|font-face)* > <!ATTLIST dsvg:window %stdDSVGAttrs; %stdUIAttrs; >

Skin template:

<?xml version="1.0"?>
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG">
	<g id="skinWindow" >
		<use id="skinWindowBase" xlink:href="skinWindow_Default.svg#WindowBase" x="" y=""/> 
		<use id="skinButtonClose" xlink:href="" x="" y=""/> 
		<use id="skinScrollVertical" xlink:href="" x="" y=""/> 
		<use id="skinScrollHorizontal" xlink:href="" x="" y=""/>
	</g>

	<g id="WindowBase">
		<g id="up">
			<rect id="Frame" x="" y="" width="" height=""/>
			<rect id="TitleBar" x="" y="" width="" height=""/>
		</g>
		<clipPath id="viewArea">
			<rect x="" y="" width="" height=""/>
		</clipPath>
		<g id="label">
			<text id="TitleBarText" x="" y="" > </text> 
		</g>
	</g>
</svg>
Example 013_window shows several textBoxes of various sizes, without associated behaviors.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="450px" width="744px" onload="init(evt)" viewBox="0 0 744 450">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/window.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/windowBase.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/scrollbar.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/slider.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/attributeDrag.js"/>
	
	<!-- Adding Template -->
	
	<g id="template">
		<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="rect_Title"/>
		<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="TITLE">dSVG sample: Window element
		</text>
		<line y2="350" x2="744" y1="350" opacity="1.0" stroke-width="2" stroke="#5F86B1" fill="#5F86B1" id="bottomLine"/>
		<text y="370" x="20" font-size="12" id="defaut_ex">The window element defines a top-level container element that can be either modal or modeless, and can be  moveable or not.
		</text>
		<text y="395" x="20" font-size="12" id="small_ex">In this sample, the button element and the text element are added as children of the window.
		</text>
	</g>
	
	<!-- adding controls -->
	
	<dsvg:window xlink:href="dsvg11/skinWindow_Default.svg#skinWindow" autoScale="true" height="200" width="200" y="70" x="50" label="Sample window" id="dsvgUniqueID_0">
		<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="50" x="20" label="Button" id="button_1"/>
		<text y="150" x="20" id="text1">Text within window.
		</text>
	</dsvg:window>
</svg>

Example 013_window
Example 013_window - window containing a button and text

View this example as SVG (SVG-enabled browsers only)