Gizmos

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