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.
Statecharts with    Stativus          Luc Castera  http://about.me/luc.castera
InitiationRequirements Specification    Design       }   StatechartsImplementation    Testing Maintenance
Transformational Systems   f(input) = output
Reactive Systems                        event-drivencontinuously having to react to external and internal stimuli
Javascript
“The literature on software and systems      engineering is almost unanimous inrecognizing the existence of a major proble...
Statecharts ?
Statecharts             =      State Diagram             +    Depth (clustering)             +Orthogonality (concurrency) ...
Statecharts 101
Internal Events
Depth (clustering)
Default States
History
Deep History
Transient States
Concurrent States
Examples
Your App Without Statecharts
Button View ExerciseExercise: create a statechart that models the behavior of a button view:1. action fires on mouseUp even...
ButtonView Answer - With Bug
ButtonView Answer - No Bug
Why use Statecharts?
Documentation
Communication
Think Ahead
Stable
Testing
Stativus
InitiationRequirements Specification    DesignImplementation   }   Stativus    Testing Maintenance
http://github.com/dambalah/stativus-button
Tips & Tricks
“path independence”   no logic in enterState
Testing using spreadsheets         From Erich Ocean
Testing using spreadsheets
Resources•   Statecharts: A Visual Formalism For Complex Systems, David Harel•   Constructing the User Interface with Stat...
Statecharts with Stativus
Statecharts with Stativus
Statecharts with Stativus
Statecharts with Stativus
Statecharts with Stativus
Statecharts with Stativus
Statecharts with Stativus
Upcoming SlideShare
Loading in …5
×

Statecharts with Stativus

1,430 views

Published on

An introduction to statecharts using the Stativus Javascript library.

Published in: Technology
  • Be the first to comment

Statecharts with Stativus

  1. 1. Statecharts with Stativus Luc Castera http://about.me/luc.castera
  2. 2. InitiationRequirements Specification Design } StatechartsImplementation Testing Maintenance
  3. 3. Transformational Systems f(input) = output
  4. 4. Reactive Systems event-drivencontinuously having to react to external and internal stimuli
  5. 5. Javascript
  6. 6. “The literature on software and systems engineering is almost unanimous inrecognizing the existence of a major problem in the specification and design of large scale and complex reactive systems.” -- David Harel, Statecharts: A Visual Formalism For Complex Systems, 1987
  7. 7. Statecharts ?
  8. 8. Statecharts = State Diagram + Depth (clustering) +Orthogonality (concurrency) + Broadcast Communication
  9. 9. Statecharts 101
  10. 10. Internal Events
  11. 11. Depth (clustering)
  12. 12. Default States
  13. 13. History
  14. 14. Deep History
  15. 15. Transient States
  16. 16. Concurrent States
  17. 17. Examples
  18. 18. Your App Without Statecharts
  19. 19. Button View ExerciseExercise: create a statechart that models the behavior of a button view:1. action fires on mouseUp event only if the mouse is over the button2. when the mouse is over the button, it should show a hover image Events: mouseEntered mouseExited mouseDown mouseUp mouseMoved
  20. 20. ButtonView Answer - With Bug
  21. 21. ButtonView Answer - No Bug
  22. 22. Why use Statecharts?
  23. 23. Documentation
  24. 24. Communication
  25. 25. Think Ahead
  26. 26. Stable
  27. 27. Testing
  28. 28. Stativus
  29. 29. InitiationRequirements Specification DesignImplementation } Stativus Testing Maintenance
  30. 30. http://github.com/dambalah/stativus-button
  31. 31. Tips & Tricks
  32. 32. “path independence” no logic in enterState
  33. 33. Testing using spreadsheets From Erich Ocean
  34. 34. Testing using spreadsheets
  35. 35. Resources• Statecharts: A Visual Formalism For Complex Systems, David Harel• Constructing the User Interface with Statecharts, Ian Horrocks• Practical UML Statecharts in C/C++, Miro Samek• Erich Ocean Sproutcore Training, http://erichocean.com/training/app.html, US $99• Ki Documentation: https://github.com/frozencanuck/ki• Stativus website: http://stativ.us/• Statecharts in the Making: a Personal Account, David Harel• Stativus on github: https://github.com/etgryphon/stativus• Omnigraffle to draw the statecharts• NI LabView Statecharts: http://www.ni.com/white-paper/6194/en & http:// www.ni.com/white-paper/7413/en

×