Flex: position item in ItemRenderer

Hi all,

I'm building a population pyramid in Flex (view this file: Attachment 73909 for one half of the pyramid). The rows of icons are placed in the right position at after loading. The red icons represent specific data. I want to align them all to the left part of the application, where the yellow line is in the attachment. But I can't work out how. I've places all the icon rows in different Graphic elements. They are placed in a Group wrapper which is placed at 0. Now I want all the red icon to move to 0 but somehow I can't get that to work. The red icons are always relative to the row of black icons and don't use the x value of the Group wrapper. Some code:

PHP Code:

---

    <s:Group id="MenPiramid">
    <s:Graphic toolTip="{'bevolking: '}{Number(data.pop)*10000}">
        <s:Rect id="backgroundRect" 
                width="{Number(data.pop)*9}" height="26" 
                x="{offset}" y="0">
            <s:fill>
                <s:BitmapFill source="@Embed('../assets/man.png')" fillMode="repeat" />
            </s:fill>            
        </s:Rect>
    </s:Graphic>
</s:Group> 


---

So when I want to set the x value of the red icons to MenPiramid.x it still uses the backgroundRect x value. Can someone point me in the right direction?
Thanks a lot in advance for your help.

OK, I've got a little more insight into the problem now. The MenPiramid.x is also the x of the icon rows. The ItemRenderer only "knows" about itself. So what I need to know is the x value of the whole application. How does one get that? Or should one do calculations in the ItemRenderer to get the x position? It can't be that hard to find the border of the application?
Any suggestions are welcome. TIA.

You can create a class file with getter and setter, but don't place that file in the data folder.

PHP Code:

---

package assets
{
    public class Kordinates
    {
        public function Kordinates(){}
        private static var _xCoord:int;
        public static function get xCoord():int
        {
            return _xCoord;
        }
        public static function set xCoord(x:int):void
        {
            _xCoord = x;
        }
    }
} 


---

and in the application file you add

PHP Code:

---

<fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import assets.Kordinates;
            
            protected function myList_initializeHandler(event:FlexEvent):void
            {
                trace(myList.x);
                Kordinates.xCoord=myList.x;
            }
            
        ]]>
    </fx:Script>
<s:List id="myList" x="10" dataProvider="{answerData}"
            itemRenderer="renderers.ImageRenderer" initialize="myList_initializeHandler(event)"/> 


---

and in the renderer you do the same thing.

PHP Code:

---

<fx:Script>
        <![CDATA[
            import assets.Kordinates;
            
            import mx.events.FlexEvent;
            
            protected function image1_initializeHandler(event:FlexEvent):void
            {
                trace("MMMM"+Kordinates.xCoord);
            }
            
        ]]>
    </fx:Script>
<mx:Image source="assets/{data.imageSource}" initialize="image1_initializeHandler(event)"/> 


---

PS: This is from my own example.

Hi cancerinform,
Thanks for the example. I've implemented it. The x value of the parent component in the main mxml is 0 (which I knew). So it uses 0 in the itemRenderer and the effect is exactly the same as it was when I used 0 directly in the itemRenderer. So the 0 is still relative to the individual icon rows and not to the global application :(
Oh my, hope someone can help me further with this. A big TIA.

I don't think the value is 0 then. It is clear that when you enter 0 as the value that is what it will use in the itemrenderer.

Well, when I trace it in the main mxml, like you do in your example it outputs 0... You say: but don't place that file in the data folder. What is the data folder? I've now created a separate package but it is in the src folder, I don't think other places are allowed. But maybe I'm doing something wrong here?

Thanks again.

In my example I had a folder named "data" and that caused a problem in the renderer. I wonder you need to restrict or make use of the width of your application, since some of your people figures are outside.

Hi cancerinform,
Yes the icons are outside because I'm still testing. I'm struggling on with the width issue. My idea now is that if I can get the maximum width of the pyramid I can calculate the 0 position. But after hours of trying I would like to ask the advice of the forum again. I thought it would be simple. In the itemRenderer I've made a variable called pyramidMaxWidth set to 0. When the data comes in I want to compare the new data with the pyramidMaxWidth value and when the new data is bigger I update pyramidMaxWidth. This is the code:

PHP Code:

---

[Bindable] private var pyramidMaxWidth:Number = 0;

override public function set data(value:Object):void{
                 super.data = value;
                trace("x oud:"+pyramidMaxWidth);
                trace("pop: "+Number(value.pop)*9);
                
                if(Number(value.pop)*9 > pyramidMaxWidth){
                    pyramidMaxWidth = Number(value.pop)*9;
                    trace("x:"+pyramidMaxWidth);
                }
            } 


---

This is the trace result:
x oud:0
pop: 10.6632
x:10.6632
x oud:0
pop: 262.2582
x:262.2582
x oud:0
pop: 566.8569
x:566.8569
x oud:0
pop: 527.0337
x:527.0337
x oud:0
pop: 443.4039
x:443.4039
x oud:0
pop: 609.2946
x:609.2946
x oud:0
pop: 139.3767
x:139.3767
x oud:0
pop: 304.2351
x:304.2351
x oud:0
pop: 492.4953
x:492.4953
x oud:0
pop: 1.9404000000000001
x:1.9404000000000001
x oud:0
pop: 451.56149999999997
x:451.56149999999997
x oud:0
pop: 552.5784
x:552.5784
x oud:0
pop: 35.6733
x:35.6733
x oud:0
pop: 597.0645000000001
x:597.0645000000001
x oud:0
pop: 425.70540000000005
x:425.70540000000005
x oud:0
pop: 415.2879
x:415.2879
x oud:0
pop: 351.2133
x:351.2133
x oud:0
pop: 413.5905
x:413.5905
x oud:0
pop: 213.5394
x:213.5394
x oud:0
pop: 82.28790000000001
x:82.28790000000001

So when data comes in I compare it but somehow the pyramidMaxWidth value is set to zero with every loop. I'm at my wits end, how difficult can this be? I've also tried the same code in the dataChange event but the result is the same. I've also tried sorting an ArrayCollection but somehow the same thing is repeated and I always get the last value that comes in...

Hope someone can help, I'll be eternally grateful.

Hi all,
I've found a way to tackle this problem. First ItemRenderers are completely separate entities, they know nothing of each other so I can't get the widest item in the way I tried. I've now set the width of the whole component in the main mxml to 650. In the itemRenderer I just put subtract 650 if I want the icons to go to the left and add if I want to go to the right. HTH someone.