• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

How can I reference drawn objects for later use

New Here ,
Feb 27, 2012 Feb 27, 2012

Copy link to clipboard

Copied

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>

Views

325

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 29, 2012 Feb 29, 2012

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines