System and method for controlling user interface features of a web application

[0001] The invention relates to web application development. In particular, the invention relates to a system and method for controlling user interface features of web applications.

[0002] Web designers use markup languages to create and modify websites. Graphical user interfaces (GUIs), also known as user interface (UI) controls, are desirable for building web applications, as they allow the user to interact with the application in a standard, familiar way. UI controls are high-level constructs with data and function methods underlying a visual front-end. They behave in standard, expected manners-changing their states (e.g., selected, unselected, focussed, disabled, etc.), which usually have different appearances, in response to user interaction. For example, clicking on a push-button will cause the button to go into its down-state in response to the mousedown event and back into its up-state in response to the mouseup event. Another intrinsic behavior of UI controls is that they trigger the execution of predetermined actions in response to specified events, such as the user clicking on them with the mouse.

[0003] Hypertext markup language (HTML) is a commonly used markup language, or platform, with which to build web applications. HTML is limiting, with poor graphics support (only bitmaps, no vectors), its lack of absolute positioning, its small set of user interface (UI) controls and its inability to describe the appearance of those UI controls (the HTML browser decides on the appearance). Scalable vector graphics (SVG) is a language for describing two-dimensional graphics in extensible markup language (XML), which may soon become the platform of choice with which to build web applications. SVG provides an author with a rich set of vector graphics features (as well as bitmaps) and absolute control over their positioning.

[0004] SVG-based web applications create their own UI controls using SVG to describe the visual appearance and script to describe the data and function members, which provide the UI controls with the standard intrinsic behaviors discussed previously. This means, however, that non-developers cannot author the UI portion of the content, a fair amount of script for the UI controls must be transferred to the client (a significant problem for wireless devices) and the UI controls may seem to react sluggishly to user input, due to the nature of script being interpreted at run-time as opposed to native code (e.g. C or C) being interpreted (and optimized) at compile time.

[0005] Using scripts to author the UI portion of Web content has limitations. Script requires programming ability. Many Web designers do not have the programming skills required to build UI controls via scripting. Aside from all the internal logic that a UI control requires, one must also know how to manipulate the DOM via the DOM methods so as to give the UI control a visual appearance and interactivity.

[0006] Script requires time to develop. Even for developers, creating a suite of robust, responsive UI controls requires a significant amount of script, which takes a significant amount of time to implement.

[0007] Script is difficult to auto-generate. One could attempt to assist Web designers by creating pre-canned scripts for the most commonly required functionality. However, supporting the insertion of pre-canned scripts via an integrated development environment (IDE) is both complicated and limiting. Auto-generated script cannot easily be customized afterwards, unless the IDE absolves itself of all responsibility should the designer make modifications.

[0008] Software exists that allows one to map input XML markup to output markup, automatically generating extensible stylesheet language transformation XSLT (the most commonly used XML markup language for transforming XML markup to a different form of markup). However, script is difficult to data-map.

[0009] Script relies on full DOM support. Scripts are only as powerful as the DOM methods that the viewer supports. Although it is desirable to have all viewers support the entire spectrum of DOM methods, they currently do not. Thus one must write script that only uses the API's supported by all viewers, in order to ensure that the script works on all viewers (i.e., one must program towards the lowest common denominator).

[0010] Script is complex. Creating a simple editable textBox control, for instance, could require thousands of lines of code, since SVG 1.1 does not support editable text. One has to intercept keyboard events, modify the data of existing text elements, create new text or tspan elements for every line, support the Backspace and Delete keys, support auto-wrapping, etc. But inserting a simple textBox element requires no programming and is only one line of markup.

[0011] Script is slower than native code. Scripts are interpreted, and thus provide slower performance than what would be possible with a natively-implemented markup language. Just having a script interpreter is a lot of overhead for a small device.

[0012] Script must use DOM interfaces. Scripts can only manipulate the DOM via the DOM methods, which are abstractions on top of the real object model used by the viewer. Natively-implemented markup could access the real object model directly, which may improve performance even more.

[0013] Script requires more data to transfer. Scripts greatly add to the amount of data needed to be transferred. This is a problem especially for small devices.

[0014] XUL is an XML markup language for UI controls created by the Mozilla group, specifically for use in their Mozilla HTML web browser. While XUL does offer an extensive list of UI controls, offers limited skinnability (control of appearance) and is not tied to a forms creation/processing/submission model, XUL is intended for use in HTML browsers and thus does not allow for absolute positioning nor absolute control of the appearance, cannot be easily hooked up to actions and cannot be easily used for forms. XUL is not supported in some SVG viewers.

[0015] XForms is another XML markup language which includes UI controls. XForms was designed for forms, however. XForms only supports UI controls needed for forms, does not allow for absolute control over their positioning and their appearance, cannot be easily hooked up to actions (except those that affect just its own UI controls and its instance, or forms, data) and is very tightly tied to its forms model. XForms is not supported in some SVG viewers.

[0016] It is an object of the invention to provide a novel system and method of controlling user interface features of a web application that obviates or mitigates at least one of the problems described above.

[0017] In an aspect of the present invention, there is provided a system for controlling user interface features of a web application. The system comprises a collection of user interface control elements, a collection of skin templates comprising extensible markup language based markup contained as children of a container element, and a collection of control element instructions for performing actions associated with the control elements. Each control element comprises a namespace, common attributes for defining graphical features of the control element and for associating the control element with the internal state of the core control element, other attributes for defining attributes that affect the intrinsic behavior of the control, and a skin template reference attribute for referencing a skin template. Each instruction is associated with a control element.

[0018] In another aspect of the present invention, there is provided a system for controlling user interface features of a web application. The system comprises a collection of control element instructions for performing actions associated with the control elements, and an initialization function for directing the processing of one or more control elements in a document object model. Each instruction is associated with a control element.

[0019] In another aspect of the present invention, there is provided a method of controlling user interface features of a web application. The method comprises the steps of searching for a designated user interface control element in a document object model, and calling a script associated with the designated control element.

[0020] In another aspect of the present invention, there is provided a method of controlling user interface features of a web application. The method comprises the steps of adding a behavior element as a child of a user interface control element, receiving an event which is equal to an event attribute setting in the behavior element, and calling a script associated with the behavior element.

[0021] In another aspect of the present invention, there is provided a method of creating a customizable user interface control element having expected behaviours. The method comprises the steps of categorising user interface controls into fundamental core controls, determining variations of a core controls, determining common attributes of the core control, determining fundamental states for the core control, determining how to allow for absolute positioning of objects the core control, determining how to allow for absolute customization of appearance of the core control, assigning a reference link to the core control, determining templates for skins to allow for the absolute customization of appearance of the core control, determining how to associate behaviors to the core control, and creating a core control element.

[0022] FIG. 1 shows a typical web display environment for displaying web pages and web applications.

[0023] FIG. 2 shows a user interface control system, in accordance with an embodiment of the present invention.

[0024] FIG. 3 is a node representation of a document object model of an example of a file used in the user interface control system, in accordance with the user interface control system.

[0025] FIGS. 4A to 4D are screen shots of an example of the display of a user interaction with an example of a file used in the user interface control system, in accordance with the user interface control system.

[0026] FIG. 5 is a flowchart of an example of a method of creating a user interface control of a web application, in accordance with an embodiment the user interface control system.

[0027] FIG. 6 is a flowchart of an example of a method of creating user interface controls of a web application at load time, in accordance with the user interface control system.

[0028] FIG. 7 is a flowchart of a method of creating user interface controls of a web application in response to an event, in accordance with the user interface control system.

[0029] FIG. 8 shows another example of an method of controlling user interface features of a web application, in accordance with the user interface control system.

[0030] FIG. 9 shows an example of a method of creating an element for controlling user interface features of a web application, in accordance with the user interface control system.

[0031] FIG. 10 shows an example of a method of creating a plurality of elements for controlling user interface features of a web application, in accordance with the user interface control system.

[0032] FIG. 11 shows a screen shot of an example of an aggregate element, in accordance with the user interface control system.

[0033] FIG. 12 shows a screen shot of an example of a button element, in accordance with the user interface control system.

[0034] FIG. 13 shows a screen shot of an example of a checkBox element, in accordance with the user interface control system.

[0035] FIG. 14 shows a screen shot of an example of a comboBox element, in accordance with the user interface control system.

[0036] FIG. 15 shows a screen shot of an example of a contextMenu element, in accordance with the user interface control system.

[0037] FIG. 16 shows a screen shot of an example of a listBox element, in accordance with the user interface control system.

[0038] FIG. 17 shows a screen shot of an example of a listView element, in accordance with the user interface control system.

[0039] FIG. 18 shows a screen shot of an example of a radioButton element, in accordance with the user interface control system.

[0040] FIG. 19 shows a screen shot of an example of a slider element, in accordance with the user interface control system.

[0041] FIG. 20 shows a screen shot of an example of a spinBox element, in accordance with the user interface control system.

[0042] FIG. 21 shows a screen shot of an example of a state element, in accordance with the user interface control system.

[0043] FIG. 22 shows a screen shot of an example of a textBox element, in accordance with the user interface control system.

[0044] FIG. 23 shows a screen shot of an example of a window element, in accordance with the user interface control system.

[0045] FIG. 24 shows a screen shot of an example of a contextMenu attribute, in accordance with the user interface control system.

[0046] FIG. 25 shows a screen shot of an example of a share attribute, in accordance with the user interface control system.

[0047] FIG. 26 shows a screen shot of an example of a toolTip attribute, in accordance with the user interface control system.

[0048] FIG. 1 shows a typical web display environment 10 for displaying web pages and web applications. A web display environment 10 comprises a browser 11, a viewer 13, a script interpreter 14, and a document object model (DOM) 15. The browser 11 is the host application, which understands and visually renders hypertext markup language (HTML) and/or extensible hypertext markup language (XHTML). Examples of browsers include Netscape and Internet Explorer. The browser 11 includes a window which is displayed on the display apparatus, such as a monitor, of an end user computer system. The browser 11 typically employs a plug-in architecture, in which third party software (known as the plug-in or viewer 13) can be associated with any file format that is not already natively supported by the browser 11 and is allowed to render that file within the host browser's 11 window. One type of file that the browser 11 may be asked to open is an SVG file having a .svg extension. The browser 11 does not natively support the SVG markup language (which is an XML language) and so passes the SVG file to the SVG viewer 13, which has associated itself to the SVG file format, via the rules of the plug-in architecture of the browser 11.

[0049] The viewer 13 comprises software code for parsing the SVG markup, creating a DOM, rendering that DOM to the browser's window, listening for events and dispatching them to their assigned handler script functions, and interpreting/executing those script functions. The viewer 13 uses the SVG file received from the browser 11 to create a DOM 15. The DOM is a hierarchical tree structure of objects in memory, representing the hierarchical XML markup in the XML text file. The DOM also contains methods (also known as functions or application programming interfaces (API's)) that allow it to be queried or modified. The viewer 13 may also have access to a script interpreter/engine 14, which can execute script code created by a programmer for the purpose of making the document non-static (e.g., animation) and/or interactive with the user (e.g., the user can create events with the mouse or keyboard, which cause something to happen) via manipulation of the DOM.

[0050] The following common data types are used in this specification:

[0051] <boolean>: A<boolean> is specified as either true or false.

[0052] <integer>: An<integer> is specified as an optional sign character ( or ) followed by one or more digits 0 to 9. If the sign character is not present, the number is non-negative.

[0053] Unless stated otherwise for a particular attribute or property, the range for a <integer> encompasses (at a minimum) 2147483648 to 2147483647.

[0054] Within the SVG DOM, an<integer> is represented as an long or an SVGAnimatedInteger.

[0055] <number> (real number value): The specification of real number values is different for property values than for XML attribute values.

[0056] The Cascading Style Sheets, level 2 (CSS2) Specification-a style sheet language that allows one to attach style (e.g., fonts, spacing and aural cues) to structured documents (e.g., HTML documents and XML applications)-states that a property value which is a <number> is specified in decimal notation (i.e., a <decimal-number>), which consists of either an <integer>, or an optional sign character followed by zero or more digits followed by a dot (.) followed by one or more digits. Thus, for conformance with CSS2, any property in SVG which accepts <number> values is specified in decimal notation only.

[0057] For SVG's XML attributes, to provide as much scalability in numeric values as possible, real number values can be provided either in decimal notation or in scientific notation (i.e., a <scientific-number>), which consists of a <decimal-number> immediately followed by the letter e or E immediately followed by an<integer>.

[0058] Unless stated otherwise for a particular attribute or property, a <number> has the capacity for at least a single-precision floating point number (ICC32) and has a range (at a minimum) of 3.4e38F to 3.4e38F.

[0059] It is recommended that higher precision floating point storage and computation be performed on operations such as coordinate system transformations to provide the best possible precision and to prevent round-off errors.

[0060] Conforming High-Quality SVG Viewers are required to use at least double-precision floating point (ICC32) for intermediate calculations on certain numerical operations.

[0061] Within the SVG DOM, a <number> is represented as a float or an SVGAnimatedNumber.

[0062] <length>: A length is a distance measurement. The format of a <length> is a <number> optionally followed immediately by a unit identifier. (Note that the specification of a <number> is different for property values than for XML attribute values.)

[0063] If the <length> is expressed as a value without a unit identifier (e.g., 48), then the <length> represents a distance in the current user coordinate system.

[0064] If one of the unit identifiers is provided (e.g., 12 mm), then the <length> is processed according to the description in Units.

[0065] Percentage values (e.g., 10%) depend on the particular property or attribute to which the percentage value has been assigned. Two common cases are: (a) when a percentage value represents a percent of the viewport (refer to the section that discusses Units in general), and (b) when a percentage value represents a percent of the bounding box on a given object (refer to the section that describes Object bounding box units).

[0066] Within the SVG DOM, a <length> is represented as an SVGLength or an SVGAnimatedLength.

[0067] <coordinate>: A<coordinate> represents a <length> in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for X coordinates, the y-axis for Y coordinates).

[0068] Within the SVG DOM, a <coordinate> is represented as an SVGLength or an SVGAnimatedLength since both values have the same syntax.

[0069] <uri> (Uniform Resource Identifiers URI references): A URI is the address of a resource on the Web. For the specification of URI references in SVG, see URI references.

[0070] Within the SVG DOM, <uri> is represented as a DOMString or an SVGAnimatedString.

[0071] UI controls comprise a persistent object in memory, which gets instantiated when the UI control element is processed, as well as the visible SVG elements defined via a skin/template, which can exist within a def block in the SVG file or in a separate file. The skins follow specific formats. The appearance for every state is described in SVG markup within a group g container with an id attribute equal to up, down, hover, focus or disabled. Within each of these containers, the individual components of that UI control are defined via predefined ID's. For instance, a slider control uses components specified with the ID's label, body, skinSliderBar, skinSliderThumb, tickMajor, tickMinor, tickLabelMajor, tickLabelMinor and mask. The markup within these containers, however, is completely customizable. The intrinsic behaviors of UI controls make no a priori assumptions regarding the nature of the appearance, except insofar as the obvious, such the element with idlabel must be either a text or tspan element. When the UI control is instantiated, the skin is retrieved and used, along with the attributes of the UI control element, to create the visible SVG objects in the DOM that make up the appearance. For instance, the slider skin's tickMajor markup will be cloned as many times as required, based on the slider element's tickMajor attribute, and positioned appropriately.

[0072] Because there are no assumptions made regarding the SVG markup comprising a UI control's skin, the skins contain constraint elements, to be resized intelligently. When a UI control element's width and/or height attribute is set, the desired dimensions of the UI control are compared to the existing dimensions of its bounding box and, if different, a transform is applied to the visible markup. With no constraints defined in the skin, this could cause unwanted side effects, such as the label also being stretched, or the stroke-widths appearing to be thicker or thinner. Contraints can be defined in the skin to counteract these effects due to scaling.

[0073] FIG. 2 shows a system for controlling user interface features of a web application 20 in accordance with an embodiment of the present invention. The user interface (UI) control system 20 comprises a collection (or set) of UI control elements 22, a collection of UI control skin templates 27, and a collection of UI control instructions 28. Each UI control element 22 comprises a namespace 23, common attributes 24, other attributes 25, and a skin template reference attribute 26. The namespace 23 is what the UI control element 22 is called (e.g., button, combobox, slider, etc.). As these UI control elements 22 are not currently part of the scalable vector graphics (SVG) specification, their name 23 may be prefixed with a namespace (e.g., dsvg:) so that the viewer's extensible markup language (XML) parser allows it to be part of the DOM. The common attributes 24 are the attributes that are common to every UI control element 22, which define the graphical features of the UI control elements 22 (e.g., width100), define the UI control's label or associated text (e.g., labelOK) and position, define the initial state of the UI control element 22 (e.g., disabledtrue) and override the default appearance of specific states (described in the associated skin) with new appearances described elsewhere (e.g., downskinAlternateDown). The other attributes 25 define the attributes that are specific to each particular UI control element 22, which affect the intrinsic behavior of the UI control (e.g., toggletrue causes a button control to become a sticky button, staying down or up after each click). An example of an event occurs when a user clicks on a UI control element displayed in a window of a browser. The skin template reference attribute 26 provides a reference to the location of the UI control skin template 27 which the UI control element 22 may access.

[0074] The UI control skin templates 27 are associated with the UI control elements 22. Preferably, there is a one-to-one relationship between UI control elements 22 and UI control skin templates 27. A UI control skin template 27 is designed to allow for absolute customization of appearance of the UI control. The skin template 27 is referenced via an xlink:href attribute (or skin template reference attribute) 26 which is a common attribute of the UI control elements 22. The skin template 27 comprises SVG markup (which can reference bitmap images) contained as children of a g element (a group/container element), where there is one group per state (e.g. up, down, disabled, etc.). The skin templates 27 may be stored as files referenced by the UI control elements 22. Designers may modify or replace a skin templates 27 as desired.

[0075] Each UI control's instructions 28 (associated data and function members), which define the control's intrinsic behaviors, may be supplied via script or as native code in the viewer 13, which is indirectly associated to the UI control element 22. For example, instructions (or scripts) 28 may include toggling a button's state between up and down when clicked upon with the mouse, or translating (panning) the contents of the document within the display window when the thumb of a scrollbar is dragged with the mouse.

[0076] A UI control element 22 may be handled at parse time (i.e., when the DOM is first created), or after parse time. At parse time, an event may trigger a call to the instructions 28 associated to the UI control element 22, so as to instantiate it immediately. Alternatively, UI control elements 22 may be handled via native code during parse time.

[0077] After parse time, an initialization function may be run to find each UI control element 22 and run its associated instructions 28 (script or another supported programming language) that creates that particular element-both the visual front-end (as SVG elements in a document object model (DOM)) and the back-end (an object in memory, with data and function members). The initialization function may contain instructions for traversing each node in the DOM and for searching and calling functions associated with UI control elements 22 having names following a predetermined naming convention.

[0078] An alternative UI control system comprises an initialization file, the skin templates 27 and the scripts 28 of the UI control system 20. The collection of UI control elements are provided independently from the alternative UI control system as markup syntax for a designer (or developer, or any user) to use when modifying an XML file, such as an SVG document.

[0079] The following is an example of a UI control element 22:

	<dsvg:button
	idmyRectangularRadioButton
	xlink:hrefdsvg/skinButton_Default.svgskinButton
	labelClick me
	width50
	height40
	x10
	y20
	toggletrue
	groupmyRadioButtons
	checkedtrue
	labelX0
	labelY3
	/>

[0080] The button element defines a UI control that can be clicked to trigger an action. The button element may be a push button, a checkbox (i.e., a sticky/toggle button) or a radiobutton, depending on the attributes of the element.

[0081] The button element contains the namespace 23:

[0082] dsvg:button

[0083] which follows the naming convention of adding dsvg: as a prefix (associated to a particular namespace earlier in the file) to the element name, so that the viewer's XML parser will allow these non-standard elements in the DOM. As will be described below, this naming convention can also assist the system 20 to search for UI control elements 22, i.e., all UI control elements 22 having this prefix in their namespace 23. The button element also contains common attributes 24 (or standard attributes) such as id, label, x, y, width, height, etc. The button element also contains the skin template reference attribute xlink:href which is also common to UI control elements 22. The attributes common to all UI control elements 22 will be described below.

[0084] The toggle attribute specifies whether the button is a toggle/sticky button or not, i.e. whether the button toggles between up and down states when clicked on or instead switches to the down state when the mouse button is pressed and then back to the up state when the mouse button is released. A checkbox has toggletrue. If the toggle attribute is not specified, then preferably, the default is false. The group attribute is the name of the group to which the button belongs. If the group attribute is provided, and toggletrue, then this results in the functionality of a radiobutton, where selecting any of the radiobuttons belonging to that group results in the other radiobuttons in that group becoming unselected. The checked attribute specifies whether the button is down/checked/selected (true) or up/unchecked/unselected (false). Preferably, the default is set to false. The labelX attribute specifies the x-coordinate of the label relative to the y attribute. If the labelX attribute is not provided, the label's position is determined by the skin 27. The labelY attribute specifies the y-coordinate of the bottom edge of the label, relative to the x attribute. If the labelY attribute is not provided, the label's position is determined by the skin 27.

[0085] Other example of UI control elements 22 will be described below.

[0086] The following is the syntax for the button skin template 27 corresponding with the above example:

	<xml version1.0>
	<svg>
	<g idskinButton>
	<g idlabel>
	<text x y style> </text>
	</g>
	<g idup displayall>
	</g>
	<g iddown displaynone>
	</g>
	<g idhit displaynone>
	</g>
	<g idhover displaynone>
	</g>
	<g idfocusUP displaynone>
	</g>
	<g idfocusDown displaynone>
	</g>
	<g iddisabledUp displaynone>
	</g>
	<g iddisabledDown displaynone>
	</g>
	</g>
	</svg>

[0087] As can be seen in the skin template shown above, a separate group is defined for each possible state of the UI control, where the specific state is identified via the id attribute. The display attributes are not actually required, as the button's associated script sets them itself, but by making the up group visible and the other invisible, it allows the up state to be easily viewed separately in a viewer, so that the designer can easily get a feel for what the button looks like.

[0088] The following is the syntax of an example of a button skin, in accordance with the above example:

	<xml version1.0>
	<svg>
	<g idskinButton>
	<g idlabel>
	<text x 50 y13
	stylefont-family: Tahoma ;stroke:none;font-size:12;text-an
	chor:middle> </text>
	</g>
	<g idup displayall>
	<rect x0 y0 width100 height18
	stylefill:rgb(230,230,230);stroke:none/>
	<polyline points0,18 0,0 100,0
	stylestroke-width:1;stroke:white;fill:none/>
	<polyline points0,18 100,18 100,0
	stylestroke-width:1;stroke:black;fill:none/>
	</g>
	<g iddown displaynone>
	<rect x0 y0 width100 height18
	stylefill:rgb(230,230,230);stroke:none/>
	<polyline points0,18 0,0 100,0
	stylestroke-width:1;stroke:black;fill:none/>
	<polyline points0,18 100,18 100,0
	stylestroke-width:1;stroke:white;fill:none/>
	</g>
	<g idhover displaynone>
	<rect x0 y0 width100 height18
	stylefill:rgb(230,230,230);stroke:none/>
	<polyline points0,18 0,0 100,0
	stylestroke-width:2;stroke:white;fill:none/>
	<polyline points0,18 100,18 100,0
	stylestroke-width:2;stroke:black;fill:none/>
	<rect x1 y1 width98 height16
	stylefill:none;stroke:199DBF/>
	</g>
	<g iddisabled styleopacity:0.5
	displaynone>
	<rect x0 y0 width100 height18
	stylefill:rgb(230,230,230);stroke:none/>
	<polyline points0,18 0,0 100,0
	stylestroke-width:1;stroke:white;fill:none/>
	<polyline points0,18 100,18 100,0
	stylestroke-width:1;stroke:black;fill:none/>
	</g>
	</g>
	</svg>

[0089] As can be seen in the sample skin file above, the label uses the Tahoma font, with a size of 12, and its middle appears 50 units to the right and 13 units below the top-left corner of the button, as defined by its x and y attributes. Its states are drawn using light-gray rectangles and black and white polylines, and the hover state (which appears when the mouse cursor is overtop of the button) includes an extra light-gray rectangle with a blue outline/stroke.

[0090] Other examples of UI control elements 22 will be described below.

[0091] The following is an example of SVG markup used in association with an embodiment of the UI control system 20.

<xml version1.0>
<DOCTYPE svg PUBLIC -//W3C//DTD SVG 20000303 Stylable//EN
http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/
svg-20000303-stylable.dtd>
<svg xmlns:dsvghttp://corel.org/dsvg onloaddsvgInit(evt)
width256 height256>
<script typetext/ecmascript xlink:hrefdsvg/dSVG.js/>
<script typetext/ecmascript xlink:hrefdsvg/BaseUI.js/>
<script typetext/ecmascript xlink:hrefdsvg/button.js/>
<script typetext/ecmascript
xlink:hrefdsvg/constraint.js/>
<-- Create a grey background. -->
<rect x0 y0 width512 height512
stylefill:rgb(230,230,230)/>
<-- Create various types of buttons, with no associated
behaviours. -->
<dsvg:button idmyPushButton labelClick me x50.5
y10.5 xlink:hrefdsvg/skinButton_Windows.svgskinButton/>
<dsvg:button idmyCheckbox labelCheck me x50.5
y50.5 toggletrue
xlink:hrefdsvg/skinCheckbox_Default.svgskinCheckbox/>
<dsvg:button idmyRadioButton1 selectedtrue labelCheck
me x50.5 y100.5 toggletrue groupmyGroup
checkedtrue
xlink:hrefdsvg/skinRadioButton_Default.svgskinRadioButton/>
<dsvg:button idmyRadioButton2 labelNo, me x50.5
y125.5 toggletrue groupmyGroup
xlink:hrefdsvg/skinRadioButton_Default.svgskinRadioButton/>
<dsvg:button idmyBigPushButton labelLook how big I am
x50.5 y150.5 width150 height100
xlink:hrefdsvg/skinButton_Windows.svgskinButton/>
</svg>

[0092] FIG. 3 is a node representation of the DOM of the above button-01.svg 30. The DOM contains a node for the root svg element 31. The DOM representation also contains script nodes 32 and a rect (rectangle) node 33 and UI control element nodes 34 for buttons (button). The <dsvg:button> UI control element 34 contains the prefix dsvg: in the name 23.

[0093] FIGS. 4A to 4D are screen shots of the file button-01.svg. FIG. 4A is a screen shot of the file button-01.svg in its initial state, with the mouse cursor not over any buttons. FIG. 4B is a screen shot of the display after the user has clicked on the checkbox, clicked on the bottom radiobutton, and is now hovering over the top push-button. FIG. 4C is a screen shot of the display when the user is pressing the mouse button down on the top button. FIG. 4D is a screen shot of the display when the user has let go of the mouse button and moved it away from the UI controls, leaving the top button in its focus state (since it is the last-used UI control). Since the skin template used by the top button does not have an appearance defined for the focus state, the hover state's appearance is used instead.

[0094] FIG. 5 shows an example of a method of creating UI control of a web application at parse time (50), in accordance with the UI control system 20. The method (50) begins with generating a function name associated with a UI control element (51). Next, the function is called (52). The method is done (53).

[0095] FIG. 6 shows another example of a method of creating UI controls of a web application at load time (60), in accordance with the UI control system 20. An initialization function is executed/run by a viewer script interpreter 14, in response to an onload event that the viewer generates when it loads an initial file. This can be achieved by adding an onloaddsvgInit( ) attribute to the root svg element. The method (60) begins with the initialization function searching the DOM (beneath the root svg element) for a designated UI control element (61). A designated UI control element is a UI control element with a predetermined prefix (which is associated to a particular namespace using the xmlns attribute of the root svg element) to the name of the name of the UI control element in the DOM. Whether or not the first DOM element is a designated UI control element is determined (61). If the first element is a designated UI control element (62) (e.g., dsvg:button), then a function name associated with the designated UI control element is generated (63) and the function is called (64). If a designated UI control element is not found (62), or after a generated function is called (64), the method determines if there are more elements in the DOM to search (65). If there are more elements in the DOM (65), the initialization function determines if the next sibling element is a designated element (66). Steps (62) to (66) are repeated until all elements in the DOM are searched. Once there are no more elements in the DOM to search (65), then the method is done (67).

[0096] The method described in FIG. 6 will be described using the examples of FIGS. 2, 3, and 4A to 4D. The viewer's script interpreter will execute the dsvgInit( ) function at load time (i.e., after the DOM has been built and the scripts retrieved and loaded into memory), which will traverse each node in the DOM (66), searching for elements whose names 23 begin with the dsvg: prefix (i.e., searching for designated UI control elements 22). The <dsvg:button> node is found. Using a priori knowledge of the naming conventions for elements and functions, the string dsvgButton(element, evt) is created, turned into a function and called. This function finds all of the attributes of the dsvg:button element, whose corresponding DOM object was passed in as the parameter element, and retrieves their values using the getAttribute( ) DOM API. It then creates a new instance of the button class-creating an object in memory, which contains data and function methods that provide the instructions for how to build its visual front-end and how to behave in response to events generated by the user. Using the value of the xlink:href attribute 26, it retrieves the skin template 27 (which may be in a separate file) and uses it to create the visual front-end of the button by creating the SVG elements in the DOM, in accordance with the skin template 27, and modifying them using some of the other attributes 24, such as x, y, width, height, label, etc. Other attributes, such as toggle are used to set up how the button will behave and react to user input, which requires that appropriate event listeners be placed (using the addEventListener( ) DOM API) on each group containing the visual appearance of each state, so that the user can interact with the button. Once the dsvgButton( ) function has completed its instructions, the initialization function then looks for more designated UI control elements 22. It finds four more designated UI control elements 22 and handles them in the same manner as it handled the first. After that, the initialization function does not find any more designated UI control elements 22, and so its job is finished.

[0097] When the user positions the mouse pointer over any of the buttons (FIGS. 4A to 4B), the viewer creates an onmouseover event, which the event listener hears and dispatches to the button class's appropriate handler function. If the button was in an up state, this function sets the button's state to be the hover state, causing the visual appearance to change to the appearance associated with the hover state. Since only the g element containing the associated appearance for the up state has an onmouseover event listener, only the up state will respond to that event by putting the button in the hover state. If the button is in the hover state and the user moves the mouse pointer away from the button, the onmouseout event is generated and passed to its handler function, which changes the button's state back to whatever it was before it was changed to the hover state.

[0098] When the user clicks the mouse pointer down over any of the buttons (FIGS. 4A to 4B), the viewer creates an onmousedown event, which the event listener hears (if the button is not in a disabledUp or disabledDown state, as the appearances associated with these states have no onmousedown event listeners) and dispatches to the button class's appropriate handler function. If the button is a toggle-button (i.e., if its toggle attribute equals true), then the onmousedown handler function sets the button's state to be down if it was in the up state (previous to the hover state) or sets it to be up if it was in the down state (previous to the hover state), which causes the visual appearance to change appropriately. If the button is a radio-button (it's a toggle-button but also has a group attribute defined), then the onmousedown handler function will be called, if the button was in the up state, causing the button to switch to the down state, causing its visual appearance to change appropriately and also causing whichever button belonging to the same radiogroup that was previously in the down state to switch to the up state. If the button is a push-button (i.e., its toggle attribute equals false), then the onmousedown handler function sets the button's state to be down if it was in the up state (previous to the hover state). When the user lets go of the mouse button, the viewer generates the onmouseup event, whose handler function sets the button back to the up state.

[0099] If a toggle-button's state changes from up to down or from down to up, or a push-button's state changes from up to down and then up again, then the processActions( ) handler function is called, which searches all the children of the button element, looking for any elements that begin with the dsvg: prefix. It does not find any, and so its job is done.

[0100] In the example described above, the function was dynamically generated, i.e., a string was created, having the same prefix as the designated element (without the colon) and the same name as the designated element (except with the first letter capitalized) and with the designated element's object and the trigger event object passed in as two parameters. The skin template 27 and the script 28 or set of instructions for the operations of the generated function is stored in a predetermined format either in the document text file or in a separate text file on a file system or webserver, and is loaded into memory by the viewer at load time. Alternatively, the initialization function may search for elements that begin with the dsvg: prefix and, using an if or switch statement, determine the appropriate predetermined function to call, which again are expected to have been already loaded in memory by the viewer.

[0101] It is advantageous, though, for the function names to be generated dynamically, so that the main script file containing the initialization function does not need to be updated whenever a new type of UI control element 22 has been created and is available for use.

[0102] As well, while the functions 28 that handle each type of UI control element 22 could be stored all in one file, it is advantageous to store them in separate files and reference them in the document only if their corresponding UI control element 22 is being used, so that only the code that is required is actually transmitted.

[0103] In order for UI control elements 22 to execute desired actions, behavior elements may be inserted as children of the UI control elements 22 (the observer elements). The behavior element will be executed sequentially for each behavior element whose event attribute's value matches the observer element's event (e.g., onmouseover, onclick, etc.). If the event attribute is not provided, onclick will be assumed. In the example below, clicking on the Red button will colour the circle red, while clicking on the Blue button will colour the circle blue.

	<button idbuttonRed x10 y10 labelRed
	xlink:hrefskinButton>
	<setAttribute elementIDmyCircle namefill
	valuered/>
	</button>
	<button idbuttonBlue x10 y40 labelRed
	xlink:hrefskinButton>
	<setAttribute elementIDmyCircle namefill
	valuered/>
	</button>
	<circle idmyCircle x100 y10 r5
	fillgreen/>

[0104] Alternatively, the behavior elements can (optionally) be grouped as children of an <action> element, which can be hooked up to the observer element using a <listener> element. For example:

	<button idbuttonRed x10 y10 labelRed
	xlink:hrefskinButton/>
	<button idbuttonBlue x10 y40 labelRed
	xlink:hrefskinButton/>
	<circle idmyCircle x100 y10 r5
	fillgreen/>
	<action idsetRed>
	<setAttribute elementIDmyCircle namefill
	valuered/>
	</action>
	<action idsetRed>
	<setAttribute idsetBlue elementIDmyCircle
	namefill valueblue/>
	</action>
	<listener eventonclick
	observerElementIDbuttonRed handlerIDsetRed/>
	<listener eventonclick
	observerElementIDbuttonBlue handlerIDsetBlue/>

[0105] FIG. 7 shows an example of a method of creating UI controls for a web application in response to an event (70), in accordance with the UI control system 20. The UI control system 20 is built on top of an event-driven architecture, such as SVG, and XML. Once an event occurs on an SVG element (i.e., the observer element), the method (70) begins with passing the event object to a handler function (71). The handler function determines if the first child element of the SVG element associated with the object is a designated element (72). If a designated element is found (73), then the handler function determines if the event attribute 24 of the designated element is equal to the event that has occurred (74). If the event attribute 24 of the designated element is equal to the event which triggered this method (70), then the name of the function associated with the designated element is automatically generated (75) (in accordance with a predetermined function naming convention) and called (76). Preferably, the predetermined function naming convention is similar to the predetermined element naming convention. If a designated element is not found (73), or if the event attribute 24 of the designated element does not match the trigger event (74), or after a generated function is called (76), the event handler determines if there are more child elements of the observer element to search (77). If there are more child elements of the observer element (77), the event handler determines if the next child is a designated element (78). Steps (73) to (78) are repeated until all child elements of the observer element are searched. Once there are no more child elements to search (77), then the handler function is done (79).

[0106] An initialization file may also search for attributes in elements that are not UI control elements 22. Scripts 28 may be created and associated with the dsvg attribute in the same manner as with UI control elements. Script functions 28 for dsvg attributes only operate on the object associated with the existing element to which a dsvg attribute is added. A designer may add the dsvg attribute in an SVG file, or any other XML file to be parsed by the viewer 13.

[0107] FIG. 8 shows another example of an method of controlling UI features of a web application (80), in accordance with the UI control system 20. After a user (or designer) marks up an SVG file using the markup syntax of the UI control system and the SVG file is loaded into a viewer 13, the viewer 13 creates an onload event which is received by an<svg> element. The method (80) begins with an initialization function. A dsvginit( ) initialization function is called (81) by the viewer's script interpreter, which traverses the nodes of the DOM of the SVG file. The initialization function determines if the first DOM element is a designated element (82). If a designated element is found (83) and the event attribute of the designated element is set to onload (84), then the name of the function associated with the designated element is automatically generated (85) (in accordance with a predetermined function naming convention) and called (86). Preferably, the predetermined function naming convention is similar to the predetermined element naming convention. If a designated element is not found (83), the initialization function determines if the regular SVG element contains any designated attributes (87) (which begin with the dsvg: prefix). If any designated attributes are found (87) (e.g., dsvg:toolTipskinTooltip_traditional), then the names of the functions associated with the designated attributes are automatically generated (88) (again, in accordance with a predetermined function naming convention) and called (89).

[0108] If a designated attribute is not found (87), then the initialization file determines if the regular SVG element has any child elements (90). If the regular SVG element has a child element (90) and the child element is a designated element 22 (91), then the initialization file determines the value of the designated element's event attribute (i.e., the event that will trigger the execution of the designated element's associated function) and adds that event listener to the parent SVG element (92) (via the addEventListener( ) DOM API). If the child element is not a designated element 22 (91), then the initialization file determines if there are any other children of the regular SVG element (93). If there are more children (93), then the initialization file searches the next child of the regular SVG element (94). Steps (91) to (94) repeat until there are no more children of the regular SVG element.

[0109] If there are no more children of the regular SVG element (93), or after a generated function is called (86, 89), or if the event attribute of a designated element is not equal to onload (84), or there are no more child elements in a regular SVG element to search (90), the initialization file determines if there are more elements in the DOM to search (95). If there are more elements in the DOM (95), the initialization file determines if the next sibling element is a designated element (96). Steps (93) to (96) are repeated until all elements in the DOM are searched. Once there are no more elements in the DOM to search (95), then the initialization function is done and the viewer 13 waits for an event to occur (97).

[0110] Once an event occurs on an SVG element (i.e., the observer element), that event object is passed to any handler function with which it has been associated (98). The handler function changes the UI control's state (99) to whatever it should be, according to the logic inherent in the specific UI control, which causes the visual appearance to change (the g element containing the SVG for the previous state gets its display attribute set to none, while the g element containing the SVG for the new state gets its display attribute set to all). If the UI control's logic dictates that this change in state requires that any associated behavior elements be run (100), then the event object is passed to the processActions( ) handler function (101). The processActions( ) handler function traverses all children of the UI control element and performs any action required (102). If the UI control's logic does not dictate that the change in state requires any associated behavior elements to be run (100) or after the processActions( ) handler function has performed the required actions (102), then the event handler function is done and the viewer waits for another event to occur (97).

[0111] Referencing Attributes

[0112] To create an application, a designer often desires to reference the current value of another element's attributes. An expression syntax is created to allow the attribute values of elements to be dynamic. With expressions, attribute values can be dependent on the real-time values of other attributes in the DOM. This syntax is intended to be simpler to use than XPath and ECMAScript, and to provide a subset of their most commonly used features.

[0113] In one embodiment of an expression syntax, expressions are denoted by the %% characters. Whatever is contained with the % characters gets evaluated. The basic unit of reference is elementIDattributeName. For example, %myRectanglewidth% would be resolved to the numeric value of the width attribute of the element //.idmyRectangle (as denoted with the XPath expression). This syntax is therefore intended to be used in documents where elements have unique ID's. Note that the attributeName can have a namespace prefix for any namespace declared in the document.

[0114] Preferably, the following unit pattern is used for the expression syntax:

[0115] elementIDattributeNameelementIDnameSpace:attributeName

[0116] Some behaviors, like loadXML, can create document fragments. These are named at the time of creation and can be referred to within %% expressions, as follows:

[0117] docID.elementIDnameSpace:attributeName

[0118] Special attribute extensions include a bounding box, CDATA (the text between the opening and closing tags, e.g. <text> This is the CDATA</text>), and event attributes. The bounding box extensions include the following:

[0119] elementIDbbox.x: returns the x-coordinate of the element's bounding box (i.e. the left)

[0120] elementIDbbox.y: returns the y-coordinate of the element's bounding box (i.e. the top)

[0121] elementIDbbox.width: returns the width of the element's bounding box

[0122] elementIDbbox.height: returns the height of the element's bounding box

[0123] A CDATA extension includes:

[0124] elementIDcdata: returns the text content of the element

[0125] Event Attribute extensions included the following:

[0126] event.type: returns the type of event that triggered the behavior (e.g. mouseover, SVGResize, keypress, etc.)

[0127] event.targetNodeName: returns the nodeName of the element that was the target of the event that triggered the behavior

[0128] event.targetID: returns the id attribute of the element that was the target of the event that triggered the behavior

[0129] event.currentTargetNodeName: returns the nodeName of the element that observed the event that triggered the behavior

[0130] event.currentTargetID: returns the id attribute of the element that observed the event that triggered the behavior

[0131] event.shiftKey: returns true if the Shift-key is pressed, false otherwise.

[0132] event.ctrlKey: returns true if the Ctrl-key is pressed, false otherwise.

[0133] event.keyCode: returns the keyCode attribute of the keydown or keyup event that triggered the behavior.

[0134] event.keyID: returns the key identifiera string representation of the keyCode attribute of the keydown or keyup event that triggered the behavior (e.g. Space, Enter, a).

[0135] event.charCode: returns the charCode attribute of the keypress event that triggered the behavior.

[0136] event.char: returns the string representation of the charCode attribute of the keypress event that triggered the behavior (e.g. A or a).

[0137] The real event object has target and currentTarget attributes, which are node objects. Since these would only be useful in a scripting environment, the virtual event attributes targetNodeName, targetID, currentTargetNodeName and currentTargetID are provided.

[0138] A keyCode event attribute may be automatically generated in response to the keydown and keyup events. For ease of authoring, dSVG offers a virtual event attribute called keyID, which is a string identifier for the various keys. These keyID's resemble, as closely as possible, the key identifiers listed in the W3C Working Draft of the DOM Level 3 Events Specification (http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/keyset.html).

[0139] An attribute consists of constant string data concatenated with evaluated expressions delimited by % symbols (a double %% acts as an escape). For example:

[0140] attributeconstant_one% expression_one %constant_two% expression_two %constant_three

[0141] Each resolution expects an expression of the form:

[0142] % complex_expression %

[0143] where complex expression can be of the form:

[0144] % simple_expression % or:

[0145] % simple_expression (complex_expression) simple_expression %

[0146] Parentheses are resolved from innermost to outermost. Note that open parentheses require leading whitespace to distinguish them from functions.

[0147] An example of a simple expression is:

[0148] simple_expressionstring, Unit_Pattern, function, variable (OpCode string, Unit_Pattern, function, variable)*

[0149] An example of a string is:

[0150] stringsome string data resolves to some string data

[0151] An example of a function is:

[0152] functionfunctionName(params): resolves to a function return value

[0153] The following ECMA math functions are available:

[0154] abs; acos; asin; atan; atan2; ceil; cos; exp; floor; log; max; min; pow; random; sin; sqrt; and tan.

[0155] Other available functions are:

[0156] factorial;

[0157] doublefactorial;

[0158] gcd (greatest common divisor);

[0159] ln;

[0160] log10;

[0161] if(boolean expression, if_true_expression, if_false_expression);

[0162] substring(string, index_start, index_end); and

[0163] length(string).

[0164] An example of a variable is:

[0165] variable (form: $variableName)% expression %

[0166] Variables refer to variable elements and are intended as a convenient way of building and (re)using complex expressions, or simply for storage. It is the author's responsibility to not create self referential variables or circular variable references.

[0167] Operation codes (OpCodes) include:

[0168] : addition

[0169] : subtraction

[0170] *: multiplication

[0171] /: division

[0172] ,: list separator (ie. for parameters)boolean equals

[0173] : boolean equals

[0174] >: boolean greater than or equal to

[0175] <: boolean less than or equal to

[0176] : boolean not equal to

[0177] Expressions using opcodes resolve any Unit_Patterns, functions, variables and strings and then follow standard ecma expression rules.

[0178] Syntax Expression Example 1

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:xlinkhttp://www.w3.org/1999/xlink
xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG height410px
width744px onloadinit(evt) viewBox0 0 744 410>
<script typetext/ecmascript xlink:hrefdsvg/dSVG.js/>
<script typetext/ecmascript xlink:hrefdsvg/baseUI.js/>
<script typetext/ecmascript xlink:hrefdsvg/constraint.js/>
<script typetext/ecmascript xlink:hrefdsvg/focus.js/>
<script typetext/ecmascript xlink:hrefdsvg/setAttribute.js/>
<script typetext/ecmascript xlink:hrefdsvg/setStyle.js/>
<script typetext/ecmascript xlink:hrefdsvg/setTransform.js/>
<-- template -->
<rect height40 width744 y0 x0 fill5f86B1 idtitle_rect/>
<text y25 x20 font-weightbold font-size18 fillwhite
idtext_1>dSVG sample behavior: focus - with added attributes focusGroup and
focus</text>
<text y365 x20 font-size12 idcontent>Content of file: dsvg:focus,
dsvg:setTransform, dsvg:setAttribute, dsvg:setStyle, (added attributes dsvg:focus,
dsvg:focusGroup)</text>
<text y380 x20 font-size12 idexpected>The dsvg:focusGroup
attribute adds the ability to store the ID of similar type elements that are assigned to that
group.</text>
<text y395 x20 font-size12 iddepend>Default focus can be given to
an element (red circle above) by adding the dsvg:focus attribute to that element.</text>
<line y2340 x2744 y1340 x10 stroke-width2 stroke5f86B1
fill5f86B1 idbottom_line/>
<-- adding behavior -->
<text y250 x20 font-size12 iddesc>The red, blue, green circles are
part of the focusGroup. The orange circle is not.</text>
<text y150 x200 font-size12 iddesc_2>Click on the red, green and
blue circles to set focus.</text>
<text y170 x200 font-size12 iddesc_3>Hover over the red, green
and blue text elements to set focus.</text>
<dsvg:focus elementlDredCircle eventonclick idcircleGroup>
<dsvg:setTransform scale1.2 vAlignmiddle hAlignmiddle
absolutetrue elementID%circleGroupelementID%/>
<dsvg:setTransform scale1 vAlignmiddle hAlignmiddle
absolutetrue elementID%circleGrouppreviousID%/>
<dsvg:setAttribute value%(circleGroupelementID)fill%Text
attributeelementID elementIDtextGroup/>
</dsvg:focus>
<dsvg:focus eventonmouseover idtextGroup>
<dsvg:setStyle value%(textGroupelementID)cdata%
propertyfill elementID%textGroupelementID%/>
<dsvg:setStyle valueblack propertyfill
elementID%textGrouppreviousID%/>
<dsvg:setAttribute value%(textGroupelementID)cdata%Circle
attributeelementID elementIDcircleGroup/>
</dsvg:focus>
<circle dsvg:focustrue dsvg:focusGroupcircleGroup r30 cy100
cx50 fillred idredCircle/>
<circle dsvg:focusGroupcircleGroup r30 cy200 cx50 fillblue
idblueCircle/>
<circle dsvg:focusGroupcircleGroup r30 cy100 cx150 fillgreen
idgreenCircle/>
<circle r30 cy200 cx150 fillorange idorangeCircle/>
<text dsvg:focustrue dsvg:focusGrouptextGroup y80 x200
idredText>red</text>
<text dsvg:focusGrouptextGroup y80 x250 idblueText>blue</text>
<text dsvg:focusGrouptextGroup y80 x300
idgreenText>green</text>
<text y80 x350>orange</text>
</svg>

[0179] Hovering the mouse over the text element with idblueText causes the behaviors within the second focus element to be run. When the first setStyle behavior is run, its value attribute, which is equal to:

[0180] %(textGroupelementID)cdata%

[0181] resolves to:

[0182] %blueTextcdata%

[0183] which then further resolves to:

[0184] blue

[0185] Syntax Expression Example 2

<dsvg:button xlink:hrefdsvg/skinButton_Windows.svgskinButton autoScaletrue
disabledfalse selectedfalse togglefalse height18
width100 y70 x80
labelEvaluate idbutton1> <dsvg:alert message%button1label
false, is selected, is not
selected) %/></dsvg:button>

[0186] Pushing the button will run the alert behavior. Its message attribute, which is equal to:

[0187] message%button1labelbuttonif(button1selectedfalse, is selected, is not selected)

[0188] which resolves to:

[0189] button1labelbuttonif(false, is selected, is not selected)

[0190] which further resolves to:

[0191] Evaluate button is selected

[0192] The expression syntax allows a user to refer to real-time values of any attribute of any element in any accessible document or documentFragment easily without a complex syntax like XPath and without script. It also allows a user to manipulate them with mathematical operators and functions, as well as to concatenate them with strings. For instance, if a user had a circle element with idmyCircle and a dSVG textBox element with idmyTextBox, the user could set the circle's fill colour to be the value of the textbox as follows: <dsvg:setAttribute elementIDmyCircle attributefill value%myTextBoxvalue%/>.

[0193] FIG. 9 shows an example of a method of creating an element for controlling user interface features of a web application (210) in accordance with the UI control system 20. The method (210) begins with categorising low level UI controls into abstractions or fundamental core UI control groupings (211). Next, common attributes of a core UI control grouping are determined (212). Next, other attributes 25 of the core UI control grouping are determined (213). Next, a skin template for the core UI control grouping is created (214). Next, a core UI control element 22 having the common attributes 24 and 26, other attributes 25 is create along with a skin template 27 of the UI control grouping (215). The method is done (216).

[0194] FIG. 10 shows an example of a method of creating a plurality of elements for controlling user interface features of a web application (220) in accordance with the UI control system 20. The method (220) begins with organizing low level UI control elements 22 into groupings of similar UI control elements (221). Next, core UI control names are designated to the groupings (222). Next, variations of a grouping are analyzed to determine common attributes of the grouping (223). A list of common attributes used to describe the variations is compiled (224). Next, fundamental states of the core UI control grouping are determined (225). These fundamental states include different appearances that supply the intrinsic behavior of the core UI control (e.g., a UI control in a disabled state does nothing when clicked upon). The fundamental states include up, down, hover, hit, focusUP, focusDown, disabledUp and disabledDown. Once the fundamental states are determined (225), a method of allowing for absolute positioning of UI controls is determined (226). For example, providing x and y co-ordinates. Next, a method of allowing for absolute customization of appearance of the core UI control is determined (227), so that the appearance of the UI controls is in no way determined by the viewer or by the script that creates the UI controls. This step (227) goes beyond a simple modification of styling properties, which would allow you to specify the UI control's fill-colour or stroke-colour, for instance. Instead, the appearance for each possible state is defined within a skin template, whose location is defined by the xlink:href attribute, in the same manner in which the xlink:href is typically used within regular SVG markup (e.g., xlink:hrefdsvg/skinButton_Default.svgskinButton means that the skin template is an element whose id attribute is skinButton within the file skinbutton_Default.svg within the dsvg directory). Within the skin template 27, a g element (group container element) can exist for each possible state, within which any SVG markup is allowed (note that if the UI control system 20 is used within an SVG viewer, the skin template must contain SVG markup; if the UI control system 10 is used within a different viewer, the markup within the skin template must conform to the markup that the viewer expects). Thus the UI control's back-end (the script object, with data and function members) has no pre-conceived notions of what the UI control actually looks like for its various states. This poses problems for resizing the UI controls based on the width and height attributes, however. It is a simple matter to compare the UI control's width and height with the desired width and height, and from that calculate the scaling that is required in the x- and y-directions, and then apply those scale factors to the UI control's visual front-end (a modified version of the skin template) via a transformation (in SVG, using the transform attribute). But that causes the UI control to not only change dimensions, but it also stretches or squishes all the visual elements and changes their absolute positions with respect to one anotherthe label may be stretched or squished and may be further from or closer to the UI control than originally intended, the stroke-width's may be thicker or thinner, the button in a comboBox, may be stretched, etc. The solution is to give the designer the capability of defining the constraints, directly in the skin template, that will provide the detailed information needed to intelligently resize the UI control. For example, one might specify that the label always remain unscaled and that its position always be 3 pixels above the UI control, or that the the stroke-width always be equal to 1, or that the button of a comboBox always has its width automatically adjusted so as to preserve its original aspect ratio.

[0195] Even if instead of applying the scale factors to the UI control via a transformation, the scale factors were instead used to directly modify all of the coordinates for all of the various types of elements used for the UI control's appearance (e.g., rect, circle, path, line, polyline, etc.), that could still result in some of the same problems. For instance, the designer might intend for the label's position and/or size to scale or not. Thus the constraints must still be defined within the skin template. Once all of the above determinations have been performed, other attributes 25 that the core UI control element needs are determined (228). A core UI control element 22 is then created. A namespace is assigned to a core UI control element 22 pursuant to a naming convention (229). Next the common attributes 24, of the UI control grouping are assigned to the core UI control element 22 (230). The other attributes 25 of the UI control grouping are then assigned to the core UI control element 22 (231). Finally, the skin template reference 26 is assigned to the core UI control element 22 (232). The skin template 27 comprises descriptions of the visual appearance of each state for the UI control. The set of instructions (i.e., the script) 28 that creates the UI control's back-end (i.e., the object in memory with data and function members, which determine how to construct the UI control using the skin template 27, what intrinsic behaviors to exhibit and how to interact with the user) are not directly associated to the UI control element 22, but rather are indirectly associated to the UI control element 22 via the initialization function (i.e., the UI control element 22 does not actually reference the script function 28 or the script file 28 that creates and controls the UI control). The core UI control element's 22 set of instructions (script) 28 may be stored in an independent file. Once all core UI control elements 22 have been created (233), the method is done (234). Other steps may be added to the method (220). Default settings may be initiated for the core UI control elements 22, if desired.

[0196] There are many advantages to the UI control system 20. The UI control system 20 encompasses general UI controls desired to build web applications. The UI control system 20 allows for absolute positioning, absolute control of the appearance, and may easily be hooked up to actions, defined via markup or script functions, that affect any element in a DOM. The UI control system 20 may be used for forms. However, the control system 20 is not tied to a model specifically intended for forms (i.e., does not force the author to jump through hoops to create an application which does not use forms).

[0197] The UI control system 20 assists web designers with no programming skills to create dynamic, interactive web applications. It also aids experienced programmers to create dynamic, interactive web applications much more easily and rapidly. Because the UI control system 20 involves an XML markup language (as opposed to just script functions), the attributes and data and even the elements themselves can be made to be data-driven at run-time, using (at design-time) existing or new software that allows one to visually map input XML markup to output XML markup, resulting in an extensible stylesheet language transformation (XSLT) code (or any other language useful for XML transformations) which will actually modify the UI control elements 20 based on the input XML data/markup.

[0198] The UI control system 20 can also be natively-implemented, accessing the exposed DOM API's in the same manner as the script implementation. A native implementation could be much faster because unlike script, which gets interpreted at run-time, native code (e.g. C or C) gets interpreted at compile time and gets optimized by the compiler. The natively-implemented UI control system 20 could also access any unexposed, lower-level object model API's directly, rather than the exposed higher-level DOM API's, which could further improve performance. If natively implemented, the amount of data needed to be transferred may be greatly reduced, since there is no script that needs to be transmitted, which is especially beneficial for wireless devices with low bandwidth and small memory. Using a markup language for the UI control elements 22 is also beneficial because it allows for the possibility of further reducing the file size by creating a binary version of the markup language that employs opcodes-predetermined arrangements of bits (1's and 0's) that correspond to particular element names and attributes. Unlike textual markup, which must be parsed (compared to predetermine strings/text to establish the meaning of the text) in order to create the DOM, binary opcodes can be compared to identical binary opcodes, which is much faster than string comparisons, in order to build the DOM much faster.

[0199] The UI control system 20 according to the present invention may be implemented by any hardware, software or a combination of hardware and software having the above described functions. The software code, either in its entirety or a part thereof, may be stored in a computer readable memory. Further, a computer data signal representing the software code which may be embedded in a carrier wave may be transmitted via a communication network. Such a computer readable memory and a computer data signal are also within the scope of the present invention, as well as the hardware, software and the combination thereof.

[0200] While particular embodiments of the present invention have been shown and described, changes and modifications may be made to such embodiments without departing from the true scope of the invention.

[0201] List of UI Control Elements, Attributes, and Skin Templates

[0202] Some examples of UI control elements 22, common attributes 24 and 26, skin templates 27 and examples of skins, in accordance with the UI control system 20, are provided below. Other UI control elements, attributes and skins may be created. The provided UI control elements, attributes and skins are examples of one implementation of a DOM manipulation markup language.

[0203] Attributes Common to All UI Controls (24 and 26)<

<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>

[0204] idname

[0205] Standard XML attribute for assigning a unique name to an element. Refer to the Extensible Markup Language (XML) 1.0 Recommendation XML10.

[0206] label<string>

[0207] The text associated with the UI control, the position of which is determined by the skin, unless overridden by the labelX and labelY attributes.

[0208] x<coordinate>

[0209] The x-axis coordinate of the side of the UI control, which has the smaller x-axis coordinate value in the current user coordinate system. Usually, this means the left side.

[0210] If the attribute is not specified, the effect is as if a value of 0 were specified.

[0211] y<coordinate>

[0212] The y-axis coordinate of the side of the UI control, which has the smaller y-axis coordinate value in the current user coordinate system. Usually, this means the top.

[0213] If the attribute is not specified, the effect is as if a value of 0 were specified.

[0214] width<length>

[0215] The width of the UI control.

[0216] If the attribute is not specified, the width is determined from the skin.

[0217] A negative value is an error. A value of zero disables rendering of the control.

[0218] height<length>

[0219] The height of the UI control.

[0220] If the attribute is not specified, the height is determined from the skin.

[0221] A negative value is an error. A value of zero disables rendering of the control.

[0222] preserveAspectRatio(truefalse)

[0223] If true, and width or height is supplied, the other dimension is automatically calculated so as to preserve the UI control's aspect ratio.

[0224] If both width and height are supplied, this attribute is ignored.

[0225] If the attribute is not specified, it is assumed to be false.

[0226] xlink:href<uri>

[0227] A reference to the skin's parent element, stored either internally in the <defs> block, or in an external file.

[0228] If the attribute is not specified, the control is not rendered.

[0229] labelX<coordinate>

[0230] The x-axis coordinate of the side of the label, which has the smaller x-axis coordinate value in the current user coordinate system (usually the left side), relative to the (x,y) coordinates of the UI control.

[0231] If the attribute is not specified, the label's x-position is determined by the skin.

[0232] labelY<coordinate>

[0233] The y-axis coordinate of the side of the label, which has the smaller y-axis coordinate value in the current user coordinate system (usually the top), relative to the (x,y) coordinates of the UI control.

[0234] If the attribute is not specified, the label's y-position is determined by the skin.

[0235] disabled(truefalse)

[0236] If true, the UI control is set to its disabled state and cannot be used.

[0237] autoScale(truefalse)

[0238] If true, the UI control is scaled to account for the difference between the transforms on the main document and the skin document, due to the viewBox and preserveAspectRatio attributes on each document's root svg element. The resulting UI control will appear exactly the same size in the main document as it appeared in the skin document.

[0239] stateHovername

[0240] The ID of the UI control's child element state, which refers to a skin to be used for the hover state's appearance.

[0241] If the attribute is not specified, the skin's default hover state appearance is used.

[0242] stateFocusname

[0243] The ID of the UI control's child element state, which refers to a skin to be used for the focus state's appearance.

[0244] If the attribute is not specified, the skin's default focus state appearance is used.

[0245] state_focus_upname

[0246] Specifies the ID of the UI control's <state> child element, to override the appearance of the focus_up state, as defined in the skin.

[0247] state_focus_downname

[0248] Specifies the ID of the UI control's <state> child element, to override the appearance of the focus_down state, as defined in the skin.

[0249] stateUpname

[0250] The ID of the UI control's child element state, which refers to a skin to be used for the up state's appearance.

[0251] If the attribute is not specified, the skin's default up state appearance is used.

[0252] stateDownname

[0253] The ID of the UI control's child element state, which refers to a skin to be used for the down state's appearance.

[0254] If the attribute is not specified, the skin's default down state appearance is used.

[0255] state_hitname

[0256] Specifies the ID of the UI control's <state> child element, to override the appearance of the hit state, as defined in the skin.

[0257] stateDisabledname

[0258] The ID of the UI control's child element state, which refers to a skin to be used for the disabled state's appearance.

[0259] If the attribute is not specified, the skin's default up state appearance is used.

[0260] state_disabled upname

[0261] Specifies the ID of the UI control's <state> child element, to override the appearance of the disabled_up state, as defined in the skin.

[0262] state_disabled_downname

[0263] Specifies the ID of the UI control's <state> child element, to override the appearance of the disabled_down state, as defined in the skin.

[0264] UI Control Elements 22

[0265] The aggregate Element

[0266] The aggregate element defines a container for other SVG and dSVG elements. It is used to create custom controls, often composed of other UI controls, which can be easily inserted into any document. Any child variable elements are considered to be properties of the aggregate. Any child action elements are considered to be methods of the aggregate. Properties and methods are accessible via the dSVG expression syntax.

	<ENTITY % aggregateExt >
	<ELEMENT dsvg:aggregate (dsvg:state%behaviors;)*>
	<ATTLIST dsvg:aggregate
	%stdDSVGAttrs;
	%stdUIAttrs;
	viewBox%ViewBoxSpec.datatypeIMPLIED>

[0267] Attribute Definitions:

[0268] viewBox<string>

[0269] The same as the viewBox attribute in the SVG specification. A list of four numbers <min-x>, <min-y>, <width> and <height>, separated by whitespace and/or a comma, which specify a rectangle in user space that should be mapped to the bounds of the viewport established by the given element, taking into account the preserveAspectRatio attribute. If specified, an additional transformation is applied to all descendants of the given element to achieve the specified effect.

[0270] FIG. 11 shows a screen shot of an example of the use of an aggregate element. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG20
xmlns:xlinkhttp://www.w3.org/1999/xlink height450 width744
onloadinit(evt) viewBox0 0 744 450>
<script typetext/ecmascript xlink:hrefdSVG20/dSVG.js/>
<script typetext/ecmascript xlink:hrefdSVG20/baseUI.js/>
<script typetext/ecmascript xlink:hrefdSVG20/constraint.js/>
<script typetext/ecmascript xlink:hrefdSVG20/window.js/>
<script typetext/ecmascript xlink:hrefdSVG20/windowBase.js/>
<script typetext/ecmascript xlink:hrefdSVG20/button.js/>
<script typetext/ecmascript xlink:hrefdSVG20/scrollbar.js/>
<script typetext/ecmascript xlink:hrefdSVG20/slider.js/>
<script typetext/ecmascript xlink:hrefdSVG20/attributeDrag.js/>
<script typetext/ecmascript xlink:hrefdSVG20/aggregate.js/>
<script typetext/ecmascript xlink:hrefdSVG20/contextMenu.js/>
<script typetext/ecmascript xlink:hrefdSVG20/listbox.js/>
<script typetext/ecmascript xlink:hrefdSVG20/combobox.js/>
<script typetext/ecmascript xlink:hrefdSVG20/textbox.js/>
<script typetext/ecmascript xlink:hrefdSVG20/alert.js/>
<script typetext/ecmascript xlink:hrefdSVG20/setAttribute.js/>
<script typetext/ecmascript xlink:hrefdSVG20/run.js/>
<-- Adding Template -->
<g idtemplate>
<rect height40 width744 y0 x0 fill5f86B1
idrect_Title/>
<text y25 x20 font-weightbold font-size18 fillwhite
idTITLE>dSVG sample: Aggregate element
</text>
<line y2350 x2744 y1350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
<text y370 x20 font-size12 iddefaut_ex>The aggregate
element defines a top-level container element
</text>
<text y390 x20 font-size12 idsmall_ex>In this sample, the
buttons on the left and the blue rectangle are in stateGroup a
</text>
<text y405 x20 font-size12 idsmall_ex2>
and the buttons on the right and the red rectangle are in
stateGroup b
</text>
<text y425 x20 font-size12 idsmall_ex3>
The relative paths button drills into the alert statements
inside itself to demonstrate use of this keyword
</text>
<text y440 x20 font-size12 idsmall_ex4>
and into the fills of rectangles foobar and foobar2 to
demonstrate use of aggregate keyword.
</text>
</g>
<-- adding controls -->
<dsvg:alert idone messageoutside aggregate />
<rect idfoobar x2 y70 width5 height5 fillgreen /><text
y75 x10 idtext1 >idfoobar</text>
<dsvg:button xlink:hrefdSVG20/skinButton_Windows.svgskinButton
autoScaletrue height18 width100 y70 x420 labelSet Prop Yellow
idbutton_1>
<dsvg:setAttribute elementID%MyAggregate/Fill1% attributevalue
valueyellow />
</dsvg:button>
<dsvg:button xlink:hrefdSVG20/skinButton_Windows.svgskinButton
autoScaletrue height18 width100 y100 x420 labelSet Prop Red
idbutton_1>
<dsvg:setAttribute elementID%MyAggregate/Fill1% attributevalue
valuered />
</dsvg:button>
<dsvg:aggregate autoScaletrue height200 width400 y50 x90
idMyAggregate>
<dsvg:variable idFill1 nameFill1 valueblue>
<dsvg:action idchangeFill>
<dsvg:setAttribute elementID%thisid%Fill
attributefill value%this/Fill1value% />
</dsvg:action>
</dsvg:variable>
<rect idfoobar x35 y15 width5 height5 fillblue /><text
y20 x45 idtext1 >idfoobar</text>
<rect idfoobar2 x35 y45 width5 height5 fillred /><text
y50 x45 idtext1 >idfoobar2</text>
<rect x5 y5 width310 height275 opacity0.3
idMyAggregateFill fillgreen />
<text y120 x120 idtext1 >AGGREGATE</text>
<text y190 x18 idtext2 dsvg:stateGroupa>State Group
A</text>
<rect idstateABackGround x8 y198 width104 height75
fillblue opacity0.5 dsvg:stateGroupa/>
<dsvg:button dsvg:stateGroupa
xlink:hrefdSVG20/skinButton_Windows.svgskinButton autoScaletrue
height18 width100 y200 x10 labelButton idbutton_1><dsvg:alert
idstateOne messageState A 1 /></dsvg:button>
<dsvg:button dsvg:stateGroupa
xlink:hrefdSVG20/skinButton_Windows.svgskinButton autoScaletrue
height18 width100 y250 x10 labelButton idbutton_2><dsvg:alert
idstateTwo messageState A 2 /></dsvg:button>
<text y225 x115 idtext2 dsvg:stateGroupb>click state
group</text>
<text y240 x125 idtext2 dsvg:stateGroupb>control or
bg</text>
<text y255 x125 idtext2 dsvg:stateGroupb>to set
focus</text>
<text y190 x218 idtext2 dsvg:stateGroupb>State Group
B</text>
<rect idstateBBackGround x208 y198 width104 height75
fillred opacity0.5 dsvg:stateGroupb/>
<dsvg:button dsvg:stateGroupb
xlink:hrefdSVG20/skinButton_Windows.svgskinButton autoScaletrue
height18 width 100 y200 x210 labelButton idbutton_1><dsvg:alert
idstateThree messageState B 1 /></dsvg:button>
<dsvg:button dsvg:stateGroupb
xlink:hrefdSVG20/skinButton_Windows.svgskinButton autoScaletrue
height18 width100 y250 x210 labelButton idbutton_2><dsvg:alert
idstateFour messageState B 2 /></dsvg:button>
<dsvg:alert idone messageinside aggregate />
<dsvg:button xlink:hrefdsvg20/skinButton_Windows.svgskinButton
y20 x140 labelRelative Paths idbutton>
<dsvg:alert idone messageinside button (one) />
<dsvg:alert idtwo messageinside button (two) />
<dsvg:alert idthree messageTHIS/onemessage: %
this/onemessage % />
<dsvg:alert idfour messageTHIS/twomessage: %
this/twomessage % />
<dsvg:alert idfive
messageAGGREGATE/foobarfill % aggregate/foobarfill % />
<dsvg:alert idsix
messageAGGREGATE/foobar2fill % aggregate/foobar2fill % />
<dsvg:alert idseven messageTHISx: % thisx %
/>
<dsvg:alert ideight messageAGGREGATEx: %
aggregatex % />
</dsvg:button>
</dsvg:aggregate>
</svg>

[0271] The button Element

[0272] 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 >

[0273] Attribute Definitions:

[0274] toggle(truefalse)

[0275] Specifies whether the button is a toggle (i.e. sticky) button, meaning that it toggles between up and down states when clicked on. A checkbox has toggletrue.

[0276] If the attribute is not specified, the default is false.

[0277] group<string>

[0278] The name of the radio group that the button belongs to.

[0279] If the attribute is specified, the button behaves as a radio button, in which only one of the buttons associated with this radioGroup can be checked at a time.

[0280] If the attribute is not specified, the button behaves as either a push button or a toggle button.

[0281] selected(truefalse)

[0282] Specifies the initial state of the button as being down/checked (true) or up/unchecked (false). This attribute is automatically updated to reflect the current state of the control whenever the user clicks on the button, so that its state can be referenced externally.

[0283] If the attribute is not specified, the default is false.

[0284] Skin Template:

<xml version1.0>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG
xmlns:xlinkhttp://www.w3.org/1999/xlink>
<g id>
<g idlabel>
<text x y> </text>
</g>
<g idup displayall/>
<g iddown displaynone/>
<g idhover displaynone/>
<g idfocus displaynone/><g iddisabled
displaynone/>
</g>
</svg>

[0285] FIG. 12 shows several push and toggle buttons of varying sizes, with no associated behaviors. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG11
xmlns:xlinkhttp://www.w3.org/1999/xlink height450px width744px
onloadinit(evt) viewBox0 0 744 450>
<script typetext/ecmascript xlink:hrefdsvg11/dSVG.js/>
<script typetext/ecmascript xlink:hrefdsvg11/baseUI.js/>
<script typetext/ecmascript xlink:hrefdsvg11/constraint.js/>
<script typetext/ecmascript xlink:hrefdsvg11/button.js/>
<-- Adding Template -->
<g idtemplate>
<rect height40 width744 y0 x0 fill5f86B1
idrect_Title/>
<text y25 x20 font-weightbold font-size18 fillwhite id
TITLE>dSVG sample: Button
element</text>
<line y2350 x2744 y1350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
<text y370 x20 font-size12 iddefaut_ex>Default button -
This button has all of its attributes set to default
values.</text>
<text y395 x20 font-size12 idgroup_ex> Grouped buttons -
Buttons can belong to a group. If grouped, and toggletrue, this results in the
functionality of a radio
button.</text>
<text y420 x20 font-size12 idlarge_ex>Small and large
buttons - Change the size of a control by specifying new values for the height and width
attributes.</text>
<text y60 x50 iddefault_text>Default button: (Default
attributes)</text>
<text y60 x350 idgrouped>Grouped buttons: (group one -
buttons will behave with a sticky
state)</text>
<text y160 x50 idsmall>Small button: (h15, w
80)</text>
<text y160 x350 idlarge>Large button: (h50, w
300)</text>
<text y340 x20 font-weightbold font-size10 fillblack 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:hrefdsvg11/skinButton_Windows.svgskinButton
autoScaletrue height18 width100 y70 x50 labelDefault button
iddefault/>
<rect height22 width104 y68 x48 strokered fillnone
idrect_default/>
<dsvg:button xlink:hrefdsvg11/skinButton_Windows.svgskinButton
autoScaletrue groupone height18 width100 y70 x350 labelButton
1 iddefault_g1/>
<dsvg:button xlink:hrefdsvg11/skinButton_Windows.svgskinButton
autoScaletrue groupone height18 width100 y95 x350 labelButton
2 iddefault2_g1/>
<dsvg:button xlink:hrefdsvg11/skinButton_Windows.svgskinButton
autoScaletrue height15 width80 y170 x50 labelSmall button
idsmall_1/>
<rect height19 width84 y168 x48 strokered fillnone
idrect_small/>
<dsvg:button xlink:hrefdsvg11/skinButton_Windows.svgskinButton
autoScaletrue height50 width300 y170 x350 labelLarge button
idlarge_button/>
<rect height54 width304 y168 x348 strokered fillnone
idrect_large/>
</svg>

[0286] The calendar Element

[0287] The calendar element defines a calendar control, displaying the specified month of the specified year.

[0288] Attribute Definitions:

[0289] yearinteger

[0290] Specifies the year for the calendar to display.

[0291] month integer

[0292] Specifies the month for the calendar to display.

[0293] selectable(allweekdaysweekends)

[0294] Specifies what days can be selected by the user.

[0295] multiSelect(truefalse)

[0296] Specifies whether the user can select multiple days (true) or not (false).

[0297] The checkbox Element

[0298] 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 >

[0299] Attribute Definitions:

[0300] selected(truefalse)

[0301] Specifies the initial state of the checkbox as being checked (true) or unchecked (false). This attribute is automatically updated to reflect the current state of the control whenever the user clicks on the checkbox, so that its state can be referenced externally.

[0302] If the attribute is not specified, the default is false.

[0303] Skin Template:

	<xml version1.0>
	<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG
	xmlns:xlinkhttp://www.w3.org/1999/xlink>
	<g id>
	<g idlabel>
	<text x y> </text>
	</g>
	<g idup displayall/>
	<g iddown displaynone/>
	<g idhover displaynone/>
	<g idfocus displaynone/><g iddisabled
	displaynone/>
	</g>
	</svg>

[0304] FIG. 13 shows several checkBoxes of various sizes, with no associated behaviors. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG11
xmlns:xlinkhttp://www.w3.org/1999/xlink height450px width744px
onloadinit(evt) viewBox0 0 744 450>
<script typetext/ecmascript xlink:hrefdsvg11/dSVG.js/>
<script typetext/ecmascript xlink:hrefdsvg11/baseUI.js/>
<script typetext/ecmascript xlink:hrefdsvg11/constraint.js/>
<script typetext/ecmascript xlink:hrefdsvg11/button.js/>
<-- Adding Template -->
<g idtemplate>
<rect height40 width744 y0 x0 fill5f86B1
idrect_Title/>
<text y25 x20 font-weightbold font-size18 fillwhite id
TITLE>dSVG sample: CheckBox
element</text>
<line y2350 x2744 y1350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
<text y370 x20 font-size12 id defaut_ex>Default check box -
When you select the check box, it toggles between true (selected) and false
(deselected).</text>
<text y395 x20 font-size12 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 y340 x20 font-weightbold font-size10 fillblack 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:hrefdsvg11/skinCheckbox_Default.svgskinCheckBox
autoScaletrue height12 width12 y70 x50 labelDefault check box:
(h12, w12) iddefault/>
<rect height16 width16 y68 x48 strokered fillnone/>
<dsvg:checkBox xlink:hrefdsvg11/skinCheckbox_Default.svgskinCheckBox
autoScaletrue height10 width10 y160 x50 labelSmall check box:
(h10, w10) idsmall/>
<rect height14 width14 y158 x48 strokered fillnone/>
<dsvg:checkBox xlink:hrefdsvg11/skinCheckbox_Default.svgskinCheckBox
autoScaletrue height40 width40 y250 x50 labelLarge check box:
(h40, w40) idlarge/>
<rect height44 width44 y248 x48 strokered fillnone/>
</svg>

[0305] The comboBox Element

[0306] 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>

[0307] Attribute Definitions:

[0308] editable(truefalse)

[0309] Specifies whether the comboBox is editable (true) or not (false). If editable, typing text and pressing Enter results in a new item element being created as a child of the comboBox element. Its label attribute gets set to the text just entered, which results in the new item being displayed at the bottom of the list.

[0310] If the attribute is not specified, the default is true.

[0311] rows<integer>

[0312] Specifies the number of rows to be displayed in the dropdown list.

[0313] If the attribute is not specified, the dropdown list will show all items, if possible.

[0314] value<string>

[0315] The value of the currently selected item's value attribute, which is displayed.

[0316] If the attribute is specified, the item whose value attribute matches the comboBox element's value attribute is the initially-selected item.

[0317] If the attribute is not specified, the item whose data attribute matches the comboBox element's name attribute is the initially-selected item.

[0318] If neither value nor name is specified, and editable is set to false, the first item in the list is the initially-selected item.

[0319] If neither value nor name is specified, and editable is set to true, there is no initially-selected item.

[0320] data<string>

[0321] The value of the currently selected item's name attribute, which is not displayed.

[0322] If the value attribute is specified, this attribute is not used to specify the initially-selected item.

[0323] If the attribute is specified, and value is not, the item whose name attribute matches the comboBox element's name attribute is the initially-selected item.

[0324] If neither name nor value is specified, and editable is set to false, the first item in the list is the initially-selected item.

[0325] If neither name nor value is specified, and editable is set to true, there is no initially-selected item.

[0326] sort(ascendingdescendingnone)

[0327] The type of sorting to be done on the items in the list.

[0328] If the sort attribute is not specified, the default is none.

[0329] Skin Template (Composite):

<xml version1.0><svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG
xmlns:xlinkhttp://www.w3.org/1999/xlink><g id><use
idTextBoxSkin xlink:href x y/><use idButtonSkin
xlink:href x y/><use idDropDownSkin xlink:href x
y/><g idlabel><text idskinComboBoxDefault_bodyText
x y> </text>
</g>
</g>
</svg>

[0330] FIG. 14 show four comboBoxes of various sizes, with no associated behaviors. In this example, the default combo box has 3 child item elements: Apple, Banana, Grapes. The combo box in this example displays a maximum of 4 items. If the number of items exceeds 4, a scrollbar is enabled. The size of a control is changed by specifying new values for the height and width. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG11
xmlns:xlinkhttp://www.w3.org/1999/xlink height450px width744px
onloadinit(evt) viewBox0 0 744 450>
<script typetext/ecmascript xlink:hrefdsvg11/dSVG.js/>
<script typetext/ecmascript xlink:hrefdsvg11/baseUI.js/>
<script typetext/ecmascript xlink:hrefdsvg11/constraint.js/>
<script typetext/ecmascript xlink:hrefdsvg11/combobox.js/>
<script typetext/ecmascript xlink:hrefdsvg11/textbox.js/>
<script typetext/ecmascript xlink:hrefdsvg11/button.js/>
<script typetext/ecmascript xlink:hrefdsvg11/contextMenu.js/>
<script typetext/ecmascript xlink:hrefdsvg11/slider.js/>
<script typetext/ecmascript xlink:hrefdsvg11/listBox.js/>
<script typetext/ecmascript xlink:hrefdsvg11/scrollbar.js/>
<-- Adding Template -->
<g idtemplate>
<rect height40 width744 y0 x0 fill5f86B1
idrect_Title/>
<text y25 x20 font-weightbold font-size18 fillwhite id
TITLE>dSVG sample: ComboBox element</text>
<line y2350 x2744 y1350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
<text y370 x20 font-size12 iddefaut_ex>Default combo box
- The default combo box has 3 child item elements: Apple, Banana, Grapes.</text>
<text y395 x20 font-size12 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 y420 x20 font-size12 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 y340 x20 font-weightbold font-size10 fillblack 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 selectedfalse
xlink:hrefdsvg11/skinComboBox_Composite.svgskinComboBox autoScaletrue
disabledfalse rows4 height17 width217 y70 x50 label Default
combo box: (default attributes) idcomboBox_default><dsvg:item
valueApple dataplu_1 iditem_1/><dsvg:item valueBanana
dataplu_2 iditem_2/><dsvg:item valueGrapes dataplu_3
iditem_3/>
</dsvg:comboBox>
<rect height21 width221 y68 x48 strokered fillnone
idrect_default/>
<dsvg:comboBox selectedfalse
xlink:hrefdsvg11/skinComboBox_Composite.svgskinComboBox autoScaletrue
disabledfalse editabletrue rows4 height17 width217 y70 x350
labelFixed-size combo box: (rows4) idcomboBox_fixed>
<dsvg:item valueApple dataplu_1 iditem_1>
<dsvg:itemData valuered namecolor/>
<dsvg:itemData value$1.27 nameprice/>
</dsvg:item>
<dsvg:item valueBanana dataplu_2 iditem_2>
<dsvg:itemData valueyellow namecolor/>
<dsvg:itemData value$0.59 nameprice/>
</dsvg:item>
<dsvg:item valueGrapes dataplu_3 iditem_3>
<dsvg:itemData valuepurple namecolor/>
<dsvg:itemData value$2.19 nameprice/>
</dsvg:item>
<dsvg:item valueKiwi dataplu_4 iditem_4>
<dsvg:itemData valuebrown namecolor/>
<dsvg:itemData value$0.89 nameprice/>
</dsvg:item>
<dsvg:item valueOrange dataplu_5 iditem_5>
<dsvg:itemData valueorange namecolor/>
<dsvg:itemData value$1.99 nameprice/>
</dsvg:item>
<dsvg:item valueWatermelon dataplu_6 iditem_6>
<dsvg:itemData valuegreen namecolor/>
<dsvg:itemData value$2.39 nameprice/>
</dsvg:item>
<dsvg:item valueCoconut dataplu_7 iditem_7>
<dsvg:itemData valuebrown namecolor/>
<dsvg:itemData value$3.99 nameprice/>
</dsvg:item>
<dsvg:item valuePeach dataplu_8 iditem_8>
<dsvg:itemData valuepeach namecolor/>
<dsvg:itemData value$2.39 nameprice/>
</dsvg:item>
</dsvg:comboBox>
<dsvg:comboBox selectedfalse
xlink:hrefdsvg11/skinComboBox_Composite.svgskinComboBox autoScaletrue
disabledfalse height16 width80 y180 x50 labelSmall combo box:
(h16, w80) idcomboBox_small><dsvg:item valueApple
dataplu_1iditem_1/> <dsvg:item valueBanana dataplu_2
iditem_2/><dsvg:item valueGrapes dataplu_3 iditem_3/>
</dsvg:comboBox>
<rect height20 width84 y178 x48 strokered fillnone
idrect_small/>
<dsvg:comboBox selectedfalse
xlink:hrefdsvg11/skinComboBox_Composite.svgskinComboBox autoScaletrue
disabledfalse height50 width300 y180 x350 labelLarge combo box:
(h50, w300) idcomboBox_large>21 dsvg:item valueApple
dataplu_1 iditem_1/> <dsvg:item valueBanana dataplu_2
iditem_2/>
</dsvg:comboBox>
<rect height54 width304 y178 x348 strokered fillnone
idrect_large/>
</svg>

[0331] The contextMenu Element

[0332] 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 >

[0333] Attribute Definitions:

[0334] cols<integer>

[0335] The number of columns to be displayed in the contextMenu.

[0336] colSpace<integer>

[0337] The number of user units to separate each column

[0338] value<string>

[0339] The value of the selected item's value attribute, which is displayed.

[0340] data<string>

[0341] The value of the selected item's data attribute, which is not displayed.

[0342] eventSourcename

[0343] The ID of the element that triggered the contextMenu to appear. This attribute gets automatically populated for reference purposes. It should never be set via markup.

[0344] If the attribute is not specified, the default is true.

[0345] sort(ascendingdescendingnone)

[0346] The type of sorting to be done on the items in the list.

[0347] If the sort attribute is not specified, the default is none.

[0348] Skin Template:

<xml version1.0>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG>	<g id>
<g idskinContextMenu_top displayall>	</g>	<g
idskinContextMenu_middle displayall>
<text idlabel x y> </text>	</g>	<g
idskinContextMenu_middle_hover displaynone>	<text
idlabel x y> </text>	</g>	<g
idskinContextMenu_middle_selected displaynone>	<text
idlabel x y> </text>	</g> <g idskinContextMenu_bottom
displayall>
</g>
</g>
</svg>

[0349] FIG. 15 shows a contextMenu associated to a circle, with no associated behaviors. In this example, a right-click within the circle displays the context menu by default. The lists consists of items which can be added directly as child elements of the context menu. The context menu is associated with the circle by adding a contextMenu attribute to the circle which references the context menu. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:xlinkhttp://www.w3.org/1999/xlink
xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG11 height450px
width744px onloadinit(evt) viewBox0 0 744 450>
<script typetext/ecmascript xlink:hrefdsvg11/dSVG.js/>
<script typetext/ecmascript xlink:hrefdsvg11/baseUI.js/>
<script typetext/ecmascript xlink:hrefdsvg11/constraint.js/>
<script typetext/ecmascript xlink:hrefdsvg11/contextMenu.js/>
<script typetext/ecmascript xlink:hrefdsvg11/attributeContextMenu.js/>
<script typetext/ecmascript
xlink:hrefdsvg11/attributeNativeContextMenu.js/>
<script typetext/ecmascript xlink:hrefdsvg11/listbox.js/>
<-- Begin Template-->
<g idtemplate>
<rect height40 width744 y0 x0 fill5f86B1
idrect_Title/>
<text y25 x20 font-weightbold font-size18 fillwhite
idTITLE>dSVG sample: ContextMenu element</text>
<line y2350 x2744 y1350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
<text y370 x20 font-size12 iddefaut_ex>Default context
menu - Right-click within the circle to display the context menu.</text>
<text y395 x20 font-size12 idadditional_ex>The list consists
of items which can be added directly as child elements of the context menu.</text>
<text y420 x20 font-size12 idFinal_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 y60 x20 idregular>Default Context Menu:</text>
<text y60 x150 font-size10 idregular_desc>(default
attributes) - right-click within the circle and the Context Menu should appear.</text>
</g>
<--adding the controls-->
<dsvg:contextMenu
xlink:hrefdsvg11/skinContextMenu_Default.svgskinContextMenu autoScaletrue
labelRed Circle Menu idcontextMenu1>
<dsvg:item valueApple dataplu_1 iditem_1>
<dsvg:itemData valuered namecolor/>
<dsvg:itemData value$1.27 nameprice/>
</dsvg:item>
<dsvg:item valueBanana dataplu_2 iditem_2>
<dsvg:itemData valueyellow namecolor/>
<dsvg:itemData value$0.59 nameprice/>
</dsvg:item>
<dsvg:item valueGrapes dataplu_3 iditem_3>
<dsvg:itemData valuepurple namecolor/>
<dsvg:itemData value$2.19 nameprice/>
</dsvg:item>
<dsvg:item valueKiwi dataplu_4 iditem_4>
<dsvg:itemData valuebrown namecolor/>
<dsvg:itemData value$0.89 nameprice/>
</dsvg:item>
</dsvg:contextMenu>
<circle dsvg:contextMenucontextMenu1 r50 cy130 cx130
stroke-width5 strokedarkblue fill5f86B1 idcircle_blue/>
</svg>

[0350] The date Element

[0351] The date element defines properties for a particular date for its parent calendar control. It must be a child of a calendar element.

[0352] Attribute Definitions:

[0353] idname

[0354] Standard XML attribute for assigning a unique name to an element.

[0355] yearinteger

[0356] Specifies the year for this particular date.

[0357] monthinteger

[0358] Specifies the month for this particular date.

[0359] dayinteger

[0360] Specifies the day for this particular date.

[0361] namestring

[0362] Specifies a hidden string to associate with this particular date (which, unlike id, does not need to be unique). e.g. HOLIDAY.

[0363] selectable(truefalse)

[0364] Specifies whether this particular date is selectable (true) or not (false).

[0365] labelstring

[0366] Specifies the text label to be displayed for this particular date.

[0367] The dialog Element

[0368] The dialog element defines a window container, specifically for the purpose of collecting data which can be accepted or cancelled. It has inherent Accept/OK, Cancel, Help and Info buttons.

[0369] Attribute Definitions:

[0370] showTitle(truefalse)

[0371] Specifies whether to display a titlebar (true) or not (false). If true, the title is obtained from the label attribute.

[0372] showMinimizeButton(truefalse)

[0373] Specifies whether to display the minimize button or not.

[0374] showMaximizeButton(truefalse)

[0375] Specifies whether to display the maximize button or not.

[0376] showCloseButton(truefalse)

[0377] Specifies whether to display the close button or not.

[0378] showAcceptButton(truefalse)

[0379] Specifies whether to display the Accept/OK button or not.

[0380] showCancelButton(truefalse)

[0381] Specifies whether to display the Cancel button or not.

[0382] showHelpButton(truefalse)

[0383] Specifies whether to display the Help button or not.

[0384] showInfoButton(truefalse)

[0385] Specifies whether to display the Information button or not.

[0386] modal(truefalse)

[0387] Specifies whether the window is modal (true) or modeless (false).

[0388] movable(truefalse)

[0389] Specifies whether the window is movable (true) by clicking on the titlebar and dragging, or not (false).

[0390] state(minimizedmaximizednormal)

[0391] Specifies the initial state of the window. If the Minimize or Maximize buttons are pressed, this attribute is automatically updated.

[0392] The frame Element

[0393] The frame element defines a container element.

[0394] Attribute Definitions:

[0395] xlink:href<uri>

[0396] Specifies the document to display within the frame container.

[0397] The item Element

[0398] 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 >

[0399] Attribute Definitions:

[0400] idname

[0401] Standard XML attribute for assigning a unique name to an element.

[0402] value<string>

[0403] The value of the selected item's value attribute, which is displayed.

[0404] data<string>

[0405] The value of the selected item's data attribute, which is not displayed.

[0406] The itemData Element

[0407] 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 >

[0408] Attribute Definitions:

[0409] idname

[0410] Standard XML attribute for assigning a unique name to an element.

[0411] value<string>

[0412] The value of the selected item's value attribute, which is displayed.

[0413] data<string>

[0414] The value of the selected item's data attribute, which is not displayed.

[0415] The listBox Element

[0416] 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 >

[0417] Attribute Definitions:

[0418] rows<integer>

[0419] The number of rows to be displayed in the listBox.

[0420] value<string>

[0421] If an item child element exists with a matching value attribute, that item is considered to be selected. The data attribute is automatically set to match the data attribute of that item element, overriding the existing data attribute, if provided. When an item is selected, this attribute is automatically updated to match the value of the selected item's value attribute. If this attribute is modified, the item with a matching value attribute is selected.

[0422] data<string>

[0423] If an item child element exists with a matching data attribute, and the listView element's value attribute is not provided, that item is considered to be selected. The value attribute is automatically set to match the value attribute of that item element. When an item is selected, this attribute is automatically updated to match the value of the selected item's data attribute. If this attribute is modified, the item with a matching data attribute is selected.

[0424] sort(ascendingdescendingnone)

[0425] The type of sorting to be done on the items in the list.

[0426] If the sort attribute is not specified, the default is none.

[0427] Skin Template:

<xml version1.0><svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG>
<g id><g idskinContextMenu_top displayall>	</g>
<g idskinContextMenu_middle displayall>	</g>	<g
idskinContextMenu_middle_hover displaynone>	</g>	<g
idskinContextMenu_middle_selected displaynone>	</g>	<g
idskinContextMenu_bottom displayall>
</g>
</g>
</svg>

[0428] FIG. 16 show a listBox with three items, with no associated behaviors. In this example, the list box has 3 child items elements by default: Apple, Banana, Grapes. The list box in this example displays a maximum of 4 items. If the number of items exceeds 4, a scrollbar is enabled. The size of a control is changed by specifying new values for the height and width. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG11
xmlns:xlinkhttp://www.w3.org/1999/xlink height450px width744px
onloadinit(evt) viewBox0 0 744 450>
<script typetext/ecmascript xlink:hrefdsvg11/dSVG.js/>
<script typetext/ecmascript xlink:hrefdsvg11/baseUI.js/>
<script typetext/ecmascript xlink:hrefdsvg11/constraint.js/>
<script typetext/ecmascript xlink:hrefdsvg11/listbox.js/>
<script typetext/ecmascript xlink:hrefdsvg11/button.js/>
<script typetext/ecmascript xlink:hrefdsvg11/contextMenu.js/>
<script typetext/ecmascript xlink:hrefdsvg11/scrollbar.js/>
<script typetext/ecmascript xlink:hrefdsvg11/slider.js/><-- Adding
Template -->
<g idtemplate>
<rect height40 width744 y0 x0 fill5f86B1
idrect_Title>
<text y25 x20 font-weightbold font-size18 fillwhite id
TITLE>dSVG sample: ListBox
element</text>
<line y2350 x2744 y1350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
<text y370 x20 font-size12 iddefaut_ex>Default list box -
This list box has 3 child item elements: Apple, Banana, Grapes.
</text>
<text y395 x20 font-size12 idfixed_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 y420 x20 font-size12 idlarge_ex>Small and large list
boxes - Change the size of a control by specifying new values for the height and width.
</text>
<text y340 x20 font-weightbold font-size10 fillblack
idNote>*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:hrefdsvg11/skinListBox_Composite.svgskinListBox
autoScaletrue height60 width198 y70 x50 labelDefault list box:
(default attributes) idlistbox_default>
<dsvg:item valueApple dataplu_1 iditem_1>
</dsvg:item>
<dsvg:item valueBanana dataplu_2 iditem_2>
</dsvg:item>
<dsvg:item valueGrapes dataplu_3 iditem_3>
</dsvg:item>
</dsvg:listBox>
<rect height64 width202 y68 x48 opacity0.5 strokered
fillnone idrect_default/>
<dsvg:listBox xlink:hrefdsvg11/skinListBox_Composite.svgskinListBox
autoScaletrue rows4 height60 width198 y70 x350 labelFixed-size
list box: (rows4) idlistbox_fixed>
<dsvg:item valueApple dataplu_1 iditem_1>
</dsvg:item>
<dsvg:item valueBanana dataplu_2 iditem_2>
</dsvg:item>
<dsvg:item valueGrapes dataplu_3 iditem_3>
</dsvg:item>
<dsvg:item valueKiwi dataplu_4 iditem_4>
</dsvg:item>
<dsvg:item valueOrange dataplu_5 iditem_5>
</dsvg:item>
<dsvg:item valueWatermelon dataplu_6 iditem_6>
</dsvg:item>
<dsvg:item valueCoconut dataplu_7 iditem_7>
</dsvg:item>
<dsvg:item valuePeach dataplu_8 iditem_8>
</dsvg:item>
</dsvg:listBox>
<dsvg:listBox selectedtrue
xlink:hrefdsvg11/skinListBox_Composite.svgskinListBox autoScaletrue
disabledfalse valueval1 rows4 height25 width70 y170 x50
labelSmall list box: (h25, w70) idlistbox_small>
<dsvg:item valueApple dataplu_1 iditem_1>
</dsvg:item>
<dsvg:item valueBanana dataplu_2 iditem_2>
</dsvg:item>
<dsvg:item valueGrapes dataplu_3 iditem_3>
</dsvg:item>
</dsvg:listBox>
<rect height29 width74 y168 x48 opacity0.5 strokered
fillnone idrect_small/>
<dsvg:listBox selectedtrue
xlink:hrefdsvg11/skinListBox_Composite.svgskinListBox autoScaletrue
disabledfalse height80 width300 y170 x350 labelLarge list box:
(h80, w300) idlistbox_large>
<dsvg:item valueApple dataplu_1 iditem_1>
</dsvg:item>
<dsvg:item valueBanana dataplu_2 iditem_2>
</dsvg:item>
<dsvg:item valueGrapes dataplu_3 iditem_3>
</dsvg:item>
</dsvg:listBox>
<rect height84 width304 y168 x348 opacity0.5 strokered
fillnone idrect_large/>
</svg>

[0429] The listView Element

[0430] 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 >

[0431] Attribute Definitions:

[0432] rows<integer>

[0433] The number of rows to be displayed in the listBox.

[0434] cols<integer>

[0435] The number of columns to be displayed in the listBox.

[0436] colSpace<integer>

[0437] The number of user units to separate each column.

[0438] value<string>

[0439] If an item child element exists with a matching value attribute, that item is considered to be selected, in which case the data attribute is automatically set to match the data attribute of that item element, overriding the existing data attribute, if provided. When an item is selected, this attribute is automatically updated to match the value of the selected item's value attribute. If this attribute is modified, the item with a matching value attribute is selected.

[0440] data<string>

[0441] If an item child element exists with a matching data attribute, and the listView element's value attribute is not provided, that item is considered to be selected, in which case the value attribute is automatically set to match the value attribute of that item element. When an item is selected, this attribute is automatically updated to match the value of the selected item's data attribute. If this attribute is modified, the item with a matching data attribute is selected.

[0442] sort<string>

[0443] If an item child element exists with a matching data attribute, and the listView element's value attribute is not provided, that item is considered to be selected, in which case the value attribute is automatically set to match the value attribute of that item element. When an item is selected, this attribute is automatically updated to match the value of the selected item's data attribute. If this attribute is modified, the item with a matching data attribute is selected.

[0444] sort(ascendingdescendingnone)

[0445] The type of sorting to be done on the items in the list.

[0446] If the sort attribute is not specified, the default is none.

[0447] Skin Template:

<xml version1.0><svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG
xmlns:xlinkhttp://www.w3.org/1999/xlink>	<g id>	<use
idMenuSkin xlink:href x y/>	<use idScrollSkin xlink:href
x y/>	<g idlabel> <text id
skinListBox_label x y> </text>
</g>
</g>
</svg>

[0448] FIG. 17 shows a listView with three rows and 3 columns, with no associated behaviors. In this example, the list view has 3 child elements by default: Apple, Banana, Grapes. The list view in this example displays a maximum of 4 items. If the number of items exceeds 4, a scrollbar is enabled. The size of a control is changed by specifying new values for the height and width. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG11
xmlns:xlinkhttp://www.w3.org/1999/xlink height450px width744px
onloadinit(evt) viewBox0 0 744 450>
<script typetext/ecmascript xlink:hrefdsvg11/dSVG.js/>
<script typetext/ecmascript xlink:hrefdsvg11/baseUI.js/>
<script typetext/ecmascript xlink:hrefdsvg11/constraint.js/>
<script typetext/ecmascript xlink:hrefdsvg11/listview.js/>
<script typetext/ecmascript xlink:hrefdsvg11/scrollbar.js/>
<script typetext/ecmascript xlink:hrefdsvg11/listbox.js/>
<script typetext/ecmascript xlink:hrefdsvg11/slider.js/>
<script typetext/ecmascript xlink:hrefdsvg11/button.js/>
<script typetext/ecmascript xlink:hrefdsvg11/contextMenu.js/>
<-- Adding Template -->
<g idtemplate>
<rect height40 width744 y0 x0 fill5f86B1
idrect_Title/>
<text y25 x20 font-weightbold font-size18 fillwhite
idTITLE>dSVG sample: ListView element
</text>
<line y2350 x2744 y1350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
<text y370 x20 font-size12 iddefaut_ex>Default list view -
This list view has 3 child item elements: Apple, Banana, and Orange.
</text>
<text y395 x20 font-size12 idfixed_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 y420 x20 font-size12 idlarge_ex>Small and large list
views - Change the size of the control by specifying new values for the height and width
attributes.
</text>
<text y340 x20 font-weightbold font-size10 fillblack
idNote>*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 selectedfalse
xlink:hrefdsvg11/skinListView_Composite.svgskinListView autoScaletrue
disabledfalse colSpace5;50;130 colsdata;value;price height60 width198
y70 x50 labelDefault list view: (default attributes) iddefault>
<dsvg:item valueApple dataplu_1 iditem_1>
<dsvg:itemData valuered namecolor/>
<dsvg:itemData value$1.27 nameprice/>
</dsvg:item>
<dsvg:item valueBanana dataplu_2 iditem_2>
<dsvg:itemData valueyellow namecolor/>
<dsvg:itemData value$0.59 nameprice/>
</dsvg:item>
<dsvg:item valueOrange dataplu_3 iditem_3>
<dsvg:itemData valueorange namecolor/>
<dsvg:itemData value$1.99 nameprice/>
</dsvg:item>
</dsvg:listView>
<rect height64 width202 y68 x48 strokered fillnone
idrect_default/>
<dsvg:listView selectedfalse
xlink:hrefdsvg11/skinListView_Composite.svgskinListView autoScaletrue
disabledfalse colSpace5;50;130 colsdata;value;price rows4 height60
width198 y70 x270 labelFixed-size list view: (rows4) idfixed>
<dsvg:item valueApple dataplu_1 iditem_1>
<dsvg:itemData valuered namecolor/>
<dsvg:itemData value$1.27 nameprice/>
</dsvg:item>
<dsvg:item valueBanana dataplu_2 iditem_2>
<dsvg:itemData valueyellow namecolor/>
<dsvg:itemData value$0.59 nameprice/>
</dsvg:item>
<dsvg:item valueGrapes dataplu_3 iditem_3>
<dsvg:itemData valuepurple namecolor/>
<dsvg:itemData value$2.19 nameprice/>
</dsvg:item>
<dsvg:item valueKiwi dataplu_4 iditem_4>
<dsvg:itemData valuebrown namecolor/>
<dsvg:itemData value$0.89 nameprice/>
</dsvg:item>
<dsvg:item valueOrange dataplu_5 iditem_5>
<dsvg:itemData valueorange namecolor/>
<dsvg:itemData value$1.99 nameprice/>
</dsvg:item>
<dsvg:item valueWatermelon dataplu_6 iditem_6>
<dsvg:itemData valuegreen namecolor/>
<dsvg:itemData value$2.39 nameprice/>
</dsvg:item>
<dsvg:item valueCoconut dataplu_7 iditem_7>
<dsvg:itemData valuebrown namecolor/>
<dsvg:itemData value$3.99 nameprice/>
</dsvg:item>
<dsvg:item valuePeach dataplu_8 iditem_8>
<dsvg:itemData valuepeach namecolor/>
<dsvg:itemData value$2.39 nameprice/>
</dsvg:item>
<dsvg:item valueMango dataplu_9 iditem_9>
<dsvg:itemData valuedark_red namecolor/>
<dsvg:itemData value$2.09 nameprice/>
</dsvg:item>
</dsvg:listView>
<dsvg:listView selectedfalse
xlink:hrefdsvg11/skinListView_Composite.svgskinListView autoScaletrue
disabledfalse colSpace5;50;130 colsdata;value;color height25 width100
y170 x50 labelSmall list view: (h25, w100) idlistview_small>
<dsvg:item valueGrapes dataplu_1 iditem_1>
<dsvg:itemData valuepurple namecolor/>
<dsvg:itemData value2.19 nameprice/>
</dsvg:item>
<dsvg:item valueKiwi dataplu_2 iditem_2>
<dsvg:itemData valuebrown namecolor/>
<dsvg:itemData value0.89 nameprice/>
</dsvg:item>
<dsvg:item valueStrawberries dataplu_3 iditem_3>
<dsvg:itemData valuepurple namecolor/>
<dsvg:itemData value1.99 nameprice/>
</dsvg:item>
</dsvg:listView>
<rect height29 width104 y168 x48 strokered fillnone
idrect_small/>
<dsvg:listView selectedfalse
xlink:hrefdsvg11/skinListView_Composite.svgskinListView autoScaletrue
disabledfalse colSpace5;50;100;140 colsdata;value;color;price height100
width440 y170 x270 labelLarge 4 column list view; (h100, w440)
idlistview_large>
<dsvg:item valueApple dataplu_1 iditem_1>
<dsvg:itemData valuered namecolor/>
<dsvg:itemData value$1.27 nameprice/>
</dsvg:item>
<dsvg:item valueBanana dataplu_2 iditem_2>
<dsvg:itemData valueyellow namecolor/>
<dsvg:itemData value$0.59 nameprice/>
</dsvg:item>
<dsvg:item valueGrapes dataplu_3 iditem_3>
<dsvg:itemData valuepurple namecolor/>
<dsvg:itemData value$2.19 nameprice/>
</dsvg:item>
<dsvg:listView>
<rect height104 width444 y168 x268 strokered fillnone
idrect_large/>
</svg>

[0449] The menuBar Element

[0450] The menuBar element defines a container for menu items. The expected children are item elements.

[0451] Attribute definitions:

[0452] %standard attributes%

[0453] The standard attributes, such as id, label, etc.

[0454] valuestring

[0455] The value of the currently selected child item element's label attribute. This represents the initial item selected. When a new item is selected, the value attribute is automatically updated to reflect the label attribute of the selected item.

[0456] namestring

[0457] The value of the currently selected child item element's name attribute, which is not displayed.

[0458] hideGrippy(truefalse)

[0459] Specifies whether to hide the grippy (true) or not (false).

[0460] The menuSeparator Element

[0461] The menuSeparator element defines a separator to be displayed between item elements. It can only exist as a child of comboBox, listBox, listView, contextMenu or menuBar.

[0462] Attribute Definitions:

[0463] idname

[0464] Standard XML attribute for assigning a unique name to an element.

[0465] xlink:href<uri>

[0466] A reference to the parent element of a graphic, stored either interally in the <defs> block or in an external file, to be displayed for that item. If not provided (which is normally the case), its skin is obtained from the skin of the parent UI control.

[0467] The messageBox Element

[0468] The messageBox element defines a simple dialog with a message and a boolean response buttons. It can have action elements as children, but any graphical child elements will be ignored.

[0469] Attribute Definitions:

[0470] showTitle(truefalse)

[0471] Specifies whether to display a titlebar (true) or not (false). If true, the title is obtained from the label attribute.

[0472] showYesButton(truefalse)

[0473] Specifies whether to display the Yes button or not.

[0474] showNoButton(truefalse)

[0475] Specifies whether to display the No button or not.

[0476] movable(truefalse)

[0477] Specifies whether the window is movable (true) by clicking on the titlebar and dragging, or not (false).

[0478] labelstring

[0479] Specifies the message to display within the message box.

[0480] labelYesstring

[0481] Specifies the label of the Yes button. The default is Yes.

[0482] labelNostring

[0483] Specifies the label of the No button. The default is No.

[0484] The radioButton Element

[0485] 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 >

[0486] Attribute Definitions:

[0487] selected(truefalse)

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

[0489] If the attribute is not specified, the default is false.

[0490] Skin Template:

<xml version1.0>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG
xmlns:xlinkhttp://www.w3.org/1999/xlink>
<g id>
<g idlabel>
<text x y> </text>
</g>
<g idup displayall/>
<g iddown displaynone/>
<g idhover displaynone/>
<g idfocus displaynone/><g iddisabled
displaynone/>
</g>
</svg>

[0491] FIG. 18 shows two radioButtons belonging to the same group. In this example, default radio buttons 1 and 2 belong to the same group. The size of a control is changed by specifying new values for the height and width attributes. The default, small, and large radio buttons all belong to their own group. By default the group attribute is set to default. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG11
xmlns:xlinkhttp://www.w3.org/1999/xlink height450px width744px
onloadinit(evt) viewBox0 0 744 450>
<script typetext/ecmascript xlink:hrefdsvg11/dSVG.js/>
<script typetext/ecmascript xlink:hrefdsvg11/baseUI.js/>
<script typetext/ecmascript xlink:hrefdsvg11/constraint.js/>
<script typetext/ecmascript xlink:hrefdsvg11/button.js/>
<-- Adding Template -->
<g idtemplate>
<rect height40 width744 y0 x0 fill5f86B1
idrect_Title/>
<text y25 x20 font-weightbold font-size18 fillwhite
idTITLE>dSVG sample: SpinBox element
</text>
<line y2350 x2744 y1350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
<text y370 x20 font-size12 iddefaut_ex>Default, grouped
radio buttons - Default radio buttons 1 and 2 belong to the same group.
</text>
<text y395 x20 font-size12 idsmall_ex>Small and large radio
buttons - Change the size of a control by specifying new values for the height and width
attributes.
</text>
<text y420 x20 font-size12 idlarge_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 y340 x20 font-weightbold font-size10 fillblack
idNote>*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:hrefdsvg11/skinRadioButton_Default.svgskinRadioButton autoScaletrue
groupdefault height14 width14 y70 x50 labelDefault radio button 1:
(default attributes)iddefault1/>
<rect height18 width18 y68 x48 strokered fillnone
idrect_default/>
<dsvg:radioButton
xlink:hrefdsvg11/skinRadioButton_Default.svgskinRadioButton autoScaletrue
groupdefault height14 width14 y90 x50 labelDefault radio button 2:
(default attributes) iddefault_2/>
<dsvg:radioButton
xlink:hrefdsvg11/skinRadioButton_Default.svgskinRadioButton autoScaletrue
groupsmallGroup height10 width10 y150 x50 labelSmall radio
button: (h10, w10, groupsmallGroup) iddsvgUniqueID_2/>
<rect height14 width14 y148 x48 strokered fillnone
idrect_small/>
<dsvg:radioButton
xlink:hrefdsvg11/skinRadioButton_Default.svgskinRadioButton autoScaletrue
grouplargeGroup height25 width25 y230 x50 labelLarge radio button:
(h25, w25, grouplargeGroup) iddsvgUniqueID_3/>
<rect height29 width29 y228 x48 strokered fillnone
idrect_large/>
</svg>

[0492] The scrollbar Element

[0493] The scrollbar element defines the vertical and horizontal scrollbars to be associated with its parent, usually a document or other UI container element, such as a <window> or <frame>.

[0494] Attribute Definitions:

[0495] bars(bothhorizontalverticalnone)

[0496] Specifies whether a horizontal scrollbar (at the bottom), a vertical scrollbar (on the right) or both should appear when required.

[0497] The slider Element

[0498] 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 >

[0499] Attribute Definitions:

[0500] min<number>

[0501] The minimum value of the slider.

[0502] max<number>

[0503] The maximum value of the slider.

[0504] value<string>

[0505] The initial value of the slider. As the thumb is dragged, this attribute is automatically updated to match. If this attribute is modified, the displayed value is updated to match.

[0506] increment<number>

[0507] The allowed values that the slider can create, i.e. only minmultiples of increment are allowed.

[0508] pageIncrement<number>

[0509] The amount that the thumb should move, in whatever units the slider represents (i.e. not in pixels), when clicking to the left or right of it. If defined as zero, or not defined at all, the thumb will snap to wherever the user clicks.

[0510] ticksMajor<number>

[0511] The interval at which major tick marks (whose appearance is defined in the skin) are displayed, in whatever units the slider represents.

[0512] ticksMinor<number>

[0513] The interval at which minor tick marks (whose appearance is defined in the skin) are displayed, in whatever units the slider represents.

[0514] rotate<number>

[0515] The rotation angle of the slider, in degrees clockwise. When provided, the the slider will rotate but the label will remain unchanged and the tick mark labels will move appropriately but will remain unrotated. The top-left corner of the bounding box of the rotated slider, not including the label and tick mark labels, will be positioned at the specified (x, y) coordinates.

[0516] If the attribute is not specified, the default is 0.

[0517] continuousCallback(truefalse)

[0518] Specifies whether the slider's associated behaviors should be executed whenever the thumb has been dragged (true) or whenever the thumb has been dragged and released (i.e. the user has let go of the mouse button).

[0519] Skin Template:

<xml version1.0>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG>
<g id>
<g idlabel>
<text x y> </text>
</g>
<g idup displaynone>
<g idbody>
<rect idskinSliderBar x y width height/>
</g>
<g idskinSliderThumb/>
<g idtickMajor displaynone>
<text idtickLabelMajor x y
xml:spacepreserve> </text>
</g>
<g idtickMinor displaynone>
<text idtickLabelMinor x y
xml:spacepreserve> </text>
</g>
</g>
<g iddown displaynone>
...same as for up state... </g>
<g idhover displaynone> ...same
as
for up
state... </g> <g
idfocus displaynone> ...same as for up
state...
</g> <g id
disabled displaynone> ...same as for up
state...
</g>
<g idmask>
<rect idskinSliderMask x y
width height pointer-eventsfill/>
</g>
</g>
</svg>

[0520] FIG. 19 shows several sliders of various sizes and rotations. The Default slider represents the default set of attributes. The small and large sliders are used to change the size of the contrl by specifying new values for the height and width attributes. The rotate attribute is set by the number of degrees specified in the label. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG11
xmlns:xlinkhttp://www.w3.org/1999/xlink height450px width744px
onloadinit(evt) viewBox0 0 744 450>
<script typetext/ecmascript xlink:hrefdsvg11/dSVG.js/>
<script typetext/ecmascript xlink:hrefdsvg11/baseUI.js/>
<script typetext/ecmascript xlink:hrefdsvg11/constraint.js/>
<script typetext/ecmascript xlink:hrefdsvg11/slider.js/>
<-- Adding Template -->
<g idtemplate>
<rect height40 width744 y0 x0 fill5f86B1
idrect_Title/>
<text y25 x20 font-weightbold font-size18 fillwhite
idTITLE>dSVG sample:Slider element
</text>
<line y2350 x2744 y1350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
<text y370 x20 font-size12 iddefaut_ex>Default slider -
Represents the default set of attributes.
</text>
<text y395 x20 font-size12 idsmall_ex>Small and large
sliders - Change the size of the control by specifying new values for the height and width
attributes.
</text>
<text y420 x20 font-size12 idlarge_ex>Rotated sliders - The
rotate attribute is set the number of degrees specifed in the label.
</text>
<text y340 x20 font-weightbold font-size10 fillblack
idNote>*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 selectedfalse continuousCallbacktrue
xlink:hrefdsvg11/skinSlider_Default.svgskinSlider autoScaletrue
disabledfalse ticksMinor5 ticksMajor25 rotate0 pageIncrement0
increment5 value50 max100 min0 height19 width200.5 y70
x20 labelDefault slider: (default attributes) iddefault/>
<dsvg:slider selectedfalse continuousCallbacktrue
xlink:hrefdsvg11/skinSlider_Default.svgskinSlider autoScaletrue
disabledfalse ticksMinor0.05 ticksMajor0.25 rotate0 pageIncrement0
increment0.05 value0.5 max1 min0 height30 width100 y135
x20 labelSmall slider: (h30, w100) idsmall/>
<rect height30 width100 y135 x20 strokered fillnone
idsmall1/>
<dsvg:slider selectedfalse continuousCallbacktrue
xlink:hrefdsvg11/skinSlider_Default.svgskinSlider autoScaletrue
disabledfalse ticksMinor0.05 ticksMajor0.25 rotate0 pageIncrement0
increment0.05 value0.5 max1 min0 height70 width300 y225
x20 labelLarge slider: (h30, w300) idlarge/>
<rect height70 width300 y225 x20 strokered fillnone
idlarge1/>
<dsvg:slider selectedfalse continuousCallbacktrue
xlink:hrefdsvg11/skinSlider_Default.svgskinSlider autoScaletrue
disabledfalse ticksMinor0.05 ticksMajor0.25 rotate0 pageIncrement0
increment0.05 value0.5 max1 min0 height30 width200 y70
x350 labelrotate0, h30, w200 idrotated0/>
<rect height30 width200 y70 x350 strokered fillnone
idrotated_a/>
<dsvg:slider selectedfalse continuousCallbacktrue
xlink:hrefdsvg11/skinSlider_Default.svgskinSlider autoScaletrue
disabledfalse ticksMinor0.05 ticksMajor0.25 rotate15 pageIncrement0
increment0.05 value0.5 max1 min0 height30 width200 y225
x350 labelrotate15, h30, w200 idrotated15/>
<rect height30 width200 y228 x354 transformrotate(15 365 240)
strokered fillnone idrotated/>
<rect height81 width201 y225 x350 strokered fillnone
idrotated_b/>
<dsvg:slider selectedfalse continuousCallbacktrue
xlink:hrefdsvg11/skinSlider_Default.svgskinSlider autoScaletrue
disabledfalse ticksMinor0.05 ticksMajor0.25 rotate180 pageIncrement0
increment0.05 value0.5 max1 min0 height30 width200 y150
x350 idrotated180/>
<rect height30 width200 y150 x350 strokered fillnone
idrotated_c/>
<dsvg:slider selectedfalse continuousCallbacktrue
xlink:hrefdsvg11/skinSlider_Default.svgskinSlider autoScaletrue
disabledfalse ticksMinor0.05 ticksMajor0.25 rotate90 pageIncrement0
increment0.05 value0.5 max1 min0 height30 width235 y70
x595 labelrotate90 idrotated90/>
<rect height235 width30 y70 x595 strokered fillnone
idrotated_d/>
<dsvg:slider selectedfalse continuousCallbacktrue
xlink:hrefdsvg11/skinSlider_Default.svgskinSlider autoScaletrue
disabledfalse ticksMinor0.05 ticksMajor0.25 rotate270 pageIncrement0
increment0.05 value0.5 max1 min0 height30 width235 y70
x675 labelrotate270 idrotated270/>
<rect height235 width30 y70 x675 strokered fillnone
idrotated_e/>
<text y130 x350 idtext_180>rotate180, h30, w200
</text>
</svg>

[0521] The spinBox Element

[0522] 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 >

[0523] Attribute Definitions:

[0524] min<integer>

[0525] The minimum value of the spinBox.

[0526] max<integer>

[0527] The maximum value of the spinBox.

[0528] value<string>

[0529] The initial value of the spinBox. As the displayed value is changed via the buttons or textBox, this attribute is automatically updated to match. If this attribute is modified, the displayed value is updated to match.

[0530] increment<integer>

[0531] The allowed values that the spinbox can create, i.e. only minmultiples of increment are allowed.

[0532] Skin Template:

<xml version1.0>
<svg xmlns:dsvg
http://www.corel.com/schemas/2002/dSVG
xmlns:xlink
http://www.w3.org/1999/xlink> <g id> <use
idTextBoxSkin xlink:href x y/> <use
idButtonSkinUp xlink:href x y/>
<use idButtonSkinDown xlink:href x
y/> <g idlabel> <text
x0 y6> </text>
</g>
</g>
</svg>

[0533] FIG. 20 shows several spinboxes of various sizes and rotations, without associated behaviors. The default spin box has values of 1 to 10 in increments of 1. The initial value is 1. The small and large spin boxes are used to change the size of the control by specifying new values for the height and the width attributes. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG11
xmlns:xlinkhttp://www.w3.org/1999/xlink height450px width744px
onloadinit(evt) viewBox0 0 744 450>
<script typetext/ecmascript xlink:hrefdsvg11/dSVG.js/>
<script typetext/ecmascript xlink:hrefdsvg11/baseUI.js/>
<script typetext/ecmascript xlink:hrefdsvg11/constraint.js/>
<script typetext/ecmascript xlink:hrefdsvg11/spinBox.js/>
<script typetext/ecmascript xlink:hrefdsvg11/textbox.js/>
<script typetext/ecmascript xlink:hrefdsvg11/button.js/>
<-- Adding Template -->
<g idtemplate>
<rect height40 width744 y0 x0 fill5f86B1
idrect_Title/>
<text y25 x20 font-weightbold font-size18 fillwhite
idTITLE>dSVG sample:SpinBox element
</text>
<line y2350 x2744 y1350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
<text y370 x20 font-size12 iddefaut_ex>Default spin box -
This spin box has values of 1 to 10 in increments of 1. The initial value is 1.
</text>
<text y395 x20 font-size12 idsmall_ex>Small and large spin
boxes - Change the size of the control by specifying new values for the height and width
attributes.
</text>
<text y340 x20 font-weightbold font-size10 fillblack
idNote>*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:hrefdsvg11/skinSpinBox_Composite.svgskinSpinBox
autoScaletrue increment1 value1 max10 min0 height18 width118
y70 x50 labelDefault spin box: (default attributes) iddefault_spin/>
<rect height22 width122 y68 x48 strokered fillnone
iddefault_rect/>
<dsvg:spinBox xlink:hrefdsvg11/skinSpinBox_Composite.svgskinSpinBox
autoScaletrue increment1 value5 max0 min10 height15 width40
y150 x50 labelSmall spin box: (h15, w40, min 10, max0, value 5,
increment1) idsmall_spin/>
<rect height19 width44 y148 x48 strokered fillnone
idsmall_rect/>
<dsvg:spinBox xlink:hrefdsvg11/skinSpinBox_Composite.svgskinSpinBox
autoScaletrue increment10 value0 max100 min100 height36
width236 y230 x50 labelLarge spin box: (h36, w236, min 100, max
100, value0, increment10) idlarge_spin/>
<rect height40 width240 y228 x48 strokered fillnone
idlarge_rect/>
</svg>

[0534] The state Element

[0535] 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 >

[0536] Attribute Definitions:

[0537] idname

[0538] Standard XML attribute for assigning a unique name to an element.

[0539] xlink:href<uri>

[0540] A reference to the skin's parent element, stored either internally in the <defs> block, or in an external file.

[0541] If the attribute is not specified, the UI control's skin is not overridden.

[0542] state(updownhoverfocusdisabled)

[0543] The state whose appearance the referenced skin will be used to override.

[0544] FIG. 21 shows 12 regular buttons used to override the appearance of the custom button. The state element defines an alternate skin to be available for the parent UI control. This sample uses state to override the appearance of the custom button in the top left corner of the slide. Pressing a query button returns the current state value to an alert. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG
xmlns:xlinkhttp://www.w3.org/1999/xlink height450px width780px
onloadinit(evt) viewBox0 0 780 450>
	<script typetext/ecmascript xlink:hrefdsvg/dSVG.js/>
	<script typetext/ecmascript xlink:hrefdsvg/baseUI.js/>
	<script typetext/ecmascript xlink:hrefdsvg/constraint.js/>
	<script typetext/ecmascript xlink:hrefdsvg/button.js/>
	<script typetext/ecmascript xlink:hrefdsvg/setAttribute.js/>
	<script typetext/ecmascript xlink:hrefdsvg/alert.js/>
	<-- adding template -->
	<g idtemplate>
	<rect height40 width780 y0 x0 fill5f86B1
idrect_Title/>
	<text y25 x20 font-weightbold font-size18 fillwhite
idTITLE>dSVG sample: State element</text>
	<line y2350 x2744 y1350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
	<text y365 x20 font-size12 idcontent>The state element
defines an alternate skin to be available for the parent UI control.</text>
	<text y380 x20 font-size12 idexpected> This sample uses
state to override the appearance of the custom button in the top left corner of the slide.
</text>
	<text y395 x20 font-size12 iddepend>Pressing a query
button returns the current state value to an alert.</text>
	</g>
	<-- adding controls -->
	<defs>
	<g idskinButton>
	<g idlabel>
	<text y12 x9 font-weightnormal font-size10
font-familyVerdana fill000000> </text>
	</g>
	<g idup>
	<rect height50 width100 stroke-width2
strokedarkblue fillblue/>
	</g>
	<g iddown>
	<rect height50 width100 stroke-width15
strokedarkblue fillblue/>
	</g>
	<g idhover>
	<rect height50 width100 stroke-width7
strokedarkblue fillblue/>
	</g>
	<g idfocus>
	<rect height50 width100 stroke-width0
strokedarkblue fillblue/>
	</g>
	<g styleopacity:0.5 iddisabled>
	<rect height50 width100 stroke-width5
strokedarkgrey fillgrey/>
	</g>
	</g>
	<g idsupgreen>
	<rect height50 width100 stroke-width2
strokedarkgreen fillgreen/>
	</g>
	<g idsupred>
	<rect height50 width100 stroke-width2 strokedarkred
fillred/>
	</g>
	<g idsdowngreen>
	<rect height50 width100 stroke-width15
strokedarkgreen fillgreen/>
	</g>
	<g idsdownred>
	<rect height50 width100 stroke-width15
strokedarkred fillred/>
	</g>
	<g idshovergreen>
	<rect height50 width100 stroke-width7
strokedarkgreen fillgreen/>
	</g>
	<g idshoverred>
	<rect height50 width100 stroke-width7 strokedarkred
fillred/>
	</g>
	<g idsfocusgreen>
	<rect height50 width100 stroke-width0
strokedarkgreen fillgreen/>
	</g>
	<g idsfocusred>
	<rect height50 width100 stroke-width0 strokedarkred
fillred/>
	</g>
	<g idskinButton2>
	<g idlabel2>
	<text y12 x9 font-weightnormal font-size10
font-familyVerdana fill000000> </text>
	</g>
	<g idup2>
	<path dM56 181-52 0 0 -15 52 0 0 15z
fillCCCCCC/>
	<path dM54 151-53 0 0 -15 53 0 0 15z
stroke0083C4 fillFFFFFF/>
	</g>
	<g iddown2>
	<path dM56 181-52 0 0 -15 52 0 0 15z
fillCCCCCC/>
	<path dM54 151-53 0 0 -15 53 0 0 15z stroke-width2
stroke0083C4 fillEDAF0D/>
	</g>
	<g idhover2>
	<path dM56 181-52 0 0 -15 52 0 0 15z
fillCCCCCC/>
	<path dM54 151-53 0 0 -15 53 0 0 15z stroke-width2
stroke0083C4 fillFFFFFF/>
	</g>
	<g styleopacity:0.5 iddisabled2>
	<path dM56 181-52 0 0 -15 52 0 0 15z
fillCCCCCC/>
	<path dM54 151-53 0 0 -15 53 0 0 15z
strokeCCCCCC fillFFFFFF/>
	</g>
	</g>
	</defs>
	<dsvg:button xlink:hrefskinButton autoScaletrue togglefalse y50
x50 labelstate idbut1>
	<dsvg:state xlink:hrefsdowngreen typedown iddowngreen/>
	<dsvg:state xlink:hrefsdownred typedown iddownred/>
	<dsvg:state xlink:hrefsupgreen typeup idupgreen/>
	<dsvg:state xlink:hrefsupred typeup idupred/>
	<dsvg:state xlink:hrefshovergreen typehover idhovergreen/>
	<dsvg:state xlink:hrefshoverred typehover idhoverred/>
	<dsvg:state xlink:hrefsfocusgreen typefocus idfocusgreen/>
	<dsvg:state xlink:hrefsfocusred typefocus idfocusred/>
	</dsvg:button>
	<dsvg:button xlink:hrefdsvg/skinButton_windows.svgskinButton
autoScaletrue height18 width100 y50 x250 labeldown green>
	<dsvg:setAttribute valuedowngreen attributestate_down
elementIDbut1/>
	</dsvg:button>
	<dsvg:button xlink:hrefdsvg/skinButton_windows.svgskinButton
autoScaletrue height18 width100 y80 x250 labeldown red>
	<dsvg:setAttribute valuedownred attributestate_down
elementIDbut1/>
	</dsvg:button>
	<dsvg:button xlink:hrefdsvg/skinButton_windows.svgskinButton
autoScaletrue height18 width100 y110 x250 labeldown query>
	<dsvg:alert message%but1state_down%/>
	</dsvg:button>
	<dsvg:button xlink:hrefdsvg/skinButton_windows.svgskinButton
autoScaletrue height18 width100 y50 x375 labelup green>
	<dsvg:setAttribute valueupgreen attributestate_up
elementIDbut1/>
	</dsvg:button>
	<dsvg:button xlink:hrefdsvg/skinButton_windows.svgskinButton
autoScaletrue height18 width100 y80 x375 labelup red>
	<dsvg:setAttribute valueupred attributestate_up
elementIDbut1/>
	</dsvg:button>
	<dsvg:button xlink:hrefdsvg/skinButton_windows.svgskinButton
autoScaletrue height18 width100 y110 x375 labelup query>
	<dsvg:alert message%but1state_up%/>
	</dsvg:button>
	<dsvg:button xlink:hrefdsvg/skinButton_windows.svgskinButton
autoScaletrue height18 width100 y50 x500 labelhover green>
	<dsvg:setAttribute valuehovergreen attributestate_hover
elementIDbut1/>
	</dsvg:button>
	<dsvg:button xlink:hrefdsvg/skinButton_windows.svgskinButton
autoScaletrue height18 width100 y80 x500 labelhover red>
	<dsvg:setAttribute valuehoverred attributestate_hover
elementIDbut1/>
	</dsvg:button>
	<dsvg:button xlink:hrefdsvg/skinButton_windows.svgskinButton
autoScaletrue height18 width100 y110 x500 labelhover query>
	<dsvg:alert message%but1state_hover%/>
	</dsvg:button>
	<dsvg:button xlink:hrefdsvg/skinButton_windows.svgskinButton
autoScaletrue height18 width100 y50 x625 labelfocusgreen>
	<dsvg:setAttribute valuefocusgreen attributestate_focus
elementIDbut1/>
	</dsvg:button>
	<dsvg:button xlink:hrefdsvg/skinButton_windows.svgskinButton
autoScaletrue height18 width100 y80 x625 labelfocus red>
	<dsvg:setAttribute valuefocusred attributestate_focus
elementIDbut1/>
	</dsvg:button>
	<dsvg:button xlink:hrefdsvg/skinButton_windows.svgskinButton
autoScaletrue height18 width100 y110 x625 labelfocus query>
	<dsvg:alert message%but1state_focus%/>
	</dsvg:button>
	<text y210 x50>States should have the following shapes, but colored
appropriately.</text>
	<text y230 x50>Up:</text>
	<text y230 x175>Down:</text>
	<text y230 x300>Hover:</text>
	<text y230 x425>Focus:</text>
	<rect height50 width100 y250 x50 stroke-width2 strokegray
filllightgray/>
	<rect height50 width100 y250 x175 stroke-width15
strokegray filllightgray/>
	<rect height50 width100 y250 x300 stroke-width7 strokegray
filllightgray/>
	<rect height50 width100 y250 x425 stroke-width0 strokegray
filllightgray/>
</svg>

[0545] The textBox Element

[0546] 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 >

[0547] Attribute Definitions:

[0548] lines<integer> The number of lines that will be visible in the text area. The available space will be divided up into this many lines for display.

[0549] maxLines<integer>

[0550] The maximum number of lines the textBox will hold. If greater than lines, the textBox will scroll vertically automatically while typing or using manually with the up and down arrow keys.

[0551] value<string>

[0552] The initial value (i.e. text data) of the textBox. As the displayed content is modified by the user, this attribute is automatically updated to match. If this attribute is modified, the displayed content is updated to match.

[0553] maxLength<integer>

[0554] The maximum number of characters the textBox will hold. Once this limit is reached, the user will not be able to enter any more characters.

[0555] editable(truefalse)

[0556] Specifies whether the textbox is editable or not.

[0557] If this attribute is not provided, the default value is true.

[0558] wrap(truefalse)

[0559] Specifies whether the contents of the textBox should automatically wrap or not.

[0560] If this attribute is not provided, the default value is false.

[0561] secret(truefalse)

[0562] Specifies whether each character in the contents of the textBox should be displayed by an asterisk (*) or not.

[0563] If this attribute is not provided, the default value is false.

[0564] Skin Template:

<xml version1.0>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG> <g
idskinTextBox><g idup displayall/><g id
hover
displaynone/><g iddown displaynone/><g
iddisabled displaynone/>
<g idlabel><text x y> </text></g>
<clipPath idskinTextBox_textView>
<rect idskinTextBox_textArea x y width
height/>
</clipPath><g idskinTextBox_cursor displaynone/>
<text clip-pathurl(skinTextBox_textView) idskinTextBox
text
xml:spacepreserve x y></text>
<rect idskinTextBox_mask x y width
height
displaynone/>
</g>
</g></svg>

[0565] FIG. 22 shows several textBoxes of various sizes, without associated behaviors. The default text box uses all of the default attribute settings. The small text box has the editable attribute set to false which disables the entry of text into the text box. The large text box is used to change the size of a control by specifying new values for the height and width attributes. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG11
xmlns:xlinkhttp://www.w3.org/1999/xlink height450px width744px
onloadinit(evt) viewBox0 0 744 450>
	<script typetext/ecmascript xlink:hrefdsvg11/dSVG.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/baseUI.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/constraint.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/textbox.js/>
	<-- Adding Template -->
	<g idtemplate>
	<rect height40 width744 y0 x0 fill5f86B1
idrect_Title/>
	<text y25 x20 font-weightbold font-size18 fillwhite
idTITLE>dSVG sample: TextBox Element
	</text>
	<line y2350 x2744 y1350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
	<text y370 x20 font-size12 iddefaut_ex>Default text box -
This text box uses all of the default attribute settings.
	</text>
	<text y395 x20 font-size12 idsmall_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 y420 x20 font-size12 idlarge_ex>Large text boxes -
Change the size of a control by specifying new values for the height and width attributes.
	</text>
	<text y340 x20 font-weightbold font-size10 fillblack
idNote>*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:hrefdsvg11/skinTextbox_Default.svgskinTextBox
autoScaletrue height36 width228 y70 x50 labelDefault text box:
(default attributes) iddefault_textbox1/>
	<rect height40 width232 y68 x48 opacity0.5 strokered
fillnone iddefault_1/>
	<dsvg:textBox xlink:hrefdsvg11/skinTextbox_Default.svgskinTextBox
autoScaletrue editablefalse valueRead Only height18 width80 y150
x50 labelSmall text box: (h18 w80, editablefalse) idsmall_textbox/>
	<rect height22 width84 y148 x48 opacity0.5 strokered
fillnone idsmall1/>
	<dsvg:textBox xlink:hrefdsvg11/skinTextbox_Default.svgskinTextBox
autoScaletrue lines3 height63 width346 y230 x50 labelLarge text
box: (h63, w346, lines3) idlarge_textbox/>
	<rect height67 width350 y228 x48 opacity0.5 strokered
fillnone idlarge_1/>
</svg>

[0566] The toolBar Element

[0567] The toolBar element defines a container for buttons.

[0568] Attribute Definitions:

[0569] %standard attributes%

[0570] The standard attributes, such as id, label, etc.

[0571] selectedIDname

[0572] The value of the currently selected child button element's id attribute.

[0573] hideGrippy(truefalse)

[0574] Specifies whether to hide the grippy (true) or not (false).

[0575] The window Element

[0576] The window element defines a window.

	<ENTITY % windowExt >
	<ELEMENT dsvg:window (%UIControls;%behaviors;
	desctitlemetadatadefspathtextrectcircleellipselinepolyline
	polygonuseimagesvggviewswitchaaltGlyphDefscriptstyle
	symbolmarkerclipPathmasklinearGradientradialGradientpattern
	filtercursorfontanimatesetanimateMotionanimateColor
	animateTransformcolor-profilefont-face)* >
<ATTLIST dsvg:window
%stdDSVGAttrs;
%stdUIAttrs; >
Skin template:
<xml version1.0>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG>
	<g idskinWindow >
	<use idskinWindowBase
xlink:hrefskinWindow_Default.svgWindowBase x y/>
	<use idskinButtonClose xlink:href x y/>
	<use idskinScrollVertical xlink:href x y/>
	<use idskinScrollHorizontal xlink:href x y/>
	</g>
	<g idWindowBase>
	<g idup>
	<rect idFrame x y width height/>
	<rect idTitleBar x y width height/>
	</g>
	<clipPath idviewArea>
	<rect x y width height/>
	</clipPath>
	<g idlabel>
	<text idTitleBarText x y > </text>
	</g>
	</g>
</svg>

[0577] FIG. 23 shows several textBoxes of various sizes, without associated behaviors. The window element defines a top-level container element that can be either modal or modeless, and can be moveable or not. In this sample, the button element and the text element are added as children of the window. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG11
xmlns:xlinkhttp://www.w3.org/1999/xlink height450px width744px
onloadinit(evt) viewBox0 0 744 450>
	<script typetext/ecmascript xlink:hrefdsvg11/dSVG.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/baseUI.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/constraint.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/window.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/windowBase.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/button.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/scrollbar.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/slider.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/attributeDrag.js/>
	<-- Adding Template -->
	<g idtemplate>
	<rect height40 width744 y0 x0 fill5f86B1
idrect_Title/>
	<text y25 x20 font-weightbold font-size18 fillwhite
idTITLE>dSVG sample: Window element
	</text>
	<line y2350 x2744 y1 350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
	<text y370 x20 font-size12 iddefaut_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 y395 x20 font-size12 idsmall_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:hrefdsvg11/skinWindow_Default.svgskinWindow
autoScaletrue height200 width200 y70 x50 labelSample window
iddsvgUniqueID_0>
	<dsvg:button xlink:hrefdsvg11/skinButton_Windows.svgskinButton
autoScaletrue height18 width100 y50 x20 labelButton
idbutton_1/>
	<text y150 x20 idtext1>Text within window.
	</text>
	</dsvg:window>
	</svg>

[0578] UI Control Attributes

[0579] The following attributes can be applied to any element, to create a context-sensitive UI control, which may be event-triggered.

	<ENTITY % stdDSVGAttrs
	dsvg:contextMenu	ID	190 IMPLIED
	dsvg:share	ID	IMPLIED
	dsvg:tipDelay	%Integer	50
	dsvg:tipTrack	%Boolean	false
	dsvg:title	%Text	IMPLIED
	dsvg:toolTip	ID	IMPLIED>

[0580] contextMenuname

[0581] Specifies the id attribute of an existing contextMenu element. The contextMenu displays with its top-left corner at the position of the mouse pointer when the user right-clicks on the element.

[0582] sharename

[0583] Specifies the id attribute of an existing share element, causing the share element's children to be treated as children of this element as well. The children are not copiedthey are instead used, or shared, by multiple elements.

[0584] tipDelay<integer>

[0585] The time, in milliseconds, between when the mouse cursor begins to hover over an element and when the toolTip actually displays.

[0586] If this attribute is not provided, its default is 50.

[0587] If the title and toolTip attributes do not exist for this element or one of its ancestors, this attribute is ignored and no toolTip will appear.

[0588] tipTrack(truefalse)

[0589] Specifies whether the toolTip should move to follow the mouse cursor position (true) or stay fixed in place at the location it first appears (false).

[0590] If this attribute is not provided, its default is false.

[0591] If the title and toolTip attributes do not exist for this element or one of its ancestors, this attribute is ignored and no toolTip will appear.

[0592] title(truefalse)

[0593] The text to be displayed in the toolTip for this element.

[0594] If this attribute is not provided, no toolTip will appear for this element.

[0595] If the toolTip attribute does not exist for this element or one of its ancestors, this attribute is ignored and no toolTip will appear.

[0596] toolTip<uri>

[0597] A reference to the toolTip skin's parent element, stored either internally in the <defs> block, or in an external file.

[0598] If this attribute is not provided, no toolTip will appear.

[0599] The contextMenu Attribute

[0600] The contextMenu attribute specifies the id attribute of an existing contextMenu element. The contextMenu displays with its top-left corner at the position of the mouse pointer when the user right-clicks on the element. FIG. 24 shows a contextMenu associated to a circle, with no associated behaviors. In this example, the default context menu is displayed with a right-click within the circle. The lists consists of items which can be added directly as child elements of context menu. The context menu is associated with the circle by adding a contextMenu attribute to the circle which references the context menu. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:xlinkhttp://www.w3.org/1999/xlink
xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG11 height450px
width744px onloadinit(evt) viewBox0 0 744 450>
	<script typetext/ecmascript xlink:hrefdsvg11/dSVG.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/baseUI.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/constraint.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/contextMenu.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/attributeContextMenu.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/listbox.js/>
	<-- Begin Template-->
	<g idtemplate>
	<rect height40 width744 y0 x0 fill5f86B1
idrect_Title/>
	<text y25 x20 font-weightbold font-size18 fillwhite
idTITLE>dSVG sample: ContextMenu element
	</text>
	<line y2350 x2744 y1350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
	<text y370 x20 font-size12 iddefaut_ex>Default context
menu - Right-click within the circle to display the context menu.
	</text>
	<text y395 x20 font-size12 idadditional_ex>The list consists
of items which can be added directly as child elements of the context menu.
	</text>
	<text y420 x20 font-size12 idFinal_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 y60 x20 idregular>Default Context Menu:
	</text>
	<text y60 x150 font-size10 idregular_desc>(default
attributes) - right-click within the circle and the Context Menu should appear.
	</text>
	</g>
	<--adding the controls-->
	<dsvg:contextMenu
xlink:hrefdsvg11/skinContextMenu_Default.svgskinContextMenu autoScaletrue
labelRed Circle Menu idcontextMenu1>
	<dsvg:item valueApple dataplu_1 iditem_1>
	<dsvg:itemData valuered namecolor/>
	<dsvg:itemData value$1.27 nameprice/>
	</dsvg:item>
	<dsvg:item valueBanana dataplu_2 iditem_2>
	<dsvg:itemData valueyellow namecolor/>
	<dsvg:itemData value$0.59 nameprice/>
	</dsvg:item>
	<dsvg:item valueGrapes dataplu_3 iditem_3>
	<dsvg:itemData valuepurple namecolor/>
	<dsvg:itemData value$2.19 nameprice/>
	</dsvg:item>
	<dsvg:item valueKiwi dataplu_4 iditem_4>
	<dsvg:itemData valuebrown namecolor/>
	<dsvg:itemData value$0.89 nameprice/>
	</dsvg:item>
	</dsvg:contextMenu>
	<circle dsvg:contextMenucontextMenu1 r50 cy130 cx130
stroke-width5 strokedarkblue fill5f86B1 idcircle_blue/>
</svg>

[0601] The share Attribute

[0602] The share attribute specifies the id attribute of an existing share element, causing the child elements of the share element to be treated as children of this element as well. The children are not copiedthey are instead used, or shared, by multiple elements. FIG. 25 shows a listBox and a comboBox, both sharing the same item elements as their children. The share element is used to share a group of items with multiple elements. The document in this example shares the same set of items with the combo box and list box. Associate a share element with other elements by adding a share attribute to the element that references the share element. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG11
xmlns:xlinkhttp://www.w3.org/1999/xlink height450px width744px
onloadinit(evt) viewBox0 0 744 450>
	<script typetext/ecmascript xlink:hrefdsvg11/dSVG.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/baseUI.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/constraint.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/listbox.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/button.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/contextMenu.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/scrollbar.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/slider.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/combobox.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/textbox.js/>
	<-- Adding Template -->
	<g idtemplate>
	<rect height40 width744 y0 x0 fill5f86B1
idrect_Title/>
	<text y25 x20 font-weightbold font-size18 fillwhite
idTITLE>dSVG sample: Share element
	</text>
	<line y2350 x2744 y1350 opacity1.0 stroke-width2
stroke5F86B1 fill5F86B1 idbottomLine/>
	<text y370 x20 font-size12 iddefaut_ex>The share element is
used to share a group of items with multiple elements.
	</text>
	<text y395 x20 font-size12 idsmall_ex>This document
shares the same set of items with the combo box and the list box.
	</text>
	<text y420 x20 font-size12 idlarge_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 idshare_1>
	<dsvg:item valueSTOP datared iditem_1>
	<dsvg:itemData valueOctagon nameshape/>
	</dsvg:item>
	<dsvg:item valueYIELD datayellow iditem_2>
	<dsvg:itemData valueTriangle nameshape/>
	</dsvg:item>
	<dsvg:item valueGO datagreen iditem_3>
	<dsvg:itemData valueCircle nameshape/>
	</dsvg:item>
	</dsvg:share>
	<dsvg:listBox dsvg:shareshare_1
xlink:hrefdsvg11/skinListBox_Composite.svgskinListBox autoScaletrue
height60 width198 y70 x50 labelList box: (default attributes with the
added attribute dsvg:share) idlistbox_1/>
	<dsvg:comboBox dsvg:shareshare_1
xlink:hrefdsvg11/skinComboBox_Composite.svgskinComboBox autoScaletrue
height17 width217 y220 x50 labelCombo box: (default attributes with the
added attribute dsvg:share) idcombobox_1/>
</svg>

[0603] The toolTip Attribute

[0604] The toolTip attribute refers to the toolTip skin's parent element, stored either internally in the <defs> block, or in an external file. With this attribute on an element, that element and any of its descendents will display the value of their dsvg:title attribute within the toolTip defined in the specified skin, whenever the user hovers over the element. FIG. 26 shows three circles with toolTipsone follows the mouse, one has a delay and follows the mouse, and one does neither. The toolTip attribute is applied to elements to enable the ability to display tooltips. Tip tracking and Tip Delay are added as separate attributes if desired. The example is provided below:

<xml version1.0 standaloneno>
<DOCTYPE svg SYSTEM ../SVGdSVG.dtd>
<svg xmlns:xlinkhttp://www.w3.org/1999/xlink
xmlns:dsvghttp://www.corel.com/schemas/2002/dSVG11 height420px
width760px onloadinit(evt) viewBox0 0 760 420>
	<script typetext/ecmascript xlink:hrefdsvg11/dSVG.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/baseUI.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/constraint.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/button.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/loadXML.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/attributeTooltip.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/combobox.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/textbox.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/contextMenu.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/slider.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/listBox.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/scrollbar.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/listview.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/spinBox.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/window.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/windowBase.js/>
	<script typetext/ecmascript xlink:hrefdsvg11/attributeDrag.js/>
	<-- template -->
	<rect height40 width744 y0 x0 fill5f86B1 idtitle_rect/>
	<text y25 x20 font-weightbold font-size18 fillwhite
idtext_1>dSVG sample: toolTip (added attribute)
	</text>
	<text y365 x20 font-size12 idcontent>Content of file: dsvg:toolTip
	</text>
	<text y380 x20 font-size12 idexpected>The dsvg:toolTip attribute is
applied to elements to enable the ability to display tooltips.
	</text>
	<text y395 x20 font-size12 iddepend>Tip tracking and Tip Delay
are added as seperate attributes if desired.
	</text>
	<text y60 x280 font-size10 idtextControls>mouseover any of the UI
controls to display its tooltip.
	</text>
	<line y2340 x2744 y1340 x10 stroke-width2 stroke5f86B1
fill5f86B1 idbottom_line/>
	<line y240 x2270 y1340 x1270 stroke-width2 stroke5f86B1
fill5f86B1 idvert_line/>
	<-- adding attributes -->
	<g dsvg:toolTipdsvg11/skinTooltip.svgskinTooltip_traditional
idtoolTips>
	<circle dsvg:titleTool Tip working r30 cy80 cx80
stroke-width5 strokedarkred fillred idcircle_red/>
<circle dsvg:tipTracktrue dsvg:tipDelay dsvg:titleTool Tip and
Tip Track working r30 cy180 cx80 stroke-width5 strokeorange
fillyellow idcircle_yellow/>
	<circle dsvg:tipTracktrue dsvg:tipDelay2000 dsvg:titleTool Tip
Tip Track and Tip Delay working r30 cy280 cx80 stroke-width5
strokedarkblue fill5f86B1 idcircle_green/>
	</g>
	<text y120 x50 font-size10 idred_text>mouse over red circle, Tool
Tip should appear.
	</text>
	<text y220 x50 font-size10 idred_text2>Tool Tip w/ Tip Tracking
applied.
	</text>
	<text y320 x50 font-size10 idred_text3>Tool Tip w/ Tip Tracking
and Tip Delay applied.
	</text>
	<g transformtranslate(250, 20)
dsvg:toolTipdsvg11/skinTooltip.svgskinTooltip_traditional>
	<dsvg:button dsvg:titlebutton
dsvg:toolTipdsvg11/skinTooltip.svgskinTooltip_traditional
xlink:hrefdsvg11/skinButton_Windows.svgskinButton autoScaletrue
labelbutton height18 width100 y50 x50 iddsvgUniqueID_0/>
	<dsvg:checkBox dsvg:titlecheckbox
xlink:hrefdsvg11/skinCheckbox_Default.svgskinCheckBox autoScaletrue
height12 width12 y100 x50 labelbutton iddsvgUniqueID_2/>
	<dsvg:comboBox dsvg:titlecombobox
xlink:hrefdsvg11/skinComboBox_Composite.svgskinComboBox autoScaletrue
height17 width217 y150 x50 labelcombobox iddsvgUniqueID_3/>
	<dsvg:listBox dsvg:titlelistbox
xlink:hrefdsvg11/skinListBox_Composite.svgskinListBox autoScaletrue
height30 width99 y200 x50 labellistbox iddsvgUniqueID_3/>
	<dsvg:listView dsvg:titlelisview
xlink:hrefdsvg11/skinListView_Composite.svgskinListView autoScaletrue
height30 width99 y250 x50 labellistview iddsvgUniqueID_4/>
	<dsvg:radioButton dsvg:titleradiobutton
xlink:hrefdsvg11/skinRadioButton_Default.svgskinRadioButton autoScaletrue
groupdefault height14 width14 y50 x300 labelradiobutton
iddsvgUniqueID_5/>
	<dsvg:slider dsvg:titleslider continuousCallbacktrue
xlink:hrefdsvg11/skinSlider_Windows.svgskinSlider autoScaletrue
ticksMinor0.05 ticksMajor0.25 pageIncrement0 increment0.05 value0.5
max1 min0 height18 width200 y100 x300 labelslider
iddsvgUniqueID_6/>
	<dsvg:spinBox dsvg:titlespinbox
xlink:hrefdsvg11/skinSpinBox_Composite.svgskinSpinBox autoScaletrue
increment1 value1 max10 min0 height18 width118 y150 x300
labelspinbox iddsvgUniqueID_7/>
<dsvg:textBox dsvg:titletextbox
xlink:hrefdsvg11/skinTextbox_Default.svgskinTextBox autoScaletrue
height18 width114 y200 x300 labeltextbox iddsvgUniqueID_8/>
	<dsvg:window dsvg:titlewindow
xlink:hrefdsvg11/skinWindow_Default.svgskinWindow autoScaletrue
height50 width50 y250 x300 labelwindow iddsvgUniqueID_9/>
	</g>
</svg>

[0605] The tipDelay Attribute

[0606] The tipDelay attribute specifies the time, in milliseconds, between when the mouse cursor begins to hover over an element and when the toolTip actually appears. If this attribute is not provided, its default is 50. If the title and toolTip attributes do not exist for this element or one of its ancestors, this attribute is ignored and no toolTip will appear.

[0607] The tipTrack Attribute

[0608] The tipTrack attribute specifies whether the toolTip should move to follow the mouse cursor position (true) or stay fixed in place at the location it first appears (false). If this attribute is not provided, its default is false. If the title and toolTip attributes do not exist for this element or one of its ancestors, this attribute is ignored and no toolTip will appear.

[0609] The title Attribute

[0610] The title attribute specifies the text to be displayed in the toolTip for this element. If this attribute is not provided, no toolTip will appear for this element. If the toolTip attribute does not exist for this element or one of its ancestors, this attribute is ignored and no toolTip will appear.

[0611] Other attributes may be added such as:

[0612] nativeContextMenustring

[0613] Specifies the id of the <menu> element that should appear when the user right-clicks on the element containing this attribute. <menu> is an Adobe-specific markup for the Adobe SVG Viewer. Thus this attribute is only for use with the Adobe SVGViewer.

[0614] Other Skin Templates 27 for UI Controls

[0615] The scrollBar Skin Template

<xml version1.0>
<svg>
	<g idskinScrollBar>
	<use idSliderSkin xlink:href x y/>
	<use idButtonLeftSkin xlink:href x y/>
	<use idButtonRightSkin xlink:href x y/>
	<g idcorner>
	</g>
	</g>
	<g idButtonLeftSkin>
	<g idup displayall>
	</g>
	<g iddown displaynone>
	</g>
	</g>
	<g idSliderSkin>
	<g idup displayall>
	<g idbody>
	<g idSliderSkinBar>
	</g>
	</g>
	<g idSliderSkinThumb>
	</g>
	<pattern idbarfill width height
	patternUnitsuserSpaceOnUse>
	</pattern>
	</g>
	<g idmask>
	<g idsliderMask>
	</g>
	</g>
	</g>
	<g idButtonRightSkin>
	<g idup displayall>
	</g>
	<g iddown displaynone>
	</g>
	</g>
	<g idskinScrollBarSmall>
	<use idSliderSkin xlink:href x y/>
	<use idButtonLeftSkin xlink:href x y/>
	<use idButtonRightSkin xlink:href x y/>
	<g idcorner>
	</g>
	</g>
	<g idButtonLeftSkinSmall>
	<g idup displayall>
	</g>
	<g iddown displaynone>
	</g>
	</g>
	<g idSliderSkinSmall>
	<g idup displayall>
	<g idSkinSliderSmallBorder displayall>
	</g>
	<g idbody>
	<g idSkinSliderSmallBase>
	</g>
	<g idSkinSliderSmallBar>
	</g>
	</g>
	<g idSliderSkinSmallThumb>
	<g idsliderThumbBar>
	</g>
	</g>
	<g idtickMajor displaynone>
	<text x y idtickLabelMajor xml:space
	preserve style></text>
	</g>
	</g>
	<g idmask >
	<g idsliderMask opacity0>
	</g>
	</g>
	</g>
	<g idButtonRightSkinSmall>
	<g idup displayall>
	</g>
	<g iddown displaynone>
	</g>
	</g>
</svg>

[0616] Example scrollBar Skin

<xml version1.0>
<svg>
	<g idskinScrollBar>
	<use idSliderSkin xlink:hrefskinScrollBar_Default.svgSliderSkin x0
y0/>
	<use idButtonLeftSkin xlink:hrefskinScrollBar_Default.svgButtonLeftSkin
x0 y0/>
	<use idButtonRightSkin
xlink:hrefskinScrollBar_Default.svgButtonRightSkin x0 y0/>
	<g idcorner>
	<rect fillrgb(212 208 200) x0 y0 width16 height16 />
	</g>
	</g>
	<g idButtonLeftSkin>
	<g idup fillnone stroke-linecapsquare shape-renderingoptimizeSpeed
displayall>
	<rect fillrgb(212 208 200) width16 height16 />
	<line x115 y10 x215 y215 stylestroke:404040/>
	<line x10 y115 x215 y215 stylestroke:404040/>
	<line x11 y11 x213 y21 stylestroke:FFFFFF/>
	<line x11 y11 x21 y213 stylestroke:FFFFFF/>
	<line x11 y114 x214 y214 stylestroke:808080/>
	<line x114 y11 x214 y214 stylestroke:808080/>
	<path fillblack dM9.5 5.51-3 313 3z />
	</g>
	<g iddown fillnone stroke-linecapsquare
shape-renderingoptimizeSpeed displaynone>
	<rect fillrgb(212 208 200) width16 height16 />
	<rect fillnone stylestroke:808080 width16 height16/>
	<path fillblack dM10.5 6.51-3 313 3z />
	</g>
	</g>
	<g idSliderSkin>
	<g idup displayall>
	<g idbody>
	<rect idSliderSkinBar fillE6E6E6 x0 y0 width400
height16>
	</rect>
	</g>
	<g idSliderSkinThumb>
	<rect idsliderThumbBar stylefill:rgb(212 208
200);stroke:000000;stroke-width:0 x0 y0 width400 height16/>
	<line x10 x2400 y115 y215 stylestroke:404040/>
	<line x11 x2398 y11 y21 stylestroke:FFFFFF/>
	</g>
	<pattern idbarfill width2 height2 patternUnitsuserSpaceOnUse
shape-renderingoptimizeSpeed>
	<rect x0 y0 width2 height2 fillwhite/>
	<rect x0 y0 width1 height1 fillrgb(212 208 200)/>
	<rect x1 y1 width1 height1 fillrgb(212 208 200)/>
	</pattern>
	</g>
	<g idmask>
	<rect idsliderMask x0 y0 width400 height16 opacity0/>
	</g>
	</g>
	<g idButtonRightSkin>
	<g idup fillnone stroke-linecapsquare shape-renderingoptimizeSpeed
displayall>
	<rect fillrgb(212 208 200) width16 height16 />
	<line x115 y10 x215 y215 stylestroke:404040/>
	<line x10 y115 x215 y215 stylestroke:404040/>
	<line x11 y11 x213 y21 stylestroke:FFFFFF/>
	<line x11 y11 x21 y213 stylestroke:FFFFFF/>
	<line x11 y114 x214 y214 stylestroke:808080/>
	<line x114 y11 x214 y214 stylestroke:808080/>
	<path fillblack dM6.5 5.513 31-3 3z />
	</g>
	<g iddown fillnone stroke-linecapsquare
shape-renderingoptimizeSpeed displaynone>
	<rect fillrgb(212 208 200) width16 height16 />
	<rect fillnone stylestroke:808080 width16 height16/>
	<path fillblack dM7.5 6.513 31-3 3z />
	</g>
	</g>
	<g idskinScrollBarSmall>
	<use idSliderSkin xlink:hrefskinScrollBar_Default.svgSliderSkinSmall
x0 y0/>
	<use idButtonLeftSkin
xlink:hrefskinScrollBar_Default.svgButtonLeftSkinSmall x0 y0/>
	<use idButtonRightSkin
xlink:hrefskinScrollBar_Default.svgButtonRightSkinSmall x0 y0/>
	<g idcorner>
	<rect x0 y0 width10 height10
stylefill:FFFFFF;stroke:000000/>
	</g>
	</g>
	<g idButtonLeftSkinSmall>
	<g idup displayall>
	<rect x1 y1 width10 height10
stylefill-rule:evenodd;clip-rule:evenodd;fill:FFFFFF;stroke:B3B3B3;stroke-width:1.
0001;stroke-miterlimit:2.6131;/>
	<rect x0 y0 width10 height10
stylefill:FFFFFF;stroke:000000/>
	<text x 5 y5
stylefont-family:Tahoma;stroke:none;font-size:12;text-anchor:middle> </text>
	<path dM 8 2 1 -6 3 1 6 3 z
stylefill:000000;stroke:FF0000;stroke-width:0/>
	</g>
	<g iddown displaynone>
	<rect x1 y1 width10 height10
stylefill-rule:evenodd;clip-rule:evenodd;fill:FFFFFF;stroke:B3B3B3;stroke-width:1.
0001;stroke-miterlimit:2.6131;/>
	<rect x1 y1 width10 height10
stylefill:FFFFFF;stroke:000000/>
	<text x 5 y5
stylefont-family:Tahoma;stroke:none;font-size:12;text-anchor:middle> </text>
	<path dM 9 3 1 -6 3 1 6 3 z
stylefill:FF0000;stroke:FF0000;stroke-width:0/>
	</g>
	</g>
	<g idSliderSkinSmall>
	<g idup displayall>
	<rect idSkinSliderSmallBorder x0 y0 width200 height10
opacity0/>
	<g idbody>
	<rect idSkinSliderSmallBase
stylefill-rule:evenodd;clip-rule:evenodd;fill:FFFFFF;stroke:B3B3B3;stroke-width:1.
0001;stroke-miterlimit:2.6131; x1 y1 width444 height10/>
	<rect idSliderSkinSmallBar stylefill:FFFFFF;stroke:000000 x0
y0 width444 height10/>
	</g>
	<g idSliderSkinSmallThumb>
	<rect idsliderThumbBar
stylefill:B3B3B3;stroke:000000;stroke-width:0 x0 y0 width10
height10/>
	</g>
	<g idtickMajor displaynone>
	<text x0 y11 idtickLabelMajor xml:spacepreserve
stylefont-face:Arial;font-size:8;fill:black;stroke:1;text-anchor:middle></text>
	</g>
	</g>
	<g idmask>
	<rect idsliderMask x y0 width444 height18 opacity0/>
	</g>
	</g>
	<g idButtonRightSkinSmall>
	<g idup displayall>
	<rect x1 y1 width10 height10
stylefill-rule:evenodd;clip-rule:evenodd;fill:FFFFFF;stroke:B3B3B3;stroke-width:1.
0001;stroke-miterlimit:2.6131;/>
	<rect x0 y0 width10 height10
stylefill:FFFFFF;stroke:000000/>
	<text x 5 y5
stylefont-family:Tahoma;stroke:none;font-size:12;text-anchor:middle> </text>
	<path dM 2 2 1 6 3 1 -6 3 z
stylefill:000000;stroke:FF0000;stroke-width:0/>
	</g>
	<g iddown displaynone>
	<rect x1 y1 width10 height10
stylefill-rule:evenodd;clip-rule:evenodd;fill:FFFFFF;stroke:B3B3B3;stroke-width:1.
0001;stroke-miterlimit:2.6131;/>
	<rect x1 y1 width10 height10
stylefill:FFFFFF;stroke:000000/>
	<text x 5 y5
stylefont-family:Tahoma;stroke:none;font-size:12;text-anchor:middle> </text>
	<path dM 3 3 1 6 3 1 -6 3 z
stylefill:FF0000;stroke:FF0000;stroke-width:0/>
	</g>
	</g>
</svg>