tags:

views:

37

answers:

1

I have a code in Flex 4 like this

<!-- START >>> middle part: items -->
<mx:Canvas id="itemContainer"
           width="100%"
           height="100%">
    <!-- START >>> Items Display on the page -->
    <mx:Repeater id="richTextReapeater" 
                 dataProvider="{_model.current_day.richTextNotes}">
        <components:RichTextNoteDisplay theNote="{richTextReapeater.currentItem}" />    
    </mx:Repeater>
    <mx:Repeater id="postItReapeater" 
                 dataProvider="{_model.current_day.positNotes}">
            <components:PostItNoteDisplay theNote="{postItReapeater.currentItem}"  />   
    </mx:Repeater>
    ......
</mx:Canvas>

Mainly it's a MX:Canvas that has inside it reapeaters for multiple custom components I created. Most of these custom components are like this:

   <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx"
                          x="{theNote.x}"
                          y="{theNote.y}"
                          width="{theNote.width}"
                          height="{theNote.height}"
                          depth="{theNote.depth}"
                          rotation="{theNote.rotation}"
creationComplete="skinnablecontainer1_creationCompleteHandler(event)" >

Everything works fine (x,y,width,height,rotation) except for depth!

it seems that regardless what the number is it shows as the order it was rendered in the parent container. (MX:Canvas)!

What I want to acheive is that relative to each others, all the items in the mx:Canvas shows in the order of "depth" assigned to them.

How do I do this?

A: 

You're using a repeater; which is, in essence, a loop.

It sounds like you're asking to loop over items, but process those items in a different order. Is that correct?

My first recommendation would be that you look into ways to sort your dataProvider items by depth before the repeater 'runs'.

My second recommendation is that you don't use a repeater. A List based class will give you better performance due to renderer recycling.

If you really need to create all children at once, my third recommendation is that you move to an ActionScript implementation which will give you lots more granular control over how and when things are created.

Everytime I've used a repeater I've been unhappy.


Here is some info on lists and itemRenderers with Flex 4.

This is a rough estimate of how I might modify this sample to use a list instead of a repeater:

    <!-- START >>> middle part: items -->
    <mx:Canvas id="itemContainer"
               width="100%"
               height="100%">
        <!-- START >>> Items Display on the page -->
        <s:List id="richTextList" 
                     dataProvider="{_model.current_day.richTextNotes}"
                     itemRenderer="com.something.myComponent">
        </s:List>
    </mx:Canvas>

An itemRenderer may be something like this:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">
    <s:SkinnableContainer rotation="{data.rotation}"
    creationComplete="skinnablecontainer1_creationCompleteHandler(event)" />
</s:ItemRenderer>

The list will determine the width, x, and y positions of the renderer. In most cases it will also determine the height; although the Flex 3 List has a variableRowHeight option.

If you want to use a different renderer based ond ata, look into using an itemRendererFunction

www.Flextras.com
Thanks for the recommendation. The main reason I have been using repeater is because it's convenient when adding/removing/updating an item to a list. I have multiple displaying items on a page that I add/delete/update often so I wasn't sure how to make sure every time I change ArrayCollection of that type it will render on screen? Also, how to pick specific rendered (Custom Component) for each type of item?
Tam
Everything you say you need can be done w/ a List based class. A list based class will update when the dataProvider updates. A list based classes can support custom renderers (AKA Components); and you can write logic to change display drastically based on the data. As long as your data as long as you bind your dataProvider [as you do w/ the Repeater], the data list class will updated as needed. But, a list class will only render what is currently shown visually on screen w/o needing to render a component for everything in your dataProvider. This could lead to less memory usage.
www.Flextras.com
Thanks @www.Flextras.com I think I got the idea I will give it a shot. A link or sample code would definitely make things a bit easier.
Tam
I modified my answer to include more info on using lists with renderers including some links to Adobe documentation.
www.Flextras.com