The Widget class

The Widget class is a bit like the View class, but has both a different visual appearance and a slightly different behaviour. Of course, a View window is meant to manage different GUI layouts in your application, while widgets are more generic. With widgets, you have complete visual control. A Widget may be half transparent, like the Dock, or completely opaque, like a View window. A current limitation is that it can only be opened on the main Workspace screen.

When creating a new Widget, this is the syntax:

var w = new Widget( {

    width: 400,
    height: 400,
    valign: 'bottom',
    halign: 'right',
    above: true

} );

This would create a Widget that is 400×400 pixels wide and high, aligned bottom right of the screen, always staying above View windows and other elements (except the screen title bar).

Here is a list of supported flags:

  • animate – whether or not size and position changes should be animated
  • transparent – set if the Widget background is transparent
  • background – set if there is a background image or color
  • border-radius – set if you want rounded corners, in pixels
  • width – the width in pixels
  • height – the height in pixels
  • top – the y coordinate of the Widget, in pixels
  • left – the x coordinate of the Widget, in pixels
  • valign – vertical alignment, top, bottom or middle
  • halign – horizontal alignment, left, center or right
  • scrolling – if there should be scrollbars on overflowing content
  • above – if the Widget should lay above other views and widgets
  • below – if the Widget should lay below other views and widgets

Methods in the Widget class

The Widget class provides the following methods:

getWidgetId() – gets the id for the Widget, used to pass with messages

getFlag( string ) – gets the flag value of the Widget, by name

setFlag( string, value ) – sets the flag value of the Widget, by name and value

setContent( string, callback ) – sets the HTML content of the Widget. You can add an optional callback function that will be executed once the content has been fully set.

raise() – gives the Widget a higher z-index

lower() – gives the Widget a lower z-index

autosize() – makes the Widget change size to fit its content

close() – closes the Widget and frees up memory

When an application quits, all of its widgets are automatically closed.

Was this page helpful?