PocketUML Tools Add-in for Visual Studio.NET

Environment: Visual Studio.NET

Introduction

PocketUML is a portable UML tool for Visual Studio.NET. It supports C# Projects’ UML generation from source code. This edition is the first milestone. It only supports some basic UML tools functions. You might think the distance between PocketUML and some other UML tools (such as Rational Rose) is long, but this is just a start, and I will continue with it.

In this article, I will introduce how to install and build it. Then, I’ll discuss the project itself.

I’m just a UML beginner; there might be many basic notional mistakes in the UML graphics. If you find any mistakes, please e-mail me. Thanks!

How to Build It

  1. Download the PocketUML project source code and unzip it.
  2. First, build the PocketUMLViewer Project.
  3. Then, open another project—PocketUML—and build it.
  4. Open a new VS.NET instance and select Add-in Manager in the tool menu. Then, you will find the PocketUML Add-in in it. Select the PocketUML add-in and make the checkbox checked (Including startup checkbox).
  5. Close VS.NET and start a new VS.NET instance. The PocketUML menu will appear in the tool menu. If you can’t find it, try to run ReCreateCommands.reg, which can be found in the PocketUML project directory. After that, start a new instance; you should see it. Otherwise, please e-mail me.
  6. Before using it, make sure the five icon files are all placed with the PocketUMLViewer.dll in the same directory. Those icon files can be found in the PocketUMLViewer’s project dir.
  7. Test it in the VS.NET IDE.

How to Use It

  1. Make sure you properly build it.
  2. Open or create a new C# project in VS.NET.
  3. Select the PocketUML menu item.
  4. If it works fine, you can open a new window in the document area and show the UML graphics in it. Also, the report can be seen in the VS.NET status bar.
  5. Use the left mouse button to select and move it; double-clicking the item will cause a package to show its elements; class or struct will show its specification.
  6. Use the right button to show the context menu. To return to a upper level, right-click in the space area and select up level.

You can change its font, color, or position, but you can’t edit its property. That feature will be added in the future.

PocketUML Add-in

From the beginning, I was supposed to read the file and analyse the source code to generate the UML structure by myself. It’s quite a big job to do. But when I finished reading the documents of the VS.NET extension, I was impressed by those guys’ work. It’s definitely perfect. What I have to do is just get the object and read its properties. So easy! Thanks go to them!

In the PocketUML project, I use the VS.NET object to get the code model and save it to XML files. Maybe everything can’t be seen under the UML graphics, but everything was written in the XML files. If you don’t want to use UML tools and just want to do some other work outside VS.NET, you can use these XML files to know everything about the project. Those files can be found in the sub-directory of the project named PocketUML.

Exploring the VS.NET Code Model

I have created a class, named VSNetCollector, that is used to collect code information from the project. This class is in the namespace PocketUML.DataOperator. Also, I created another very huge class named CodeData to store all the project information in the namespace PocketUML.Data. By using these two classes, I can collect all the information about the project to my own data struct. The class Data2XML, that can help me read and write that data to XML files, is stored in namespace PocketUML.DataOperator.

So the work flow is:

  1. New a CodeData Object.
  2. Use VSNetCollector to collect code Model to CodeData Object.
  3. Use Data2XML class to save CodeData to XML files.

When I create a new VS.NET Add-in project, I can find the EnvDTE._DTE object. This object is the root object of the VS.NET Object model. By using this object, I can create a toolwindow, toolbar, and menubar and control all the child windows in the VS.NET IDE. Here, I’ll explain the Code Model. (Assume appObject is an EnvDTE._DTE object.)

  1. Get the Solutions.
  2. EnvDTE.Solution sln = appObject.Solution;
    
  3. Get the Projects.
  4. // Get all the projects and add to the solution data
    for( int i = 0 ; i < sln.Count; i ++ )
    {
    // First, ensure the project is a C#-based project
    // check...
    EnvDTE.Project prj = sln.Item(i+1);
    // Support C# Project
    if (prj.FullName.EndsWith(".csproj") == true)
    {
    // ......
    }
    }
    
  5. Get the Project Items
  6. for( int i = 0 ; i < prj.ProjectItems.Count ; i ++ )
    {
    // First, ensure the ProjectItems is a C# source code;
    // otherwise, break this circle.
    EnvDTE.ProjectItem prjItem = prj.ProjectItems.Item(i+1);
    
    if (prjItem.Name.EndsWith(".cs") == true &&
                                        prjItem.Name.IndexOf
                                        ("Assembly") == -1)
    {
    
    }
    // This step is very important:
    // If the project contains many sub-directories and stores
    // the source in those sub-directories, I must collect it
    // by using these functions. This function is very
    // similar to Step 3.
    else if( prjItem.ProjectItems.Count > 0 )
    CollectProjectSubItem( prjItem.ProjectItems, prjData );
    }
    
  7. Get the Code Model.
  8. EnvDTE.FileCodeModel codeModel = prjItem.FileCodeModel;
    
  9. Get the code elements.
  10. EnvDTE.CodeElements codeElements = codeModel.CodeElements;
    
  11. Get the code element.
  12. // code element contain all the code elements, such as
    // class, struct, interface, enum.....
    // Get All the code elements
    
    for( int i = 0; i < codeElements.Count; i ++ )
    {
    EnvDTE.CodeElement codeElement = codeElements.Item(i+1);
    // Collect item data
    CollectElementData( codeElement, codeElementsData );
    }
    

PocketUML Viewer Control

The first idea to view the UML data is to create a document window such as WinForm editor or code editor. But I have searched all of the documents and samples to find how to create a document window; the answer is I can’t. Although it might be done with the Visual Studio Integrator Program (VSIP), it’s too expensive for an individual to use. Fortunately, I noticed that it’s embedded in a Navigated Window Object. So, I can write a control to display the UML data in an HTML document; that means I have to write a HTML file, too.

The PocketUML Viewer Control is an ActiveX control to show the UML Data (XML files). It only supports one function: PocketUML::View( String xmlFileName ). When I created the control, the only thing I have to do is call the View function and pass the XML file’s name to it. The XML file is created by PocketUML VS.NET Add-in.

For more information in how to create an ActiveX control in C#, there are two very good articles that discuss it. Also, I’m one of the readers of those great works. Thanks go to them.

  1. Exposing Windows Forms Controls as ActiveX controls by Morgan Skinner
    www.codeproject.com
  2. Embedding .NET Controls in Java by Heath Stewart
    www.codeproject.com

PocketUML System Work Flow

  1. Create a new CodeData object (PocketUML VS.NET add-in).
  2. Fill the codedata through the EnvDTE._DTE object model (PocketUML VS.NET add-in).
  3. Write this codedata to XML files (PocketUML VS.NET add-in).
  4. Write a HTML file to use the PocketUML Viewer Control and pass the XML file name to it (PocketUML VS.NET add-in).
  5. Call the function applicationObject.ExecuteCommand(“View.URL”, htmlFileName) to open the HTML files under VS.NET IDE (PocketUML VS.NET add-in).
  6. Read the XML files into the CodeData Object (PocketUML Viewer Control).
  7. Display it (PocketUML Viewer Control).
  8. UI functions (PocketUML Viewer Control).

Remarks

UML is a very good language to manage a project. I found there a few UML tools that support VS.NET, but all are very expensive to use. Therefore, I hope after the first 1.0 version released (I’m not sure of the time), it can be truly useful for others. Also, the source code can be valuable for programmers.

I need more feedback about this project. Is it useful or not? If you get any questions, comments, or good ideas, please give them to me. My e-mail address is JieT@msn.com. Thanks!

Downloads

Download source – 155 Kb

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read