ATF State Chart Editor Sample

Table of Contents Description ATF Features Demonstrated by StatechartEditor Run StatechartEditor How to Use StatechartEditor Topics in this section

Description

StatechartEditor is a sample editor for statecharts. It uses an XML Schema to define the data file format, reads and writes XML statechart files, and allows them to be edited using a graphical representation of states and transitions. It uses the AdaptableControl to display and edit the statechart. Annotations, which are post it-like comments on the document canvas, can be added. Multiple documents can be edited simultaneously. Many ATF Editor components are used to implement standard editing commands. StatechartEditor also demonstrates prototyping: how the user can create a custom set of statechart fragments that can be inserted into documents.

For details on the internals of this sample, see State Chart Editor Programming Discussion.

ATF Features Demonstrated by StatechartEditor

• How to define a data model in Statechart.xsd.
• Use of DOM to store a data model in memory.
• Use of adapters to decorate the DOM to create a statechart data model.
• Editor.cs shows how to implement IDocumentClient and use a document framework to manage multiple documents, implement File menu commands, auto-new and open documents on startup.
• PaletteClient.cs shows how to implement IPaletteClient and uses IPaletteService to create the Statechart parts palette.
• Use of ContextRegistry to track the active editing context so that application components always apply where the user is editing.
• Use of AdaptableControl to display and edit a statechart using graph abstractions.
• Use TransformAdapter, CanvasAdapter, and ViewingAdapter to implement the statechart canvas.
• Use ScrollbarAdapter, AutoTranslateAdapter, MouseTransformManipulater, and MouseWheelManipulator to allow the user to pan and zoom the statechart canvas.
• Use of GraphAdapter, GraphNodeEditAdapter, and GraphEdgeEditAdapter to display and allow editing of statechart states and transitions.
• Use of IHierarchicalNode interface to allow states within states.
• Use of HoverAdapter to display information when the mouse hovers over statechart items.
• Use of AnnotationAdapter to display annotations and edit their text on the statechart canvas.
• PrototypingContext.cs shows how to implement IPrototypingContext, and uses PrototypeLister to allow prototyping.

Run StatechartEditor

1. Double-click the StatechartEditor.exe in \bin\wws_atf\Release.
2. The StatechartEditor window appears.

StatechartEditor has the following panes:

• Palette (Statecharts): the Statechart parts palette: Comment, State, Start State, Final State, History State, Conditional State
• Property Editor:edit the selected statechart element's property in a list control
• Grid Property Editor: edit the selected statechart element's property in a grid control
• Prototypes:lists the custom statechart fragments that you define for use in your statecharts
• Canvas:define, view, and edit statechartsThe toolbar contains buttons for file management: save, save as, and save all, print, page set-up, and print preview, and for editing: cut, copy, paste, delete, undo/redo, select all, lock/unlock, group/ungroup.

The menu bar contains:

• File:create a new statechart, open an existing statechart, Save, Save as, Save all, Close, Print, Page Set-up, Print Preview, and Exit.
• Edit: in addition to the standard editing functions (cut, copy, paste, undo/redo, and so on), Edit provides:
  • Keyboard Shortcuts: use the Customize Keyboard Shortcuts window to set up keyboard shortcuts.
  • Load or Save Settings: use the Load and Save Settings window to save current StatechartEditor application settings, or to load application settings from a file.
  • Preferences: set application and document preferences, such as command icon size and auto-load the last active documents.
• View:choose Frame Selection or Frame All
• Format:determine the alignment and size of state elements.
• Window: toggle the panes on and off; organize the document panes.

How to Use StatechartEditor

StatechartEditor opens with an empty canvas grid. Drag statechart elements from the Palette onto the canvas to work with them. Click the tabs for the various panes to view and edit statechart and statechart element properties.

Topics in this section