Inherits from: CGUI.js

1 ) function: hidePanes
2 ) function: showPanes
3 ) function: addToParentContained
4 ) function: addPane
5 ) function: addContentPane
6 ) function: setBkColor
7 ) function: addContentAsText
8 ) function: addContentAsSVG
9 ) function: addContentAsObject
10 ) function: removeFrame
11 ) function: close
12 ) function: toString
13 ) function: refresh
14 ) function: setSize
15 ) function: setTitle
16 ) function: getTitle
17 ) function: setStatus
18 ) function: rollup
19 ) function: foreground
20 ) function: background
21 ) function: rolldown
22 ) function: makeTitleBar
23 ) function: move
24 ) function: open
25 ) function: hideMenu

Object: Frame

Object Description:

Constructor: Frame
  • Parameter
    : x - x coordinate of this Frame relative to parent
y - y coordinate of this Frame relateive to parent
width - width of this Frame
height - height of this Frame
title - title of this Frame
b_close - boolean - is this Frame closable?
arr_btns - array of buttons to display in the button bar
ctrl_opts - control_options for this frame - see ControlBox
b_satus - boolean - does this frame have a status bar
b_content - boolean - does this frame have Content object
menu_item_array - array of MenuItems

Method: hidePanes
Description: hide the panes present in this frame

Notes: this function is used when minimizing a frame rather
than resizing the content panes.

Method: showPanes
Description: show the panes present in this pane

Notes: this function is used when restoring the frame to it's
normal size.

Method: addToParentContained
Add this frame to another SVG object, but have it be
contained by a seperate object. This allows you to
pop open a window, add it to the main display, but
have it close when the window from which it opened

  • Parameter
    : parent - the object this frame should be added to
  • Parameter
    : container - the object which contains this frame

Assume you have a window open containing a diagram and you
open another window which describes the diagram.

The second window could open inside the first (a), or
outside the first (b), but in both cases you want it to close
when the first window closes.

| +===+ | +===+
| | a | | | b |
| +---+ | +---+

In case a, the window is added to the first window. Then
when the window closes, a is closed with it. However,
in case b, if the second window is simply added to the
SVG document, then it will stay open when the first is
closed. For it to close with the first window, the first
window must be set as it's container.

Method: getFrame
Description: Given some target, this method will travel up
through the DOM until it finds the frame
containing the target.

  • Parameter
    : target - the object contained in the frame.

Having clicked the close button on a frame, you need to
travel up the DOM until you find the frame to close it
- of course it would also be possible to store a reference
to the frame in the button. It's just an example...

Method: addPane
Description: add and pane to this frame.
  • Parameter
    : pane - the pane to add
  • Parameter
    : ax - "left" "center" "right", the horizontal anchor position
  • Parameter
    : offsetx - the offset ('+':right '-':left) from the ax position
  • Parameter
    : ay - "top" "center" "bottom", the vertical anchor position
  • Parameter
    : offsety - the offset ('+':down '-':up) from the ay position

This method adds a pane to the frame. Started to use this to
allow multi-pane frames, but that's still buggy.
Currently their can only be one contentpane in a frame, but
I think the heirarchy should be modified to allow multiple
panes of any type. This will complicate window resizing, but is
I think, a necessary part of the GUI.

Method: addContentPane
Description: add a content pane to this frame
  • Parameter
    : contentpane - the contentpane to add

Notes: At present their can only be one contentpane in a frame.

Method: setBkColor
Description: sets background color of content, if there is one
  • Parameter
    : iColor - any valid svg color format
Added - Chris Peto

Method: addContentAsText
Description: passes the xml string to the contentpane's addAsText
method, and attaches eventhandlers to show the id
of any SVG element the mouse passes over.

  • Parameter
    : text - the XML encoded SVG string to display as content.

Method: addContentAsText
Description: passes the svg node to the contentpane's addAsSVG
method, and attaches eventhandlers to show the id
of any SVG element the mouse passes over.

  • Parameter
    : text - the XML encoded SVG string to display as content.

There is documentation/code mismatch

Method: addContentAsObject
Description: passes the javascript object (obj) to the contentpane's addAsObj
method, and attaches eventhandlers to show the id
of any SVG element the mouse passes over.

  • Parameter
    : obj - CGUI based object, i.e. Slider

Method: removeFrame
Description: removes a frame contained by this frame.
see discussion in addToParentContained.

  • Parameter
    : frame - the frame to remove

Method: close
Description: - close this frame
- requires removing it from the parent.
- once closed the frame is no longer in the DOM

Method: toString
Description: produces a string representation of this frame

Method: refresh
Description: refresh this frame by setting the svg attributes
to the values in the javascript. Primarily used
when resizing the frame.

Method: setSize
Description: Set the size of the frame
  • Parameter
    : width - new width
  • Parameter
    : height - new height

Notes: adjusts the size of the contentpane, which will scale
the content to reflect the new size.
adjusts the buttonbar, titlebar, and statusbar if present.
doesn't adjust any additional panes... (see comment on
problems with addPane)
Quirks: I believe that a problem with frame resizing and slider
thumb dissapearence is here. Everytime the window is resized
in negative orientation the thumb disapears (vertical axis)

Method: setTitle
Description: Set the text in the title bar of this frame
  • Parameter
    : text - the text to use in the title

Method: getTitle
Description: get the text used in the title of this frame

Method: setStatus
Description: Set the message in the status bar

Method: rollup
Description: - roll up, or minimize this frame
- leaves the titlebar, statusbar and buttonbars
visible if they exist.

Method: foreground

Description: Brings the frame to the foreground

Method: background

Description: Puts the frame in the background

Note: I'm not sure why the frame furthest in the background
needs to be inserted before the third array element (nextSibling x2)
but if it's inserted any further towards the beginning of the array,
the frame just disappears.

Function added 20020624 by cram

Method: rolldown
Description: unroll, or restore the frame to it's previous size

Method: doDrag
Description: prepare to drag this frame around the screen
  • Parameter
    : evt - the event triggering this action
  • Parameter
    : type - the event type; do this only in response to a
mousedown event

Method: doResize
Description: prepare to resize this frame
  • Parameter
    : evt - the event triggering this action
  • Parameter
    : type - the event type; do this only in response to a
mousedown event

Method: makeTitleBar
Description: create the title bar for this frame.

Method: move
Description: move the frame by dx and dy
  • Parameter
    : dx - the amount to move the frame in the x direction
  • Parameter
    : dy - the amount to move the frame in the y direction

Method: open
Description: Opens the frame

This involves:
- creating a background (rect)
- creating the titlebar (if desired)
- creating the buttonbar (if desired)
- creating the statusbar (if desired)
- and drawing the frame on the screen

Method: closeFrame
Description: close target frame

  • Parameter
    s: target - the frame to close

Method: rollup
Description: rollup target frame

method: foreground
description: foreground target frame

method: background
description: background target frame

method: resize
description: resize target frame

Method: rolldown
Description: rolldown target frame

Method: showId
Description: get the id of the target (or first ancestor with an id)
stick it in the status bar

Method: getId
Description: try to recursively get the id of a target element
not certain this belongs here...

Method: clearId
Description: clear the status bar

Method: hideMenu
Description: hides the menu, used when user does not click on
menu an menubar must be hidden from an external source
Note: will also be called by Frame when user clicks an other part (to do)
Added - Chris Peto