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

SVG Textbox, Version 1.1.2, 2006-10-04, (see history at the end of the page)

This SVG textbox 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 textbox object. The scripts had been tested in Adobe SVG viewer version 3, version 6, Opera 9, Firefox/Mozilla SVG and Batik. There are limitations in Firefox 1.5 and 2.0 due to unimplemented DOM methods on text nodes (see below). In Opera 9 there are limitations because some special character keys collide with functional keys (see below)

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

Documentation

Requirements

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

Features

Dependencies on external functions

  1. textbox.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
    • .getTransformToRootElement(node)

Constructor

The following constructor function creates the textbox:

var textbox = new textbox(id,parentNode,defaultVal,maxChars,x,y,boxWidth,boxHeight,textYOffset,textStyles,boxStyles,cursorStyles,selBoxStyles,allowedChars,functionToCall);
Example:
//first a few styling parameters:
var textStyles = {"font-family":"Arial,Helvetica","font-size":15,"fill":"dimgray"};
var boxStyles = {"fill":"white","stroke":"dimgray","stroke-width":1.5};
var cursorStyles = {"stroke":"red","stroke-width":1.5};
var selBoxStyles = {"fill":"blue","opacity":0.5};
textbox1 = new textbox("textbox1","textbox1","Textbox1",25,100,100,200,30,22,textStyles,boxStyles,cursorStyles,selBoxStyles,"[a-zA-Z ]",writeOutTextContent);

The arguments are the following:

  1. id (String):
    unique id for the textbox
  2. parentNode (String or node reference):
    group id or node reference to the parent group that will contain the textbox geometry
  3. defaultVal (String):
    the initial text to be displayed after the textbox is created
  4. maxChars (integer):
    the allowed maximum number of characters to be entered in the textbox
  5. x (number, in viewBox coordinate system):
    left side of the textbox
  6. y (number, in viewBox coordinate system):
    upper side of the textbox
  7. boxWidth (number, in viewBox coordinate system):
    the width of the textbox
  8. boxHeight (number, in viewBox coordinate system):
    the height of the textbox
  9. textYOffset (number, in viewBox coordinate system):
    the offset of the text element in relation to the upper side of the textbox rectangle
  10. textStyles (array of literals with presentation attributes):
    an array literal containing the presentation attributes of the textbox texts; could include CSS classes; should at least include a "font-size" attribute; example: var textStyles = {"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 textbox; could include CSS classes; should at least include a "fill", "stroke" and "stroke-width" attribute; example: var boxStyles = {"fill":"white","stroke":"dimgray","stroke-width":1.5};
  12. cursorStyles (array of literals with presentation attributes):
    an array literal containing the presentation attributes of the textcursor; could include CSS classes; should include a "stroke" and "stroke-width" attribute; example: var cursorStyles = {"stroke":"red","stroke-width":1.5};
  13. selBoxStyles (array of literals with presentation attributes):
    an array literal containing the presentation attributes of the selection rectangle; could include CSS classes; example: var selBoxStyles = {"fill":"blue","opacity":0.5};
  14. allowedChars (RegExp arguments):
    range of allowed characters, this string will be used to create a RegExp object; example: [a-zA-Z ] or [0-9]; note that you can pass undefined or an empty string ("") if you don't want to restrict characters
  15. 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 texbox (string), the text value (string) and the changetype (string (release|change)). In case of an object, it calls the method .textboxChanged(). In case of an undefined value, no callBack function is executed. The callBack function is executed with a slight delay (200ms) to allow the texbox to first update it's state before calling the callback function. The changetype parameter "change" means that a change in the textbox' textstring occured, either by adding, deleting or modifying a character; "release" means that the textbox lost the focus; "set" means that a new value was just set by the method .setValue()

Methods

Current Limitations, Known Issues

Version history

Credits




Last modified: Wednesday, 04-Oct-2006 12:35:59 CEST
© carto:net (andreas neumann & andré m. winter)
original URL for reference: http://www.carto.net/papers/svg/gui/textbox/index.shtml
del.icio.us Add this page to del.icio.us