Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

State Pattern In Flex

A tutorial on how to implement the State design pattern in Flex 3. We are going to have a traffic light move through several states (red, orange, green). Of course there are other states the traffic light might be in, as well as transitional states (green and orange at the same time), but lets keep things simple!

  • Be the first to comment

  • Be the first to like this

State Pattern In Flex

  1. 1. Andy Bulka Technical Director Austhink Software
  2. 2. State  Alter an object's behavior when its state changes. Put the “state” in a class and delegate to it. Intent  Allow an object to alter its behavior when its internal state changes. The object will appear to change its class.
  3. 3. State pattern - UML  Client code talks to the “context.Request()” which behaves differently
  4. 4.  So what if you want to add the new "Orange" state? You usually have to modify code in a number of places.
  5. 5. State instances as Singletons  You often want to have singleton states rather than recreating each state time and time again, and having to copy across any state attributes each time. Of course by keeping most of the attributes in the context, there is not much data in state to copy between state instance when the state switches.
  6. 6. What States instances can access  One main issue in state pattern is how do state instances access attributes in the context. Simplest solution is to have a pointer back from each state object back to the context. Another solution is to completely decouple the state from the context and simply pass the state instance what it needs e.g. as parameters to state methods (as defined in the the state interface)
  7. 7. Who changes the state  Sometimes client code drives the changing of the state  Sometimes client code holds the state instances too, though I prefer to map these to enums and look them up in a dictionary (see singleton issue above)  Often the states themselves or the context (e.g. car) will take on this responsibility. If the states are given the power to set the next state – they will need need access to the context (via a backpointer) so that they can call a method called e.g. SetState().
  8. 8. Flex 3 example
  9. 9. Flex 3 classes  Implement dumb graphic in either flash or mxml  Deep state pattern switching logic is in pure actionscript code  Hook up the gui to the pattern using various techniques
  10. 10. Flash – dumb graphic  Graphics reified as symbols  Symbols given names  Symbols marked as inheriting from Flex’s mx.flash.UIMovieClip Should actually be com.Traf ficLightC ontroller
  11. 11. UML 1  Simple version – flash component subclasses “context”
  12. 12. UML vers2
  13. 13. Re the behaviour - display() Three versions of implementing the graphic part is shown.  pure mxml (code embedded inside the mxml)  mxml + actionscript class  flash component (dumb)
  14. 14. Flex 3 MXML graphics
  15. 15. End. Advert Design Pattern Courses - for your company Elevate the effectiveness of your entire programming team - Andy can deliver a design patterns course to you programming team on your company's premises. Check out the details here.