This is a sample showing the types of buttons that can be created using custom Button Tags. This simplifies the creation of each Button widget by using the familiar XML element/attribute syntax that SVG'ers are already accustomed to. To see the details of this example, be sure to right-click (or option-click on the Macintosh) the SVG image above.
A summary of the Button elements and their associated attributes follows:
The Button Namespace
xmlns:gui="http://www.kevlindev.com/gui"
button
x: the x coordinate of the upper left corner of the button
y: the y coordinate of the upper left corner of the button
width: the width of the button
height: the height of the button
label: a string to be used as the text label of the button
callback: a string of JavaScript to be execute each time the button is pressed
example:
<gui:button mode="toggle" x="10" y="10" width="100" height="20" label="Test" callback="alert('hello')/>
checkbox
x: the x coordinate of the upper left corner of the checkbox
y: the y coordinate of the upper left corner of the checkbox
label: a string to be used as the text label of the checkbox
callback: a string of JavaScript to be execute each time the checkbox is pressed
example:
<gui:checkbox x="10" y="10" label="Yes"/>
radiobutton
group: the group to which this radiobutton belongs. When a button in this group is selected, the last selected radiobutton will be deselected.
x: the x coordinate of the upper left corner of the radiobutton
y: the y coordinate of the upper left corner of the radiobutton
label: a string to be used as the text label of the radiobutton
callback: a string of JavaScript to be execute each time the radiobutton is pressed
example:
<gui:radiobutton group="names" x="10" y="10" label="John"/> <gui:radiobutton group="names" x="10" y="20" label="Bill"/> <gui:radiobutton group="names" x="10" y="30" label="Bob"/>
In order to use these custom tags, you will need to load the following JavaScript file into your SVG file. Once the SVG file has loaded, you need to make a call to loadGUI() and then all instances of the custom tags will be replaced with their SVG equivalents.