title: Using a composite MXML component from ActionScript
body: <p>I'm trying componentize one of the pieces of UI in an AIR application that I'm developing in Flex.  In this example, I want to display file information on a single line (which has an icon, some text/link and the size).</p>
  
  <p>My code looks like this (component is called FileDisplay):</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
      &lt;mx:Script&gt;
          &lt;![CDATA[
              public function set iconType(source:String):void {
                  this.ficon.source = source;
              }
  
              public function set fileName(name:String):void {
                  this.fname.htmlText = name;
              }
  
              public function set fileSize(size:String):void {
                  this.fsize.text = size; 
              }
          ]]&gt;
      &lt;/mx:Script&gt;
      &lt;mx:Image id="ficon" /&gt;
      &lt;mx:Label id="fname" left="20" right="30" text="Filename" /&gt;
      &lt;mx:Label id="fsize" right="0" text="0 K" /&gt;
  &lt;/mx:Canvas&gt;
  </code></pre>
  
  <p>When I'm using this component in my main application, the actionscript looks like:</p>
  
  <pre><code>for each (var file:XML in result.files) {
      var fd:FileDisplay = new FileDisplay();
      fd.fileName = '&lt;a href="blah"&gt;'+file.name+'&lt;/a&gt;';
      fd.iconType = getFileTypeIcon(file.name);
      fd.fileSize = getFileSizeString(file.size);
  
      this.file_list.addChild(fd);
  }
  </code></pre>
  
  <p>However, when I do this, I get an error: Error #1009: Cannot access a property or method of a null object reference.  This is because the child components of the FileDisplay are null (or at least they show up that way in the debugger).</p>
  
  <p>Does anyone know if there's a way around this?  Am I supposed to be waiting for events indicating the child components were created?  Is there a more common pattern that solves this problem?</p>
  
  <p>For now I can manually do everything in ActionScript in my main app (create a Canvas and add children to it) but I would appreciate any insight on how to separate the code more cleanly.</p>