Home

What does SUIT mean? It stands for "slick user-interface toolkit". It is meant to be an easy-to-use, beautiful, and fully-featured UI toolkit for the HTML5 canvas. Why use HTML canvas and not normal DOM methods? There are some specialized web applications that require more than just what can be achieved with normal DOM methods. With canvas, you get more flexibility in the design, look-and-feel, and controls. Rendering and page layout also works while hardly having to worry about how things will look and behave in another browser. Besides being useful to you, this was started as an experiment to see how UI toolkits can work in the browser environment.

The project is nowhere near being fully-featured, but work is continuing at a very rapid pace. A lot of the code is ported from or inspired by the SUIT Midlet Toolkit and the GTK+ Toolkit.

SUIT will eventually provide many widgets of which to create your applications. Keep in mind that SUIT is under heavy development and these docs may be outdated. If you see an issue, please report it. If you are a developer or would like to know how SUIT is set up, take a look at the SUIT architecture.

Object Hierarchy

• suit.Object: An object that emits events which can be connected to callbacks
  • suit.Widget: Objects that render on the screen with a fixed width and height and respond to events
    • suit.Container: Widgets that hold child widgets, usually created for positioning the child widgets for layout
      • suit.Bin: Containers that hold only one item
        • suit.Button: Widget that you click to activate and usually holds a Label widget
        • suit.Screen: The main canvas element which holds your entire application
        • suit.Scroller: Widget that wraps scrollbars around its child so that it may extend to its natural size
      • suit.Packer: Packs child widgets to one side, in order from left-to-right or top-to-bottom
    • suit.Label: Widget created for displaying text

Miscellaneous Objects

• suit.Allocation: Rectangular area specifying widget bounds
• suit.Event: Represents a type of event
  • suit.EventKey: Keyboard key event
  • suit.EventButton: Mouse button event
  • suit.EventScroll: Mouse wheel scroll event
  • suit.EventMotion: Mouse move event
  • suit.Modifiers: Group of keys which can be held down on the keyboard during an event
• suit.Graphics: Abstraction to provide high-level manipulation of the canvas element
• suit.TextLayout: Object which handles word-wrap, alignment, rendering, etc of paragraphs of text

© The ΩF:∅ Foundation