Generating .NET Code Using Visio Enterprise Architect's UML

URL:http://www.microsoft.com/india/msdn/articles/260.aspx

 

Generating .NET Code Using Visio Enterprise Architect's UML

By : Sreedhar Koganti

Article Posted: October 07, 2004

Introduction:   In this article we will see how we can generate various parts of .NET code using Visio UML. Visio will generate only skeleton code to the UML in a specified language. The advantage of using this is, once we have made UML, we can generate skeleton code in VB, C#, or C++ languages.   What We Are Going to See in this Article   In this article we will see how we can generate .NET code using UML. In order to show how we can generate code, I am taking a simple Math class generation example. This Math class will have two functions. One function is for adding two integer numbers, and the other one is for multiplying two integer numbers.   In the process of making it, first we will create a class and then we will add two functions to that class. I will explain this in an easy way to understand, and I will provide necessary pictures while explaining it.   After explaining Math class code generation, I will also explain some miscellaneous and important operations, which we need in making code generation.   ClsMath Class Code Generation   Okay, let's move to our first step. In order to know how we can generate code, first we have to open UML Model diagram.     Figure 1.1   As shown in the above figure, in Visio Enterprise Architect, select Software, and in that frame, select UML Model diagram. You can see that in Figure 1.1.You can also find it by going to File ? New ? Software ? UML Model diagram. Then it opens a new UML model diagram application for us. Once it opens, we see four blocks in the application. Those are: 1. Shapes; 2. Model explorer, those are on the left-hand side of the application; 3. Page [Structure page] as a main block; and in the bottom of Page block, we see output as the 4th block. You can see it in Figure 1.2.     Figure 1.2   Here our intention is generating code, and for that we have to use model explorer. As shown in the above figure, you can find model explorer by default at the left-side of the page. By default, it has a static model and data type explorers. You can see it in Figure 1.3.     Figure 1.3   We are almost there. To give a good understanding here, I am taking a simple and easy example, i.e. a class having math functions. In order to construct it, I create a class having the name ClsIMath, which has MathAdd and MathSubtract functions.   How We Can Create the Class Element   Go to Model explorer. In that page, you can see "Top Package," so rename it as MathPackage to make more sense. You might question why we need this Package element while generating the Class element. The answer is, while generating code, this package element in UML is mapped to a namespace in VS .NET. Also, it creates a new folder with the same name as the package, and all the source code generated for UML class elements in the package is placed in this package folder.   By right-clicking on it, you can see the rename option. By using that option, you can rename the Package. Now our next step is adding our ClsMath class to that Package. For that process, again right-click on the Package, select "New Option," in that box, select Class. You can see this in Figure 1.4.     Figure 1.4   This UML class element is mapped to a class containing attributes and operations. When code is generated for a UML class, a class declaration file is created using the name of the class with our specified language extension. In our example, since we are aimed to create ClsMath Class element, it creates the ClsMath.XX file for us. If we want to generate a VB .NET application, then it generates the ClsMath.Vb file for us.   By Clicking on Class, it is going to bring up a wizard for us. By adding required information in that, we can create the ClsMath element. You can see it in Figure 1.5     Figure 1.5   As shown in Figure 1.5, it provides nine options for us. These are:   1. Class 2. Attributes 3. Operations 4. Recetions 5. Template Parameters 6. Components 7. Constraints 8. Tagged Values 9. Code Generation Options   Class option is useful for providing various properties related to class. Since we are interested in creating the ClsMath class, we have to keep ClsMath in the name text box. Since we want to make a Public class, in Visibility keep default option Public. The Documentation option is useful for us in keeping some comments. Since we are not interested in using any attributes in this example, we can move to the Operations option.   The Operations option helps us in creating functions and methods. As shown in Figure 1.6, in Operations add MathAdd and MathSubtract functions. Since I am interested in generating code in VB .NET and am expecting a return value from the functions as an integer value, for two of the operations I choose return type VB:Integer. You choose according to your interest!     Figure 1.6   Adding Parameters to the Function   Now we have the functions and have assigned return values to them. We have to assign arguments to the functions. For adding arguments to MathAdd, please keep your cursor on the MathAdd function row and click on Properties as shown in Figure 1.6. Then it brings up a wizard for us. You can see that in Figure 1.7.     Figure 1.7   As shown in Figure 1.7, it provides eight options for us. These are:   1. Operations 2. Specifications 3. Methods 4. Parameters 5. Exceptions 6. Constraints 7. Tagged Values 8. Code Generation Options   In our example, since we are interested in adding parameters to it, we move to the Parameters option. It has four options.   1. Parameter: useful for providing a name to our argument or parameter. 2. Type: allows us to provide a data type to our function parameter. It provides us a list box to choose the necessary data type. 3. Kind: helps us in specifying the type of object [byval or byref]. 4. Default value: helps us in providing a default value for our parameter. If we did not provide any value, it provides a value for us.   By using the little buttons New, Duplicate, Delete, etc. on the right side, we can get the appropriate needs for our interest.     Figure 1.8 illustrates this.     Figure 1.8   As show in Figure 1.8, please add ValOne and ValTwo as parameters. Since we need these two as input parameters, choose "in" in the Kind option. "In" generates code for parameters, such as ByVal. "Out" generates code for the parameter, such as ByRef. Since we don't have any default value, we leave it as a blank. If we have a default value then the parameter code is generated as optional ByVal/ByRef Object = Value.   As our requirement, we created MathAdd function and for that, we assigned two input parameters and one output parameter. Now to verify code, we choose "Code Generation Option," which is shown in Figure 1.9.     Figure 1.9   In "target language," we can choose the language we want. After choosing the language, we can see the code for our function by clicking the Preview Code button, which shows the code in the selected language for us. If I choose Visual Basic, it shows the below code.   CodeList 1   ' Preview of code that will be generated in the implementation file:             ' This will be useful for adding two integers. Takes two parameters             Public Function MathAdd (ByVal ValOne As Integer, _             ByVal ValTwo As Integer) As Integer End Function   If we choose C++ from the target language and press Preview Code, then it shows CodeList 2.   CodeList 2   // Preview of code that will be generated in the header file: public:                   // This will be useful for adding two integers. Takes two parameters                   int MathAdd(int ValOne,                                                             int ValTwo); // Preview of code that will be generated in the implementation file: // This will be useful for adding two integers. Takes two parameters int ClsMath::MathAdd(int ValOne,                                                             int ValTwo) { }   If we choose C# from the target language and press Preview Code, then it shows CodeList 3.   CodeList 3   // Preview of code that will be generated in the implementation file:                   // This will be useful for adding two integers. Takes two parameters                   public int MathAdd(int ValOne,                   int ValTwo)                   {                   }   If, after verifying the code, we feel that is what we need, click Okay to complete the MathAdd function. We are done adding parameters to the MathAdd function. But wait, we have to add parameters to the MathSubtact function. In order to add parameters in MathSubtract function, again we have move to Operations and choose MathSubtract function, which we can see in Figure 1.6. In order to add parameters to the function, again we have to follow the same steps that we followed to add parameters to the MathAdd function. As for adding parameters to the MathSubtract function, once again we have to select MathSubtract function and click the Properties button. Also we have to add ValOne and ValTwo as parameters having VB.Integer in type and "in" in kind, as we did for the MathAdd function. It's always a better idea to click "Code Generation Options" to verify the code and to check if it meets our requirements or not.   Now we are done with adding two functions. Our next and last step is to make sure whether our class element generates proper code for us or not. To make sure, go to "Code Generation Option," choose Visual Basic as the target language, and click the Preview Code button to see the code. If you follow my steps, then you should also see the code as shown in CodeList 4.   CodeList 4   ' Preview of code that will be generated in the implementation file: ' This Class is useful for Math applications. 'It provides Add, Subtract functions for us. Public Class ClsMath ' This will be useful for adding two integers. Takes two parameters                   Public Function MathAdd (ByVal ValOne As Integer, _                   ByVal ValTwo As Integer) As Integer                   End Function                   Public Function MathSubtract (ByVal ValOne As Integer, _                   ByVal ValTwo As Integer) As Integer                   End Function End Class ' END CLASS DEFINITION ClsMath   Now our Model Explorer looks like Figure 1.10     Figure 1.10   Now we are done creating our Class element. As our last step of Code Generation we will go to the UML option in the toolbar and select Code ? Generate option. [UML ? Code ? Generate], which appears as in Figure 1.11. Also by using the Check option, we can check the syntax of our UML.     Figure 1.11   After choosing the Generate Option, it shows a wizard for us to generate code. You can see this in Figure 1. 12     Figure 1.12   As you can see Figure 1.12, it shows different options for us in generating code. As a first step, we have to select the needed classes in the Select Classes for Code Generation option. If we wanted to add this class to a project, then we have to check the Add Classes to Visual Studio Project check box. After checking the check box, template is going to show a list of options for us. Here I am choosing Windows application. After pressing the OK button, it generates code and makes a Windows application. Remember to choose the required target language. Also, if you are interested in keeping the solution in a separate package, please check the Create Directory for Solution check box. Once it generates code successfully, you see the Code Generation Completed message in the Output window. For your convenience, I am showing it in Figure 1.13. If there are any errors, then you also see errors in the same window.     Figure 1.13   We are done! To make sure, please go to the location where you saved the project and open the project. You should see the ClsMath.vb file in the project with the default Form1.vb file.   In brief, it generated the below files for us.   File type Filename Visual Basic source files Form1.vb Form1.resx AssemblyInfo.vb ClsMath.vb Visual Basic .NET Project file MathPackage.vbproj Visual Studio solution file MathPackage   Milanese Information   We saw how we can create a VisualStudio .NET project using Visio UML. Now we can see some of the miscellaneous things like how we can see Created Package diagrams, Class diagrams, etc.   In order to see them, simply drag MathPackage from ModelExplorer and drop-in the page. In the same way, drag and drop ClsMath in the page. Then see it as shown in Figure 1.14     Figure 1.14   As you can see in the package in Figure 1.14, you can see our package name. In the below circle, you can see the ClsMath class, and also you can see its two methods. By right- clicking on the ClsMath or Package diagram, you can change it's option by choosing Show Display Options. You can see it in Figure 1.15.     Figure 1.15   As shown in Figure 1.15, after a right-click on Class element you see the Shape Display Option. Click on that option, and it's going to provide various choices for us in showing elements. After clicking the Shape Display option, you see a menu to change various options as shown in Figure 1.16     Figure 1.16   As shown in Figure 1.16, it's going to provide us with three main option categories.   1. General Options: Changes various properties of the Class module. For example if we don't want to show the class name, by un-selecting of the Name option we can eliminate showing the Class name in the Class element. 2. Attribute: Has three options, useful for manipulating Attributes of the Class. 3. Suppress: Useful for suppressing various options of the Class element. By selecting the desired option, we can suppress corresponding related information of the element.   Note: Abstract Classes and Parameterized Classes are not supported.   Zoom In and Zoom Out   When we are working with diagrams, there may be many elements, but we may want a closer view of certain elements, so we can work with them more easily. Here are some ways to do this.   1. Press CTRL+SHIFT and click the location you want to see closer. 2. Press CTRL+SHIFT while you drag a rectangle around the area you want to see closer. 3. Press CTRL+SHIFT and right-click a location you want to see from farther away, this decreases the size of the element or elements that you have selected.   Note: When you press CTRL+SHIFT, the pointer changes to a magnifying glass. You can use it to zoom in by clicking or drawing a rectangle.   To view and zoom in on different sections of a large diagram:   1. On the View menu, click the Pan & Zoom Window. 2. In the Pan & Zoom window, drag the red box around the area you want to see closer. You can select a particular section. 3. Change the size of the area on which you're zooming (and the level of magnification) by dragging one side or corner of the red box.   You can see this in Figure 1.17     Figure 1.17   To pan to a different area of the diagram, place the four-headed arrow inside the red box and drag.   Working with Two UML diagrams Side-by-Side   In many cases, our object models of our classes are similar. In this situation, if we want to take some of the content from one UML and keep in another UML, we have to work with two UML models side-by-side. Also, sometimes we need to look at the content in the first diagram to create the content in the second.   In some cases we want to copy content from the first diagram into the second.   In order to show how we can work with two UML diagrams side-by-side, consider this scenario. Here, we use our existing diagram in one diagram and create a new diagram in another diagram. I think now you might be comfortable with creating a UML diagram. So as a first step, please go to File ? New ? Software ? UML Model Diagram and select it. This can be seen in Figure 1.18. Then it opens a new diagram for us.     Figure 1.18   Now, what happened? You are seeing only one UML model at a time. Now our intention is to work with two diagrams at a time. It's simple. In order to get this effect go to the Window menu, click Tile. Then you see two UML models side- by -side. You can see it in Figure 1.19     Figure 1.19   As you can see Figure 1.19, you are not able to see two pages clearly. To see them more clearly, please close Model Explorer then Shapes. We can see more of our content if you close the Model Explorer in the diagrams. To close it, right-click on the corresponding window of the title bar, and click Close. To copy a shape from one diagram into another, click the shape you want to copy. Hold down the CTRL key, and then drag the shape from one diagram into the other. To move a shape from one diagram to another, click the shape, and then drag it into the other diagram. That's it.   Now what? Once our purpose is solved, generally we close one UML model and try to use another one. If again we need to use Model Explorer, we have to go to the toolbar and choose UML ? View ? Model Explorer. It shows the Model Explorer again for you. You can see it in Figure 1.20.     Figure 1.20   Sending an Open Diagram Through E-mail   We are almost done in making our UML, and we also generated code. After making the UML and before generating code, if we want to share it with or get a quick reaction from other team members or from manager, what do we have to do? Don't worry, from Visio, we can send our working diagram through e-mail.   On the File menu, point to Send To, and then click Mail Recipient (as an Attachment). You can see that in Figure 1.21     Figure 1.21   If our mail program is not running, it starts and a new e-mail message opens. Type the e-mail address of the person to whom you want to send the diagram, type a message if you want, and then send the e-mail the way you usually do. To send a diagram to a list of recipients in order, on the File menu, point to Send To, and then click Routing Recipient. When you send a diagram from Visio, the e-mail message that opens lists the diagram name as its subject and contains the diagram as an enclosure.   Summary   In this article we learned how we can generate code by using a UML Model Explorer. We also learned the use of Package and how we can generate functions and parameters inside Function. Also we learned some miscellaneous options, like sending mail and working with two diagrams simultaneously.   About the Author   Sreedhar Koganti has several years experience in developing/Architecting and implementing applications using Microsoft technologies. He is also an expert in leading/managing a team in right direction as Client need. He also teaches Microsoft technologies and has a free educational site (http://www.w3coder.com) on .Net for the community purpose. As an author he contributed to ASP.Net developers Cook Book (http://www.aspalliance.com/cookbook) and he also writes articles on architecting applications using .Net to various magazines/web sites. When ever he has a free time he answers questions at http://www.asp.net/forums and he is also one of the moderators on asp.net forms. You can reach him through his blog @ http://weblogs.asp.net/skoganti