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

SVG Window Object, Version 1.2.1 (2007-03-26), see history at end of page

This SVG Window object should assist authors of SVG webapplications in creating user interfaces. Note that the object Name Window starts with an uppercase "W" in order to avoid overlap with the browser's or SVG viewer's window object!

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

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

Documentation

Requirements

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

Features

Dependencies on external functions

  1. Window.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 Window object:

var myWindow = new Window(id,parentId,width,height,transX,transY,moveable,constrXmin,constrYmin,constrXmax,constrYmax,showContent,placeholderStyles,windowStyles,margin,titleBarVisible,statusBarVisible,titleText,statusText,closeButton,minimizeButton,maximizeButton,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,functionToCall);

Example:
//first a few styles
var winPlaceholderStyles = {"fill":"none","stroke":"dimgray","stroke-width":1.5};
var windowStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};
var titlebarStyles = {"fill":"gainsboro","stroke":"dimgray","stroke-width":1};
var statusbarStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};
var titletextStyles = {"font-family":"Arial,Helvetica","font-size":14,"fill":"dimgray"};
var statustextStyles = {"font-family":"Arial,Helvetica","font-size":10,"fill":"dimgray"};
var buttonStyles = {"fill":"gainsboro","stroke":"dimgray","stroke-width":1};
var titlebarHeight = 17;
var statusbarHeight = 13;
myMapApp.Windows["navWindow"] = new Window("navWindow","Windows",210,200,810,85,true,0,80,1024,700,true,winPlaceholderStyles,windowStyles,3,true,false,"Navigation Window","",true,true,true,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,buttonTextChange);

The constructor arguments are the following:

  1. id (String):
    unique id that represents a window. The outermost newly created group of the Window geometry gets this id. Furthermore, this id is passed to callBack functions when triggering Window events
  2. parentId (String or object):
    an existing group id or node reference (<g/> or <svg/> element) where the new Window object will be appended. This group does not need to be empty. The new Window group is appended to this group as last child. If the group id does not exist, the script creates a new empty parent group and appends it to the root element.
  3. width (number):
    width of the Window in viewBox coordinates
  4. height (number):
    height of the Window (incl. title and status bar) in viewBox coordinates
  5. transX (number):
    the position of the left edge of the window in viewBox coordinates
  6. transY (number):
    the position of the upper edge of the window in viewBox coordinates
  7. moveable (boolean, true|false):
    indicates whether the Window may be moved or not
  8. constrXmin (number):
    the left constraint, the constraints define the area where the Window can be moved within
  9. constrYmin (number):
    the upper constraint
  10. constrXmax (number):
    the right constraint
  11. constrYmax (number):
    the lower constraint
  12. showContent (boolean):
    value may hold true or false, indicates whether the Window content should be visible or hidden during window movements
  13. placeholderStyles (Array of literals with presentation attributes):
    an array literal containing the presentation attributes of the placeholder rectangle; this is the style of the placeholder rectangle that is displayed instead of the window content if showContent is set to true; could include CSS classes; example: var winPlaceholderStyles = {"fill":"none","stroke":"dimgray","stroke-width":1.5};
  14. windowStyles (Array of literals with presentation attributes):
    an array literal containing the presentation attributes of the Window rectangle; could include CSS classes; example: var windowStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};
  15. margin (number):
    a number in viewBox coordinates describing a margin. Used e.g. for placing text and buttons in statusBar or titleBar
  16. titleBarVisible (boolean, true|false):
    indicates whether the Window should have a title bar
  17. statusBarVisible (boolean, true|false):
    indicates whether the Window should have a status bar
  18. titleText (String or undefined):
    a string specifying the Window title text
  19. statusText (String or undefined):
    a string or undefined value specifying the Window status text
  20. closeButton (boolean, true|false):
    indicates whether the Window should have a closeButton. The script loooks for an existing symbol with the id "closeButton" or creates a new closeButton in the <defs/> section if a symbol with this id does not exist. Please note that a closed Window still exists and can be opened again using the method .open()
  21. minimizeButton (boolean, true|false):
    indicates whether the Window should have a minimizeButton. The script loooks for an existing symbol with the id "minimizeButton" or creates a new minimizeButton in the <defs/> section if a symbol with this id does not exist
  22. maximizeButton (boolean, true|false):
    indicates whether the Window should have a maximizeButton. The script loooks for an existing symbol with the id "maximizeButton" or creates a new maximizeButton in the <defs/> section if a symbol with this id does not exist
  23. titlebarStyles (Array of literals with presentation attributes):
    an array literal containing the presentation attributes of the titlebar rectangle; could include CSS classes; example: var titlebarStyles = {"fill":"gainsboro","stroke":"dimgray","stroke-width":1};
  24. titlebarHeight (number):
    a number value specifiying the titleBar height in viewBox coordinates
  25. statusbarStyles (Array of literals with presentation attributes):
    an array literal containing the presentation attributes of the statusbar rectangle; could include CSS classes; example: var statusbarStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};
  26. statusbarHeight (number):
    a number value specifiying the statusBar height in viewBox coordinates
  27. titletextStyles (Array of literals with presentation attributes):
    an array literal containing the presentation attributes of the titlebar text; could include CSS classes; should at least include a "font-size" attribute; example: var titletextStyles = {"font-family":"Arial,Helvetica","font-size":14,"fill":"dimgray"};
  28. statustextStyles (Array of literals with presentation attributes):
    an array literal containing the presentation attributes of the statusbar text; could include CSS classes; should at least include a "font-size" attribute; example: var statustextStyles = {"font-family":"Arial,Helvetica","font-size":10,"fill":"dimgray"};
  29. buttonStyles (Array of literals with presentation attributes):
    an array literal containing the presentation attributes of the buttons; could include CSS classes; should at least include a "fill", "stroke" and "stroke-width" attribute; example: var buttonStyles = {"fill":"gainsboro","stroke":"dimgray","stroke-width":1};
  30. functionToCall (function, object or undefined):
    a callBack function that is called after a window event occurs. The parameters for the callBack functions are as follows: id of the Window, eventType (string). In case of an object, the method .windowStatusChanged(id,evtType) is called. In case of a undefined value, no callBack function is executed. "evtType" may hold the following values: minimized, maximized, closed, opened, removed, moved, movedTo, resized, moveStart, moveEnd and created. For some event types, the callBack function is executed with a slight delay (200ms) to allow the Window to change state before executing the callback function. The events created and resized can be used to trigger the creation or update of the window decoration.

Methods

Useful Properties

Current Limitation

Currently, the Windows cannot be resized by dragging the window corners. They can only be resized by script. This functionality will be added in a later version of the window. Furthermore, no scrollbars are added if the window content is bigger than the window size.

Version history




Last modified: Monday, 26-Mar-2007 17:07:31 CEST
© carto:net (andré m. winter & andreas neumann)
original URL for reference: http://www.carto.net/svg/gui/Window/index.shtml
del.icio.us Add this page to del.icio.us