6 Replies Latest reply on Jun 18, 2009 10:20 PM by *Prashant Shelke*

    From TileList to Canvas

    Peterha1

      Hello,

       

      In my application I have the next elements:

      - TileList with images from a XML-file.

      - Canvas

       

      My question is: I want that when I click on an image in the TileList, that the image will be placed in the Canvas.

       

      But I don't have any idea how to fix this with click().

       

      Peter

        • 1. Re: From TileList to Canvas
          Gregory Lafrance Level 6

          Just put an <mx:Image> control in the canvas, perhaps with an ID of currImg, and in the TileList click handler, currImg.source = myTL.selectedItem.src where src is the data field in your data provider for the image path.

           

          You may need to tweak this, but the concept is simple. You populate the Image control source property from some data for the currently selected item in the TileLIst.

           

          If this post answers your question or helps, please mark it as such.

          • 2. Re: From TileList to Canvas
            Peterha1 Level 1

            Thanks for your reply.

             

            Now I have the following code:

            private function clickHandler(event:MouseEvent):void
            {
                 image.source = TileList.selectedItem.src;
            }
            

             

            <mx:TileList id="TileList"
                 dataProvider="{myDP}"
                 itemClick="clickHandler(event)" />
            
            <mx:Canvas>
                 <mx:Image id="image" />
            </mx:Canvas>
            

             

            But unfortunatly it doesn't work. Is there something I'm doing wrong??

            • 3. Re: From TileList to Canvas
              Peterha1 Level 1

              I've changed the code to this:

               

              private function clickHandler(event:Event):void {
                   imageShape.source = myTL.selectedItem.shape;
              }
              
              <mx:TileList id="myTL"
                   dataProvider="{myDP}"
                   itemClick="clickHandler(event)" />
                   
              <mx:Canvas id="canvasBig"
                   width="500" height="500">
                   <mx:Image id="imageShape" />
              </mx:Canvas>
              

               

              This works fine. But when I select a new item from the TileList, the old item is being replaced.

              But what I don't want to replace the old item. Because it should be possible to have several items in the canvas.

               

              How do I have to change the code? I've already tried "addChild", but that didn't work...

              • 4. Re: From TileList to Canvas
                *Prashant Shelke* Level 4

                If you want to add several child images on Canvas


                private function clickHandler(event:Event):void 
                {
                     var new
                ImageShape:Image = new Image();
                     newImageShape.source = myTL.selectedItem.shape;    
                     canvasBig.addChild(newImageShape);
                     /** here you can apply logic to check whether Image is already place on Canvas or no If You Want!
                     */
                }

                 

                • 5. Re: From TileList to Canvas
                  Peterha1 Level 1

                  Thanks a lot! That's what I was searching for.

                   

                  Peter

                  • 6. Re: From TileList to Canvas
                    *Prashant Shelke* Level 4

                    Your wel-come