Visual Studio

Visual Basic Enterprise Edition

Microsoft Visual Modeler

Visualizing, generating and reverse-engineering component-based applications.

 

 

 

Microsoft Visual Modeler

Visualizing, generating and reverse-engineering component-based applications.

Introduction

With Visual Studio and Microsoft Visual Basic 5.0, developers can rapidly create distributed applications consisting of reusable components. In order to harness this power, developers need to think in terms of business components and software architectures. As the number of components in an application increase, its complexity increases exponentially. Modeling is, therefore, essential to making component-based development scaleable for enterprise and Internet applications. Modeling has been an essential part of engineering, art, and construction for centuries. Creating a model of a building allows the architect to visualize the finished structure long before the foundation is poured. Simple structures require little planning: a simple addition to a home can be sketched on a single sheet of paper. It’s clear that complex structures cannot be built without first creating a model.

Visual Modeler makes it easy for you to create, enhance, and maintain applications by helping developers build models of their applications—regardless of their complexity. Visual Modeler provides modeling tools for the analysis, design, and implementation of component-based applications.

Visual Modeler allows developers to fulfill the promise of component-based programming by quickly and easily creating applications that are maintainable, that have a long lifetime, and that contain components that can be reused in other applications.

Furthermore, with the support for round-trip engineering with Visual Basic, Visual Modeler enhances the ability to develop scalable applications. Round-trip engineering mirrors the way you really work—making a quick model of an application under development, implementing it, and then refining it based on an ever-increasing understanding of the problem. Both Visual Modeler and Microsoft Visual Basic are used in round-trip engineering—working back and forth between the two tools as the model and code evolve.

Developers reiterate this process of modeling, implementing, and refining until they are satisfied with the completeness and correctness of the model. With Visual Modeler, developers have a tool that supports their method of development, because Visual Modeler keeps implementations and designs synchronized and propagates any changes without loosing information.

Typically, we expect that developers will start using Visual Modeler by "reverse-engineering" existing applications. This way, they can get a visual layout of the application’s structure to easily determine where, or if it needs enhancements or changes.

Because more often than not, your work involves enhancing and maintaining existing systems. Visual Modeler provides the ability to reverse engineer existing code into a design model, providing not only meaningful design diagrams, but also the ability to continue your work using round-trip engineering.

Visual Modeler’s Major Features

By using Visual Modeler, developers focus their effort on building reusable components, cooperating with the user-interface services and database schemas. Used in conjunction with Microsoft’s Visual Basic environment, Visual Modeler is a complete solution for creating powerful client/server applications. Visual Modeler’s features include:

Stepping Through the Interface

To make it clear how easy it is to work with the Visual Modeler, start it up and step through this brief tour of its features. For details on installation and starting this demonstration, see the accompanying instructions. Visual Modeler leverages Microsoft’s skill at user-interface consistency as it implements drag-and-drop, tool tips and right mouse operations for most functions—all in ways familiar to Windows and Visual Studio developers.

When you first start the Visual Modeler, the user interface is divided into three parts. These are the:

Browsing the Model

Using the Microsoft Visual Modeler your system can be described from three different views: a logical view, a component view, and a deployment view.

The Visual Modeler browser window shown on the left provides the user-interface to each of the views. In this case, we have loaded the example model "Trans Pattern_Demo" which illustrates a simple banking application.

The documentation window is found below the browser. This window contains a textual description of the currently selected model component or diagram. (To view the documentation field in your Visual Modeler application window, select Documentation on the View menu.).

If you are not familiar with a three-tiered architecture yet, click on "Logical View" and select each one of the service layers: user services, business services, and data services. Examine their descriptions in the documentation field. For example, clicking on the SavingsAccount object, exposes details on this object and any associated documentation as shown below:

Browsing the System Model Class Diagram

As you can see below, the design model is illustrated in several diagrams, each one with its own purpose. The Three-Tiered Service Model diagram, located on the top level in the Logical View, is the main diagram of the design model. This diagram clearly shows which objects are assigned to which set of services: User Services, Business Services, and Data Services.

By clicking with the right mouse button on the "SavingsAccount" class, you enable a selection menu that permits you to interactively alter the description of the class. This way you can add or change existing properties, methods or generate code for the class. In addition, you can express relationships, create new classes and position them anywhere on the diagram using the mouse and the Visual Modeler menus.

 

Code Generation Options

Most of the implementation details of the Visual Basic code are specified in the class, relationship, and method dialogs, but some detailed implementation decisions, specific to the Visual Basic programming language, must be entered as code generation options. Examples of implementation decisions that need code generation options include generation of classes, naming conventions, and generation of Property Get, Set and Let procedures. All of these can be set by using the menus and options in the Visual Modeler.

Note: Another word for code generation options is code generation properties. Here, code generation options is used to avoid the confusing with class properties and property procedures.

Round-Trip Engineering

Round-trip engineering, or code-to-model/model-to-code generation, takes two forms in Visual Modeler:

If you select the "Code Generation Wizard" from the Visual Model Tools menu, a connection is made to a running Visual Basic session where Visual Basic code is created based on the model you have described and the objects you choose with the wizard.

Selecting the "Reverse Engineering Wizard" from either the Visual Modeler or Visual Basic reverses the process—it takes existing Visual Basic project and creates a model based on the current project and the objects you select with the Wizard.

Now you have reverse engineered the Visual Basic project for the order system, and you have a design model of the system. Activate Visual Modeler and open the "Logical View" in the Browser to view the generated model. The following things have happened:

Examining the Generated Model

Once you have reverse engineered a Visual Basic project, the Visual Modeler creates a design model of the system. Activate Visual Modeler and open the "Logical View" in the Browser to view the generated model. Notice that the following things have happened:

Visual Basic Enterprise Edition Integration

The Visual Modeler and Microsoft Visual Basic tools are tightly integrated—and not only with respect to code and class generation. You can also use each tool to browse corresponding code or class modules in the other tool. Once in Visual Basic, you can use the Addins menu install the Visual Modeler interface and the Tools menu to start the reverse-engineering operation against your current project.

Microsoft Visual Modeler and the Microsoft Repository

The Microsoft Visual Modeler is capable of storing its UML-based models in the Microsoft Repository. Through the Repository, you can exchange model information with other modeling tools and Visual Modeler. Visual Modeler provides a command to export a Visual Modeler model to the Microsoft Repository, and a command to import a model from the Microsoft Repository.

Over twenty-two modeling tool vendors are providing support for importing from and exporting to the Microsoft Repository. Thus, those portions of models that are common between various modeling tools and the UML type information model in the repository can easily be exchanged. At this time, exchange of the class model (logical view) is supported.

For more information: see

Visual Modeler – Test Drive

Getting Started

The following test drive will walk you through the highlights of the Microsoft Visual Modeler using the Order System Model that is loaded in the Visual Modeler samples directory. The test drive is broken into two sections.

The first section provides an overview of the Visual Modeler and provides the hands-on experience necessary to understand how using the Visual Modeler and Visual Basic make software designers and developers more efficient. This takes about 20 minutes to step through.

If, after Section I, you wish to learn more about the modeler, you can then perform the second section, which takes about 15 minutes. This section provides a more in depth view of some of the capabilities like creating new classes and making changes in the model and the source code.

Section I - Overview

Starting the Order System

  1. Locate the project file in the example folder, and start your Microsoft Visual Basic development environment by double-clicking on the ordersys.vbp project file, which you will find in the \Samples\Order System folder in your Visual Modeler installation folder.
  2. To start the order system, click Start With Full Compile on the Run menu. The following dialog box appears:

If you have problems starting the order system, make sure that:

Entering a New Order

After having successfully started the order system application you are now ready to enter a new order. An Order Id has already been allocated in the order dialog box.

  1. Start by assigning a customer to the new order. By default the first customer found has been chosen, which is "101", "Baron's Inne", at "499 N. Gulp Rd, King of Prussia". Click the Name box to view all other customers and select one of them.
  2. Continue by adding new rows to the order: Click New to open the Order Row dialog box.
{

3. Select an article from the Article Name box and see how the information in the dialog box changes.

4. To populate the Article Name list with seafood articles with a higher article identifier, type "2*" in the Article Id box and press Return.

5. Select any article, type a quantity, and click OK.

6. The Order dialog box now presents the new order row and recalculates the total order sum after each new order row has been created.

7. Click OK to accept and register the new order.

  1. Click OK to exit the order system.

Now that we have an understanding of the end goal, we are ready to begin looking at the model.

Introduction to Browsing

In this exercise, you'll use Visual Modeler to get acquainted with the design model of the order system. Visual Modeler provides you with several mechanisms for browsing the model. The tutorial takes you through the following exercises:

  1. Opening the order system design model
  2. Browsing the model
  3. Browsing the class diagrams
  4. Browsing the business objects

Opening the Order System Design Model

First you must start Visual Modeler and open the sample model.

  1. Start the Visual Modeler application by double-clicking on its icon in the Explorer or by selecting Visual Modeler from the Start menu in Windows. The tool opens with an empty model.
  2. Click Open on the File menu.
  3. Open the \Samples\Order System directory in the dialog box.
  4. Double-click on the ordersys.mdl file. Visual Modeler now opens the sample model and displays a diagram called the Three-Tiered Service Model:

This diagram shows the architecture of the order system application, that is, the classes of the design model and the relations between them. Defining and maintaining the architecture and relationships within the system is one of the most important aspects of large-scale iterative development.

The Three-Tiered Service Model diagram supports the three-tiered architectural approach used when building Microsoft Visual Basic applications. It separates the components of the system into three conceptual tiers of services: user services (left pane), business services (middle pane), and data services (right pane). It is a special kind of class diagram, called a three-tiered diagram.

To the left in the application window, a browser window lists the contents of the order system design model in a hierarchical order. (If you cannot see the browser in your Visual Modeler application window, select Browser on the View menu.)

The diagram notation used in this tutorial is a subset of the Unified Modeling Language (UML). Please refer to the online help for descriptions of the different modeling constructs.

Browsing the Model

As you can see in the browser, a system can be described from three different views: a logical view, a component view, and a deployment view. The logical view is the actual design model of the system, which you will examine and change during this tutorial.

The component view describes the physical structure of the system, that is, the .exe files and any DLLs of the implemented system. The deployment view (which is empty in this example) is used to show the different processes of the running system and how they are related.

  1. To view the design model in the browser, expand the logical view by clicking on the "+" sign.
  2. Then expand the three services in the same way. The different symbols in the browser mean:

= package (a set of closely related classes)

= class

= diagram

3. Below the browser there is a documentation field. This field contains a textual description of the currently selected model component or diagram. (To view the documentation field in your Visual Modeler application window, select Documentation on the View menu.).

4. If you are not familiar with a three-tiered architecture yet, select each one of the service layers: user services, business services, and data services, and take a look at their descriptions in the documentation field.

Browsing the Class Diagrams

As you can see in the browser, the design model is illustrated in several diagrams, each one with its own purpose. The Three-Tiered Service Model diagram, located on the top level in the Logical View, is the main diagram of the order system design model. There are other diagrams that illustrate interesting details about parts of the model.

For example, look at details about the Order class:

1. Double-click on the Order Details diagram in the Business Services package. This diagram shows details about the Order class, such as: its methods, its properties and its relations with other classes.

2. Note that the Orderrows relationship is marked with a "*" sign. This indicates that the Order class may reference a collection of OrderRow objects. Also, note that property procedures are named <<Get>>, <<Set>>, and <<Let>> in the model.

3. Close the diagram.

Browsing the Business Objects

Each class is defined by a specification. To view the specification of one of the classes in the Business Services package:

  1. Select the Order class in the Three-Tiered Service Model diagram, and click Specification on the Browse menu. The specification for Order opens. (The specification of a class can also be opened by simply double-clicking on the class in the Browser or in any diagram.)

2. Browse the Order class specification by examining the information behind the different tabs. Then close the specification dialog box.

3. As important as understanding the detailed specification of a class is knowing who uses the class. Therefore, select Order in the Three-Tiered Service Model diagram, and click Show Usage on the Report menu.

4. Select one of the diagrams in which this class is used and click Browse. Look at the diagram and the relationships between the classes. (Move the Show Usage dialog box if it covers the opened diagram.)

5. Close the diagram and the Show Usage dialog box.

Introduction to Round-Trip Engineering

Round-trip engineering, or code-to-model/model-to-code generation, takes two forms in Visual Modeler:

First, customize Visual Modeler to display the proper amount of information in the diagrams that will be generated during reverse engineering:

  1. Click Options on the Tools menu.
  2. Select the Diagram tab.
  3. Deselect Show all methods, Show method signatures, and Show all properties in the Compartments box.
  4. Select Automatic resizing in the Miscellaneous box.
  5. Click OK.

 

Reverse Engineering a New Design Model

You are now going to generate a design model from the Visual Basic source code of the order system:

  1. In the Visual Modeler, Click New on the File menu and click No in the Save Changes dialog box. An empty model is then opened.
  2. Expand the logical view in the browser. By default, the new model contains the three service layers: user services, business services and data services, each one represented by a package. It also contains a three-tiered diagram called Three-Tiered Service Model located on the top level of the logical view. Moreover, for each package, a class diagram called Package Overview has been created. Both the Three-Tiered Service Model and the Package Overview diagrams will be automatically updated when classes and packages are added to or removed from the model.
  3. Start your Microsoft Visual Basic application and open the ordersys.vbp project file, which is located in the \Samples\Order System folder.
  4. Start reverse engineering by clicking Visual Modeler on the Add-Ins menu, and then click Reverse Engineering Wizard. (The same Wizard can be found in Visual Modeler on the Tools menu.) Click Next> in the Welcome dialog box.
  5. A dialog box is shown in which you select the code components you want to reverse engineer. Here you select which synchronization method to use during reverse engineering. Automatically means that the reverse engineering is performed on all code components (except ActiveX components). Because you are only going to reverse engineer some of the components and also an ActiveX component, you need to select Manually.
  6. Deselect Save model and project before reverse engineering. (By selecting this option, you can use the Revert to Last Saved command on the Tools menu to revert to the current version of the model and code after the reverse engineering process.)
  7. Open the components by clicking on the "+"-signs, and take a look at their contents. Select the components you want to reverse engineer, which are:

Note that some of the Visual Basic components listed in the picture of the Selection of Components dialog box may not be available in your Visual Basic environment. The components in the picture are from Visual Basic Enterprise Edition.

8. Click Next >. A new dialog box is shown, where you can assign the selected components to packages in the new design model. (You can create new packages in this dialog box, but that is not part of this exercise.)

9. Assign dlg_Order to the User Services package by dragging and dropping it onto the User Services package in the Logical View Packages list.

10. Assign Article, Articles, Db, Persistence and DAO to the Data Services package and the rest of the components to the Business Services package. Take a look in the Assigned To field to make sure that all code components are assigned. A component that is not assigned will be assigned by default to the top level in the logical view.

11. Click Next> to get a summary of what will be generated and an estimation on how long it will take.

12. Click Finish to build the new model from the chosen code. When the generation is finished, take a look at the result on the Summary and Log tabs in the Summary dialog box. Then click Close. (You can access the log later, by selecting Log from the Window menu.)

Examining the Generated Model

Now you have reverse engineered the Visual Basic project for the order system, and you have a design model of the system. Activate Visual Modeler and open the "Logical View" in the Browser to view the generated model. The following things have happened:

Note: If the generated relationships are not displayed in the diagram, click Filter Relationships on the Query menu. Then select all relationship types (which should already be done by default) and click OK.

Congratulations, you have completed the first section of the test drive. By reverse engineering the existing Visual Basic application, you can see how tightly integrated the two products are. If you spend time in the code you will also see that the Visual Modeler even takes advantage of new Visual Basic functionality like the Implements keyword. If you are still interested in learning more, you can perform the following section which will walk you through making changes in the model and in Visual Basic. It will then show how the changes in Visual Basic are reflected in the Visual Modeler and how the changes in the Visual Modeler are reflected in Visual Basic.

 

Section II - Making changes in the Visual Modeler and in Visual Basic

This section provides a more in depth view of some of the capabilities like creating new classes and making changes in the model and the source code.

Creating Classes and Associations in the Model

Now, you can practice the round-trip possibilities by creating a new business service class and an association in Visual Modeler and then updating the code with those changes.

  1. On the Tools menu, click Class Wizard.
  2. Give the new class a name by typing "Invoice" in the name field. Click Next >. The Documentation dialog box opens.
  3. Write a brief description of the new class. Click Next >. The Service Type dialog box opens.
  4. Assign the new business class the appropriate tier, by selecting Business Services. Click Next >. The Interfaces dialog box opens.
  5. Because this class is not implemented by any other class, make sure that No is selected. Click Next >. The Methods dialog box opens.
  6. In the Methods list, click the right mouse button and select Insert. A new method is added to the new class. Give the new method a name by writing "Calculate" in the Name field on the General tab. Define the method’s return type by selecting Integer from the Return type combo box.

7. Click Next >. The Properties dialog box opens.

8. In the Properties list, click the right mouse button and select Insert. Give the new property a name by writing "Number" in the Name field on the General tab. Define the return type by selecting Integer combo box in the Type field.

9. Click Next >. A summary of the new class is displayed. Click Finish to create the class.

10. Activate the Three-Tiered Service Model diagram. As you can see, the new class has automatically been inserted into the appropriate tier.

11. Create a relationship between Invoice and Order by clicking the association symbol in the toolbox. The cursor turns into a plain arrow. Place the cursor on the Invoice class in the diagram. Press the mouse button and drag the association to Order. Release the button.

12. Name the new role of the Order class by right-clicking on the Order side of the association and selecting Role Name from the menu. By default, the name of the new role becomes "theOrder".

Now you have created a new class with a property, a method and a relationship. When you become familiar with the tool, you may choose to create classes, properties and methods directly in a diagram. To do that, place the cursor in the name field of the class and press the right mouse button. A pop-up menu appears, which contains the New Property and New Method commands. Here you can use inline editing to specify each new property and method, but you have to be familiar with the syntax.

Updating the Code from Changes in the Model

When you are satisfied with the changes in the model you are ready to generate the corresponding code.

  1. Select Invoice and choose Code Generation Wizard from the Tools menu. (Click Next> if the Welcome dialog box is shown.)
  2. The Select Classes dialog box is shown, where you select the classes for which you want to generate code. Select Manually. Note that Invoice is already selected because you selected it before starting the Code Generation Wizard. Click Next>.
  3. The Preview Classes dialog box is shown. Here you can ask for a code preview of each selected class. Because Invoice is a new class, you probably have to change the code generators default mapping to Visual Basic code. Therefore, select Invoice and click Preview.
  4. Get acquainted with the different preview dialog boxes in the Code Generation Wizard by clicking Next> and <Back. The Wizard shows the current code generation options settings for the class. These are stored in the specification of each class and shown on the Visual Basic tab in the specification dialog box. (Remember that you examined code generation options settings in a previous exercise.) You are now going to change one of these settings from the Code Generation Wizard.
  5. Go to the Role Options dialog box and select the association you previously created between Invoice and Order. In the text box at the bottom of the dialog box you can see the code that should be generated with the current setting.
  6. Change the setting by, for example, selecting Property Get, which generates a Property Get procedure for the association. Note how the name of the generated variable is changed according to the naming conventions defined by the default values of the DataMemberName and NameIfUnlabeled code generation options.

7. When you are satisfied with your preview and settings, click Finish and then click Next>.

8. The General Optionss dialog box is shown. Here you can instruct the code generator to insert debugging code and comments, among other things. Deselect Save model and project before reverse engineering. Accept the rest of the default selections by clicking Next>.

9. The Finish dialog box is shown, where you can see a summary of what will be generated. Now, click Finish to start the code generation.

10. Because you selected to synchronize manually and the code contains some code components that where not reverse engineered into the model, a Delete dialog box is shown. To keep the listed code components in the project, select << All, and click OK.

11. When the code generation is completed a Summary dialog box is shown. Take a look at the result on the Summary and Log tabs, and then click Close.

12. Select the Invoice class. Press the right mouse button and choose Browse Code from the menu.

A Visual Basic class module called Invoice has now been created as you can see in the Microsoft Visual Basic window. Note how the property, method, and relationship were mapped to Visual Basic code.

Note: For each generated code component, member, and method, Visual Modeler adds an identifier as a code annotation (for example "ModelID=3237F8CE0053"), which identifies the corresponding class, property, role, or method in the model. Those are not displayed in the code examples here.

 

Updating the Model from Changes in the Code

In the previous exercise, you practiced code generation from changes in the design model. Now, suppose that you have just created a new code class called dlg_OrderRow, and want to update the design model with the new class.

  1. In Visual Modeler, start the reverse engineering by selecting Reverse Engineering Wizard on the Tools menu. (Click Next > if a Welcome dialog box is shown.)
  2. In the Selection of Components dialog box, select Manually and the dlg_OrderRow Visual Basic class. Deselect Save model and project before reverse engineering.
  3. Click Next > and assign dlg_OrderRow to the User Services package.
  4. Click Next > and take a look at the summary of what will be reverse engineered. Click Finish to update the new model with the new class.
  5. When the Wizard is finished, the result is shown in a Summary dialog box. The Summary tab shows the effects of the reverse engineering, and the Log tab lists any warnings or errors. As you can see, a dlg_OrderRow class has been created in the model.
  6. Click Close and look for the new class in the browser and the Three-Tiered Service Model diagram.

Browsing the Code and the Model

The Visual Modeler and Microsoft Visual Basic tools are tightly integrated—and not only with respect to code and class generation. You can also use each tool to browse corresponding code or class modules in the other tool.

To view the class module that corresponds to a selected design class:

  1. Select the Order class in the Three-Tiered Service Model diagram.
  2. Select Source Code on the Browse menu. Microsoft Visual Basic is then activated and a window with the Order class module source code is opened.

To view the design class that corresponds to a selected class module:

  1. Select the dlg_OrderRow class module in Microsoft Visual Basic.
  2. Click Visual Modeler on the Add-Ins menu, and then click Browse Class Diagram. A dialog box is shown, where you can see that the corresponding design class is currently part of two diagrams: the Package Overview class diagram in the User Services package and the Three-Tiered Service Model diagram.

3. To open and activate one of them, simply double-click on its name.

You have now completed the basic steps in using Visual Modeler. For complete information about the tool and round-trip engineering, please refer to the Visual Modeler manuals and online help.