How can I reference drawn objects for later use

[roestigraben]

Hello,

I paste below the code of a simple roadmap application where I draw a rectangle for each project I have in my ArrayCollection to show relationship between used DDR speed and type and calendar info.

This works fine so far.

But what I would like now to do is when I hover over a rectangle then I would like to add more info in a added component that becomes visible close by the hovered element.

To do this I need to have a reference for each rectangle, but with drawn graphics having created the map, I don't have an id to reference to.

Can anyone help me with a trigger suggestion

Best regards

Roestigraben

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                 xmlns:s="library://ns.adobe.com/flex/spark"

                                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:assets="assets.*" creationComplete="application1_creationCompleteHandler(event)">

  <fx:Style source="DDRroadmap.css"/>

  <fx:Script>

                    <![CDATA[

                              import flash.display.Shape;

                              import flash.display.Sprite;

                              import mx.collections.ArrayCollection;

                              import mx.collections.ArrayList;

                              import mx.events.FlexEvent;

                              import spark.primitives.Rect;

                              import valueObjects.DDRProjects;

                              [Bindable]

                              private var ddrAC:ArrayCollection=new ArrayCollection(

                                        [{project:"Arnie", pgDate:"Q1/12", ddrType:"DDR3/2", ddrSpeed:"533"},

                                        {project:"MPE41", pgDate:"Q3/12", ddrType:"DDR3/2", ddrSpeed:"800"},

                                        {project:"MPE42", pgDate:"Q4/11", ddrType:"DDR3/2", ddrSpeed:"1033"},

                                        {project:"Neuron", pgDate:"Q2/12", ddrType:"DDR3/2", ddrSpeed:"800"},

                                        {project:"MPE51", pgDate:"Q4/13", ddrType:"DDR4", ddrSpeed:"1200"},

                                        {project:"MPEwoww", pgDate:"Q4/14", ddrType:"DDR4", ddrSpeed:"1400"},

                                        {project:"Thor", pgDate:"Q3/13", ddrType:"DDR3/2", ddrSpeed:"800"},

                                        {project:"Boxster", pgDate:"Q3/12", ddrType:"DDR3/2", ddrSpeed:"900"}]);

                              private var xx:Number;

                              [Bindable]

                              private var todayX:Number;

                              protected function application1_creationCompleteHandler(event:FlexEvent):void

                              {

                                        for (var i:Number = 0; i < ddrAC.length; i++) {

                                                  var catObj:Object = ddrAC.getItemAt(i);

                                                  var catVO:DDRProjects = new DDRProjects();

                                                  catVO.project = catObj.project;

                                                  catVO.pgDate = catObj.pgDate;

                                                  catVO.ddrType = catObj.ddrType;

                                                  catVO.ddrSpeed = int(catObj.ddrSpeed);

                                                  ddrAC.setItemAt(catVO, i);

                                                  q2x(catVO.pgDate);

                                                  var xPos:Number = 85 + xx;

                                                  var yPos:Number = 600 - catVO.ddrSpeed/2.5;

                                                  var myColor:Number = 0xFF0000;

                                                  if (catVO.ddrType == "DDR4") {

                                                            myColor = 0x00FF00;

                                                  }

                                                  doDraw(xPos, yPos, 15, 15, myColor);

                                        }

                                        var CurrentDateTime:Date = new Date();

                                        var xxx:Number = CurrentDateTime.time;

                                        todayX = 150 + ((xxx - 1292976000000)/31536000000*200);

                              }

                              protected function doDraw(xPos:Number, yPos:Number, width:Number, height:Number, myColor:Number):void{

                                        c.graphics.beginFill(myColor, 1.0);

                                        c.graphics.drawRect(xPos, yPos, width, height);

                                        c.graphics.endFill();

                              }

                              protected function q2x(q:String):Number {

  // this function translates quarter info into x position

                                        switch (q)

                                        {

                                                  case "Q4/10": xx=50;

                                                            break;

                                                  case "Q1/11": xx=100;

                                                            break;

                                                  case "Q2/11": xx=150;

                                                            break;

                                                  case "Q3/11": xx=200;

                                                            break;

                                                  case "Q4/11": xx=250;

                                                            break;

                                                  case "Q1/12": xx=300;

                                                            break;

                                                  case "Q2/12": xx=350;

                                                            break;

                                                  case "Q3/12": xx=400;

                                                            break;

                                                  case "Q4/12": xx=450;

                                                            break;

                                                  case "Q1/13": xx=500;

                                                            break;

                                                  case "Q2/13": xx=550;

                                                            break;

                                                  case "Q3/13": xx=600;

                                                            break;

                                                  case "Q4/13": xx=650;

                                                            break;

                                                  case "Q1/14": xx=700;

                                                            break;

                                                  case "Q2/14": xx=750;

                                                            break;

                                                  case "Q3/14": xx=800;

                                                            break;

                                                  case "Q4/14": xx=850;

                                                            break;

                                                  default: xx=850;

                                                            break;

                                        }

                                        return xx;

                              }

                    ]]>

  </fx:Script>

  <fx:Declarations>

  <!-- Place non-visual elements (e.g., services, value objects) here -->

  </fx:Declarations>

  <!--<mx:DataGrid id="ddrDG" dataProvider="{ddrAC}">

          </mx:DataGrid>

          <assets:gantt width="700" height="500" y="150" x="10"/>-->

          <mx:Canvas id="c" width="945" height="600"/>

  <s:VGroup gap="0">

                    <s:TextArea text="3000" width="100" height="40" color="black" alpha="0.3" borderColor="white"  editable="false" textAlign="right"/>

                    <s:TextArea text="2800" width="100" height="40" color="black" alpha="0.3" borderColor="white" editable="false" textAlign="right"/>

                    <s:TextArea text="2600" width="100" height="40" color="black" alpha="0.3" borderColor="white"  editable="false" textAlign="right"/>

                    <s:TextArea text="2400" width="100" height="40" color="black" alpha="0.3" borderColor="white" editable="false" textAlign="right"/>

                    <s:TextArea text="2200" width="100" height="40" color="black" alpha="0.3" borderColor="white"  editable="false" textAlign="right"/>

                    <s:TextArea text="2000" width="100" height="40" color="black" alpha="0.3" borderColor="white" editable="false" textAlign="right"/>

                    <s:TextArea text="1800" width="100" height="40" color="black" alpha="0.3" borderColor="white"  editable="false" textAlign="right"/>

                    <s:TextArea text="1600" width="100" height="40" color="black" alpha="0.3" borderColor="white" editable="false" textAlign="right"/>

                    <s:TextArea text="1400" width="100" height="40" color="black" alpha="0.3" borderColor="white"  editable="false" textAlign="right"/>

                    <s:TextArea text="1200" width="100" height="40" color="black" alpha="0.3" borderColor="white" editable="false" textAlign="right"/>

                    <s:TextArea text="1000" width="100" height="40" color="black" alpha="0.3" borderColor="white"  editable="false" textAlign="right"/>

                    <s:TextArea text="800" width="100" height="40" color="black" alpha="0.3" borderColor="white" editable="false" textAlign="right"/>

                    <s:TextArea text="600" width="100" height="40" color="black" alpha="0.3" borderColor="white"  editable="false" textAlign="right"/>

                    <s:TextArea text="400" width="100" height="40" color="black" alpha="0.3" borderColor="white" editable="false" textAlign="right"/>

                    <s:TextArea text="200" width="100" height="40" color="black" alpha="0.3" borderColor="white"  editable="false" textAlign="right"/>

                    <s:HGroup x="50" y="50" gap="0" horizontalAlign="center" paddingBottom="0">

                              <s:TextArea width="100" height="20" borderVisible="false"/>

                              <s:TextArea text="2010" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="2011" width="200" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="2012" width="200" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="2013" width="200" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="2014" width="200" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

  </s:HGroup>

                    <s:HGroup x="50" y="75" gap="0" paddingTop="0">

                              <s:TextArea width="100" height="20" borderVisible="false"/>

                              <s:TextArea text="Q4" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q1" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q2" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q3" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q4" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q1" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q2" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q3" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q4" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q1" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q2" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q3" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q4" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q1" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q2" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q3" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

                              <s:TextArea text="Q4" width="50" height="20" color="black" alpha="0.3" borderColor="black" editable="false" textAlign="center"/>

  </s:HGroup> 

  </s:VGroup>

          <mx:VRule id="todayBar" x="{todayX}" y="0" height="600" strokeColor="red" alpha="0.3"/>

</s:Application>

[mtdevuk]

Hi,

You can define your graphics components as variables and then add the finished items to the stage. This allows you to set what ever you want manually. So, for example you can set an 'id' and add an event to trap the hover over which can be used to popup a window to capture the additional data. (Look at the popup manager for the last part.) I have not checked the syntax below, its just a guide...

Example Actionscript:

//--- New RECT

protected function doDraw(xPos:Number, yPos:Number, width:Number, height:Number, myColor:Number):void {

var myRect:Rect=new Rect;

myRect.id="rect:"+xPos+":"+yPos;

myRect.addEventListener(MouseEvent.ROLL_OVER,MyPopupWindowFunction);

myRect.x=xPos;

myRect.y=-yPos;

myRect.width=width;

myRect.height=height;

myRect.fill=new SolidColor(myColor);     //--- etc...

//--- Add to stage or an existing named component already on the stage

your_exisitng_part_of_the_stage.addElement(myRect);

OR this.addElement(myRect);

}

//--- In your popup window function

private function MyPopupWindowFunction(event:MouseEvent):void {

var rectID:String=event.currentTarget.id;

var tempArray:Array=rectID.split(":");

var x:int=tempArray[1];

var y:int=tempArray[2];

etc.

Hope this helps.

m.