Visual Studio DSL entry 9-create graphical symbols for a State Machine

In the previous section, we have created a metadata model for the state machine. In this section, we complete the graphical symbols of the state machine and establish a test environment for the state machine.
After opening the DSL file, follow the link on the right. First, we can complete the shape representation of the domain class:
1. A State can be an operation or exit operation, so the state is represented as a compartment shape, the two operations (like a class containing methods and attributes) can be displayed on the graph. Delete the previously generated exampleshape first. select the compartment shape (compartment shape) from the toolbox to the dimo-elements area and name it stateshape.
2. modify some attributes of stateshape to make it more beautiful. Modify the geometry attribute to roundedrectangle (rounded rectangle) and fillcolor to lightblue.
3. map stateshape to the state domain class, select dimo-element map from the toolbox, click the state of the domain class to point to stateshape, and click ing to view DSL details, you can see the ing information described in Section 7:

4. add entryactions to stateshape (right-click stateshpae to add compartment), title is "Enter operation", and titelfillcolor is lightblue. also add the compartment exitactions with the title "Exit operation ".
5. map two compartments in DSL details, set the display element set of entryactions compartment, open the window, select entryaction from the statehasentryactions relationship of state, and set the display attribute to label. this compartment displays the value of each label attribute for its entryaction set. similarly, set the exitactions compartment.

We add some decorator for stateshape to control the effect of State display.
6. Right-click stateshape and add expand collapse decorator. It is mainly used to describe expansion and contraction, and set the position attribute value to innertopright. In this way, the expansion and contraction icon is displayed in the upper right corner.
7. add text desorator, name it namedecorator, and set the value of position to innertopcenter. (Next we will map this modifier to the property name, and set the property name to be displayed in the innertopcenter position of the image ).
8. Map namedecorator to attribute name in DSL details:


Next, let's complete one of the features we mentioned in the previous section, that is, setting the kind attribute value of our state. The graph can change according to different attribute values. For example, if it is an initial state, A start icon is displayed on the graph. If it is in the end state, an end icon is displayed on the graph.
9. first, add the two icons for the DSL project, and add the two icon files start for the resources folder. EMF and stop. EMF. path: \ visualstudiointegration \ tools \ dsltools \ solutiontemplates \ Taskflow \ DSL \ resources \.
10. Add two icons for stateshape to indicate the two icons, Starticondecorator, stopicondecorator. Set the default icon of the decorator to the two icons. The default position is innerttopleft.
11. Map the two icons in DSL details and select visibility filter for starticondecorator. The property value of kind is initial. Similarly, stopicondecorator is processed, and the property value of kind is final.

Next, we will complete the graphic display of the transition of domain link transfer:
12. Modify exampleconnector to transitionconnector. Create a ing between transitionconnector and transition.
13. Add a text modifier for transitionconnectorLabeltextdecorator, The position attribute value is targettop, that is, the property label will be displayed at the top of the target end of the link line.
14. ing labeltextdecorator to the domain transition attribute label in DSL details:

We have completed the graphic symbols of the domain class state and domain relationship transition. Next we will add the Toolbox icons for them (if they are not added, the default icons will be used directly ):
15.for dslproject, the two icons are tasktool.bmp and flowtool.bmp (the path is the same as above, the same below). Open DSL explorer and find the node Editor/toolbox tabs/languagesm/tools. You can see that exampleelement and examplerelationship are available. right-click Properties and rename them to state, transition, and Toolbox icon respectively.

Now, let's run the state machine designer:
16. Note that all templates must be converted after the DSL file is saved before running, and then click debug to run the entire project. The usage of this state machine is not described in detail.

Code download

 

Reference resources
1. Development Guide for specific fields of visual stuido DSL tools
2. dsl tools lab http://code.msdn.microsoft.com/DSLToolsLab series tutorial [this series of entry cases of the main reference]

Author: lone knight (like a year of water)
Source: http://lonely7345.cnblogs.com/
The copyright of this article is shared by the author and the blog. You are welcome to repost this article, but you must keep this statement without the author's consent andArticleThe original text connection is clearly displayed on the page. Otherwise, the legal liability is retained.