This is the first of a series of posts in which we will walk through the UML Class Diagram sample of ILOG Diagrammer for .NET and explain various features, tips and tricks.

The full UML Class Diagram Editor sample can be run from the ILOG web demos server as a ClickOnce application: click here, then click the Install button. The sample is also available in the product itself with full source code. Here is a screenshot of the full sample:

For clarity, we describe in this post a simplified version of the sample. Here is the source code of this simplified version (the code will be completed as we go). You can load it in Visual Studio and follow the explanations by looking at the finished project. (Note: this is a Visual Studio 2005 / ILOG Diagrammer for .NET 1.0 project, but you can load and convert it in Visual Studio 2008 and/or use it with ILOG Diagrammer for .NET 1.5 as well).

The “UML Type” Symbol: Bulding a Complex User Symbol Easily

In this first post, we will introduce the “UML Type” symbol that represents a type (a class, an enum, etc) in a UML class diagram. The UML Type symbol looks like this:

The symbol has a title that contains the name of the UML type. The name can be set using the TypeName property of the symbol. Below are two areas separated by a horizontal splitter. The top area contains the attributes (i.e., the properties in the C# terminology) of the class, and the bottom area contains the operations (i.e. the methods). The content of these areas is set using the Attributes and Operations properties of the symbol respectively. The values of these properties are collections, so you can add any number of attributes and operations. Scrollbars are available if the items do not all fit in the visible area.

In ILOG Diagrammer for .NET, you create user symbols using Visual Studio. ILOG Diagrammer for .NET is closely integrated with Visual Studio and provides an editor (the VS terminology is “Designer”) that lets you visually assemble your user symbols.

To examine the UMLType symbol, start Visual Studio and load the UMLClassDiagram solution. Build the solution (use Build > Build Solution), then double-click on the UMLType.cs item in the Solution explorer.

Here is a screen shot of Visual Studio with the UMLType symbol loaded in the designer:

Let’s zoom in to see the Document Outline (use View > Other Windows > Document Outline to show it if it is not visible). The Document Outline shows the structure of the symbol:

ILOG Diagrammer for .NET user symbols are composite objects (or “containers”), that is, they are made of basic elements and other nested containers. Let us look at the elements of the UML Type symbol:

• dockPanel: this is the main container of the symbol. It is an instance of the DockPanel class, which is an ILOG Diagrammer for .NET container that has a built-in layout, very similar to a Windows Forms Panel.
• nameRect: this is the rectangle that displays the type name at the top of the symbol. Its Dock property is set to Top so that it is automatically placed at the top of the DockPanel. In ILOG Diagrammer for .NET, all graphic objects can have text displayed inside them. So, a common way to add text in a symbol is to add a Rect (rectangle) object, and to set its text. This also lets you define easily the background of the text using the Fill property of the rectangle (here we use a blue/white gradient).
• grid: this nested container is used to layout the attributes and operations areas, and also the horizontal splitter. It is an instance of the GridPanel class, a ILOG Diagrammer for .NET container that has a layout similar to a Windows Forms TableLayoutPanel. The GridPanel makes it easy to allocate the available space in the symbol to the two variable areas: we defined three rows, the first and last rows have a height that is a percentage of the available height (initially, 50/50), and the second row (that contains the splitter) has a fixed height of 4. The GridPanel is also configured to have only one column that takes the whole horizontal space, so the children all span the entire width of the symbol. The GridPanel itself has its Dock property set to Fill, so it fill all the available space in the DockPanel (below the title rectangle).
• attributesList and operationsList are two objects of type List. This is not a built-in ILOG Diagrammer for .NET type: the List class is itself a user symbol (also defined in the UML Class Diagram sample). The List symbol implements a scrolled list: we need one for both the attributes area and the properties area, so a good design is to create a user symbol that does this and reuse the symbol (twice in this case). The details of the List symbol will be explained in a future post.
• separator: this is the horizontal splitter between the attributes and operations area. It is simply a Rect object, with a gradient fill and a height of 4 pixels.

Now that we looked at the graphic structure of the symbol, let’s try it. The project contains a Diagram1 class. This is the ILOG Diagrammer container object that is displayed in the main application form. Double-click the Diagram1.cs item in the Solution Explorer to edit it: it already contains a test instance of the UMLType symbol. You can create other instances of the symbol by drag-and-dropping the UMLType item from the Toolbox window. For now, we cannot do much with the symbol except moving and resizing it. See how the Attributes and Operations area resize when you resize the symbol.

In this first post, we explained the basic principles for building ILOG Diagrammer for .NET user symbols, and scratched the surface of some features: user symbols, panels, layout, VS integration. In the following posts, we will continue to walk through the same sample and explain more ILOG Diagrammer for .NET features as we go. The next post will be about defining the behavior to the symbol by adding C# properties in the symbol’s code.

Tags: Diagram, UML class diagram, user symbol, Visual Studio

Posted by Eric Durocher in .NET, Diagram. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.