9 July 2003

7 Miscellaneous Elements


Contents


 

7.1 Introduction

Some dSVG elements are difficult to classify, thus they are described in this section.

Flow control is a huge requirement for building any application. dSVG's 'if' and 'switch' elements are containers that allow behaviors to be executed only when conditional evaluative expressions are met. dSVG's 'loop' element allows behaviors to be executed iteratively (like a 'for' statement in ECMAscript) and/or upon multiple targets (like a 'for-each' statement in ECMAScript). A node list of multiple targets can be obtained from dSVG's 'findElements' element, which allows you to find all elements which match the specified search criteria.

dSVG includes other container elements too, such as 'action', 'focus' and 'share'. The 'action' element is used to group behaviors with common 'event' attribute values. It is also used to indirectly associate its child behaviors to an element, allowing them to be reused. One of the most commonly required features in a Web application is the ability to "select" visual elements in a radio fashion and have the selected element distinguish itself visually from the rest. dSVG's 'focus' element lets elements be selected via any event (e.g. onclick, onmouseover, etc) keeps track of the current and previously selected element, and allows a common group of behaviors to be executed every time the selection changes. The 'share' element can be used to group anything that needs to be reused, such as 'item' elements common to both a contextMenu and a listBox.

Another type of dSVG element could best be described as "passive" behaviors, such as the 'listener', 'mousePosition', 'mapCoords' and 'mapProj' elements. Unlike other behaviors, they are instantiated once and then remain persistent in memory. Thus they should never be placed as children of other elements (other than the 'svg' root element). The 'listener' element simply watches the observer element for a particular event and then forwards it to a handler element (typically an 'action' element). The 'mousePosition' element watches the target element for a particular event and then records the mouse position in its own attributes. The 'mapCoords' element automatically converts coordinates from one space to another whenever its coordinate attributes change. The 'mapProj' element automatically converts coordinates from one projection system (e.g. UTM or LatLong) to another whenever its coordinate attributes change.

7.2 Common Attributes

<!ENTITY % stdBehaviorAttrs
" id ID #IMPLIED event %Text #IMPLIED eventKeyCode %Text #IMPLIED eventKeyID %Text #IMPLIED eventCharCode %Text #IMPLIED eventChar %Text #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].
event = '<string>'
The name of the event that causes the behavior to be executed. This attribute can be set to either the event name or the event attribute name. The allowed values are: click, onclick, mousedown, onmousedown, mouseup, onmouseup, mouseover, onmouseover, mousemove, onmousemove, mouseout, onmouseout, SVGLoad, onload, SVGUnload, onunload, SVGResize, onresize, SVGScroll, onscroll, SVGZoom, onzoom, keydown, onkeydown, keypress, onkeypress, keyup and onkeyup. As well, it can be equal to 'callback', which is a dSVG semantic-level "virtual" event, triggered whenever one interacts with a UI control in such a manner as to cause its associated behaviours to be run. e.g. when a button is clicked or when an item in a listBox is selected.
eventKeyCode = '<string>'
The value of the 'keyCode' event attribute (automatically generated in response to 'keydown' and 'keyup' events) that causes the behavior to be executed. This attribute is only used if the 'event' attribute is set to 'keydown' or 'keyup' (or 'onkeydown' or 'onkeyup') and the actual event is equal to 'keydown' or 'keyup'.
eventKeyID = '<string>'
The key identifier for the 'keyCode' event attribute (automatically generated in response to 'keydown' and 'keyup' events) that causes the behavior to be executed. The keyID is a string representation of the 'keyCode' attribute of the 'keydown' or 'keyup' event that triggered the behavior, e.g. 'Space', 'Enter', 'A', etc. The keyID's resemble, as closely as possible, the key identifiers listed in the W3C Working Draft of the DOM Level 3 Events Specification. This attribute is only used if the 'event' attribute is set to 'keydown' or 'keyup' (or 'onkeydown' or 'onkeyup') and the actual event is equal to 'keydown' or 'keyup'. If the 'eventKeyCode' attribute is provided, this attribute is ignored.
eventCharCode = '<string>'
The value of the 'charCode' event attribute (automatically generated in response to the 'keypress' events) that causes the behavior to be executed. This attribute is only used if the 'event' attribute is set to 'keypress' (or 'onkeypress') and the actual event is equal to 'keypress'.
eventChar = '<string>'
The string representation of the 'charCode' event attribute (automatically generated in response to the 'keypress' events) that causes the behavior to be executed, e.g. 'a' or 'A'. This attribute is only used if the 'event' attribute is set to 'keypress' (or 'onkeypress') and the actual event is equal to 'keypress'. If the 'eventCharCode' attribute is provided, this attribute is ignored.

7.3 The 'action' element

The 'action' element is a container used to group dSVG behaviors with common 'event' attribute values together so that the behavior elements do not actually need to specify the 'event' attribute themselves. It is also used to indirectly associate its child behaviors to an element, via the 'listener' element, allowing them to be reused.

<!ENTITY % actionExt "" >
<!ELEMENT dsvg:action	(%Behaviors;) >
<!ATTLIST dsvg:action
  %stdBehaviorAttrs; >

Example 301_action shows a push button and a circle, both with indirectly 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="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410">
	<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/setAttribute.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setData.js"/>
	
	<!-- template -->
	
	<g id="template">
		<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
		<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="text_1">dSVG sample behavior: action and listener
		</text>
		<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:action, dsvg:listener
		</text>
		<text y="380" x="20" font-size="12" id="expected">The dsvg:action element is a container for other dSVG behavior elements.
		</text>
		<text y="395" x="20" font-size="12" id="depend">Actions can be associated indirectly using a listener element, or they can be set up directly as a child of an observing element. 
		</text>
		<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
		<text y="85" x="140" font-size="12" id="text_desc1">1. Sample of an indirect 'action / listener' observed by a UI Control.
		</text>
		<text y="115" x="140" font-size="12" id="text_desc2">2. Sample of a direct 'action' set up as child of the UI Control.
		</text>
		<text y="205" x="140" font-size="12" id="text_desc3">3. Sample of an indirect 'action / listener' observed by a basic SVG element.
		</text>
		<text y="265" x="140" font-size="12" id="text_desc4">4. Sample of a direct 'action' set up as a child of a basic SVG element.
		</text>
		<text y="60" x="20" font-weight="bold" font-size="12" id="text_desc3a">Click the button(s) to execute the behaviors.
		</text>
		<text y="160" x="20" font-weight="bold" font-size="12" id="text_desc4a">Mouseover the SVG shapes to execute the behaviors.
		</text>
		<text y="70" x="627" font-weight="bold" font-size="12" id="target_text">Target circle
		</text>
	</g>
	
	<!-- adding behavior -->
	
	<g id="actions">
		<dsvg:listener handler="actionGreen" observer="circle_1" event="mouseover" id="listenerGreen"/>
		<dsvg:listener handler="actionRed" observer="button_1" event="callback" id="listenerRed"/>
		<dsvg:action id="actionGreen">
			<dsvg:setAttribute value="green" attribute="fill" elementID="circle_2" id="dsvgUniqueID_3"/>
			<dsvg:setData value="# 3" elementID="textNumber" id="dsvgUniqueID_12a"/>
		</dsvg:action>
		<dsvg:action id="actionRed">
			<dsvg:setAttribute value="red" attribute="fill" elementID="circle_2" id="dsvgUniqueID_13"/>
			<dsvg:setData value="# 1" elementID="textNumber" id="dsvgUniqueID_12c"/>
		</dsvg:action>
	</g>
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="70" x="20" label="Fire action" id="button_1"/>
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="100" x="20" label="Fire action" id="button_2">
		<dsvg:action id="actionOrange">
			<dsvg:setAttribute value="orange" attribute="fill" elementID="circle_2" id="dsvgUniqueID_13"/>
			<dsvg:setData value="# 2" elementID="textNumber" id="dsvgUniqueID_12b"/>
		</dsvg:action>
	</dsvg:button>
	<circle r="25" cy="200" cx="75" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="circle_1"/>
	<circle r="50" cy="132" cx="662" stroke-width="5" stroke="black" fill="none" id="circle_2"/>
	<rect height="50" width="50" y="240" x="50" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="rect_1">
		<dsvg:action event="onmouseover" id="actionGold">
			<dsvg:setAttribute value="#5f86B1" attribute="fill" elementID="circle_2" id="dsvgUniqueID_9"/>
			<dsvg:setData value="# 4" elementID="textNumber" id="dsvgUniqueID_12"/>
		</dsvg:action>
	</rect>
	<rect height="150" width="150" y="50" x="584" stroke-width="2" stroke="black" fill="none" id="base_rect"/>
	<text y="145" x="662" text-anchor="middle" font-size="36" fill="white" id="textNumber">#
	</text>
</svg>

Example 301_action (before)
Example 301_action (before) - button and circle with indirectly associated behaviors

Example 301_action (after)
Example 301_action (after) - button and circle with indirectly associated behaviors

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

7.4 The 'alias' element

The 'alias' element acts as a proxy, or representative, for some other value, such as an attribute of an element. An 'alias' element differs from a 'variable' element in that an alias has a 1:1 relationship with its reference, whereas a variable can be an equation made up of multiple references. This 1:1 relationship allows the reference's value to be changed by modifying the 'alias' element. An 'alias' element functions as a 'variable' element when posting with the 'postURL' element, except that 'alias' uses the value of its reference. If a server's response to the 'postURL' behavior contains 'alias' elements, their 'initialValue' attributes will be applied to their references. Thus an 'alias' element is used to bring data back into the document, e.g. for session management.

<!ENTITY % aliasExt "" >
<!ELEMENT dsvg:alias	EMPTY >
<!ATTLIST dsvg:alias
  id		name	#IMPLIED
  name		%Text;	#IMPLIED
  initialValue	%Text;	#IMPLIED
  reference	%Text;	#IMPLIED
  saveState	%Text;	#IMPLIED
  collection	%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].
name = '<string>'
The identifier for the alias, used to access its value via the dSVG expression syntax.
initialValue = '<string>'
The value to be applied to the reference at load time.
reference = '<string>'
A specific attribute of a specific element, denoted using the dSVG expression syntax, e.g. %myComboBox@value%.
saveState = "(session | page | application)"
Indicates the purpose of the 'alias' element. When posting the alias to a server, the values of 'page', 'application' or 'session' are appropriate, & will be stored on the server for durations according to those categories.
collection = '<string>'
An identifier used to group variables for scoping purposes. For example, collection1.myVar is different than collection2.myVar. Also, one can specify the collection name when posting to a server, which will send all variables in that collection.

7.5 The 'constraint' element

The 'constraint' element defines the rules for constraining anything about a target element, such as its attributes, style properties, bounding box and dimensions due to transformations, zoom and pan. The appropriate mutation event listeners are automatically set based on the attributes so that the 'event' attribute is not required.

<!ENTITY % constraintExt "" >
<!ELEMENT dsvg:constraint	EMPTY >
<!ATTLIST dsvg:constraint
  %stdBehaviorAttrs;
  elementID		ID			#IMPLIED
  ancestorID		ID			#IMPLIED
  numAncestors		%Integer;		#IMPLIED
  attributeName		%Text;			#IMPLIED
  propertyName		%Text;			#IMPLIED
  value			%Text;			#IMPLIED
  scaleImmunity		%Boolean;		"false"
  scaleXImmunity	%Boolean;		"false"
  scaleYImmunity	%Boolean;		"false"
  preserveAspectRatio	%PreserveAspectRatio;	"false"
  hAlign		%HAlign;		"none"
  vAlign		%VAlign;		"none"
  width			%Length;		#IMPLIED
  height		%Length;		#IMPLIED
  left			%Coordinate;		#IMPLIED
  right			%Coordinate;		#IMPLIED
  top			%Coordinate;		#IMPLIED
  bottom		%Coordinate;		#IMPLIED >

Attribute definitions:

elementID = "name"
The 'id' attribute of the target element.
If this attribute is not provided, the target element is the parent of the 'constraint' element.
ancestorID = "name"
The 'id' attribute of an ancestor of the target element. Used to calculate the cumulative transform between the ancestor element and the target element . The cumulative transform is the transformation matrix from the user coordinate system on the target element (after application of the 'transform' attribute) to the user coordinate system on the ancestor element (after application of its 'transform' attribute). This cumulative transform will be nullified if the 'scaleImmunity', 'scaleXImmunity' or 'scaleYImmunity' attribute is set to 'true.
If this attribute is not provided, the ancestor element is assumed to be the target element's parent.
numAncestors = "<integer>"
The number of ancestors from the target element. Used instead of the 'ancestorID' attribute to locate the target element's ancestor when its 'id' attribute is not known.
If the 'ancestorID' is provided, this attribute is ignored. If this attribute is not provided, the ancestor element is assumed to be the target element's parent.
attributeName = '<string>'
The name of the attribute to be constrained (e.g. 'stroke-width').
propertyName = '<string>'
The name of the property, within a 'style' attribute, to be constrained (e.g. 'stroke-width').
value = '<string>'
The value that the attribute or style property is to be given. If the constraint specifies scale or zoom immunity, this attribute will be ignored, as it will be calculated automatically to counteract the scale or zoom.
scaleImmunity = "(true | false)"
Specifies that the cumulative transform between the ancestor element and the target element is to be nullified. The cumulative transform is the transformation matrix from the user coordinate system on the target element (after application of the 'transform' attribute) to the user coordinate system on the ancestor element (after application of its 'transform' attribute). If neither the 'attributeName' nor the 'propertyName' is specified, then the cumlative transform will be counteracted with an equal but inverse transform applied to the target element. If either the 'attributeName' or the 'propertyName' is specified, then the corresponding attribute or style property (e.g. 'stroke-width') of the target element will appear to be immune to scaling relative to the specified ancestor element. Essentially, the value of the attribute or style property will be modified so as to compensate for the scale factor of the cumulative transform. For non-uniform scaling, the larger of the two scale factors is compensated for. Note that applying scale immunity to an attribute or style property that is not of type <length> (e.g. 'fill') would not make sense.
scaleXImmunity = "(true | false)"
The same as 'scaleImmunity' except that for non-uniform scaling, the scale factor along the x-axis will be compensated for, instead of the larger of the two scale factors being compensated for.
scaleYImmunity = "(true | false)"
The same as 'scaleImmunity' except that for non-uniform scaling, the scale factor along the y-axis will be compensated for, instead of the larger of the two scale factors being compensated for.
preserveAspectRatio = "(vertical | horizontal | min | max | none)"
Specifies the dimension whose length is to be preserved, thus scaling the target element in the other dimension so as to preserve the original aspect ratio (unaltered by a transformation). If 'vertical', then the object will be scaled along the x-axis. If 'horizontal', then the object will be scaled along the y-axis. If 'min', then the scale factors along both axes will be examined and the greater of the two will be set to be equal to the lesser of the two. If 'max', then the scale factors along both axes will be examined and the lesser of the two will be set to be equal to the greater of the two.
If this attribute is not provided, its default is "none", meaning that the aspect ratio will not be preserved.
hAlign = "(left | middle | right)"
The part of the target element, along the x-axis, that is to have its position preserved after executing the constraint. For example, preserveAspectRatio="vertical" might cause the target element to be scaled along the x-axis, causing its horizontal position to change. Specifying hAlign="right" would cause the right edge of the target element to remain at the same x-coordinate after the constraint is applied.
vAlign = "(top | middle | bottom)"
The part of the target element, along the y-axis, that is to have its position preserved after executing the constraint. For example, preserveAspectRatio="horizontal" might cause the target element to be scaled along the y-axis, causing its horizontal position to change. Specifying vAlign="top" would cause the top edge of the target element to remain at the same y-coordinate after the constraint is applied.
width = "<length>"
The width that the target element must be. For example, if the target element is a 'g' tag (a group) containing many elements, its bounding box is calculated, from which its total width is determined, and an appropriate scale factor is applied along the x-axis to achieve the specified width.
height = "<length>"
The height that the target element must be. For example, if the target element is a 'g' tag (a group) containing many elements, its bounding box is calculated, from which its total height is determined, and an appropriate scale factor is applied along the y-axis to achieve the specified height.
left = "<coordinate>"
The x-coordinate where the left edge of the target element must be. For example, if the target element is a 'g' tag (a group) containing many elements, its bounding box is calculated, from which the x-coordinate of its left edge is determined, and an appropriate translation is applied along the x-axis to achieve the specified position. If the 'right' attribute is also specified, both edges will be set, which will likely also require a scale transformation.
right = "<coordinate>"
The x-coordinate where the right edge of the target element must be. For example, if the target element is a 'g' tag (a group) containing many elements, its bounding box is calculated, from which the x-coordinate of its right edge is determined, and an appropriate translation is applied along the x-axis to achieve the specified position. If the 'left' attribute is also specified, both edges will be set, which will likely also require a scale transformation.
top = "<coordinate>"
The y-coordinate where the top edge of the target element must be. For example, if the target element is a 'g' tag (a group) containing many elements, its bounding box is calculated, from which the y-coordinate of its top edge is determined, and an appropriate translation is applied along the y-axis to achieve the specified position. If the 'bottom' attribute is also specified, both edges will be set, which will likely also require a scale transformation.
bottom = "<coordinate>"
The y-coordinate where the bottom edge of the target element must be. For example, if the target element is a 'g' tag (a group) containing many elements, its bounding box is calculated, from which the y-coordinate of its bottom edge is determined, and an appropriate translation is applied along the y-axis to achieve the specified position. If the 'top' attribute is also specified, both edges will be set, which will likely also require a scale transformation.

7.6 The 'focus' element

The 'focus' element defines a group of elements. Whenever an element, whose 'focusGroup' attribute is equal to the 'id' attribute of a 'focus' element, is clicked, the 'focus' element's child action elements will be executed, its 'elementID' attribute will be updated to reflect the ID of the element with focus, and its 'elementName' attribute will be updated to reflect the type of element with focus (e.g. 'rect', 'circle', etc.). As well, the 'previousID' and 'previousName' attributes are also stored for reference, so that the behaviors can be "undone" for the previously selected element.

<!ENTITY % focusExt "" >
<!ELEMENT dsvg:focus	(%Behaviors;) >
<!ATTLIST dsvg:focus
  %stdBehaviorAttrs;
  elementID	ID	#IMPLIED
  elementName	%Text	#IMPLIED
  previousID	ID	#IMPLIED
  previousName	%Text	#IMPLIED >

Attribute definitions:

elementID = "name"
The 'id' attribute of the element currently with focus.
If this attribute is provided, the element with that ID will have the initial focus and the 'focus' element's child behaviors will be run.
elementName = '<string>'
The name of the element currently with focus. e.g. 'rect', 'circle', etc.
previousID = "name"
The 'id' attribute of the element previously with focus.
previousName = '<string>'
The name of the element previously with focus. e.g. 'rect', 'circle', etc.

Example 307_focus shows circle and text elements in different focus groups, each setting the other.

<?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="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410">
	<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/focus.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setAttribute.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setStyle.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setTransform.js"/>
	
	<!-- template -->
	
	<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
	<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="text_1">dSVG sample behavior: focus - with added attributes focusGroup and focus
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file:  dsvg:focus, dsvg:setTransform, dsvg:setAttribute, dsvg:setStyle, (added attributes dsvg:focus, dsvg:focusGroup)
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:focusGroup attribute adds the ability to store the ID of similar type elements that are assigned to that group. 
	</text>
	<text y="395" x="20" font-size="12" id="depend">Default focus can be given to an element (red circle above) by adding the dsvg:focus attribute to that element.
	</text>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	
	<!-- adding behavior -->
	
	<text y="250" x="20" font-size="12" id="desc">The red, blue, green circles are part of the focusGroup. The orange circle is not.
	</text>
	<text y="150" x="200" font-size="12" id="desc_2">Click on the red, green and blue circles to set focus.
	</text>
	<text y="170" x="200" font-size="12" id="desc_3">Hover over the 'red', 'green' and 'blue' text elements to set focus.
	</text>
	<dsvg:focus elementID="redCircle" event="onclick" id="circleGroup">
		<dsvg:setTransform scale="1.2" vAlign="middle" hAlign="middle" absolute="true" elementID="%circleGroup@elementID%"/>
		<dsvg:setTransform scale="1" vAlign="middle" hAlign="middle" absolute="true" elementID="%circleGroup@previousID%"/>
		<dsvg:setAttribute value="%(circleGroup@elementID)@fill%Text" attribute="elementID" elementID="textGroup"/>
	</dsvg:focus>
	<dsvg:focus event="onmouseover" id="textGroup">
		<dsvg:setStyle value="%(textGroup@elementID)@cdata%" property="fill" elementID="%textGroup@elementID%"/>
		<dsvg:setStyle value="black" property="fill" elementID="%textGroup@previousID%"/>
		<dsvg:setAttribute value="%(textGroup@elementID)@cdata%Circle" attribute="elementID" elementID="circleGroup"/>
	</dsvg:focus>
	<circle dsvg:focus="true" dsvg:focusGroup="circleGroup" r="30" cy="100" cx="50" fill="red" id="redCircle"/>
	<circle dsvg:focusGroup="circleGroup" r="30" cy="200" cx="50" fill="blue" id="blueCircle"/>
	<circle dsvg:focusGroup="circleGroup" r="30" cy="100" cx="150" fill="green" id="greenCircle"/>
	<circle r="30" cy="200" cx="150" fill="orange" id="orangeCircle"/>
	<text dsvg:focus="true" dsvg:focusGroup="textGroup" y="80" x="200" id="redText">red</text>
	<text dsvg:focusGroup="textGroup" y="80" x="250" id="blueText">blue</text>
	<text dsvg:focusGroup="textGroup" y="80" x="300" id="greenText">green</text>
	<text y="80" x="350">orange</text>
</svg>

Example 307_focus (before)
Example 307_focus (before) - circle and text elements in different focus groups, each setting the other.

Example 307_focus (after)
Example 307_focus (after) - circle and text elements in different focus groups, each setting the other.

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

7.7 The 'if' element

The 'if' element defines a simple conditional statement which, if evaluated to true, results in its child behavior elements being executed. Commonly used in conjunction with dSVG expressions for referencing the real-time value of element attributes.

<!ENTITY % ifExt "" >
<!ELEMENT dsvg:if	(%Behaviors;) >
<!ATTLIST dsvg:if
  %stdBehaviorAttrs;
  value1	%Text;		#IMPLIED
  op		%Operator;	#IMPLIED
  value2	%Text;		#IMPLIED >

Attribute definitions:

value1 = '<string>'
The first of two values to be compared.
op = "(equal | notEqual | lessThan | greaterThan | lessThanOrEqual | greaterThanOrEqual)"
The operation to use in comparing the two values.
value2 = '<string>'
The second of two values to be compared.

Example 303_if shows a push button with associated 'if' 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="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410">
	<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"/>
	<script type="text/ecmascript" xlink:href="dsvg11/if.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setData.js"/>
	<!-- template -->
	
	<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
	<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="text_1">dSVG sample behavior: condition - if
	</text>
	<line y2="350" x2="744" y1="350" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:checkBox, dsvg:Button, dsvg:if, dsvg:setData
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:if element executes or renders child elements based on a conditional if statement. (true/false)
	</text>
	
	<!-- adding behavior -->
	
	<dsvg:checkBox xlink:href="dsvg11/skinCheckBox_Default.svg#skinCheckBox" autoScale="true" disabled="false" selected="false" height="12" width="12" y="70" x="50" label="CheckBox" id="checkBox1"/>
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="100.5" x="50.5" label="Check State" id="dsvgUniqueID_1">
		<dsvg:if value2="true" op="equal" value1="%checkBox1@selected%" id="dsvgUniqueID_2">
			<dsvg:setData value="Check box selected state is true." elementID="label1" id="dsvgUniqueID_3"/>
		</dsvg:if>
		<dsvg:if value2="true" op="notEqual" value1="%checkBox1@selected%" id="dsvgUniqueID_4">
			<dsvg:setData value="Check box selected state is false." elementID="label1" id="dsvgUniqueID_5"/>
		</dsvg:if>
	</dsvg:button>
	<text y="150" x="50" fill="#5f86B1" id="label1">Label
	</text>
</svg>

Example 303_if
Example 303_if - button with associated 'if' behavior

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

7.8 The 'listener' element

The 'listener' element listens for the specified event on the observer element and, if found, dispatches the event to the handler behavior element (typically an 'action' element) for processing. This is useful because the behaviors are not directly associated to the observer element, thus allowing them to be reused.

<!ENTITY % listenerExt "" >
<!ELEMENT dsvg:listener	(%Behaviors;) >
<!ATTLIST dsvg:listener
  %stdBehaviorAttrs;
  observer	ID	#IMPLIED
  handler	ID	#IMPLIED >

Example 309_listener shows a push button and a circle, both with indirectly 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="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410">
	<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/setAttribute.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setData.js"/>
	
	<!-- template -->
	
	<g id="template">
		<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
		<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="text_1">dSVG sample behavior: action and listener
		</text>
		<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:action, dsvg:listener
		</text>
		<text y="380" x="20" font-size="12" id="expected">The dsvg:action element is a container for other dSVG behavior elements.
		</text>
		<text y="395" x="20" font-size="12" id="depend">Actions can be associated indirectly using a listener element, or they can be set up directly as a child of an observing element. 
		</text>
		<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
		<text y="85" x="140" font-size="12" id="text_desc1">1. Sample of an indirect 'action / listener' observed by a UI Control.
		</text>
		<text y="115" x="140" font-size="12" id="text_desc2">2. Sample of a direct 'action' set up as child of the UI Control.
		</text>
		<text y="205" x="140" font-size="12" id="text_desc3">3. Sample of an indirect 'action / listener' observed by a basic SVG element.
		</text>
		<text y="265" x="140" font-size="12" id="text_desc4">4. Sample of a direct 'action' set up as a child of a basic SVG element.
		</text>
		<text y="60" x="20" font-weight="bold" font-size="12" id="text_desc3a">Click the button(s) to execute the behaviors.
		</text>
		<text y="160" x="20" font-weight="bold" font-size="12" id="text_desc4a">Mouseover the SVG shapes to execute the behaviors.
		</text>
		<text y="70" x="627" font-weight="bold" font-size="12" id="target_text">Target circle
		</text>
	</g>
	
	<!-- adding behavior -->
	
	<g id="actions">
		<dsvg:listener handler="actionGreen" observer="circle_1" event="mouseover" id="listenerGreen"/>
		<dsvg:listener handler="actionRed" observer="button_1" event="callback" id="listenerRed"/>
		<dsvg:action id="actionGreen">
			<dsvg:setAttribute value="green" attribute="fill" elementID="circle_2" id="dsvgUniqueID_3"/>
			<dsvg:setData value="# 3" elementID="textNumber" id="dsvgUniqueID_12a"/>
		</dsvg:action>
		<dsvg:action id="actionRed">
			<dsvg:setAttribute value="red" attribute="fill" elementID="circle_2" id="dsvgUniqueID_13"/>
			<dsvg:setData value="# 1" elementID="textNumber" id="dsvgUniqueID_12c"/>
		</dsvg:action>
	</g>
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="70" x="20" label="Fire action" id="button_1"/>
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="100" x="20" label="Fire action" id="button_2">
		<dsvg:action id="actionOrange">
			<dsvg:setAttribute value="orange" attribute="fill" elementID="circle_2" id="dsvgUniqueID_13"/>
			<dsvg:setData value="# 2" elementID="textNumber" id="dsvgUniqueID_12b"/>
		</dsvg:action>
	</dsvg:button>
	<circle r="25" cy="200" cx="75" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="circle_1"/>
	<circle r="50" cy="132" cx="662" stroke-width="5" stroke="black" fill="none" id="circle_2"/>
	<rect height="50" width="50" y="240" x="50" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="rect_1">
		<dsvg:action event="onmouseover" id="actionGold">
			<dsvg:setAttribute value="#5f86B1" attribute="fill" elementID="circle_2" id="dsvgUniqueID_9"/>
			<dsvg:setData value="# 4" elementID="textNumber" id="dsvgUniqueID_12"/>
		</dsvg:action>
	</rect>
	<rect height="150" width="150" y="50" x="584" stroke-width="2" stroke="black" fill="none" id="base_rect"/>
	<text y="145" x="662" text-anchor="middle" font-size="36" fill="white" id="textNumber">#
	</text>
</svg>

Example 301_listener (before)
Example 309_listener (before) - button and circle with indirectly associated behaviors

Example 309_listener (after)
Example 309_listener (after) - button and circle with indirectly associated behaviors

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

7.9 The 'loop' element

The 'loop' element allows its child behaviors to be executed iteratively (like a 'for' statement in ECMAscript) and/or upon multiple targets (like a 'for-each' statement in ECMAScript). A node list of multiple targets can be obtained from the 'findElements' element, which allows you to find all elements which match the specified search criteria. Optionally, the actual matching elements can be copied to a documentFragment, which can be used by the 'postURL' element.

<!ENTITY % loopExt "" >
<!ELEMENT dsvg:loop ANY >
<!ATTLIST dsvg:loop
  %stdBehaviorAttrs;
  elementIDs	%Text;		#IMPLIED
  nodeList	%Text;		#IMPLIED
  elementID	ID;		#IMPLIED
  from		%Integer;	#IMPLIED
  to		%Integer;	#IMPLIED
  increment	%Integer;	#IMPLIED
  value		%Integer;	#IMPLIED >

Attribute definitions:

elementIDs = '<string>'
The search string to compare against the 'id' attribute of every element in the DOM (or as a child of a specified parent element). It can contain the wildcard "*" character to denote "any string". Whenever an element is found whose ID matches this search string, the child behaviors will be executed. For example, elementIDs="myCircle*" would match elements with the ID's "myCircle1" and "myCircleRed", whereas elementIDs="*Circle*" would match elements with the ID's "myCircle1" and "hisCircle2".
nodeList = '<string>'
The identifier for the nodelist created by the 'findElements' behavior. All the child behaviors will be run for each node in the nodeList.
elementID = "name"
The 'id' attribute of the current node. Each iteration, the 'elementID' attribute is updated to correspond to the 'id' attribute of the current node. The child behaviors can then reference that current node via the dSVG expression syntax.
This attribute should never be provided by the markup. It is automatically populated for reference purposes.
from = "<integer>"
The first value to loop on.
from = "<integer>"
The last value to loop on.
interval = "<integer>"
The amount to increment with each itertion.
If this attribute is not provided, the default is 1.
value = "<integer>"
The value of the current iteration, between 'from' and 'to'. Each iteration, the 'value' attribute is updated. The child behaviors can then reference that value via the dSVG expression syntax.
This attribute should never be provided by the markup. It is automatically populated for reference purposes.

Example 312_loop shows a push button that invokes the 'loop' behavior, storing the matches in a nodelist, and using the 'loop' element to display the ID's of the nodes via the 'alert' element.

<?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="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410">
	<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/loop.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setAttribute.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setData.js"/>
	
	<!-- template -->
	
	<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
	<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="text_1">dSVG sample behavior: loop
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file: dsvg:loop, dsvg:button, dsvg:setData, dsvg:setAttribute
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:loop element is a sequence of instructions that is continually repeated until a certain condition is reached.
	</text>
	<text y="395" x="20" font-size="12" id="depend"/>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	
	<!-- adding behavior -->
	
	<g id="sizer">
		<rect height="8" width="8" y="100" x="25" fill="gray" id="sizer1"/>
		<rect height="8" width="8" y="100" x="35" fill="gray" id="sizer2"/>
		<rect height="8" width="8" y="100" x="45" fill="gray" id="sizer3"/>
		<rect height="8" width="8" y="100" x="55" fill="gray" id="sizer4"/>
		<rect height="8" width="8" y="100" x="65" fill="gray" id="sizer5"/>
		<rect height="8" width="8" y="100" x="75" fill="gray" id="sizer6"/>
		<rect height="8" width="8" y="100" x="85" fill="gray" id="sizer7"/>
		<rect height="8" width="8" y="100" x="95" fill="gray" id="sizer8"/>
		<rect height="8" width="8" y="100" x="105" fill="gray" id="sizer9"/>
		<rect height="8" width="8" y="100" x="115" fill="gray" id="sizer10"/>
		<rect height="8" width="8" y="100" x="125" fill="gray" id="sizer11"/>
		<rect height="8" width="8" y="100" x="135" fill="gray" id="sizer12"/>
		<rect height="8" width="8" y="100" x="145" fill="gray" id="sizer13"/>
		<rect height="8" width="8" y="100" x="155" fill="gray" id="sizer14"/>
		<rect height="8" width="8" y="100" x="165" fill="gray" id="sizer15"/>
		<rect height="8" width="8" y="100" x="175" fill="gray" id="sizer16"/>
		<rect height="8" width="8" y="100" x="185" fill="gray" id="sizer17"/>
		<rect height="8" width="8" y="100" x="195" fill="gray" id="sizer18"/>
	</g>
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="70" x="220" label="Loop Count" id="loop1">
		<dsvg:loop increment="1" to="18" from="1" id="LOOP1">
			<dsvg:setAttribute value="%LOOP1@value * 10%" attribute="height" elementID="sizer%LOOP1@value%"/>
		</dsvg:loop>
		<dsvg:setData value="%LOOP1@value%" elementID="iteration" id="data"/>
	</dsvg:button>
	<text y="70" x="25" fill="#5f86B1" color="" id="desc"># of times through the loop:
	</text>
	<text y="70" x="180" font-weight="bold" font-size="14" fill="darkblue" id="iteration">0
	</text>
</svg>

Example 312_loop
Example 312_loop - button with associated 'loop' behavior

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

7.10 The 'mapCoords' element

The 'mapCoords' element defines an object used for mapping coordinates in one space to another space, via a polynomial transformation, whose coefficients are determined by the coordinates of the point-pairs given in the child 'pointPair' elements.

<!ENTITY % mapCoordsExt "" >
<!ELEMENT dsvg:mapCoords	(dsvg:pointPair)* >
<!ATTLIST dsvg:mapCoords
  %stdBehaviorAttrs;
  order		%Integer;	#IMPLIED
  inputID	ID		#IMPLIED
  x		%Coordinate;	#IMPLIED
  y		%Coordinate;	#IMPLIED
  u		%Coordinate;	#IMPLIED
  v		%Coordinate;	#IMPLIED
  apply		%Boolean	"false" >

Attribute definitions:

order = "<integer>"
The order of the polynomial transformation. The default is 1, which only requires 2 point-pairs, resulting in an affine (linear) transformation.
inputID = "name"
The 'id' attribute of the element that will automatically feed its coordinates into the 'mapCoords' element's 'x' and 'y' attributes whenever they update. e.g. the ID of a 'mousePosition' element.
x = "<coordinate>"
The x-coordinate of the first coordinate system. Updating this attribute automatically updates the 'u' attribute.
y = "<coordinate>"
The y-coordinate of the first coordinate system. Updating this attribute automatically updates the 'v' attribute.
u = "<coordinate>"
The x-coordinate of the second coordinate system. Updating this attribute automatically updates the 'x' attribute.
v = "<coordinate>"
The y-coordinate of the second coordinate system. Updating this attribute automatically updates the 'y' attribute.
apply = "(true | false)"
Specifies whether the coordinates of the element defined by 'inputID' will be actually modified according to the polynomial transformation defined by the point-pairs (true) or not (false).

Example 313_mapCoords shows two ellipses transformed to another coordinate space.

<?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="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410">
	<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/mapCoords.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setAttribute.js"/>
	
	<!-- template -->
	
	<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
	<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="text_1">dSVG sample behavior: mapCoords
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file:  dsvg:mapCoords, dsvg:pointPair, dsvg:setAttribute
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:mapCoords element defines an object used for mapping from one coordinate space to another.
	</text>
	<text y="395" x="20" font-size="12" id="depend">The resulting coefficients are determined by the coordinates of the point-pairs (child) elements.
	</text>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	
	<!-- adding behavior -->
	
	<g id="fragment">
		<ellipse ry="50" rx="100" cy="115" cx="175" fill="orange" id="fragellipse1"/>
		<ellipse ry="25" rx="50" cy="115" cx="175" fill="blue" id="fragellipse2"/>
	</g>
	<rect height="100" width="200" y="65" x="75" stroke-width="1" stroke="red" fill="none"/>
	<text y="185" x="75" font-size="10" fill="red">Incorrect Location
	</text>
	<rect height="100" width="200" y="165" x="175" stroke-width="1" stroke="green" fill="none"/>
	<text y="285" x="175" font-size="10" fill="green">correct Location
	</text>
	<dsvg:mapCoords apply="true" inputID="fragment" id="mapcoords1">
		<dsvg:pointPair v="100" u="100" y="0" x="0"/>
		<dsvg:pointPair v="110" u="110" y="10" x="10"/>
	</dsvg:mapCoords>
	<dsvg:setAttribute value="true" attribute="convertNow" elementID="mapcoords1" id="dsvgUniqueID_3"/>
</svg>

Example 313_mapCoords
Example 313_mapCoords - ellipse mapped from one space to another.

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

7.10.1 The 'pointPair' element

The 'pointPair' element, which must be a child of the 'mapCoords' element, defines the x-y coordinates for the same location in two different coordinate spaces. The point-pairs are used to calculate the polynomial transformation coefficients.

<!ENTITY % pointPairExt "" >
<!ELEMENT dsvg:pointPair	EMPTY >
<!ATTLIST dsvg:pointPair
  %stdBehaviorAttrs;
  x	%Coordinate;	#IMPLIED
  y	%Coordinate;	#IMPLIED
  u	%Coordinate;	#IMPLIED
  v	%Coordinate;	#IMPLIED >

Attribute definitions:

x = "<coordinate>"
The x-coordinate of the first coordinate system.
y = "<coordinate>"
The y-coordinate of the first coordinate system.
u = "<coordinate>"
The x-coordinate of the second coordinate system.
v = "<coordinate>"
The y-coordinate of the second coordinate system.

7.11 The 'mapProj' element

The 'mapProj' element defines an object used for mapping coordinates in one space to another space, via a polynomial transformation, whose coefficients are determined by the coordinates of the point-pairs given in the child 'pointPair' elements.

<!ENTITY % mapProjExt "" >
<!ELEMENT dsvg:mapProj	EMPTY >
<!ATTLIST dsvg:mapProj
  %stdBehaviorAttrs;
  inputID	ID		#IMPLIED
  inputProj	%Projection	"UTM"
  outputProj	%Projection	"LatLong"
  ellipsoid	%Ellipsoid	"WGS84"
  zone		%Text		#IMPLIED
  x		%Coordinate;	#IMPLIED
  y		%Coordinate;	#IMPLIED
  u		%Coordinate;	#IMPLIED
  v		%Coordinate;	#IMPLIED >

Attribute definitions:

inputID = "name"
The 'id' attribute of the element that will automatically feed its coordinates into the 'mapProj' element's 'x' and 'y' attributes whenever they update. e.g. the ID of a 'mapCoords' element.
inputProj = "(UTM | LatLong)"
The input project system.
If this attribute is not provided, the default is "UTM".
outputProj = "(UTM | LatLong)"
The output project system.
If this attribute is not provided, the default is "LatLong".
ellipsoid = "(Airy | AustralianNational | Bessel1841 | Bessel1841Nambia | Clarke1866 | Clarke1880 | Everest | Fischer1960Mercury | Fischer1968 | GRS1967 | GRS1980 | Helmert1906 | Hough | International | Krassovsky | ModifiedAiry | ModifiedEverest | ModifiedFischer1960 | SouthAmerican1969 | WGS60 | WGS66 | WGS72 | WGS84)"
The ellipsoid of the UTM projection system.
If this attribute is not provided, the default is "WGS84".
zone = '<string>'
The zone of the UTM projection system.
x = "<coordinate>"
The x-coordinate of the first projection system. Updating this attribute automatically updates the 'u' attribute.
y = "<coordinate>"
The y-coordinate of the first projection system. Updating this attribute automatically updates the 'v' attribute.
u = "<coordinate>"
The x-coordinate of the second projection system. Updating this attribute automatically updates the 'x' attribute.
v = "<coordinate>"
The y-coordinate of the second projection system. Updating this attribute automatically updates the 'y' attribute.

Example 314_mapProj shows two ellipses transformed to another coordinate space.

<?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="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410">
	<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/mousePosition.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/mapCoords.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setData.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/mapProj.js"/>
	
	<!-- template -->
	
	<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
	<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="text_1">dSVG sample behavior: mapProj
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file: dsvg:mapProj, dsvg:mapCoords, dsvg:pointPair, dsvg:setData, dsvg:mousePosition
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:mapProj element defines an object used for mapping coordinates from one project system to another.
	</text>
	<text y="395" x="20" font-size="12" id="depend">For example, "latlong" can be mapped to "UTM".
	</text>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	
	<!-- adding behavior -->
	
	<text y="65" x="10" font-weight="bold" id="targetText">Target Image
	</text>
	<image height="371" width="325" y="0" x="50" transform=" translate(50 50) scale(0.75)" xlink:href="314_canutillo.jpg" id="canutillo">
		<dsvg:setData value="%mousePosition@x%, %mousePosition@y%" elementID="textMousePosition" event="onmousemove"/>
		<dsvg:setData value="%pixelsToUTM@u%, %pixelsToUTM@v%" elementID="textUTM" event="onmousemove"/>
		<dsvg:setData value="%UTMToLatLong@latitude% %UTMToLatLong@longitude%" elementID="textLL" event="onmousemove"/>
	</image>
	<dsvg:mousePosition type="relative" elementID="canutillo" event="onmousemove" id="mousePosition"/>
	<dsvg:mapCoords inputID="mousePosition" id="pixelsToUTM">
		<dsvg:pointPair v="3534270" u="346020" y="0" x="0"/>
		<dsvg:pointPair v="3541920" u="352710" y="371" x="325"/>
	</dsvg:mapCoords>
	<dsvg:mapProj zone="13" ellipsoid="WGS84" outputProj="LatLong" inputProj="UTM" inputID="pixelsToUTM" id="UTMToLatLong"/>
	<text y="285" x="360" style="font-weight:normal;font-size:11;font-family:Tahoma;fill:#000000">x,y:
	</text>
	<text y="305" x="360" style="font-weight:normal;font-size:11;font-family:Tahoma;fill:#000000">UTM:
	</text>
	<text y="325" x="360" style="font-weight:normal;font-size:11;font-family:Tahoma;fill:#000000">Lat/Long:
	</text>
	<text y="285" x="420" style="font-weight:normal;font-size:11;font-family:Tahoma;fill:#000000;" id="textMousePosition"> 
	</text>
	<text y="305" x="420" style="font-weight:normal;font-size:11;font-family:Tahoma;fill:#000000;" id="textUTM"> 
	</text>
	<text y="325" x="420" style="font-weight:normal;font-size:11;font-family:Tahoma;fill:#000000;" id="textLL"> 
	</text>
</svg>

Example 314_mapProj
Example 314_mapProj - ellipse mapped from one space to another.

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

7.12 The 'mousePosition' element

The 'mousePosition' element defines a container for holding the current mouse coordinates, relative to the document or to the target element. It is a persistent object in memory that should be instantiated once, and so should not be a child of any element other than the 'svg' root element (or a 'g' element).

<!ENTITY % mousePositionExt "" >
<!ELEMENT dsvg:mousePosition	EMPTY >
<!ATTLIST dsvg:mousePosition
  %stdBehaviorAttrs;
  elementID	ID		#IMPLIED
  x		%Coordinate;	#IMPLIED
  y		%Coordinate;	#IMPLIED
  type		%Type		"relative" >

Attribute definitions:

elementID = "name"
The 'id' attribute of the target element to generate the mouse events.
x = "<coordinate>"
The current x-coordinate of the mouse cursor. Setting this attribute has no effect–-it is purely a storage attribute, intended to be referenced.
y = "<coordinate>"
The current y-coordinate of the mouse cursor. Setting this attribute has no effect–it is purely a storage attribute, intended to be referenced.
type = "(relative | absolute)"
Specifies whether the mouse coordinates are to be relative to the document (absolute) or relative to the target element (relative).

Example 315_mousePosition shows a rectangle with mouse coordinates displayed relative to both the document and the rectangle.

<?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="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410">
	<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/mousePosition.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setData.js"/>
	
	<!-- template -->
	
	<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
	<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="text_1">dSVG sample behavior: mousePosition
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file: dsvg:mousePosition, dsvg:setData
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:mousePosition element defines a container for holding the current mouse coordinates.
	</text>
	<text y="395" x="20" font-size="12" id="depend">The coordinates can be tracked relative to the document or absolute to the parent element.
	</text>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	
	<!-- adding behavior -->
	
	<text y="60" x="50" id="targetText">Target Rectangle
	</text>
	<rect height="200" width="200" y="70" x="50" stroke-width="3" stroke="black" fill="#5f86B1" id="rect1">
		<dsvg:setData value="%mouse_Relative@x%" elementID="relative_xpos" event="onmousemove" id="set_relativeX"/>
		<dsvg:setData value="%mouse_Relative@y%" elementID="relative_ypos" event="onmousemove" id="set_relativeY"/>
		<dsvg:setData value="%mouse_Absolute@x%" elementID="absolute_xpos" event="onmousemove" id="set_absoluteX"/>
		<dsvg:setData value="%mouse_Absolute@y%" elementID="absolute_ypos" event="onmousemove" id="dsvgUniqueID_5"/>
	</rect>
	<dsvg:mousePosition type="relative" elementID="rect1" event="onmousemove" id="mouse_Relative"/>
	<dsvg:mousePosition type="absolute" elementID="rect1" event="onmousemove" id="mouse_Absolute"/>
	<text y="290" x="40" id="textx_relative">Relative Position
	</text>
	<text y="310" x="40" id="relative_xlabel">X=
	</text>
	<text y="330" x="40" id="relative_ylabel">Y=
	</text>
	<text y="310" x="60" font-size="8" fill="green" id="relative_xpos">x Position
	</text>
	<text y="330" x="60" font-size="8" fill="green" id="relative_ypos">y Position
	</text>
	<text y="290" x="190" id="textx_absolute">Absolute Position
	</text>
	<text y="310" x="190" id="absolute_xlabel">X=
	</text>
	<text y="330" x="190" id="absolute_ylabel">Y=
	</text>
	<text y="310" x="210" font-size="8" fill="green" id="absolute_xpos">x Position
	</text>
	<text y="330" x="210" font-size="8" fill="green" id="absolute_ypos">y Position
	</text>
</svg>

Example 315_mousePosition
Example 315_mousePosition - rectangle with mouse coordinates displayed relative to both the document and the rectangle.

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

7.13 The 'share' element

The 'share' element is a container used to group any dSVG elements that are intended to be shared children of multiple SVG elements or dSVG UI controls. If an element has the dSVG attribute 'share', equal to the 'id' attribute of a dSVG 'share' element, then the children of that 'share' element are treated as children of the element with the 'share' attribute. Note that the children of the 'share' element are not copied--they exist only in one location and are shared, like "virtual" children.

<!ENTITY % shareExt "" >
<!ELEMENT dsvg:share	(%UIControls;|%Behaviors;|dsvg:item)* >
<!ATTLIST dsvg:share
  %stdBehaviorAttrs; >

Example 011_share shows a listBox and a comboBox, both sharing the same 'item' elements as their children.

<?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"/>
	<script type="text/ecmascript" xlink:href="dsvg11/combobox.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: Share 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 share element is used to share a group of items with multiple elements.
		</text>
		<text y="395" x="20" font-size="12" id="small_ex">This document shares the same set of items with the combo box and the list box.
		</text>
		<text y="420" x="20" font-size="12" id="large_ex">Associate a share element with other elements by adding a dsvg:share attribute to the element that references the share element.
		</text>
	</g>
	
	<!-- adding controls -->
	
	<dsvg:share id="share_1">
		<dsvg:item value="STOP" data="red" id="item_1">
			<dsvg:itemData value="Octagon" name="shape"/>
		</dsvg:item>
		<dsvg:item value="YIELD" data="yellow" id="item_2">
			<dsvg:itemData value="Triangle" name="shape"/>
		</dsvg:item>
		<dsvg:item value="GO" data="green" id="item_3">
			<dsvg:itemData value="Circle" name="shape"/>
		</dsvg:item>
	</dsvg:share>
	<dsvg:listBox dsvg:share="share_1" xlink:href="dsvg11/skinListBox_Composite.svg#skinListBox" autoScale="true" height="60" width="198" y="70" x="50" label="List box: (default attributes with the added attribute dsvg:share)" id="listbox_1"/>
	<dsvg:comboBox dsvg:share="share_1" xlink:href="dsvg11/skinComboBox_Composite.svg#skinComboBox" autoScale="true" height="17" width="217" y="220" x="50" label="Combo box: (default attributes with the added attribute dsvg:share)" id="combobox_1"/>
</svg>

Example 011_share
Example 011_share - listBox and comboBox sharing the same 'item' elements

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

7.14 The 'switch' element

The 'switch' element defines a conditional statement, comparing one value to other values defined in child 'case' elements. Commonly used in conjunction with dSVG expressions for referencing the real-time value of variables or element attributes.

<!ENTITY % switchExt "" >
<!ELEMENT dsvg:switch	(%Behaviors;) >
<!ATTLIST dsvg:switch
  %stdBehaviorAttrs;
  variable	%Text;		#IMPLIED >

Attribute definitions:

variable = '<string>'
Specifies the value to compare against many others, which are defined in the child 'case' elements. Usually, 'variable' will be a dSVG expression.

Example 304_switch shows a comboBox with an associated 'switch' behavior, resulting in one of four 'setData' behaviors being run.

<?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="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410">
	<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"/>
	<script type="text/ecmascript" xlink:href="dsvg11/switch.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setData.js"/>
	
	<!-- template -->
	
	<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
	<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="text_1">dSVG sample behavior: condition - switch
	</text>
	<line y2="350" x2="744" y1="350" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:spinBox, dsvg:switch, dsvg:case, dsvg:default
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:switch element compares conditions of the child dsvg:case element(s) along with the dsvg:default element values.
	</text>
	
	<!-- adding behavior -->
	
	<text y="150" x="50" fill="#5f86B1" id="label">Label
	</text>
	<dsvg:spinBox selected="false" xlink:href="dsvg11/skinSpinBox_Composite.svg#skinSpinBox" autoScale="true" disabled="false" increment="1" value="1" max="5" min="0" height="18" width="118" y="70" x="50" label="Spin box" id="spin">
		<dsvg:switch variable="%spin@value%" id="dsvgUniqueID_4">
			<dsvg:case value="1" id="dsvgUniqueID_5">
				<dsvg:setData value="Value is 1, minimum" elementID="label" id="dsvgUniqueID_7"/>
			</dsvg:case>
			<dsvg:case value="2" id="dsvgUniqueID_6">
				<dsvg:setData value="Value is two" elementID="label" id="dsvgUniqueID_8"/>
			</dsvg:case>
			<dsvg:case value="3" id="dsvgUniqueID_7">
				<dsvg:setData value="Value is THREE!" elementID="label" id="dsvgUniqueID_9"/>
			</dsvg:case>
			<dsvg:default id="dsvgUniqueID_8">
				<dsvg:setData value="value is other than one two three" elementID="label" id="dsvgUniqueID_10"/>
			</dsvg:default>
		</dsvg:switch>
	</dsvg:spinBox>
	<text y="70" x="200" id="text_a">Switch: CASE for values 1,2,3
	</text>
	<text y="90" x="200" id="text_b">Switch: DEFAULT for other values
	</text>
	<text y="110" x="200" id="text_c">In all cases, the value will be reflected in the Label.
	</text>
</svg>

Example 304_switch
Example 304_switch - button with associated 'switch' behavior

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

7.14.1 The 'case' element

The 'case' element is a child of the 'switch' element, which defines the value to compare to the 'switch' element's 'value' attribute. If it evaluates to true, its child elements are executed. Commonly used in conjunction with dSVG expressions for referencing the real-time value of variables or element attributes.

<!ENTITY % caseExt "" >
<!ELEMENT dsvg:case	(%Behaviors;) >
<!ATTLIST dsvg:case
  %stdBehaviorAttrs;
  value	%Text;		#IMPLIED >

Attribute definitions:

value = '<string>'
Specifies the value to compare against the 'switch' element's 'value' attribute. Usually, 'value' will be a dSVG expression.

7.14.2 The 'default' element

The 'default' element is a child of the 'switch' element, whose child behaviors are executed whenever none of the 'switch' element's 'case' elements evaluate to true. Commonly used in conjunction with dSVG expressions for referencing the real-time value of variables or element attributes.

<!ENTITY % defaultExt "" >
<!ELEMENT dsvg:default	(%Behaviors;) >
<!ATTLIST dsvg:default
  %stdBehaviorAttrs; >

7.15 The 'variable' element

The 'variable' element acts as a proxy or representative for some other value, such as an attribute of an element. A 'variable' element can have a 1:1 relationship with an attribute or be an equation made up of multiple attributes and constants. Variables are intended as a convenient way of storing data as well as building complex expressions that can be used anywhere via dSVG expressions. Note that it is the author's responsibility to not create self referential variables or circular variable references.

<!ENTITY % variableExt "" >
<!ELEMENT dsvg:variable	EMPTY >
<!ATTLIST dsvg:variable
  id		ID			#IMPLIED
  name		%Text;			#IMPLIED
  value		%Text;			#IMPLIED
  saveState		%Text;			#IMPLIED
  collection		%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].
name = '<string>'
The identifier for the variable, used to access its value via the dSVG expression syntax.
value = '<string>'
The value to be applied to the reference at load time.
saveState = "(session | page | application)"
Indicates the purpose of the 'variable' element. When posting the variable to a server, the values of 'page', 'application' or 'session' are appropriate, & will be stored on the server for durations according to those categories.
collection = '<string>'
An identifier used to group variables together, for scoping purposes. For example, collection1.myVar is different than collection2.myVar. Also, one can specify the collection name when posting to a server, which will send all variables in that collection.

Example 328_variable shows a variable set to be the sum of the width of two rectangles.

<?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="420px" width="760px" onload="init(evt)" viewBox="0 0 760 420">
	<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"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setAttribute.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setData.js"/><!-- template -->
	<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
	<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="text_1">dSVG sample behavior: variable
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:variable
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:variable element is able to assume different values.
	</text>
	<text y="395" x="20" font-size="12" id="depend">Selecting the button will set a new value for the 'variable' ($varRect).
	</text>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/><!-- adding behavior -->
	<dsvg:variable value="%redRect@width + blueRect@width%" name="varRect" id="variableRect"/>
	<rect height="50" width="50" y="100" x="50" stroke="darkred" stroke-width="5" fill="red" id="redRect"/>
	<rect height="50" width="50" y="180" x="50" stroke="darkblue" stroke-width="5" fill="#5f86B1" id="blueRect"/>
	<text y="95" x="50" id="textRedRect">width = 50
	</text>
	<text y="175" x="50" id="textBlueRect">width = 50
	</text>
	<text y="175" x="150" id="textDesc3">Note: Once the button is selected, setAttribute is applied to the blue rect so width="previous '$varRect' value"
	</text>
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="295" x="50" label="New Variable" id="dsvgUniqueID_1">
		<dsvg:setAttribute value="%$varRect%" attribute="width" elementID="blueRect" id="setAttRect"/>
		<dsvg:setData value="width = %blueRect@width%" elementID="textBlueRect" id="setTextBlueRect"/>
		<dsvg:setData value="$varRect = %$varRect%" elementID="text1" id="setTextVar"/>
	</dsvg:button>
	<text y="259" x="50" id="textDesc">$varRect = redRect@width + blueRect@width
	</text>
	<text y="310" x="170" id="text1">$varRect = 100 
	</text>
</svg>

Example 328_variable (before)
Example 328_variable (before) - button with associated 'setAttribute' behavior, which uses a variable

Example 328_variable (after)
Example 328_variable (after) - button with associated 'setAttribute' behavior, which uses a variable

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