Keeping best control overnon-child children of Flex component

[rawmantick]

Hi guys. Sory if this one belongs to Flex thread, but I decided to post it here.

I meet the problem of extending flex components very often. And as often I put non-children element (skins, decorations, some controls) onto my component. But in most situations I want all those decorations to be under usual children of a component.

I can create decorations (let's always call'em so in the thread) inside createChildren() method. This one will make all the decoration to be under children obviously. But classes (style properties), that my decorations are instances of, can change during runtime. In this case I track the change and update graphics inside updateDisplayList() method. I removeChild() my decoration, reinstantiate it, and addChild() again. So eventualy new decoration is upon children. This is bad. I was inventing sevaral "smart" methods of overcoming this, but I'd like to know what techniques you guys use in this case. Any discussion would be appriciated

[pj-co]

can you post some example code? I'd be curious to know what you worked out with this as well.

[rawmantick]

I don't actually have the code near myself at the time. But I can try to describe my last technique I'v noticed for myself to use.

Let's say I have a component, that would have additional decorations. All of them should be upon usual children of my component.

1. inside overriden createChildren() method I add a sort of layer, which is kind of container for decorations

override protected function createChildren():void
{
    super.createChildren();

    if( _decorationLayer == null )
    {
        _decorationLayer = new UIComponent(); //well maybe Canvas ?
        addChild(_decorationLayer);
        _decorationDepth = getChildIndex(_decorationLayer);
    }
}

private var _decorationLayer:UIComponent = null;
private var _decorationDepth:Number;

2. To knwo exactly, that no child will bubble up and become upon our decorations,lets make some sorta trick

override public addChild(arg:DisplayObject)
{
    super.addChild(_decorationDepth+1);
}

This will add a child under decorations. Ofcourse you should override all relative methods.

3. And finaly inside updateDisplayList() method if some skins updated - i simply reattach them to my decoration style in a desired order. The whole decoration will remain upon children.

This code is just a main idea and has much bugs for sure. Since it came from my head right now. But when implementing some exact component - the code will be built according to idea but more accurately.

Hope I'm understandable.

[pj-co]

I sort of understand I think. You have a DisplayObject that contains style information you want to apply to all children of your component. You keep it at a specific depth so you can access it later and reapply it to the children if the style changes. Does that sound about right? (Sorry for all the questions. My knowledge of flex is still somewhat limited). If I understand this, why is that you need to have the decorations object at a specific depth? Is that how it bubbles up and sets the styles of other objects automatically? Couldn't you just call setStyle() on them?

[rawmantick]

You understand me right generaly.

Couldn't you just call setStyle() on them?

Well, you can set style on component that does support styles. But sometimes I realy need such a specific style support, so only recreating a decoration is the only way. Imagine you have a panel-extending component, which has for example several DisplayObject (flash level, not Flex) decorations. For one of them you define a class (say skin, symbol from flash IDE lybrary) and padding from left and top borders of the component. For another you define several classes (IDE symbols) that somehow change on different events (say it's a behavior of this decoration). Yes, you can create a separate component for each of the decoration and simple re-style them from the main container component. But the specifics of those would be so strog, so there is no reason to make them separate. So you have to to make all those weird skin manipulations right inside you panel-extending component, constantly keeping in mind their order and correspondance to current style properties.

Also, as for just setting style, you cannot always set a style just because it's possible they don't exist at all. That's what all these things about - to support custom and sofisticated skins styles you have to make some sort of tricks to kepp decorations order correct for you...

Wooff... I hope I'm undesrstandable. Sory for my english, it's not my native