Design Patterns in Action Script-State

Yesterday, when I was on my way home, I suddenly met an old friend. I haven’t met him since I began to write these articles. We stop at a little cafe, and began to talk.

“I’ve just changed my job”, he said, “and now I join the Orange”.

“WOW, Orange, you mean the biggest MP3 manufacturer company,” I answered.

“Yeah, and I join the new product team, we want to surprise the whole world by our new product.” He said proudly.

……. (The rest of our conversation is very boring, so, let’s stop here)

 

When I back home, I can’t help to imagine the new product, which may surprise the whole world. Actually, I don’t think this product can give a surprise to me. From my old friend’s description, I don’t think this product can defeat another fruit company’s product.

“This product will have nothing but just one button”, it was the description of the new product. It sounds Orange goes further more than other fruit company. Just one button, it confuses me. How to control it just by one button? I don’t have the answer. But it remains me something that I don’t want to tell you now. Let’s write some code to mimic this product now.

The code maybe look like this, we can give some rules to this product. When you press the button the first time, It plays music, and it will be paused by your second touch, the third touch will cause it to stop, and then, the first. So, we can get the code like below.

1. if ( currentState == play )
2. currentState = pause ;
3. else   if ( currentState == pause )
4. currentState = stop ;
5. else   if ( currentState == stop )
6. currentState = play ;

Let’s check our code carefully, eh, it works well. But, how can I start this machine or stop it? Aha, we have a new mp3 player now, but we can’t even start it. I admire that it surprises me.

Eh, maybe for this kind of product, you can start the product just by press the button down with a fixed interval, and stop it in the same way. So, we can add these two rules to our code.

Another more question, how to add these two rules to our code, just by add another two more if-else? Of course, it makes the code looks ugly. Genius programmers, what will you do to refactor the code?

Aha, this is what I want to talk today. Firstly, let me show you a new pattern, named State. The intent is as follows.

Allow an object to alter its behavior when its internal state changes. The object will appear to change its class.

–By GOF BOOK

Now, let’s begin.

Firstly, we need a super class to define some basic operation. Then, let all the other states inherit from the super class.

And the class diagram is as follows.

Does it look more clearly? If you want to add other rules, you just need to add the concrete state class; you don’t have to maintain so much if-else statements.

Let’s take a look at the super class, and a concrete state class.

1. public interface State
2. {
3. function   press ( player : Player ) : String
4. }
5.  
6. public   class PlayState implements State
7. {
8. public   function press ( player : Player ) : String
9. {
10. player . setState ( new   PauseState ()) ;
11. return “ Playing :)”;
12. }
13. }

With this pattern, we leave the state-related operation to the concrete state class. And every concrete state class corresponds to a concrete state.

This pattern is very helpful when you modeling the objects that have state-related operations. You don’t need to write so much if-else statements, and maintain the variable to record the current state. In fact, if-else block maybe causes some trouble, especially when the block becomes larger. So, you’d better use this pattern to construct you code.
Download Full Project

Much for today, Enjoy!