State Pattern in Flex


Published on

Presentation by Andy Bulka on the State design pattern with examples in Flex presented to the Melbourne Patterns Group in September 2008

Published in: Technology
  • Be the first to comment

State Pattern in Flex

  1. 1. Andy Bulka Technical Director Austhink Software
  2. 2. State <ul><li>Alter an object's behavior when its state changes. Put the “state” in a class and delegate to it. </li></ul><ul><li>Intent </li></ul><ul><li>Allow an object to alter its behavior when its internal state changes. The object will appear to change its class. </li></ul>
  3. 3. State pattern - UML <ul><li>Client code talks to the “context.Request()” which behaves differently </li></ul>
  4. 4. <ul><li>So what if you want to add the new &quot;Orange&quot; state? You usually have to modify code in a number of places . </li></ul>
  5. 6. State instances as Singletons <ul><li>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. </li></ul>
  6. 7. What States instances can access <ul><li>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) </li></ul>
  7. 8. Who changes the state <ul><li>Sometimes client code drives the changing of the state </li></ul><ul><li>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) </li></ul><ul><li>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(). </li></ul>
  8. 9. Flex 3 example
  9. 10. Flex 3 classes <ul><li>Implement dumb graphic in either flash or mxml </li></ul><ul><li>Deep state pattern switching logic is in pure actionscript code </li></ul><ul><li>Hook up the gui to the pattern using various techniques </li></ul>
  10. 11. Flash – dumb graphic <ul><li>Graphics reified as symbols </li></ul><ul><li>Symbols given names </li></ul><ul><li>Symbols marked as inheriteing from Flex’s mx.flash.UIMovieClip </li></ul>
  11. 12. UML 1 <ul><li>Simple version – flash component subclasses “context” </li></ul>
  12. 13. UML vers2
  13. 14. Re the behaviour - display() <ul><li>Three versions of implementing the graphic part is shown. </li></ul><ul><li>pure mxml (code embedded inside the mxml) </li></ul><ul><li>mxml + actionscript class </li></ul><ul><li>flash component (dumb) </li></ul>
  14. 15. Flex 3 MXML graphics
  15. 16. End. <ul><li>Advert </li></ul><ul><li>Design Pattern Courses - for your company </li></ul><ul><li>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 . </li></ul><ul><li> </li></ul>