Ryan Campbell

OpenFlux Example: Deck of Cards

By now I’m sure a lot of you have heard about Ben Stucki’s latest project called OpenFlux. If not, check out the blog entry Ben wrote introducing it or listen to the latest The Flex Show episode discussing it.

I’m really excited for OpenFlux, have been contributing to the project quite a bit and I’m hoping to spend a lot more of time over the next while helping get OpenFlux to a stable release and posting examples on my blog so others understand what’s possible.

The general difference between an OpenFlux component and the current Flex components is that the logic is separated in to a MVC architecture. This allows you to easily swap out one part of a component while keeping the functionality of the others. A List component goes a step further and separates the layout logic so you can easily invent new ways to layout your list items.

In this example I’ve created a cool (but possibly not too practical) OpenFlux List component that displays a deck of cards. Although it looks nothing like a standard List component, it is a List and has the same functionality that you would expect a List to have. For example, the cards are selectable and as you select multiple cards their suit/rank is displayed in a separate standard List.

To get the List working how I wanted all I had to do was use the Image component as my item renderer and create a custom layout class (which is now included with OpenFlux, called StackLayout). The StackLayout has gap and selectMode properties that you can play around with. Click the image below to try the working example.

You can checkout the latest OpenFlux source code, including code for the example, at the OpenFlux SVN webpage.