A couple of people over on Flexcoders have expressed interest in customizing the Flex divider box. As this is something I happened to have played with, I thought I would share it. Styled gradient fill, close and open state button, border colors, and a couple of other goodies.

I extended the DividedBox as opposed to the horizontal or vertical variations.I added 2 new styles to allow a gradient fill, and borders on the bars.

• barFillColors: A 2 color array
• barBorderColor: uint

I’ve also added a button in place of the grab handle for closing and opening (when showButton ==true), and a custom grip when not showing a button. The toggle on the buttons are set to true so that the close and open states can be controlled.

I added 3 new properties

• buttonOnIndexs: Allows you to specify which divider bars you want to have a button on, simply pass an array of indexes. This mean you could have a divider that splits into 3 parts and show a button on only the second index. If no value is set each bar will have a button.
• showButton: Whether or not to show buttons at all.
• buttonSelected: Whether or not the button is in a selected state.

I used a flash skin for the buttons as that is what was needed at the time, for the look I wanted. It’s included (SkinSet001.swf) with the source.

This is in no way a professional component nor has it been optimized. It can probably be greatly improved. If you do make improvements, I would appreciate seeing them just for the sake of learning. If you happen to have ideas to make it better let me know. I’d be willing to take the time and improve this one if interest is out there.

Requires Flash 9 player.

Sample and Source : Extended DividerBox

Right click to view the source.

Have fun…

Jason Hawryluk