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:tabgroup object

SVG tabgroup Object, Version 1.2.1 (2006-07-07), see history at end of page

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

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

Documentation

Requirements

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

Features

Dependencies on external functions

  1. tabgroup.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

Dom Structure of a tabgroup

Following is the DOM structure as it is generated by this tabgroup object for a typical tabgroup:

DOM of a typical tabgroup

In the above example we see the DOM structure of the first tab in the tabgroup "tabgroupTriangle". The group with the id "tabgroupTriangle" is the parentNode. Within this group we have an additional group that holds transform (translate) parameters. If you set "x" and "y" you are actually changing the transform parameters. This means that the content of the tab can stay in a local coordinate system. Next in the hierarchy there are 4 groups, one for each of the 4 tabs. Within this group we first have a path element for the tabbackground window. Next, there is a path for the tab, followed by a text element for the tabtitle. The tabtitle text element has tspan child nodes for each line in the tab title. The final group (the one marked in the screenshot) is the group for the tab content that one can reference through .tabwindows[tabindex]["content"]. The group with the id "oversizeContent" is already content of the tab.

Constructor

The following constructor function creates the tabgroup:

var tabgroupForEvents = new tabgroup(id,parentNode,x,y,width,height,tabheight,cornerLeft,cornerRight,tabmargins,spaceBetweenTabs,tabStyles,activetabBGColor,tabwindowStyles,tabtextStyles,tabTitles,activeTabindex,hideContent,functionToCall);

Example:
//first a few style array literals
var tabStyles = {"fill":"lightgray","stroke":"dimgray","stroke-width":1,"cursor":"pointer"};
var tabwindowStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};
var tabtextStyles = {"font-family":"Arial,Helvetica","font-size":15,"fill":"dimgray","font-weight":"normal"};
tabgroupRectRound = new tabgroup("tabgroupRectRound","tabgroupRectRound",200,550,340,200,20,"rect","round",10,5,tabStyles,"rgb(191,233,255)",tabwindowStyles,tabtextStyles,tabTitles,0,false,tabChanged);

The arguments are the following:

  1. id (String):
    unique id that identifies the tabgroup
  2. parentNode (node reference or String):
    a node reference to a group where the tabgroup geometry can be appended. Alternatively one can provide a String with the unique identifier for this group.
  3. x (number):
    the upper left x coordinate of the corner of the tabgroup (incl. the top tabs)
  4. y (number):
    the upper left y coordinate of the corner of the tabgroup (incl. the top tabs)
  5. width (number):
    the overall width of the tabgroup (incl. the top tabs)
  6. height (number):
    the overall height of the tabgroup (incl. the top tabs)
  7. tabheight (number):
    the height of the tabs in viewBox units
  8. cornerLeft (String ("rect"|"round"|"triangle")):
    the left corner type of the tab
  9. cornerRight (String ("rect"|"round"|"triangle")):
    the left corner type of the tab
  10. tabmargins (number):
    the space between the left side of the tab and the tab title in viewBox units; also controls the rounding radius or size of the triangle corners
  11. spaceBetweenTabs (number):
    the space between two neighbour tabs in viewBox units
  12. tabStyles (Array literal with presentation attributes):
    an array literal containing the presentation attributes of the tab; could include CSS classes; should have at least a "fill" attribute; example: var tabStyles = {"fill":"lightgray","stroke":"dimgray","stroke-width":1,"cursor":"pointer"};
  13. activetabBGColor (String):
    a String defining the fill attribute of an activated tab
  14. tabwindowStyles (Array literal with presentation attributes):
    an array literal containing the presentation attributes of the tab window; could include CSS classes; example: var tabwindowStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};
  15. tabtextStyles (Array literal with presentation attributes):
    an array literal containing the presentation attributes of the tab title texts; could include CSS classes; should have at least a "font-size" attribute; example: var tabtextStyles = {"font-family":"Arial,Helvetica","font-size":15,"fill":"dimgray","font-weight":"normal"};
  16. tabTitles (Array of Strings):
    an array of strings holding the tab titles. This array also defines the number of tabs within a tabgroup
  17. activeTabindex (integer, zero based):
    an index nr setting the given tab to active after tabgroup creation
  18. hideContent (boolean, true|false):
    a boolean value indicating that the tabgroup content group of inactive tab is set to hidden. A value of true triggers that the display attribute is set to none for inactive tabgroup contents
  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 id of the tabgroup (string), the title of the active tab (String), the index nr of the active tab (number, integer). In case of an object, it calls the method .tabActivated(id,tabTitle,tabindex). In case of an undefined value, no callBack function is executed. The callBack function is executed with a slight delay (200ms) to allow the tabgroup to update the tabs before executing the callback function.

Methods

Useful Properties

Version history




Last modified: Monday, 24-Jul-2006 16:19:03 CEST
© carto:net (andré m. winter & andreas neumann)
original URL for reference: http://www.carto.net/papers/svg/gui/tabgroup/index.shtml
del.icio.us Add this page to del.icio.us