ShuffleStack

Lab Project

Tired of using the same components over and over? The ShuffleStack is a new way to display several screens worth of information without gobbling up huge chunks of screen real estate.


What is this?

While working on a recent project, we came up against a common problem in the Flex world: an overabundance of business requirements that called for the same component. In this particular case, we were using TabNavigator and Accordion components ad nauseum. Finally, faced with yet another situation that called for an Accordion, it was time to hit up FlexBox for a component that could display several screens worth of data without taking up the screen real estate that concept implies.

What we had in mind was a kind of stack, much like a deck of cards, where clicking the header of an individual card would move it to the top of the stack. Lo and behold, there was a component for this: Card Layout, by Raghu. But we needed just a little bit more. So we built an Arc90 solution – ShuffleStack.

How Do I Use It?

To use ShuffleStack in your Flex projects, just follow these simple steps:

Download The Code

Click on the icon below to download the source code:

Download

The file, shufflestack.zip, contains a compiled library, the source, an example of ShuffleStack in action, and ASDoc generated documentation.

Add the code to your Flex project

You can either add the compiled library, Arc90Components, to your project’s library path, or include the source directly in your project.

Import the ShuffleStack

In your Flex MXML code, import the ShuffleStack classes:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:arc90="com.arc90.containers.*"
layout="vertical">

Or, import it into your ActionScript code.

import com.arc90.containers.ShuffleStack;
Create your ShuffleStack and give it children

Now you can either create an instance of ShuffleStack via MXML, or through ActionScript. Then add as many children* as you want. The ShuffleStack will handle the rest.

*You can only add children that are a sub-class of mx.core.Container.

Examples

You can see ShuffleStack in action by clicking here. Right-click anywhere in the new window to view the source.

Supported Browsers

ShuffleStack will work in any browser that has Flash Player 9 or greater installed.

Licensing

This arc90 tool is licensed under the Creative Commons Attribution 2.5 license.

Discuss ShuffleStack

You can send feedback on ShuffleStack at the arc90 blog.