vertical container example を見てみる

• http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/container.html

<td width="50%" id="vc"> 
Vertical container example:
</td> 

まず、EVNETSに、すべてのコンポネントイベントタイプの配列を入れておく。

var EVENTS = goog.object.getValues(goog.ui.Component.EventType);

Component.EventTypeは@enumと指定されている。ClosureJSでは、列挙型もオブジェクト。

/**
 * Common events fired by components so that event propagation is useful.  Not
 * all components are expected to dispatch or listen for all event types.
 * Events dispatched before a state transition should be cancelable to prevent
 * the corresponding state change.
 * @enum {string}
 */
goog.ui.Component.EventType = {
  /** Dispatched before the component becomes visible. */
  BEFORE_SHOW: 'beforeshow',

  /**
   * Dispatched after the component becomes visible.
   * NOTE(user): For goog.ui.Container, this actually fires before containers
   * are shown.  Use goog.ui.Container.EventType.AFTER_SHOW if you want an event
   * that fires after a goog.ui.Container is shown.
   */
  SHOW: 'show',

  /** Dispatched before the component becomes hidden. */
  HIDE: 'hide',

  /** Dispatched before the component becomes disabled. */
  DISABLE: 'disable',

  /** Dispatched before the component becomes enabled. */
  ENABLE: 'enable',

  /** Dispatched before the component becomes highlighted. */
  HIGHLIGHT: 'highlight',

  /** Dispatched before the component becomes un-highlighted. */
  UNHIGHLIGHT: 'unhighlight',

  /** Dispatched before the component becomes activated. */
  ACTIVATE: 'activate',

  /** Dispatched before the component becomes deactivated. */
  DEACTIVATE: 'deactivate',

  /** Dispatched before the component becomes selected. */
  SELECT: 'select',

  /** Dispatched before the component becomes un-selected. */
  UNSELECT: 'unselect',

  /** Dispatched before a component becomes checked. */
  CHECK: 'check',

  /** Dispatched before a component becomes un-checked. */
  UNCHECK: 'uncheck',

  /** Dispatched before a component becomes focused. */
  FOCUS: 'focus',

  /** Dispatched before a component becomes blurred. */
  BLUR: 'blur',

  /** Dispatched before a component is opened (expanded). */
  OPEN: 'open',

  /** Dispatched before a component is closed (collapsed). */
  CLOSE: 'close',

  /** Dispatched after a component is moused over. */
  ENTER: 'enter',

  /** Dispatched after a component is moused out of. */
  LEAVE: 'leave',

  /** Dispatched after the user activates the component. */
  ACTION: 'action',

  /** Dispatched after the external-facing state of a component is changed. */
  CHANGE: 'change'
};

次：

// Programmatically create a vertical container.
    var vc = new goog.ui.Container();
    vc.setId('Vertical Container');

vcというコンテナを作る。第一引数が方向（goog.ui.Container.Orientation）だが、Container orientation; defaults to VERTICAL. setIdはコンポネントIDというヤツだが、HTMLのIDとはまったく別。

次：

    goog.array.forEach(
        ['Athos', 'Porthos', 'Aramis', 'd\'Artagnan'],
        function(item) {
          var c = new goog.ui.Control(item);
          c.setId(item);
          // For demo purposes, have controls dispatch transition events.
          c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
          vc.addChild(c, true);
        });

コントロールを追加していく。setDispatchTransitionEvents()は、Enables or disables transition events for the given state(s). goog.ui.Component.Stateも列挙型で：

/**
 * Common component states.  Components may have distinct appearance depending
 * on what state(s) apply to them.  Not all components are expected to support
 * all states.
 * @enum {number}
 */
goog.ui.Component.State = {
  /**
   * Union of all supported component states.
   */
  ALL: 0xFF,

  /**
   * Component is disabled.
   * @see goog.ui.Component.EventType.DISABLE
   * @see goog.ui.Component.EventType.ENABLE
   */
  DISABLED: 0x01,

  /**
   * Component is highlighted.
   * @see goog.ui.Component.EventType.HIGHLIGHT
   * @see goog.ui.Component.EventType.UNHIGHLIGHT
   */
  HOVER: 0x02,

  /**
   * Component is active (or "pressed").
   * @see goog.ui.Component.EventType.ACTIVATE
   * @see goog.ui.Component.EventType.DEACTIVATE
   */
  ACTIVE: 0x04,

  /**
   * Component is selected.
   * @see goog.ui.Component.EventType.SELECT
   * @see goog.ui.Component.EventType.UNSELECT
   */
  SELECTED: 0x08,

  /**
   * Component is checked.
   * @see goog.ui.Component.EventType.CHECK
   * @see goog.ui.Component.EventType.UNCHECK
   */
  CHECKED: 0x10,

  /**
   * Component has focus.
   * @see goog.ui.Component.EventType.FOCUS
   * @see goog.ui.Component.EventType.BLUR
   */
  FOCUSED: 0x20,

  /**
   * Component is opened (expanded).  Applies to tree nodes, menu buttons,
   * submenus, zippys (zippies?), etc.
   * @see goog.ui.Component.EventType.OPEN
   * @see goog.ui.Component.EventType.CLOSE
   */
  OPENED: 0x40
};

次：

    vc.addChildAt(new goog.ui.Separator(), 3, true);
    vc.getChild('Porthos').setEnabled(false);

これはいいとして、次：

    vc.render(goog.dom.getElement('vc'));
    goog.events.listen(vc, EVENTS, logEvent);

ここで、renderターゲットを'vc'としてレンダリング。イベントにリッスン関係を確立。あとは、イベントリスナー関数（ハンドラ関数と呼ぶこともある）logEventを書けばいい。