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.
Nisha on 08 Jul 2009 at 7:43 am #
Hi All,
i am stuck with another problem now. I am binding a data collection items with mupltiple properties. The property that i m using to display can have same value for multiple items. I can differentiate these items in my collection via other property. Now the problem is , I can not select the item via index or not able to get the index of the item actually selected.
If i can get the index of the item selected in the wheel then i can get item at that index in my original collection. is there any other workaround for this problem ? Please help me.
Administrator on 09 Jul 2009 at 6:54 am #
Please see the documentation for the spinBox in the FlexWheel (SmoothBoxUI), it has a property called:
compareItemsFunction:Function [read-write]
utility function for comparing items in the box. Default uses mx.utils.ObjectUtil.compare. overrive if you need special handling
The srearchItem function uses it.
handoyo on 12 Aug 2009 at 1:45 pm #
Hi,thanks for the component.What should i do to use FlexWheel..I try to use minVal as on the simple tutorial..The 1.3.2 version does not have it…Thanks a lot… ^_^
Administrator on 13 Aug 2009 at 6:07 am #
handoyo,
Not quite sure what the problem is, I assume you are taling about the numeric wheel, I rechecked it and the property exists, maybe you are having problems with your environment.
Please make sure you have the component name space. Send me me more details if you did not manage.
Cheers
fred on 28 Oct 2009 at 9:35 am #
Hi,
Strange phenomenon: I use your (really great) component with success, however, there is a small glitch I cannot fix: I have two wheels (with a single SpinBox) next to each other, both with a name list. If I use the middle mouse button to scroll -> everything works fine under IE8, nevertheless in Firefox (3.5.3) when scrolling the wheel skips every second item (that is: if I have a list a,b,c,d,e, it scrolls: a,c,e instead of a,b,c,d,e).
Can I explicity set the amount of the skip? Do you have an idea what could be wrong?
Thank you!
Administrator on 29 Oct 2009 at 7:14 am #
You can override the public onMouseWheel function (subclass the spinbox, and add it in the creation of you flexwheel, see the tutorial for subclassing the FlexWheel) and try to fix this issue, current impl is
/**handle mouseWheel (scroll in direction of the spin), is public since can be called from outside* **/
public function onMouseWheel(event:MouseEvent):void
{
var currentMouse:int = getStageAxisValByDirection(event); //returns event.stageY
var moveBy:int = Math.abs(event.delta)<3? event.delta : event.delta/3;
handleScroll(currentMouse- moveBy,currentMouse,1);
}
If I recall correctly the moveBy calculation was done based on a post I found about differences in broswers and OS regarding the mouse wheel, guess still needs some adjustments.
Hope this helps.
fred on 06 Nov 2009 at 3:27 pm #
Hi,
Thank you for the prompt and precise response. I will give it a try. If I find a solution I’ll post it here.
Haneef on 04 Feb 2010 at 10:15 am #
Dear Administrator,
The component u have developed is super, i hv not expected such component anywhere,
thnax for that.
I need ur great help, In my application i’m trying spinbox to spin for 3 seconds and select some random value when stops, ONLY WHEN I CLICK ON SOME BUTTON. help me in coding. its urgent. I know it can be done.
Administrator on 05 Feb 2010 at 4:32 am #
I guess you could try to set a timer up and randomly choose an item from your data provider, then call
public function selectItemAt(boxIndex:int,val:Object):void
to invoke scrolling.
you can also set the scrollSizeDurationRatio to adjust time of scroll see docs.
Haneef on 05 Feb 2010 at 9:17 am #
Thanks for help…
I can’t see how to randomly select a value from data provider, as there is no random keyword or function, here i’m using array collection for spinbox.
please show me how can i set timer for spinbox to spin for selecting random value after clicking a button.
How can i provide blur effect when spinbox is spinning to select that random value.
Please help me in code for this context, Thanks in advance.
Haneef on 08 Feb 2010 at 10:40 am #
Please help i’m getting this error while i try to run individual .swf file which has a flex wheel with a single spin box spinning on some button click… Pls help me eradicating this error
Error: selectItemAt called for spin box that that does not exist at index: 0
at flexWheel.components::FlexWheel/selectItemAt()[C:\temp\build\flexWheel\components\FlexWheel.mxml:343]
at WebdhabaFlexSpin/nowspin()[C:\Users\user\Documents\Flex Builder 3\WebdhabaFlexSpin\src\WebdhabaFlexSpin.mxml:33]
at WebdhabaFlexSpin/__spn_btn_click()[C:\Users\user\Documents\Flex Builder 3\WebdhabaFlexSpin\src\WebdhabaFlexSpin.mxml:46]
Haneef on 09 Feb 2010 at 8:18 am #
Dear Sir,
I have tried everything to spin flex wheel continuously for 3 seconds before displaying the randomly selected value of flex wheel on some button click.
neither placing timer delay in effectStart event does work nor in wheelChangeStart event. please visit http://www.urbanspoon.com/spin-widget
Please help me in coding… as it is the critical part of my application. Thanks to u in adv
Haneef on 02 Mar 2010 at 7:39 am #
Please help, i know u could
My application is complete, it run through flex builder software correctly, but when i’m trying it’s .swf file to run separately it is displaying many errors of type #1014, two among those are
VerifyError: Error #1014: Class flexWheel.core::SmoothMouseScrollerBox could not be found.
please show me the way to fix it and another of type
ReferenceError: Error #1065: Variable SmoothBoxUI_img_htail is not defined.
My intension is to take my .swf file into a html page.
Please, Please respond quick as it is the last part of my project… thanx in advance…
Administrator on 03 Mar 2010 at 7:08 am #
Did you add the library swc correctly to your project?
Go to, project->properties->build path->library path tab->add swc.
Haneef on 10 Mar 2010 at 12:36 pm #
Dear Admin,
My application is complete, In my application irrespective of value of scrollsizeduration, flex wheel is stopping (hanging) at one value before what i intended it to display, when it spins in incremental direction; any way it is stopping at correct value when the wheel spins in decremental way.
so for correctness, i wanted flex wheel to always spin only in decremental direction(i.e. appearing values from top and getting to scrolling down) pls show me the code, if this problem is not cleared than all my effort is waste. thank you lots and lots in advance.
Administrator on 11 Mar 2010 at 3:13 pm #
Most likley if its not stopping on correct item it means its not finding the correct data item because of the search criteria.
Override the compare function in the spinBox inside the wheel by passing your own compare function instead of ObjectUtil.compare (default). you can achieve this by setting the property called compareItemsFunction on the spinBox inside the wheel (see tutorial page).
The flex wheel scrolls based on the shortest distance to the item selected or by user gesture. Unfortunately that cannot be changed at the moment.
Source code is for sale as you can see on the flexwheel page.
Its written temporarily not for sale since I cannot give full instant support at the moment.
If you are still interested contact me at admin@strawberrypixel.com.
Cheers
Haneef on 18 Mar 2010 at 11:36 am #
Thanx for your help above, it has now working fine.
One thing is there, whenever i run my flex application, On html page loaded, focus is not setting on my application object, i’m forced to click on application to display item values to get focus on. is it not possible to display object content(dispaly value directly)