Figure 1: Tour through State Design Pattern

As you can see it’s pretty simple—sort of a PowerPoint chat. (Nowhere near as flexible as the one created with the Memento pattern.) So, if you’re interested in a mild tour, click the Play button and hop on:

By the way, the Catalyst project has made me far more aware of Flash Builder/Flex code. It uses Flex in its engine. If you’re interested in Catalyst, you can download the Beta at Adobe Labs. I tried importing programs (SWF files) made with design patterns, and it works great. About the only thing I didn’t do with this tour is to put the videos on Flash Media Server—sorry. I was in a hurry and wasn’t sure how to link up FMS to Catalyst. I could have written the code in Flash/Flex and created an SWF file to import into Catalyst, and that works fine, but I’m pretty pressed for time on this project.

As always, your comments and valuable feedback is encouraged. I’ll be back working on this blog as soon as I’m finished with the Catalyst project. Besides, Chandima has been writing knock-out posts to keep you interested!

After some fumbling, I saw that much of the important work is done by the Client. It actually works like a composer, especially since the State design is a beautiful example of both composition and delegation. Each participant had some responsibility in the process that I wanted to reveal in the sequence in which it occurs. With the State design, this is especially challenging because the context changes with each state. So how does one go about making a tour of such a process?

What Varies?

Then it occurred to me that were I to spend time on setting up a tour of the State design pattern, why not create a reusable application that I could use on any pattern I wanted? Of course this brought me back to the most basic question of design pattern development—what varies? In other words what varies in a tour of a pattern? So I whipped out my Magic Table to look at the possible variations in a design pattern. Well, I knew that the patterns were going to vary, but what does that look like in the Magic Table? Here were some that stood out:

• Algorithms—Strategy
• Steps of an Algorithm—Template Method
• When and how a request is fulfilled—Command
• Object that can fill a request—Chain of Responsibility
• States of an Object—State

I’ll get to the decisions involved in deciding on the best design pattern for making my thrill ride through different design patterns in a bit, but first, I wanted to consider the initial animations, graphics and design. The embedded SWF shows what I have in mind. The “control panel” is made up of buttons representing the different states (The animation just goes from the Client to the Context but it gives an idea of the animation I’m considering. It only goes to one state and then this page has to be reloaded to start over.)

[swfobj src="http://www.as3dp.com/wp-content/uploads/2010/02/ClientTest4.swf" align="none" allowfullscreen="true"]

As you can see, the “view” from the “control panel” is the next participant in the design pattern. Also, an acquaintance arrow appears from the current view to the Context state in the “distance.” When you click one of the buttons on the panel, the view moves into the Context state and the State interface appears with an aggregation arrow from the current view.

Culling The Sequence

The idea is to move “into” the next participant (class or interface) and show what happens when the moves occur. So far all I have is a partial jump from the Client into the Context class, but I want to show what happens when that step is taken. Figure 1 shows a sequence each request goes through and I’m trying to work out a way to animate the whole thing using a design pattern.

Figure 1: Sequence of request in State design

You can see a 5-step sequence with each request in a State design pattern. In the particular one we’re using in the example, we also have some helper classes in the form of a helicopter from the Library and a Mover object that moves the helicopter. The helper classes aid the in overall decoupling in the pattern.

To make an interesting trip through design patterns I’m forced to think in terms of a sequence to illustrate what is not sequential programming, but rather the process of composition and use and re-use of the objects making up design patterns. However, roller coasters and other theme park rides roll along sequentially and so I’m trying to step through the code dynamically as it is used. Once I get the basic implementation set up I can re-use it to trace through other design patterns.

Back to the Variation

Okay, we’ve got to ask once again What’s the fluctuation? (WTF?) After our examination of the steps in a request through a State design, we see a set of requests handled by the participants. That variation (or fluctuation) in a sequence looks a lot like a trip through a Chain of Responsibility pattern. The CoR sequence can be seen in Figure 2:

Figure 2: CoR sequence

Your Thoughts?

You can see where I am right now and where I have to go to get the ride moving. So I’d appreciate any ideas or help (especially with the artwork) that you may have. The look and feel is important for this to work well. Here’s where you can help:

• Suggested design patterns that would work better than CoR
• Ideas about how this should work—the animation, look and feel
• What should be included in each step of the sequence
• Artwork in the form of something I can use for a “dashboard” and scenes

Also, I’d like your thoughts on how helpful this will be. I know that sometimes I can trip over my own feet by being too clever. My favorite design pattern book is the Freemans’ Head First Design Patterns, but sometimes, their explanations got lost in the cleverness of the Head First framework. So, if you think this is a fool’s errand, let me know.