Labs/Thunderhead/TheBook

From MozillaWiki
< Labs‎ | Thunderhead
Revision as of 04:57, 12 June 2009 by Bgalbraith (talk | contribs) (Created page with '= The Thunderhead "Book" = As I've been hacking on Thunderhead (aka "Th") I have various things I need to write down, but I haven't decided on a doc format for Th, so just going...')
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

The Thunderhead "Book"

As I've been hacking on Thunderhead (aka "Th") I have various things I need to write down, but I haven't decided on a doc format for Th, so just going to record the stuff here.

Components

Th is a GUI toolkit. Its components are built on top of a small OO library called JSTraits, which in turn is inspired by John Resig's post on JS OO libraries, which in turn was inspired by... you get the idea.

Any Th component must extend th.Component.

Box Model

Th components use the CSS box model for rendering, not for layout. That is, Th components have a margin, a border, padding, and content. Important: note that the margin is where the rendering and layout models conflate. The CSS layout mechanism collapses adjacent margins.

Th doesn't (consistently) collapse component margins because in Th, layout is pluggable--so layout managers can decide on an individual basis want to do with margin.

All of Th's default layout managers do not collapse margins.

Insets

The "insets" of a component is the size of the border and the padding of a component along each size; it is of this shape:

{ top: 10, right: 10, bottom: 10, left: 10 }

Layout

A Th container uses a layout manager to work out where to put its children components and how big to make them.

Some layout managers rely on the components themselves to provide hints as to how to size them. These hints are provided by the following three methods:

  • getMinimumSize
  • getPreferredSize
  • getMaximumSize

Layout managers may use none or more of these methods to work out how to size the components in a container. These methods should return an object of this shape:

{ height: 100, width: 100 }

Default implementations of these methods are provided that simply return the component's insets.