Gizmo Objects

The pervasive building blocks of web interface components
are HTML, CSS and JavaScript. The judicious combination of these
3 raw technologies offers virtually unlimited possibilities —
but often quickly becomes unweildy.
Gizmos help manage that unwieldiness, but
make no assumptions on how these 3 underlying technologies
may be combined and used. If any one interface component is achievable
with HTML, CSS amd JavaScript then it is possible and easy to encapsulate
it as a Gizmo — thus greatly facilitating usage within a page,
maintenance, as well as parametrized variations and reuse.

Overview

Gizmos are user interface objects
that (may) have rich server-side and client-side behaviours.
On the client, gizmos support interaction, either directly from
the user, e.g. mouse clicks, or programmatically via event hooks.
A gizmo in a client web page may support talking back to
its server-side component.

The abstract base Gizmo class makes an absolute minimum of assumptions.
It only requires a page-unique identifier
— called gizmoid —
for each gizmo instance in a page. The minimum server-side call
to create a Gizmo is:

a_gizmo = Gizmo(‘g’)

The automatically generated client-side javascript equivalent is just as simple.

Gizmo subclasses modify this base Gizmo signature as they need.
Examples include a Collapsable box, Tabbed sections,
Sortable Table (aka DataGrid), a Form and
Form Field Widgets.

Gizmo Design Principles

  • A gizmo may be arbitrarily simple or arbitrarily complex.
  • The flesh and bones of a client-side gizmo are DOM elements.
    These may be enclosed under a single element, or
    may consist of elements dispersed anywhere throughout the page.
  • A client-side gizmo knows how to access the DOM elements
    of which it is made.
  • A gizmo has an identifier, or a gizmoid,
    guaranteed to be unique within the page’s namespace, and defines
    its own internal namespace.
  • The server-side component of a gizmo is an instance of the
    python class Gizmo.
  • The client-side component of a gizmo is a javascript object
    whose prototype is the Gizmo javascript object.
    The client-side javascript component of a gizmo is in the page’s
    global namespace, as the variable named Gizmo.gizmoid,
    a value that is guaranteed to be unique.
  • Gizmo instances may contain content, that can also be other
    gizmos. Nesting depth may be arbitrary.
  • On server, gizmos know how to prepare the hit’s dhi
    for their own needs.
  • Gizmos explicitly expose (on the client)
    selected internal elements, by
    declaring (on the server) an elem_names list.
    On the client, the corresponding
    DOM element can be accessed from anywhere in the page with:
    Gizmo.get_elem(name).
  • Styles on exposed elements may be set liberally per gizmo instance.
  • Gizmos may export behaviour, e.g.
    Collapsable.toggle_expand().
  • Gizmo may support events, consistent with their exported behaviour,
    e.g. Collapsable supports event toggle_expand.
  • Gizmos instances may be created directly from within a template,
    and at whatever point during page rendering that a Gizmo instance is
    created, it may contribute to the page’s Dhi instance.

More Information