main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:interactivity and svg gui:checkbox and radiobutton object

SVG checkBox and radioButtonGroup Object, Version 1.1.3 (2007-08-09), see version history at the end of the page

This SVG checkBox and radioButtonGroup object should assist authors of SVG webapplications in creating user interfaces.

Why should you create SVG only web applications? Advantages of SVG only applications are flexiblity (you can control every single aspect of a SVG GUI element) and scalability (in SVG your userinterface elements are scalable as well). If you need a pixel-precise, scalable application, HTML is not very well suited, since HTML form elements don't scale well. SVG also potentially allows more sophisticated GUI elements than HTML provides, such as slider, dial knobs, complex colourpickers, etc. Disadvantages include complexity (more complex than using HTML form elements) and a potentially bad user experience, if your SVG GUI elements behave different than native GUI elements of the operating system the user is used to. Some browsers still don't support SVG to HTML or HTML to SVG communication. In that case you are sort of locked into doing everything with SVG in order to reach the broadest audience. Another advantage of creating SVG only applications is, that your applications also work in SVG viewers outside the webbrowser (e.g. Batik, eSVG or SVG embedded applications).

See an example of the SVG checkBox and radioButtonGroup object. The scripts had been tested in Adobe SVG viewer version 3, version 6, MozillaSVG, Opera 9 and Batik.

The SVG checkbox and radiobutton object is free to use. If you do any substantial improvements, please send back your improvements to the author. The GUI elements of carto.net are licensed under the terms of the LGPL license and you need to distribute the license with your code. Additionally, you should create a link to carto.net in your project's "about page" or impressum. If you plan to use the GUI elements in a commercial product, please check back with the author of the GUI elements to investigate arrangements. The original URL for the checkbox and radiobutton object is http://www.carto.net/papers/svg/gui/checkbox_and_radiobutton/.

Documentation

Requirements

To use the checkBox and radioButtonGroup object, your project needs to meet the following requirements:

Features

Dependencies on external functions

  1. checkbox_and_radiobutton.js:
    • all of the objects and functions in this file are necessary
  2. timer.js:
    • all of the objects and functions in this file are necessary
  3. helper_functions.js:
    • all the global variables at the top of the file

Constructor for checkbox object

The following constructor function creates a checkbox:

var myCheckbox = new checkBox(id,parentNode,x,y,checkboxId,checkcrossId,checkedStatus,labelText,textStyles,labelDistance,labelYOffset,radioButtonGroup,functionToCall);

Example:


//labeltext styles
var labeltextStyles = {"font-family":"Arial,Helvetica","fill":"dimgray","font-size":15};
//now create a new checkBox instance
var myCheckbox = new checkBox("landcover","checkboxes",110,100,"checkBoxRect","checkBoxCross",true,"Landcover",labeltextStyles,12,5.5,undefined,getLayerInfo);

The arguments are the following:

  1. id (String):
    unique id that identifies the checkBox instance
  2. parentNode (String or node reference):
    unique id or node reference that identifies the parentNode (usually a group node) where the checkBox geometry can be appended
  3. x (number, in viewBox coordinates):
    the center x where the checkBox symbol should be placed
  4. y (number, in viewBox coordinates):
    the center y where the checkBox symbol should be placed
  5. checkboxId (String):
    a string representing a unique id to the checkBox symbol definition (usually in the <defs/> section)
  6. checkcrossId (String):
    a string representing a unique id to the checkCross or checkMark symbol definition (usually in the <defs/> section); while the checkBox symbol is always visible, the checkCross or checkMark symbol is hidden or visible to indicate the checkBox status
  7. checkedStatus (Boolean, true|false):
    a boolean value indicated whether the checkbox should be checked or not
  8. labelText (String):
    a String containing the label text to be displayed right of the checkBox symbols. Can be an empty String "" or undefined if you don't want a label
  9. textStyles (Array of literals with presentation attributes):
    an array literal containing the presentation attributes of the label text; could include CSS classes; should at least include a "font-size" attribute; example: var labeltextStyles = {"font-family":"Arial,Helvetica","fill":"dimgray","font-size":15};
  10. labelDistance (number, in viewBox coordinates):
    the distance between the center of the checkBox symbol and the labelText
  11. labelYOffset (number, in viewBox coordinates):
    the yOffset from the center of the checkBox symbol and the bottom of the labelText
  12. radioButtonGroup (radioButtonGroup object):
    the radioButtonGroup object where the checkBox belongs to. If this is a standalone checkBox that does not belong to a radioButtonGroup just specify undefined
  13. functionToCall (function, object or undefined):
    callBack function that will be fired after the checkBox was pressed or toggled. The return parameters are the following: id (string), checkedStatus (boolean) and labelText (String) In case of an object, the method .checkBoxChanged() of the given object is fired with the same parameters as listed above. The callBack function is executed with a slight delay (200ms) to allow the checkBox or radioButton to change its display state before executing the callback function. This value can be changed in the init() method of the checkBox object.

Methods of the checkBox object

Useful Properties of the checkBox object

Tip: if you don't like the y-offset of the text label in relation to the checkBox symbol, open the file checkbox_and_radiobutton.js and adopt the line this.label.setAttributeNS(null,"y",(this.y + this.textStyles["font-size"] * 0.3));. Most likely it should be enough to adopt the factor of 0.3 to some other value.

Constructor for radioButtonGroup object

The following constructor function creates a radioButtonGroup:

var myRadioButtons = radioButtonGroup(id,functionToCall);
Subsequently one has to create two or more checkBox object instances and hand over the radioButtonGroup instance to the checkBox (parameter radioButtonGroup) to tell it that it belongs to the radioButtonGroup. Note that in most cases one should not specify a callBack function (functionToCall) on a checkBox belonging to a radioButtonGroup, since the radioButtonGroup has its own callBack function.

Example:


//labeltext styles
var labeltextStyles = {"font-family":"Arial,Helvetica","fill":"dimgray","font-size":15};
//now create a new radioButtonGroup instance
var radioGroupBandwidth = new radioButtonGroup("radioGroupBandwidth",setBandwidth);
//the following three checkboxes are added to the radio button group stored in the object instance 'radioGroup'
var cbHighQuality = new checkBox("highbandwidth","radioButtonsBandwidth",660,100,"radioBorder","radioPoint",true,"High Bandwidth",labeltextStyles,12,5.5,radioGroupBandwidth,undefined);
var cbLowQuality = new checkBox("mediumbandwidth","radioButtonsBandwidth",660,120,"radioBorder","radioPoint",false,"Medium Bandwidth",labeltextStyles,12,5.5,radioGroupBandwidth,undefined);	
var cbLowQuality = new checkBox("lowbandwidth","radioButtonsBandwidth",660,140,"radioBorder","radioPoint",false,"Low Bandwidth",labeltextStyles,12,5.5,radioGroupBandwidth,undefined);		

The arguments are the following:

  1. id (String):
    unique id that identifies the checkBox instance
  2. functionToCall (function, object or undefined):
    callBack function that will be fired after the checkBox was pressed or toggled. The return parameters are the following: id (String), selectedId (String) and labelText (String). In case of an object, the method .radioButtonChanged() of the given object is fired with the same parameters as listed above. The callBack function is executed with a slight delay (200ms) to allow the checkBox or radioButton to change its display state before executing the callback function. This value can be changed in the init() method of the checkBox object.

Methods of the radioButtonGroup object

Useful Properties of the radioButtonGroup object

Version history

Credits




Last modified: Thursday, 09-Aug-2007 23:39:34 CEST
© carto:net (andreas neumann & andré m. winter)
original URL for reference: http://www.carto.net/papers/svg/gui/checkbox_and_radiobutton/index.shtml
del.icio.us Add this page to del.icio.us