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

SVG SelectionList, Version 1.4.1, 2007-04-16, (see history at the end of the page)

This SVG selectionList 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 selectionList object. The scripts had been tested in Adobe SVG viewer version 3, version 6, Mozilla SVG, Opera9 and Batik.

The selectionList 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 selectionList is http://www.carto.net/papers/svg/gui/selectionlist/.

Documentation

Requirements

To use the selectionList, your project needs to meet the following requirements:

Features

Dependencies on external functions

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

Constructor

The following constructor function creates the selectionList:

var mySelectionList = new selectionList(id,parentNode,elementsArray,width,xOffset,yOffset,cellHeight,textPadding,heightNrElements,textStyles,boxStyles,scrollbarStyles,smallrectStyles,highlightStyles,triangleStyles,preSelect,openAbove,putOnTopOfParent,functionToCall);
Example:
//first a few styling parameters:
var selBoxCellHeight = 16;
var selBoxTextpadding = 3;
var selBoxtextStyles = {"font-family":"Arial,Helvetica","font-size":11,"fill":"dimgray"};
var selBoxStyles = {"stroke":"dimgray","stroke-width":1,"fill":"white"};
var selBoxScrollbarStyles = {"stroke":"dimgray","stroke-width":1,"fill":"whitesmoke"};
var selBoxSmallrectStyles = {"stroke":"dimgray","stroke-width":1,"fill":"lightgray"};
var selBoxHighlightStyles = {"fill":"dimgray","fill-opacity":0.3};
var selBoxTriangleStyles = {"fill":"dimgray"};
//now the creation of the selectionlist
var selFruits = new selectionList("fruits","fruits",fruits,170,50,50,selBoxCellHeight,selBoxTextpadding,7,selBoxtextStyles,selBoxStyles,selBoxScrollbarStyles,selBoxSmallrectStyles,selBoxHighlightStyles,selBoxTriangleStyles,3,false,true,myFruitsResult);

The arguments are the following:

  1. id (String):
    unique id that identifies the selectionList
  2. parentNode (String or object):
    an existing group id or node reference (<g/> or <svg/> element) where the new selectionList object will be appended. This group is preferably empty, but does not have to be. If the group id or node reference does not exist, the script creates a new empty parent group and appends it to the root element.
  3. elementsArray (Array of Strings):
    array of values to be selected in the selectionList
  4. width (number, in viewBox coordinate system):
    overall width of the selectionList
  5. xOffset (number, in viewBox coordinate system):
    left side of the selectionList rectangle
  6. yOffset (number, in viewBox coordinate system):
    top of the selectionList rectangle
  7. cellHeight (number, in viewBox coordinate system):
    the height of the selectionList and a row in the unfolded list
  8. textPadding (number, in viewBox coordinate system):
    the horizontal text padding, offset from the right of the rectangle of the textbox
  9. heightNrElements (number, integer):
    height of unfolded list in number of elements
  10. textStyles (array of literals with presentation attributes):
    an array literal containing the presentation attributes of the selection box texts; could include CSS classes; should at least include a "font-size" attribute; example: var selBoxtextStyles = {"font-family":"Arial,Helvetica","font-size":11,"fill":"dimgray"};
  11. boxStyles (array of literals with presentation attributes):
    an array literal containing the presentation attributes of the selection box; could include CSS classes; should at least include a "fill", "stroke" and "stroke-width" attribute; example: var selBoxStyles = {"stroke":"dimgray","stroke-width":1,"fill":"white"};
  12. scrollbarStyles (array of literals with presentation attributes):
    an array literal containing the presentation attributes of the scrollbar; could include CSS classes; example: var selBoxScrollbarStyles = {"stroke":"dimgray","stroke-width":1,"fill":"whitesmoke"};
  13. selBoxSmallrectStyles (array of literals with presentation attributes):
    an array literal containing the presentation attributes of the small rectangles (the ones containing the triangles); could include CSS classes; example: var selBoxSmallrectStyles = {"stroke":"dimgray","stroke-width":1,"fill":"lightgray"};
  14. highlightStyles (array of literals with presentation attributes):
    an array literal containing the presentation attributes of the highlight rectangles; could include CSS classes; example: var selBoxHighlightStyles = {"fill":"dimgray","fill-opacity":0.3};
  15. selBoxTriangleStyles (array of literals with presentation attributes):
    an array literal containing the presentation attributes of the triangle (where the user clicks for unfolding or scrolling the list); could include CSS classes; example: var selBoxTriangleStyles = {"fill":"dimgray"};
  16. preSelect (number, integer, zero-based):
    index of preselected element, zero based
  17. openAbove (boolean, true|false):
    defines if the box opens to the bottom (false) or the top (true)
  18. putOnTopOfParent (boolean, true|false):
    defines if the box will be appended to the top of it's parent group on activation. This ensures that the selectionList always opens on top of other elements in the same group. Set to true if you want this behaviour, false if you don't.
  19. functionToCall (function or object or undefined):
    callBackFunction: you can pass a function, object or undefined. In the case of function and object the parameters returned are: the groupId of the selectionList (string), the index nr selected (number, integer), the value selected (string). In case of an object, it calls the method .getSelectionListVal(). In case of an undefined value, no callBack function is executed. The callBack function is executed with a slight delay (200ms) to allow the selectionlist to unfold before executing the callback function.

Methods

Useful Properties

Version history




Last modified: Monday, 16-Apr-2007 15:23:50 CEST
© carto:net (andreas neumann & andré m. winter)
original URL for reference: http://www.carto.net/papers/svg/gui/selectionlist/index.shtml
del.icio.us Add this page to del.icio.us