| |
| 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 |
| |
| |
