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.
<!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" > |
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:
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>
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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:
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:
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>
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
View this example as SVG (SVG-enabled browsers only)
The 'window' element defines a window.
<!ENTITY % windowExt "" > <!ELEMENT dsvg:window (%UIControls;|%behaviors;| |
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>
![]() |
View this example as SVG (SVG-enabled browsers only)