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.
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
January 18, 2007 at 11:08 pm
Very nice job Jason. It’s good to see the core Flex components start to be extended in usable ways like this.
-Andy
January 19, 2007 at 7:44 am
Thanks Andy 🙂 Lot’s more to come.
Jason
January 19, 2007 at 8:49 am
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
January 19, 2007 at 10:49 am
Bruce,
I haven’t seen that one; but I’ll have a look and see if there isn’t a strait forward solution.
June 5, 2007 at 7:45 pm
Very nice component, thanks for sharing it.
August 22, 2007 at 5:26 am
Jason, very nice
Thanks,
-Patrick
November 15, 2007 at 10:48 pm
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?
November 18, 2007 at 7:26 am
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
February 24, 2008 at 2:42 pm
Thanks!
March 10, 2008 at 7:07 pm
Thanks.
April 23, 2008 at 6:29 am
thanks, very interesting article
May 18, 2008 at 6:28 pm
[…]Very nice component, thanks[…]
May 25, 2008 at 6:19 pm
thanks, very interesting
May 27, 2008 at 12:18 am
Thanks for component..
PS. Why you stop blogging?
May 28, 2008 at 4:18 pm
Very nice component!
June 10, 2008 at 6:20 pm
I submitted this bug to Adobe and they acknowledge it several weeks ago
July 3, 2008 at 8:01 am
Thanks!!!
July 30, 2008 at 6:35 pm
Thanks Jason!your post helped me alot on some projects:)
Thanks again!!!
August 15, 2008 at 7:28 am
Hi.
Interesting article.
Thank you
And how to subscribe to RSS?
August 29, 2008 at 4:33 pm
Thanks 🙂
August 31, 2008 at 9:48 am
=) cool
September 15, 2008 at 6:37 pm
very interesting
thanx
October 25, 2008 at 10:57 am
Tell me, but you have RSS feed on this blog?
November 9, 2008 at 3:08 pm
nice post!
November 9, 2008 at 3:08 pm
Thank’s!
November 9, 2008 at 3:09 pm
Thank’s too!
November 16, 2008 at 5:39 pm
very interesting, thank’s!
February 18, 2009 at 9:52 am
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?
June 25, 2009 at 4:40 pm
Excellent work!
August 5, 2009 at 12:39 am
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! 🙂
October 21, 2009 at 11:45 am
Hi,
Nice job but i am not able to get the source code.
Also my requirement is to add buttons on VdividerBox
November 11, 2009 at 2:56 pm
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.
January 19, 2010 at 11:01 pm
A pretty good component. Good work Jason..!
February 15, 2010 at 8:21 pm
if you have multiple divider bars, how can you figure out which button was pressed?
March 20, 2010 at 1:42 pm
it’s veri good
April 21, 2010 at 10:57 am
Truth kill or another?
May 20, 2010 at 8:42 pm
Thanks Jason!
Nice component!
May 28, 2010 at 8:18 pm
Yes, clearly Tasty noni
May 30, 2010 at 6:24 pm
Отличная статья, спасибо очень понравилась.
July 18, 2010 at 5:52 pm
Thanks for the helpful information
July 30, 2010 at 11:39 am
So much time has passed, and I even now in handy.
Invite to visit Xstroy.com
August 30, 2010 at 2:37 am
good )
September 29, 2010 at 1:10 pm
Cool 🙂 I extended this divider so it have two control buttons.
November 16, 2010 at 12:48 pm
I’m appalled by the number of people posting “thank’s” – why the apostrophe?
And I also wanted to say thank’s!!!!!! 😉
November 24, 2010 at 5:38 am
This is exactly what I was looking for. Thanks for sharing.
December 3, 2010 at 9:27 pm
Good work Jason..!
January 8, 2011 at 6:30 pm
, : ,
March 17, 2012 at 2:24 pm
Thanks, useful material. Has added your blog in bookmarks.
Спасибо за совет, попробую применить у себя.
February 6, 2013 at 7:00 am
“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