1 Reply Latest reply on Apr 24, 2007 12:10 PM by davidmedifit

    Issue using includeInLayout

    davidmedifit Level 1
      Hi,
      I'm trying to dynamically create, and display a number of canvas components in a panel, and I am having a problem displaying the components.
      In a nutshell, I'm trying to do the following:
      1) Create an application and container
      2) Create an array of components
      3) Display each of the components, by giving them x and y values by setting the "includeInLayout" property to true

      Step 3 is not happening, though. I have stepped through the debugger, and all of the properties are getting set ok. At this stage I'm thinking there is something I'm not getting about "includeInLayout". For the record, I have tried this with many different containers (e.g., panels in a VBox, etc) with no better success.

      Any help is appreciated. The code is as follows:

      Application file:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Script>
      <![CDATA[
      private var thumbnails:Array;

      private function createThumbnails():void
      {
      var i:int;
      var row:int = 0;
      var col:int = -1;
      var n:int = 15;
      var filterCount:int;
      thumbnails = new Array(n);
      filterCount = n;

      for (i=0; i < n; i++)
      {
      var thumb:canvasTest = new canvasTest();
      thumbnails = thumb;
      }
      layoutCanvas();
      }

      private function layoutCanvas():void
      {
      var tileWidth:Number = 162;
      var tileHeight:Number = 142;
      var numCols:int = 3;

      var row:int = 0;
      var col:int = -1;

      var n:int = 15;
      for (var i:int = 0 ; i < n ; i++)
      {
      var thumb:canvasTest = thumbnails
      ;

      col++;
      if (col > numCols - 1)
      {
      row++;
      col = 0;
      }

      var xTo:Number = col * (162 + 2);
      var yTo:Number = row * (142 + 2);

      thumb.x = xTo;
      thumb.y = yTo;
      thumb.visible = true;
      thumb.includeInLayout = true;
      }
      }
      ]]>
      </mx:Script>
      <mx:Panel width="100%" height="100%" creationComplete="createThumbnails()" backgroundColor="#000000">

      </mx:Panel>
      </mx:Application>



      Canvas Component:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
      width="162" height="142"
      borderStyle="solid"
      borderColor="#FFFFFF"
      horizontalScrollPolicy="off" verticalScrollPolicy="off"
      rollOver="rollOverHandler(event)"
      rollOut="rollOutHandler(event)"
      dropShadowColor="#000000"
      shadowDistance="2"
      >
      <mx:Script>
      <![CDATA[
      private function rollOverHandler(event:MouseEvent):void
      {
      setStyle("borderColor", "#CCCCCC");
      setStyle("dropShadowEnabled", true);

      }

      private function rollOutHandler(event:MouseEvent):void
      {
      setStyle("borderColor", "#FFFFFF");
      setStyle("dropShadowEnabled", false);

      }
      ]]>
      </mx:Script>
      <mx:Text text="got here"/>
      </mx:Canvas>
        • 1. Re: Issue using includeInLayout
          davidmedifit Level 1
          Oops! Turns out I missed the most important part:
          I added to this block of code:
          for (i=0; i < n; i++)
          {
          var thumb:canvasTest = new canvasTest();
          thumbnails = thumb;
          thumbContent.addChild(thumb); <!-- I added this line - "thumbContent" is the ID I gave to the panel-->
          }

          I also added "thumbContent" as the id of the panel.

          That sets the context for the components to display in.

          Cheers,

          David