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.
Love it. Great job!
Very nice, will be using it. Thanks!
Pingback: MadeInFlex » Blog Archive » Scrollable Menus para Flex
Hi,
The Scrollable menubar has a bug when ArrowScrollPolicy is set to ON.
cheers
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.
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.
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.
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.
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..
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!
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.
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.
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
That’s exactly what i’m looking for ! Great job !!!!!
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?
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.
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.
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.
Thank You!
Great Job!
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
Thank you for that great update!
BTW, does someone now how the fuck I can get a menu with submenus with the ComboBox component?
Pingback: Composant Flex - Menu avec Scroll vertical (et MenuBar, PopUpMenuButton) - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3
Great stuff! Thanks for the source code!
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.
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.
This seems to hang the dashboard when used with flash builder 4 – using the popupmenu button control. Any ideas?
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.
Thank you Matthew 🙂
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?
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
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)”
Hey Matthew,
I was working in flash builder 4 and scrollable menu was hanged.Now it is working fine.
Thank you very much.
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
Hi…its working properly
since i commented CommitProperties() since it was entering into infinite loop
Thank & Regards
Hi…………
How to fix the width for menu bar items
Pls do provide solution inform ASAP
Thanks
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
this code not working properlly with flex 4
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!
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
Any idea of it working under a Flex4 build????
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
for flex 4, as Matthew Reynard reported we have to comment out commitProperties(). But it will put a bug, when you scroll down and again come to menu and scroll up, it will show empty menu ! To solve this just set the verticalScrollPosition = 0. Go to ScrollableArrowMenu.as, in createChildren() – this.addEventListener(MenuEvent.ITEM_CLICK, setScrollPosition);
private function setScrollPosition(event:MenuEvent):void{
this.verticalScrollPosition = 0;
}
though it will not open at the same position but it works well.
cheers !
also at this.addEventListener(MenuEvent.MENU_SHOW, setScrollPosition);