WheelLayout Source and Quick Mashup
A few folks have been asking for the source code of the WheelLayout. I created it as a proof-of-concept that our Spark layout APIs are sufficient for creation of 3D layouts. And just to showcase it in action, I decided to grab quickly the Flex3 Halo FlickrRIA, port it to Flex 4, and mash it up with the WheelLayout.
This example was compiled with the now oldish 4.0.0.7052 Flex SDK build.
The source code that I used is here. I’ve actually checked it in our flex4test project and therefore the up-to-date source is available from this location (of course it’s outside of the SDK, so it’s not supported ;))
What a great example of the power in the new Layout framework. Great work Evtim. I created a Flickr mashup using the same code you used here and a custom layout I called PagedLayout. Thanks for leading the way with this, I think this is a huge addition to the Flex framework.
My layout is available at:
http://www.adambergman.com/2009/09/16/flex-4-gumbo-custom-spark-layout-paged-layout/
Hey Evtim,
i checked this one too with actual public beta build and exchanged the WheelLayout.as with the one from the trunk based on the new NavigationUnit class.
No errors so far but no bug images are displayed. ‘photoFeed’ AC is filled correct.
Any ideas? You can? 😉
Cheers, Sven
Hey Sven,
Ah, same problem there – virtualization related, need to use different element getter “getVirtualElementAt” when virtualization is enabled. There’s no real benefit of virtualization for this particular layout, but it makes it work with default List, so change is worth it.
I just pushed trunk revision 11213, try it out it should work.
Cheers,
Evtim
Hey Evtim,
great! Works very well!
Thanks, Evtim
How to make the horizontal carousel list spin automatically?
Thanks
Hi Tom,
I just posted a new article http://evtimmy.com/2010/04/two-examples-of-layout-animations/ and there I animate the WheelLayout when I click on an item.
hi Evtim, Great examples. I have watched your video on the custom layouts and have gone through all your examples as well. I have learned a lot. I have a question though. I am working on a layout where the width is liquid (100%) the ‘x’ position of elements need to be calculated based on their offset (a property in the model – so offset * i) and the ‘y’ is same for all elements. So the elements are basically laid out horizontally. I have written a custom layout for this already. Each element is rendered by the itemRenderer and all works fine. Now if one or more elements have the same ‘x’ or overlap with another element – then I need to use a different itemRenderer that shows a ‘merged’ icon and displays how many elements have merged. I am thinking of doing a hitTest in the custom layout and then setting a property on the target to tell it if any items were merged…can I pick your brains on what is the best way to do this and if you have any sample code that would be awesome ? Obviously there is no need for a scroller here as the elements should squeeze if a lot of elements are thrown at the layout….
Just brilliant, well done!
Hi blogger, i must say you have very interesting posts here.
Your page can go viral. You need initial traffic boost only.
How to get it? Search for; Mertiso’s tips go viral