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.
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!
July 6th, 2009 at 12:17 am
Hi ,
Sorry but i found some bug .
1 ) vertical scroll bar is not getting move if we will move item selection from keyboard up and down key.
2 ) I added line separator in menu and given variableRowHeight true . so in this case vertical Scroll bar height is not calculating right .
last item is getting hide even move vertical scroll bar max position.
please let me know if you fixed .
Thanks
Neeraj
July 30th, 2009 at 8:24 am
Thank you for that great update!
BTW, does someone now how the fuck I can get a menu with submenus with the ComboBox component?
August 26th, 2009 at 10:43 am
[...] Voir la page officielle sur le blog de Doug McCune [...]
October 8th, 2009 at 11:52 am
Great stuff! Thanks for the source code!
October 22nd, 2009 at 4:19 am
Addel Anwar wrote:
> 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.
My client found the same bug. Problem was found in ‘openSubMenu’ method from Menu.as class. Mail me if you need help to fix that.
January 27th, 2010 at 4:16 am
Can anybody help me to solve this ?
When we scroll the menu the sub menu values disturbed, always shuffling and shows wrong sub-menus for a selected item.
January 28th, 2010 at 8:26 am
This seems to hang the dashboard when used with flash builder 4 – using the popupmenu button control. Any ideas?
February 10th, 2010 at 11:25 am
Yes, in version 3.2 of flex it worked awesome. in version 3.5.0.1a or whatever, it’s broken, if you go into ScrollableMenu.as, around line 238 (might be off a few), there si a commitProperties(); at the end of measure function. Comment this line out, it’s causing an infinite loop. I only tested briefly but appears to work fine. If anyone else has updates please post.
February 11th, 2010 at 2:39 pm
Thank you Matthew
March 7th, 2010 at 2:58 am
Hey Doug, an immensely helpful article. Can’t thank you enough
Just a couple of questions:
1. I’m creating a ScrollableMenu instance and I’ve set the wordWrap and variableRowHeight properties to true and yet, the labels get cutoff and the rowHeights are set to 20. Is this because I’m setting the width of the scrollable menu instance to a preset value? Should I be using setActualSize method anywhere?
2. I need the menu to retain visibility when menuHide event is thrown. If I were to override the method (and leave the method contents blank), then the submenus overlap over one another. How do I get around this?
3. As Anandarup mentioned above, I need the labels to appear from the extreme left. I’ve set the textIndent style attribute to 0 but this doesn’t seem to be working. What could be the problem?
March 30th, 2010 at 10:09 am
Hi
Your scrolling menubar is awesome, however, there is a slight problem I dont know how to resolve.
There is static little button-like box in the background. Maybe it is in skin swf file.
See pic:
http://img687.imageshack.us/img687/65/ss3lk.jpg
Can this be fixed?
Wishes,
Emil
April 9th, 2010 at 2:04 am
Hey
I found a little bug in menu, ScrollableArrowMenu.as:255 , method stopScrolling (runned on second click on arrow). In my case, variable stage is not accessible for this object, and line stage.removeEventListener(MouseEvent.MOUSE_UP, stopScrolling) causes the error. I replace this with “removeEventListener(MouseEvent.MOUSE_UP, stopScrolling)”
September 2nd, 2010 at 4:09 am
Amazing component!!
Thank you
October 20th, 2010 at 2:03 am
Hey Matthew,
I was working in flash builder 4 and scrollable menu was hanged.Now it is working fine.
Thank you very much.
November 1st, 2010 at 11:42 pm
Hi………great job
I am working with flash builder 4, on click of scrollable menu bar its getting hanged……
Please provide me with the solution ASAP
November 2nd, 2010 at 1:00 am
Hi…its working properly
since i commented CommitProperties() since it was entering into infinite loop
Thank & Regards
November 3rd, 2010 at 2:37 am
Hi…………
How to fix the width for menu bar items
Pls do provide solution inform ASAP
Thanks
May 18th, 2011 at 12:09 am
This is an amazing component. Many thanks.
I am struk up with this bug. Could anyone help me out here.
————————————————————————-
Addel Anwar wrote:
> 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.
My client found the same bug. Problem was found in ‘openSubMenu’ method from Menu.as class. Mail me if you need help to fix that.
How to fix this issue?
Thanks,
Vinod
May 26th, 2011 at 2:23 am
this code not working properlly with flex 4
August 8th, 2011 at 9:26 am
I am not able to get this component to run when building from Flex 4. No compile/runtime errors and no menu.
Any help/examples/demonstration of it working under a Flex4 build would be appreciated!
August 18th, 2011 at 4:21 am
I use the menu bar when with the flowing properties:
verticalScrollPolicy=”{ScrollPolicy.OFF}”
arrowScrollPolicy=”{ScrollPolicy.AUTO}
When i have multiple elements it scrolls quickly.
How we can reduce scroll speed
Thanks
August 31st, 2011 at 5:59 am
Any idea of it working under a Flex4 build????
December 29th, 2011 at 12:49 pm
Doug,All: Great code ! Thanks.
This works great for sub menus, but when I try with regular menu scrolling does not work.
in the example if I change to
private var menubarXML:XMLList =
;
( ie removing the multi level sub menus)
It does not work.
Any idea what I am doing wrong ??
Thanks for your time and help
Byju