Home > Custom Layout, Quick mash-up > WheelLayout Source and Quick Mashup

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 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 ;))

  1. October 2nd, 2009 at 06:41 | #1

    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:

  2. October 27th, 2009 at 12:01 | #2

    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

    • Evtim
      October 27th, 2009 at 22:33 | #3

      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.


  3. October 28th, 2009 at 06:45 | #4

    Hey Evtim,

    great! Works very well!

    Thanks, Evtim

  4. Tom
    April 8th, 2010 at 16:29 | #5

    How to make the horizontal carousel list spin automatically?

  5. September 14th, 2010 at 07:22 | #7

    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….

  6. Francsic
    August 31st, 2011 at 10:57 | #8

    Just brilliant, well done!

  7. July 31st, 2017 at 08:57 | #9

    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

  1. September 16th, 2009 at 07:21 | #1
  2. November 6th, 2009 at 06:51 | #2
  3. February 25th, 2011 at 07:06 | #3
  4. August 31st, 2011 at 09:43 | #4