Extending the Flex 2.0 DividedBox

January 18, 2007

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.

Extended Divider Screen

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

Advertisements

49 Responses to “Extending the Flex 2.0 DividedBox”


  1. Very nice job Jason. It’s good to see the core Flex components start to be extended in usable ways like this.

    -Andy


  2. Thanks Andy 🙂 Lot’s more to come.

    Jason

  3. Bruce Denham Says:

    Really nice job, Jason. I’m assuming you’ve come across the bug in the DividedBox?…In which setting the visible and includeInLayout properties to false on the first child of 3 or more really messes up the placement of the divider bars? I submitted this bug to Adobe and they acknowledge it several weeks ago, but unfortunately it didn’t make it into the 2.0.1 release. Do you know about it and do you have ideas on a fix?

    Best,
    Bruce


  4. Bruce,

    I haven’t seen that one; but I’ll have a look and see if there isn’t a strait forward solution.

  5. Marcus Mattingly Says:

    Very nice component, thanks for sharing it.

  6. Patrick Says:

    Jason, very nice

    Thanks,

    -Patrick

  7. bsr328 Says:

    Love this component – it’s great! Thanks! I just have a question … if you have multiple divider bars, how can you figure out which button was pressed?

  8. Anish Says:

    A pretty good component. Good work Jason..!
    I have developed a similar component but using Grid. In my component, it divides the screen into 4 parts and there is a centeral button which the user can drag to resize any of the four sides. You can see the demo at:-
    http://www.macoscoders.com/demo/navgizmo/

    But I always think my component can be best done using DividedBox instead of Grid. whats your take on this?

    thanks,
    -Anish

  9. moonstudio Says:

    thanks, very interesting article

  10. smex Says:

    thanks, very interesting

  11. Advokat Says:

    Thanks for component..

    PS. Why you stop blogging?

  12. TRANCE Says:

    Very nice component!


  13. I submitted this bug to Adobe and they acknowledge it several weeks ago

  14. Spaceman Says:

    Thanks Jason!your post helped me alot on some projects:)
    Thanks again!!!

  15. IgoruS Says:

    Hi.
    Interesting article.
    Thank you
    And how to subscribe to RSS?

  16. Alex Says:

    very interesting
    thanx

  17. Debt USA Says:

    Tell me, but you have RSS feed on this blog?

  18. Bred Says:

    Thank’s too!

  19. seomaniac Says:

    very interesting, thank’s!

  20. top Says:

    Love this component – it’s great! Thanks! I just have a question … if you have multiple divider bars, how can you figure out which button was pressed?

  21. Seando Says:

    Excellent work!

  22. Shaun Says:

    Hi – Thankyou for the example!
    Q: Is it possible to use an ApplicationCtrl bar or HBox component to extend a VDividedBox ‘dividerSkin’ area? I need to place a toolbar (custom-component) inside the dragable area of a VDividedBox… Is this possible? Thanks in advance! 🙂

  23. prince Says:

    Hi,

    Nice job but i am not able to get the source code.
    Also my requirement is to add buttons on VdividerBox

  24. Kurt Says:

    Here’s a small enhancement to support dynamic additions to divided box:

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    for(var i:int=0;i < numDividers;i++) {
    var divbar:BoxDivider = getDividerAt(i);
    if (mBoxDivider.indexOf(divbar) < 0) {
    divbar.addEventListener("resize",handleResize);
    mBoxDivider.push(divbar);

    This way if a new element (and hence a new divider) is added, it will make sure that it's rendered properly as well.

  25. keval Says:

    A pretty good component. Good work Jason..!


  26. if you have multiple divider bars, how can you figure out which button was pressed?

  27. alex Says:

    it’s veri good

  28. Permhotel Says:

    Truth kill or another?

  29. Goodi Says:

    Thanks Jason!
    Nice component!


  30. Отличная статья, спасибо очень понравилась.

  31. Grand Says:

    Thanks for the helpful information

  32. Xstroy Says:

    So much time has passed, and I even now in handy.
    Invite to visit Xstroy.com

  33. Hammam Says:

    Cool 🙂 I extended this divider so it have two control buttons.

  34. Matt Says:

    I’m appalled by the number of people posting “thank’s” – why the apostrophe?

    And I also wanted to say thank’s!!!!!! 😉

  35. Steve Says:

    This is exactly what I was looking for. Thanks for sharing.

  36. reerra Says:

    Good work Jason..!

  37. Joni Says:

    Thanks, useful material. Has added your blog in bookmarks.
    Спасибо за совет, попробую применить у себя.


  38. “Extending the Flex 2.0 DividedBox Flexible Experiments” was a good read and
    also I actually ended up being quite pleased to read the blog post.
    Many thanks-Amos


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: