Statecharts: A Visual Formalism for Complex Systems Jeff Peng [email protected] Model-based Design...
-
Upload
magdalen-williams -
Category
Documents
-
view
218 -
download
2
Transcript of Statecharts: A Visual Formalism for Complex Systems Jeff Peng [email protected] Model-based Design...
![Page 1: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/1.jpg)
Statecharts: A Visual Formalism for Complex Systems
Jeff Peng
Model-based Design Lab
![Page 2: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/2.jpg)
Agenda
Introduction: Statechart Diagrams Statemate Semantics of Statechart Statemate Working Environment Statemate Tutorial Further Readings
![Page 3: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/3.jpg)
Introduction:Statechart Diagrams
Design of complex reactive systems Statechart in a nutshell Basic notation:
State Transition Initial State Final State
![Page 4: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/4.jpg)
Statechart Diagrams: Notation
State: a mode of the entity. A rectangle with rounded corners, and the
state name
![Page 5: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/5.jpg)
Statechart Diagrams: Notation
Transition: changing of the object State An arrow, with the Event Name
![Page 6: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/6.jpg)
Statechart Diagrams: Notation
Initial State: state of an object before any transitions
Marked using a solid circle Only one initial state is allowed on a diagram
![Page 7: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/7.jpg)
Statechart Diagrams: Notation
Final State: destruction of the object A solid circle with a surrounding circle
![Page 8: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/8.jpg)
Example: Online Chess
![Page 9: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/9.jpg)
![Page 10: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/10.jpg)
Statechart Diagrams: Hierarchy
Hierarchical Statecharts (FSM are flat) Arrows go inside node S Sub states inside state S
![Page 11: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/11.jpg)
Statechart Diagrams: Default State
![Page 12: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/12.jpg)
Statechart Diagrams: Clustering
Clustering: form of hierarchy Advantage
![Page 13: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/13.jpg)
Statechart Diagrams: History Mechanism
Resume from last state inside nested chart Initialization of history variable.
S HG F
A
B
C
DE
S HG F
A
B
C
DE
*
![Page 14: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/14.jpg)
Statechart Diagrams: Concurrency
Manage multiple states simultaneously Example: style types bold, italics and
underline.
![Page 15: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/15.jpg)
Statechart Diagrams
Delays: delayTime < in the state. E.g., 10 sec <
Timeouts < timeoutAmt in the state, e.g, < 5 min
![Page 16: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/16.jpg)
Example: CD Player
![Page 17: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/17.jpg)
Example: Telephone
![Page 18: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/18.jpg)
Statemate Semantics of Statechart
First executable semantics Central consideration: clarity, simplicity Designed for real-life complex systems,
support different styles of modeling. Fast prototyping Generates useful hardware and software
![Page 19: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/19.jpg)
Statemate Working Environment
Development of complex reactive systems Specification Analysis Design Documentation
Heavy graphical oriented Captures structure, functionality, and
behavior
![Page 20: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/20.jpg)
Structural Point of View
Decomposition of SUD Identifies information flow
![Page 21: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/21.jpg)
Conceptual Model
Consists of functional view and behavioral view
Functional view: Functional decomposition of SUD Does not specify dynamics
Behavioral view: Specifies control activities Tests conditions and variables
![Page 22: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/22.jpg)
Statemate languates
Module-charts structural view Activity-chart functional view Statecharts behavioral view
![Page 23: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/23.jpg)
Statemate Structure
Graphics&
FormsEditors
State-charts
Activity-charts
Module-charts
Statemate Database
ManagementFunctions
Administrator orProject Management
Instructions
SimulationPackage
Report&
PlotTests
CodeGenerator
![Page 24: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/24.jpg)
Statemate Tutorial: Design Flow of Digital Clock Step 1: requirement statement
Display the current time of day In hours and minutes Minute value increment every 60 seconds Hour value increment every 60 minutes
Set the time of day Display the set time in hours and in minutes Increment the minutes Increment the hours
Switch between modes Power present: in operation mode Power removed: blank display Power returns: set time mode
![Page 25: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/25.jpg)
Step 2: Getting Started
Start Statemate Create a project Open the project
![Page 26: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/26.jpg)
Step 2.2 Creating Project
Name: STM_CLASS_DP Manager: your login Databank: path to
the databank directory
![Page 27: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/27.jpg)
Step 2.3 Opening the Project
![Page 28: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/28.jpg)
Statemate Main Window
![Page 29: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/29.jpg)
Step 3: Creating the Activity-Chart
Internal Activities Control activities External activities Data flows
![Page 30: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/30.jpg)
Activity-chart Graphics Editor Select the Graphic
Editors icon from the Statemate Main window.
Fill in the Open Chart form as follows: Type: Activity-chart Usage: Regular Name Pattern:
CLOCK_your_initials Select the New button.
![Page 31: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/31.jpg)
Step 3.1: Creating Internal Activities
![Page 32: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/32.jpg)
Step 3.2: Creating Control Activities
![Page 33: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/33.jpg)
Step 3.3: Creating External Activities
![Page 34: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/34.jpg)
Step 3.4: Drawing Flows
![Page 35: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/35.jpg)
Step 4: Creating Statecharts Select the Graphic
Editors icon from the Statemate Main window.
Fill in the Open Chart form as follows: Type:Statechart Usage:Regular Name
Pattern:CLOCK_CNTL Select the New button.
![Page 36: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/36.jpg)
Step 4.1: Drawing States
![Page 37: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/37.jpg)
Step 4.2: Drawing Transitions
![Page 38: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/38.jpg)
Step 4.3: Associating the Control Activity with the Statechart
In the Workarea Browser, locate the CLOCK_your-initialsActivity-chart. Double click on this chart’s icon with the leftmouse button to open the chart.
Locate the CLOCK_CNTL control activity. Double click on the CLOCK_CNTL control activity name.
causes the name to be highlighted in black with a cursorappearing.
Click the left mouse button at the beginning of the name and then move the cursor to the left of the name.
Type the @ symbol.
![Page 39: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/39.jpg)
Step 5: Defining the Textual Elements
![Page 40: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/40.jpg)
Step 6: Simulating the Model
If the CLOCK_your-initials Activity-chart is not open, open it using the Workarea Browser.
Select the CLOCK activity. Select Tools>Simulation to open the simulation Execution
main window.
![Page 41: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/41.jpg)
Step 6.1: Setting Up a Monitor WIndow
•Select Displays>Monitors to open an empty SimulationMonitor window.
•Select Edit>Add ‘to open the Element Selection forMonitor window.
![Page 42: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/42.jpg)
Step 6.2: Stepping Through the Simulation
Organize viewing area Simulate the model Go Step from the Simulation Execution
window
![Page 43: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/43.jpg)
Step 7: Panel Creation and Simulation
![Page 44: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/44.jpg)
Step 8: Code Generation and Execution
Create a code generation profile Use the profile to generate code Run the code
![Page 45: Statecharts: A Visual Formalism for Complex Systems Jeff Peng jpeng@u.arizona.edu Model-based Design Lab.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f325503460f94c4ec71/html5/thumbnails/45.jpg)
Further Readings Harel, D., The STATEMATE semantics of statecharts, ACM
Transactions on Software Engineering and Methodology (TOSEM) archive, October 1996, Volume 5, Issue 4, Pages: 293 – 333
Harel, D., STATEMATE: a working environment for the development of complexreactive systems, IEEE Transactions on Software Engineering, Apr 1990 Volume: 16, Issue: 4, Pages: 403-414
Harel, D., Statecharts: A visual formalism for complex systems, Science of Computer Programming, 1987
StateMate Magnum Tutorial, I Logix