Handling depth with Flex 4

Question

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?

JeffryHouser JeffryHouser · Accepted Answer · 2010-07-17T21:23:58

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

Handling depth with Flex 4

1 Answers