ActionScript 3.0 Design Patterns

Every Monday I have to separate out the paper, glass, aluminum, and plastic to recycle and take them up to the curb. This last Monday while engaged in this weekly ritual, I thought that recycling a design pattern might be an interesting exercise. Additionally, it’s the kind of design pattern advantage that can be used at work to save re-inventing the wheel when you have a similar development task. You may remember the Dragon Factory where we employed a Factory Method to set up an easy-to-use drag application. In the original Dragon Factory, both the Creator and Product participants had subclasses. However, with only a slight revision, it’s possible to create a little game for making different faces subclassing only the Product interface (abstract class). Figure 1 shows the File-Class Diagram:

You can see the design similarities between this application (MrFace) and the Dragon application. The main difference is that this one has a single concrete factory (FaceCreator) for all of the concrete products. The factory churns out all of the Product children and puts them into an array. The Client requests the array from the Creator and pulls out the elements with a loop. As you can see, they’re all draggable elements. Try out the embedded SWF file below to see how it works:

[swfobj src="http://www.as3dp.com/wp-content/uploads/2009/12/Client1.swf" alt="MrFace" align="none"]

The same Product (from the Dragon application) is re-used so it is unnecessary to revise it. However, instead of a video and a dynamically generated graphic, all of the graphics were put into the Library as Sprite classes. (To make a Sprite class just change the Base class to flash.display.Sprite.)
Read more…

The Fearless ActionScript 3.0 Design Pattern Catalog Soldiers On

I was able to get the second installment of the ActionScript 3.0 Design Pattern Catalog finished. For a running start, you can see the Creative/Structural Catalog online. As you will recall, in the First Part of the Catalog project, I used a dual-factory framework for creating the patterns. Other than the work adding new text files and drawing the class diagrams, updating was a piece of cake. I had to make changes to the CatData.as file to add the names of the Structural patterns, but otherwise, all I did was fill out text files. It was like magic. Everything else just took care of itself. (It’s always nice to see design patterns at work!) Figure 1 shows the progress:

It doesn’t look any different than the original other than the fact that it now has more than twice as many design patterns.

AIR Version Available

Ben Beaumont helpfully pointed out that instead of trying to grab 156 individual files, I could just grab the two type folders (Creational and Structural) in the AIR version and it worked fine. Click the download button to get the AIR Design Pattern Catalog for a very handy reference on your desktop:

I put the files online so that you can download them to see how everything works together. You will notice that they’re the same as the initial set except you now have a lot more patterns.

If you feel creepy for not helping out, you can be a big help by proof-reading the content and see if mistakes were made. (If you find any, send them to me, and I’ll fix them.) Also, it would be über cool if someone could translate the text files from English into other languages. I’d like to put up editions in as many languages as could be contributed.

In the meantime, enjoy the updated catalog.

As a concrete follow-up to Part I of this two-part post, I thought that once I decided on which graphics, text and video to use the development would go pretty quickly. It took a lot longer than I thought, but now that the concrete example is ready it’s pretty easy to see how to put a practical Builder together and re-use and extend it. Because this second part builds on the first part, if you’re only vaguely familiar with the Builder Design Pattern, you might want to review Part I.

What to Build?

In ActionScript 3.0 Builder Design Pattern Part I, we set up a vacation-building site using trace statements to display different characteristics. To make these characteristics come alive and work in some practical matter, the goal is to create a builder that does the following:

• Load an external graphic
• Play a video that can be displayed in any format used by Flash Media Server or Progressive Download
• Display a different background for each vacation destination. The background is made of an external .swf file
• Present text write-up using external text source

In looking at those four actions, you might be thinking, that’s not exactly rocket science. You’d be right. However, when you start adding more and more vacation destinations, keeping track of everything can dampen one’s resolution. With the Builder, though, I found it very easy to add, change, and delete. In fact, I encourage you to add your own favorite vacation place and add it using the builder described in this post.

The Design

In Part I, I talked about different variations in the Builder’s design. The one we’re using closely follows the first as far as the Product class is concerned. All of the concrete builder classes use the same Product class. The Product class assembles the different parts under construction. However, in order to keep the Product class manageable, I added several Helper classes to take care of the details for the different parts that need to be built for the final product. Figure 1 shows the file pattern for the design:

As you can see, several classes use the Product class, and it uses all of the helper classes. Even the Client holds a reference to the Product class. As far as design is concerned, though, this one is identical to the one we used in Part I with the added helper classes.
Read more…