Published by Administrator on 21 Mar 2008 at 04:50 pm
FlexWheel Component Page
The Flex Wheel component is a list component which allows the user to select an item by “spinning” a wheel using the mouse (drag and drop or single click).
- use one of the prebuilt lists
- create your own list replacing any combobox, listbox etc.
Flexwheel is written in Adobe ActionScript 3.0 and available in flex 2.0.1 and 3.0 versions for download.
View sample here
License
The flex wheel is Freeware. It is free for use in commercial and non commercial sites,
providing you meet the terms in the eula (Basically, watermark must appear).
Sources are not included and a small watermark appears in the bottom left corner of the component.
Documentation included in the form of asDocs and an online tutorial.
YOU MUST Read the whole EULA before downloading and using!
If you wish to remove the watermark and obtain the sources, you may do so with paypal
| site license | 49.99$ |
once I receive the payment I will send you the unlocked component + sources to the email provided in the paypal order. It may take 1-4 days, so please be patient. If you do not receive the component please email admin@strawberrypixel.com.
Tutorial
check out the simple tutorial here
Download (Freeware version)
Flex 2.0.1 - flexWheel-v1.0.2
Flex 3 - flexWheel-v1.3.2
(latest release notes)
F.A.Q
Click here to read the Frequently Asked Questions.
This page has the following sub pages.
Chris Velevitch on 03 Apr 2008 at 1:19 am #
Is it an oversight that while the mouse is over the component, the mouse wheel does nothing?
Administrator on 03 Apr 2008 at 4:07 am #
It is. Next version if all goes well.
Maz on 03 Apr 2008 at 9:00 am #
Nice one. Kudos!
{Maz}
Administrator on 04 Apr 2008 at 4:13 pm #
Mouse Wheel now works (since v1.3.2 / v1.0.2) as well as drag and click
However there is still one issue, the mouse wheel event is also handled by the browser - so if you have html that exceeds a single page the page will scroll too.
I could not find an immediate solution for this so the version was released with this known issue. Hopefully I will solve it next version.
Cheers
luchyx on 05 Apr 2008 at 5:30 pm #
Hi Bro. Nice job, now work on ubuntu -beta 8.04, firefox 3, Fplayer 9,0,115,0.
But also scroll page too.
Anil on 07 Apr 2008 at 9:28 pm #
The mouse wheel was the first thing I tried when I was playing the component, and although it did not work right now, I’m confident that a resolution for that bug/feature will present itself soon.
Overall, I really like the look/usability of this component.
My only question is if it is possible to disable the mousewheel event if a developer so chooses?
Administrator on 08 Apr 2008 at 6:26 am #
Yes you can remove the event listener of the Mouse Wheel from each VSmoothSpinBox inside the FlexWheel, there are a few ways to do this, one would be to save reference that returns from addSpinBox(…) and do a
ref.removeEventListener(MouseEvent.MOUSE_WHEEL, ref.onMouseWheel);
I will add a more “clean” way in the next version (property or something).
Thanks for the feedback
Robert on 24 Apr 2008 at 2:37 pm #
Can the flex wheel be set to scroll automatically without using a mouse? I am looking for a way to scroll through list items automatically.
Administrator on 25 Apr 2008 at 8:42 am #
Sorry, It does not have an automatic scrolling mode but you can check out the
containerEx library HSmoothBox and VSmoothBox I have for download on my site here
http://strawberrypixel.com/blog/flex-components/#hsmoothbox
it’s free and open source. Most likely you can set up a timer that calls the scrollToItemIndex
function.
Ryan Gardner on 25 Jun 2008 at 3:15 pm #
Any chance that this component is 508 accessible?
As in.. you can tab to it, and use the arrow keys to navigate it, and a screen reader would read out the values in it?
The only reason I’m asking is because we need our app to be 508 compliant…
Also, when a component has focus, can the mouse scroll wheel scroll the spinner? This is not as much a 508 issue as a “would be cool” issue
Administrator on 25 Jun 2008 at 5:04 pm #
Sorry, not 508 accessible, It’s an interesting idea though.
About the mouse wheel. It already works mostly. See 7 posts back when I wrote about the mouse wheel.
Krittiya on 22 Jul 2008 at 3:50 pm #
Impressive!!
Nadeem on 04 Aug 2008 at 6:54 am #
good one.. vl try and see if it works for me//
Tom Van den Eynde on 11 Aug 2008 at 1:14 pm #
Hi!
Great component but I seem to have run into a small problem: after setting a specific item (using selectByDataItem) it seems that the previous item is selected instead of the requested one. Could you verify this please?
Thanks in advance,
Tom
Administrator on 11 Aug 2008 at 7:02 pm #
Instead of using selectByDataItem, you need to use the FlexWheel.selectItemAt(boxIndex:int,val:Object).
boxIndex is 0 unless you have more than one “column” (spinBox).
val is the object in the dataProvider you want to select.
There is one important issue to note, each spinBox has a compareFunction property (to compare items in the dataProvider).
By default this property is set to Flex ObjectUtil.compare (see flex docs). In my experience, In complex objects it does not compare well.
You can set your own compare function in your overriden handleSpinBoxCreation() function.
Hope this helps
Cheers
John on 22 Sep 2008 at 5:10 pm #
Is there a way to disable the wheel wrapping to the first value in the dataprovider when the last item is hit? Thanks!
Administrator on 23 Sep 2008 at 7:26 am #
I’m not sure I understand what you mean by wrapping, If you mean breaking the “Wheel” behavior (when you reach the end it stops), then I’m sorry but I don’t currently see a way.
sonic lechat on 15 Oct 2008 at 4:21 pm #
great component, thanks for this job !
I’m currently using FlexWheel to display a list of names. Is there a way to dynamically update the wheel content in order to display in the wheel only the names starting with a letter choosen by the user ?
I’ve tried to use a filter function on the ArrayCollection given to the handleSpinBoxCreation as parameter : this works once at creation time, but when the user chooses another letter, then the wheel is not updated with the ArrayCollection new values…
Did I use the correct way ??
Thanks !
Administrator on 15 Oct 2008 at 6:44 pm #
There is a way, unfourtunatly its not “clean”, but reasonable.
what you need to do is:
when you want to update the dataProvider:
get reference to the internal VSmooothSpinBox - either by saving reference to the return value of addSpinBox() or using protected method getSpinBoxAt() and then update the dataProvider property of that spinBox.
I will add data binding to the dataProvider in my next release.
Cheers
Tom on 22 Feb 2009 at 5:16 am #
I have been playing with this fun component and seem to have found an issue with handling leap year (Feb 29 days). For example, if I’m using BirthDateWheel and try to select Feb 29 of 2000 (or any other leap year) the wheel display focus stays on Feb 29 but the event returns Mar 1. It seems that Feb 29 will actually never be returned via the dispatched event, so the correct behavior should be to automatically adjust display focus to Mar 1 when 29th is selected for non-leap years and to return the 29th via the event for leap years).
By the way, not sure if this may have something to do with this but I’m using Mac Safari browser with flash 10 (and flex builder 3.0.2 on Mac).
Administrator on 22 Feb 2009 at 9:10 am #
Tom, thanks for the info.
I will check it out soon and hopefully fix it in the next release.
Nisha on 24 Jun 2009 at 7:01 am #
very good component !
I have used this Flex Wheel to display a list of words. Now i just want to filter the words as per search criteria. I have created another array collection that contains those words only according to search criteria. then i have removed all the children and then update the value of data provider of spinbox added previously.
The Wheel is updated with new values. It displays all the items correctly but the problem is that Wheel stops the spinning. Now I can’t select any item in the wheel.
Can anyone suggest me where i have done the mistake? or how to come out of this problem. It’s very urgent. Please help me.
Thanks !
Administrator on 24 Jun 2009 at 11:02 am #
This should do the trick, In your FlexWheel subclass:
add:
public function updateDP(dp:IList):void
{
var spinBox:VSmoothSpinBox = getSpinBoxAt(0); //0 or change if you have >1
//reset to starting position
spinBox.selectByDataItem(spinBox.dataProvider[spinBox.focusIndex],true);
//remove children
spinBox.itemContainer.removeAllChildren();
//rebuild
spinBox.dataProvider = dp;
}
A version of flexWheel with better dataProvider runtime updating support is under development and hopefully will be ready soon.
Cheers
Nisha on 25 Jun 2009 at 2:07 pm #
Thanx for the quick response.
Somehow i have managed my problem. Now i am facing another problem. When i select a particular item using SelectItemAt method, it takes upto 10 seconds to select that time. I think it should take less than 1 second. Item Height is 34. How can i reduce this time?
Administrator on 25 Jun 2009 at 2:18 pm #
I need more information, please send more details on what you are doing by replying to the email I sent you.
Nisha on 25 Jun 2009 at 2:26 pm #
i have found out the solution. Thanx for your concern.