Flex: position item in ItemRenderer
A Flash Developer Resource Site

Results 1 to 9 of 9

Thread: Flex: position item in ItemRenderer

  1. #1
    Senior Member
    Join Date
    Mar 2001
    Location
    Breda, The Netherlands
    Posts
    522

    Flex: position item in ItemRenderer

    Hi all,

    I'm building a population pyramid in Flex (view this file: voorbeeld.png 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.
    // Kind regards, Danielle.
    // specs: Flash CS5.5 | Flash Builder 4.6 | win xp pro

  2. #2
    Senior Member
    Join Date
    Mar 2001
    Location
    Breda, The Netherlands
    Posts
    522
    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.
    // Kind regards, Danielle.
    // specs: Flash CS5.5 | Flash Builder 4.6 | win xp pro

  3. #3
    Mod cancerinform's Avatar
    Join Date
    Mar 2002
    Location
    press the picture...
    Posts
    13,436
    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.
    - The right of the People to create Flash movies shall not be infringed. -
    | www.Flashscript.biz | Flashscript Biz Classes/Components |

  4. #4
    Senior Member
    Join Date
    Mar 2001
    Location
    Breda, The Netherlands
    Posts
    522
    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.
    // Kind regards, Danielle.
    // specs: Flash CS5.5 | Flash Builder 4.6 | win xp pro

  5. #5
    Mod cancerinform's Avatar
    Join Date
    Mar 2002
    Location
    press the picture...
    Posts
    13,436
    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.
    - The right of the People to create Flash movies shall not be infringed. -
    | www.Flashscript.biz | Flashscript Biz Classes/Components |

  6. #6
    Senior Member
    Join Date
    Mar 2001
    Location
    Breda, The Netherlands
    Posts
    522
    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.
    // Kind regards, Danielle.
    // specs: Flash CS5.5 | Flash Builder 4.6 | win xp pro

  7. #7
    Mod cancerinform's Avatar
    Join Date
    Mar 2002
    Location
    press the picture...
    Posts
    13,436
    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.
    - The right of the People to create Flash movies shall not be infringed. -
    | www.Flashscript.biz | Flashscript Biz Classes/Components |

  8. #8
    Senior Member
    Join Date
    Mar 2001
    Location
    Breda, The Netherlands
    Posts
    522
    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)*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.
    // Kind regards, Danielle.
    // specs: Flash CS5.5 | Flash Builder 4.6 | win xp pro

  9. #9
    Senior Member
    Join Date
    Mar 2001
    Location
    Breda, The Netherlands
    Posts
    522
    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.
    // Kind regards, Danielle.
    // specs: Flash CS5.5 | Flash Builder 4.6 | win xp pro

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width


HTML5 Development Center

Poll by Flashkit.com