Here’s an update to the Flex Scrollable Menu controls that I posted earlier today. Josh Tynjala made the point that he would rather have up and down arrows at the top and bottom of the menus to allow you to scroll without using a scrollbar on the side. Well, ok, ok, here you go. Now the menus can have either a vertical scrollbar on the side, rollover arrows on the top and bottom, or both! Yay!
Also, if you don’t specify a maxHeight for the controls, then the menus get sized as high as they can without going off the stage. So if a menu is too big it will size itself to as high as it can, and then start scrolling. If you specify the maxHeight attribute for the controls then the menu will try to size itself that high, but not higher. But again, if there’s not enough room on the stage then the menu won’t grow beyond the visible area. As far as I can figure, this is how menus should work.
So check it out and play with some of the options in the example. You can set both verticalScrollPolicy and a new property: arrowScrollPolicy. Both work the same way as you’d expect. arrowScrollPolicy controls the display of the up/down arrows just like the scrollbar is controlled. So you can set arrowScrollPolicy to ScrollPolicy.ON, ScrollPolicy.AUTO, and ScrollPolicy.OFF. If you turn both the arrows and the scrollbar on then you can scroll using either of them.
And again, full source is here.
This entry was posted
on Friday, January 26th, 2007 at 10:06 pm and is filed under Flex.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Entries (RSS)
January 27th, 2007 at 2:35 am
Love it. Great job!
January 28th, 2007 at 6:58 am
Very nice, will be using it. Thanks!
January 30th, 2007 at 2:56 am
[...] Scrollable Menus para Flex Doug McCune publica una serie de componentes de menú con la característica que se les puede asignar propiedades que controlan si se muestra o no un scroll. Even Better Scrollable Menus for Flex [...]
January 30th, 2007 at 4:08 am
Hi,
The Scrollable menubar has a bug when ArrowScrollPolicy is set to ON.
cheers
January 30th, 2007 at 8:26 am
If you’re referring to the fact that the top and bottom arrow buttons are always shown when you set ArrowScrollPolicy to ON, which then obstructs the view of the menu items, then you’re right, but I wouldn’t call it a ‘bug’. That’s what I told it to do. Basically setting arrowScrollPolicy to ON is pointless, I just added it in so it would mimic the verticalScrollPolicy functionality. The arrows appear over the menu items. There’s no point in having them show up if they aren’t needed, so you should always use ScrollPolicy.AUTO.
I could’ve just made ON and AUTO do the same thing. Besides, does anybody actually ever set verticalScrollPolicy to ON? I don’t think I’ve ever used it, I always just use AUTO. So yeah, maybe I’ll change it.
January 30th, 2007 at 7:37 pm
Doug, excellent work, thanks for posting the source. You are raising the level of quality in the flash world.
Regarding scroll policies: I use ON with vertical scrollbars sometimes. Why?
- If a scrollbar is suddenly required, the width available for content does not change.
- It can be very useful to show a user that a thing CAN be scrolled, it just doesn’t require scrolling right now.
I think that arrowScrollPolicy set to ON is not pointless. You should add the arrow buttons, avoiding the menu content, and making them disabled if not needed.
Basically:
ON: always show, even if disabled
AUTO: show if needed
OFF: never show
The question then becomes whether you change the current AUTO behavior to continue removing the arrow button when scrolled all the way to one end of the content. To match the behavior of ON more closely, you may want to instead disable the arrow button.
…Of course, matching the 3 constants used for scrollbars may not even make sense. Should anyone use an ScrollableArrowMenu if they want to turn the arrows off? Perhaps you replace the policy property with a simple alwaysShowArrows boolean…
The only other request I would have would be to make the arrow skins styleable with a stylesheet. That’ll probably double the size of the code without much excitement.. boo.
February 25th, 2007 at 4:37 pm
Hi Doug,
I like your work here but I’m trying to find out how to create a menu that works from the bottom left corner of the canvas up and right (like a Wondoze start button), rather than top left, down right. All the flex examples I can find appear to go the same way. Could you give me a some pointers please.
Thanks,
Luke.
March 2nd, 2007 at 9:26 am
I agree with Daniel and Ray wrt the ON policy value. Having the behaviour the way it is for AUTO is pretty nice. However, it should change if the policy is set to ON. Lets put it this way, if you were using the TextArea component and set the scroll policy to ON, you wouldn’t expect the text to be obscured by the scrollbars, would you? No. The text is wrapped at a different spot when the vertical scrollbar is displayed and the scrollable area is different for horizontal scrolling if the vertical scrollbar is displayed with no wrapping.
When your scroll policy is set to ON, add the arrows but shift the start and end coordinates of the list.
March 30th, 2007 at 5:12 am
Really great job.
I am also trying to make something near about same, so I can understand how much pain u got. Even I got some tips from your work..
Thank you..
July 26th, 2007 at 10:17 pm
Wow, great job! I came across your site while searching for a multi tier combo box and what you’ve put together is really close to what I’m looking for. How easy (or hard) would it be to modify the Scrollable PopUpMenuButton to have sub menus similar to Scrollable MenuBar and Scrollable Menu examples?
Once again, great job and thanks for sharing!
February 4th, 2008 at 7:44 pm
Hey Doug,
As I’ve recently discovered, great stuff. Can’t wait to hear your talk at ATL.
One point though as someone coming new to flex, it’d be even if you could activate controls like this via mouse-over or hover. Is that possible.
Also, I’d love to hear more from Adobe on the the non-standard/compile css to swf CSS impl. It’s really hard IMHO to get a grasp on on from a Ajax/Html background, especially related to non impl of CSS selectors — WTF.
February 14th, 2008 at 3:18 am
I liked the menu very much and it served us great purpose.Your efforts to improve the visual part of flex is greatly appreciated.
I have a question here….But Can the texts in the dropdownmenus start from extreme left….just as a normal combo box…instead it seems like taking textindent somewehre.I have set the Textindent = 0 but doesn’t solve the purpose.Also how to set it’s width..i don’t want it more than the combobox width..
I think Luke McLean also wanted the same answer.Please help us both.
November 11th, 2008 at 3:14 pm
Hey great job and thanks alot
Does anyone have an idea if i can use it to scroll lists horizontally? i mean instead of a scroll bar i will have an arrow to the left and the right
once again great job
November 14th, 2008 at 2:41 am
That’s exactly what i’m looking for ! Great job !!!!!
February 9th, 2009 at 11:16 am
Doug,
You did a marvelous job. Congratulations…
I have one minor problem and hopefully you know the answer. If a menu items require a scroll bar and you leave the menu area, the scroll bar does not collapse like other menu items that do not require a scroll bar. You need to click outside of the scroll bar for the menu to collapse.
I would think that if you were outside of the scrollable area for more than 1/4 second, then the scroll area should collapse like the other areas.
What do you think?
February 28th, 2009 at 10:20 am
Thanks for posting this. Its a verry nice component however it looks as though there is a memory leak caused by this. When running it in the profiler the number of instances never drops and keeps getting larger each time a menu is opened. When running the same test with just the basic flex Menu, this does not seem to happen.
March 31st, 2009 at 7:21 am
There appears to be a problem with the ScrollableMenuBar. If you click on a menu then click outside the menu to close the menu, the next time you click on a menu nothing happens. You need to click the menu a second time for it to display.
April 19th, 2009 at 10:25 pm
i found a bug in this component
when we scroll the menu the sub menu values disturbed
it shows wrong sub menu against the selected item.
May 12th, 2009 at 7:26 am
Thank You!
Great Job!