title: Lifecycle of components with children
body: <p>I'm confused about where to call various aspects of childrens' lifecycle in composite components. I do not see the way how one Component may be used in other Component which in turn may be used in other etc. Unfortunately Michael Bolins - 'Closure The Definitive Guide' doesn't gives any examples. Neither I cannot find any such examples in Closure demos or in the internet.</p>
  
  <p>Here is my component with children:</p>
  
  <pre><code>goog.provide('MainToolbar');
  
  goog.require('goog.ui.Button');
  goog.require('goog.ui.Container');
  goog.require('goog.ui.FlatButtonRenderer');
  
  MainToolbar = function(){
      goog.ui.Container.call(this, goog.ui.Container.Orientation.HORIZONTAL);    
  };
  goog.inherits(MainToolbar, goog.ui.Container);
  
  MainToolbar.prototype.createDom = function(){
      var this_ = this;
      // Pre-render the container, just to do something different.
      //hc.render(goog.dom.getElement('main-buttons'));
      goog.array.forEach(
          ['Happy', 'Sleepy', 'Doc', 'Bashful', 'Sneezy', 'Grumpy', 'Dopey'],
          function(item) {
              var c = new goog.ui.Button(item,
                  goog.ui.FlatButtonRenderer.getInstance());          
              c.addClassName('goog-inline-block');
              c.setId(item);         
              this_.addChild(c, true);
          });
  };
  </code></pre>
  
  <p>Here is how I call it:</p>
  
  <pre><code>mainToolbar = new MainToolbar();
  mainToolbar.render(goog.dom.getElement('main-buttons'));
  </code></pre>
  
  <p>The problem is that MainToolbar.prototype.createDom calls itself second time and I get </p>
  
  <pre><code>Uncaught Error: The object already contains the key "Happy" from myApp 
  </code></pre>
  
  <p>Probably the addChild should be put to some other place, but to where? Constructor? enterDocument? And how it is supposed to scale?</p>
  
  <p>UPDATE: Here is callstack showing the second call:</p>
  
  <pre><code>MainToolbar.createDom (MainToolbar.js:70)
  goog.ui.Component.addChildAt (component.js:1009)
  goog.ui.Component.addChild (component.js:913)
  (anonymous function) (MainToolbar.js:81)
  goog.array.forEach.goog.NATIVE_ARRAY_PROTOTYPES.goog.array.ARRAY_PROTOTYPE_.forEach.l (array.js:179)
  MainToolbar.createDom (MainToolbar.js:70)
  goog.ui.Component.render_ (component.js:664)
  goog.ui.Component.render (component.js:621)
  </code></pre>