Flex HDividedBox Divider backgroundColor

Question

Is there an easy way to set the backgroundColor of a HDividedBox's (or VDividedBox's) BoxDivider object(s)? A BoxDivider is the "divider" that has the drag handle on it.

By default, the BoxDivider is transparent with the little handle image on it.

There is a dividerSkin style that defaults to mx.skin.BoxDividerSkin which is a reference to a symbol in the Assets.swf file.

Any ideas? Do I have to make an alternate skin? Is that my only option? Googling this led me to many solutions that were weird and hacky and frankly didn't seem to work.

Thanks.

Answer 1

I'd love to be able to create a simple programmatic skin for each dividedbox. so i can just do this:

<mx:HDividedBox dividerSkin="path.MyDividerSkin"

but I'm having difficulty figuring out what the MyDividerSkin class should look like. You think this would be easy. :)

Answer 2

OK, here's how you do this:

1. create a class that extends ProgrammaticSkin

2. override updatedisplaylist method like this:

   override protected function updateDisplayList(w:Number, h:Number):void { var divwidth:Number = getStyle("dividerThickness");

           if (divwidth == 0)
           {
               divwidth = 10;
           }
   
   
       graphics.clear();
       graphics.beginFill(0xFF0000, 1.0);
       graphics.drawRect(-(parent.height / 2), -(divwidth / 2), parent.height, divwidth);
       graphics.endFill();
   
   
   }
   
   
   

then add this to your hdivided box

<mx:HDividedBox dividerSkin="path.MyDividerSkin"/>

by default, the skin gets added to the middle of the divider so you need to offset the x & y...

Answer 3

by default, the skin gets added to the middle of the divider so you need to offset the x & y.. <<<

I would have never figured this out, thank you! I was looking for a way to always show the divider color, by default it is only shown while dragging. Drawing a programmatic skin seems to be the only way.