Pocket UML

• Download source files - 254 Kb

Introduction

PocketUML is a portable UML tool for Visual Studio.NET. It's support C# Projects' UML generation from source code. This edition is the first milestone. It only supports some basic UML tools functions. You might think there is a big gap between PocketUML and some other UML tools (such as Rational Rose). But this is just a starting, and I will continue in 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 the mistake, please 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. Opening a new VS.NET instance, 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. Then close VS.NET, start a new VS.NET instance, you can find the PocketUML menu appear in the tool menu. If you can't find it, try to run the ReCreateCommands.reg which can be found in the PocketUML project directory. After that, start a new instance, you might can see it.Otherwise, please 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 built it.
2. Open or create a new C# project in VS.NET.
3. Select PocketUML menu item.
4. If it works fine, you can find it opened in a new window in the document area with the UML Graphics in it. Also, the report can be seen in the VS.NET status bar.
5. Use left mouse button to select and move it, double click item will cause package to show it's elements, class or struct will show it's specification.
6. Use right button to show context menu. To return to a upper level, right click in the space area and select up level.

You can change it's font, color, position. But can't edit its property. Those features 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 am finished reading the documents of 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 it's properties. So easy! Thanks them!

In PocketUML project, I use the VS.NET object to get the code model and save it to XML files. Everything maybe can't be seen under the UML graphics. But everything are all written in the XML files. If you don't want to use UML tools, just want to do some other works outside the VS.NET, you can use this XML files to know everything about the project. Those files can be found in the sub-directory of the project named PokcetUML.

Exploring VS.NET Code Model

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

So the working flow is:

1. New a CodeData Object
2. Using VSNetCollector to collect code Model to CodeData Object
3. Using 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, menubar and control all the child windows in the VS.NET IDE. Here, I'll explain the Code Model. ( Assume appObject is EnvDTE._DTE object )

1. Get the Solutions

   EnvDTE.Solution sln = appObject.Solution;

2. Get the Projects

   // Get all the projects and add to the solution data
   for( int i = 0 ; i < sln.Count; i ++ )
   {
       // First muse 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)
       {
       // ......
       }
   }

3. Get the project Items

   for( int i = 0 ; i < prj.ProjectItems.Count ; i ++ )
   {
       // First must 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 contain many sub-directory and store the 
       // source in those sub-directory, I must collect it by
       // using this functions. this function is very similar with step 3.
       else if( prjItem.ProjectItems.Count > 0 )
           CollectProjectSubItem( prjItem.ProjectItems, prjData ); 
   }

4. Get the Code Model

   EnvDTE.FileCodeModel codeModel = prjItem.FileCodeModel;

5. Get the code elements

   EnvDTE.CodeElements codeElements = codeModel.CodeElements;

6. Get the code element

   // 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 like WinForm editor or code editor. But I have searched all of the documents and samples to find how to create a document windows, the answer is I can't. Though it's might can be done by using Visual Studio Integrator Program (VSIP), but it's too expensive to use by individual. Fortunately, I noticed that it's embedded a Navigated Window Object. So, I can write a control to display the UML data in a HTML document, that's 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's only support One function : PocketUML::View( String xmlFileName ). When I have created the control, the only thing I have to do is just to 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 to discuss it. Also, I'm one of the reader of those great works. Thanks 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 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 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 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 of UML tools support VS.NET. But all are very expensive to use it. Therefore, I hope after the first 1.0 version released(I'm not sure the time), it can be truely 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 question and comment or good ideas, please give it to me. My email address is JieT@msn.com. Thanks!