This article may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist. To maintain the flow of the article, we've left these URLs in the text, but disabled the links.

Designing Apps Using Visual Modeler in Visual Basic

Code for this article:Serving0600.exe (36KB)

Application design is an extremely important part of the development process, yet it's often rushed through or overlooked. Too many developers dive into writing code before they create a viable application design. Of course, not everyone agrees on the amount of time that should go into design. Some developers recommend no design process at all, while others postpone all coding until the design is complete in every single detail. In reality, the best approach lies somewhere in between.
      This month, I am going to demonstrate how to use Visual Modeler to design applications in Visual Basic®. Tools like Visual Modeler make the design process easier and tie the model to your application code. The first step in the design process is the prototyping stage. It's one of the most important steps in product development and one of the most frequently overlooked. Prototypes allow you to get simple bugs out of the design before code is written. Prototyping should begin early and be done often. Don't be afraid to express even bad ideas; they often clear the way for the good ones.
      There are three phases of prototyping. The first is the sketch phase, during which the conceptual model of the user interface is presented. Several models can be shown using storyboards, slideshows, or low-fidelity prototypes (sketches on paper). In this phase, feedback regarding high-level design is encouraged. Next, in the proof-of-concept phase only one design is presented. At this time the user interface can be simulated in a demonstration by a member of the design team. Finally, in the limited version phase only one design is presented, but this time all high-level functions are represented and there is some data functionality built in. This prototype can be distributed to key people (with some caveats, of course), and is now suitable for the first usability tests.
      Design tools are some of the most important tools used in the development of your application. Make sure that whatever tools you use are appropriate for the project and can be used during both the design and development phase, and during maintenance.

Introduction to Visual Modeler

      Visual Modeler, included in Visual Basic 6.0 Enterprise Edition, is a graphical component design tool for modeling apps. It was created in concert with Microsoft and Rational Rose to provide an application-design tool in the Visual Studio® environment.
      There are also other Computer Aided System Engineering (CASE) tools on the market. Many of these tools are designed to work with your database and provide data modeling capabilities and support for component modeling.
      Visual Modeler is meant to help system architects and developers design and create applications. With Visual Modeler, once a design is created you can output shell and custom code for the components in the model. You can also reverse engineer an existing application to create a logical model. Visual Modeler works with Visual Basic, Visual C++®, and Visual SourceSafeâ„¢. Almost everyone in the development process can use the models created with Visual Modeler to help them understand the various parts of an application and how they fit together.
      The Visual Modeler interface provides you with information about the application you are modeling, and gives you quick access to details of the application's architecture. The various views provide a window into the application. The interface is designed to work with various development tools and to serve as a modeling environment.
      You can start Visual Modeler from Programs | Microsoft® Visual Studio 6.0 | Microsoft Visual Studio 6.0 Enterprise Tools | Microsoft Visual Modeler. Visual Modeler is also an option on the Visual Basic Add-Ins menu once you load it from the Add-Ins Manager.
       Figure 1 shows a simple model in the Visual Modeler interface. You can see the Explorer view on the left (with several folders open), and the Logical View. The Logical View shows the diagram for my project and three classes. You can also see the documentation window in the lower-left corner. When you select an item in the Explorer or in the Logical View, the documentation window will update with the description of that item, if there is one. You can right-click an item such as a class, for example, to display the shortcut menu for the item.

Design Architecture

      Visual Modeler allows you to work with classes in a visual environment. You can create the classes directly in Visual Modeler using the toolbar and mouse. It will also generate and update Visual Basic and Visual C++ classes for you. To generate Visual Basic-based code, Visual Modeler will use the Visual Basic Extensibility Model to drive Visual Basic and create the classes and other code. The code that Visual Modeler generates is not a complete working application, just the skeleton code for the methods and properties you define for the class plus any custom code you have defined for the items in the class.
      A class can have methods, properties, events, a description, and other properties just like a Visual Basic class. The attributes of a class describe its structure and behavior. Visual Modeler uses Unified Modeling Language (UML) notation for its visual diagramming symbols. In Figure 1, the UML symbol for a class is used by the Publisher class in the Business Services layer.

Figure 1A Simple Model

      The class name is shown in the top part of the Publisher symbol, properties are shown in the middle, and methods are shown in the bottom portion. Figure 1 shows the AddPublisher method in the Publisher class. You can suppress the property and method sections of the class symbol to make diagrams more readable by right-clicking the object, selecting Options, and then selecting the view you want to use.
      Visual Modeler classes must have a component assigned before you can generate code for them. The class contains the specification that will be used to build the Visual Basic class, but Visual Modeler needs to have the component link to know about the language requirements and the other parameters, such as which Visual Basic project to use. To set up the relationship between the component and the class, create a Component object in Visual Modeler. Once the component is created, you can assign classes to it.
      Like a class, a component also has a specification page that is used to change the component's attributes. You should define components and classes logically. Classes represent objects, while components are the implementation files. It is easy to create a set of components that map to the individual Visual Basic project (.vbp) files of your application. Then you can assign the correct components to the classes. This lets the class contain the description of the object and lets the component contain the description of the implementation of the class.

Creating Designs

      You can create designs from scratch or map a design from an existing component. To create a new design, you must start it, then add classes and components. Once you've done this, you can fine-tune the design and generate code to implement it. You can also generate code at any point in the process to test the implementation.
      Let's start by creating a simple design for part of an order entry application. (You can download a working model like the one I'm creating here from the link at the top of this article. First, start Visual Modeler. It will open with a new model file.
      Now that you have a new model, you can add your classes. Items such as classes can be added to a model in a number of ways. For instance, you can use the Class Wizard to step you through the process, or you can use the icons, toolbars, and menus to build the class yourself.
      The easiest way to add a class and its methods is to use the Class Wizard. To illustrate the process, create a new class for the Shipper table and place this class in the Data Services layer as follows:

1. Right-click in the Logical View in the Data Services section.
2. Select Class Wizard from the shortcut menu.
3. Enter ShipperDB for the name of the class, then click Next.
4. Enter a description of the class ("This class implements the data layer services for the Shipper table"), then click Next.
5. Select the Data Service layer for the class, then click Next.
6. Click Next to skip the inheritance step.
7. Select the language type (Visual Basic).
8. To insert a method, right-click in the Methods pane and select Insert. Add the following methods: Delete, Insert, Update, Retrieve, RetrieveByID.
9. Click Next when you have finished adding methods.
10. Click Next to skip the properties. Review the summary of the generated class. You can copy this text to the clipboard if you want to save it.
11. Click Finish to complete the wizard and add the class.

      Figure 2 shows Visual Modeler with the new class. You can see the new ShipperDB class in the far upper-right corner of the window. After the Class Wizard has completed, I closed the Data Services Package window before taking the snapshot. The other classes in Figure 2 were created by clicking the class icon on the toolbar and then clicking in the diagram where I wanted to create the class. Note that you cannot drag and drop the class iconâ€"you must click it, then click the diagram.
      At this point you have a class, but no component tied to it, so you cannot generate code from the class definitions. The next step in the process is to assign a component to the class.

1. Right-click Component View in the Browser window Explorer tree.
2. Select New, then Component from the shortcut menu.
3. Right-click the new component and select Open Specifi-cation from the shortcut menu.
4. Change the component's name to ShippingDB.
5. Select Visual Basic in the Language list.
6. Select DLL in the Stereotype list.
7. Enter documentation for the component.
8. Click OK to close the dialog and update the component.

      This will create the new component and assign the correct properties to it for a Visual Basic project. Now you must assign this component to the class that represents it.

1. Right-click the ShipperDB class and select Open Specification from the shortcut menu.
2. Click the Components tab.
3. Right-click the component shown in the list and select Assign from the shortcut menu.
4. Click the General tab.
5. Select Class Module from the Stereotype list.

      This will update the pages in the Specifications dialog to include a page for Visual Basic. Figure 3 shows the dialog after the component was selected. Notice the checkbox to the left of the component's name. If you were to generate code for this class now, it would build the shell of this component, complete with the properties and methods.

Figure 3Class Specifications

      You can copy and paste method and property descriptions within the Specification dialog. Right-click the method or property and select Copy. Then right-click again and paste a new copy of the property or method. Next, double-click the method or property and select Specification to modify it.
      You can also modify properties and methods directly in the dialog by slowly clicking twice on the item you want to change. This will place the item into edit mode. If the item's value is a string, you can change it directly. If the item's value comes from a list, then a list will appear with the values in it.
      The link between a component and the corresponding Visual Basic project is determined by the setting of the ProjectFile model property on the Visual Basic tab in the Component Specification dialog. If this entry is blank, then Visual Modeler will generate source code for the component in the currently open Visual Basic project if the open project has the same name as the component, or if the component has been generated in connection with that project before. If neither of these conditions is true, then Visual Modeler will start Visual Basic and create a new project.
      You can link a component to a Visual Basic project using the following steps:

1. Open the specification for the component (double-click the component in the Explorer tree).
2. Click the Visual Basic tab.
3. Click the Edit Set button. The property page should display the Visual Basic specifications for the component. The default Module Specification should be displayed.
4. Click the Clone button to copy the default specification.
5. Enter a name for this specification and click OK. Make sure the name is descriptive. A good candidate for the name is the name of the Visual Basic project or app.
6. Select the Module Specification you just named from the Set list.
7. Click the value column next to ProjectFile.
8. Click the value column again to place it into edit mode.
9. Enter the full path name for the Visual Basic project. The project must exist before you generate code that uses this component. To do this the easy way, create a project in Visual Basic and save it in the path that you entered in this step. Save the project and close Visual Basic.
10. Press Tab to move out of the value field.
11. Click OK to close the dialog and save the changes.

Generating Code

      Visual Modeler generates code for your Visual Basic-based components in a certain style. The generated code will contain the properties, methods, and events that you create, plus the code that Visual Modeler creates for you. For instance, Visual Modeler will generate comments throughout your code that either identify the code that you should write and where it should go, or provide information for future sessions with Visual Modeler.
      You can generate code for one class at a time or for several classes at once. The generation process is straightforward and is accomplished by the Code Generation Wizard:

1. Right-click the ShipperDB class or its component.
2. Select Generate Code from the shortcut menu.
3. Click Next to move to the Select Classes step.
4. Select the class to generate. The ShipperDB class you selected when you started the Code Generation Wizard will be selected. You can add other classes by selecting them from the list on the left, then clicking Add. When you have finished selecting classes, click Next.
5. Select the first ShipperDB class, then click Preview. This will step you through the process of defining the parameters used to generate the code. If you see any changes that should be made, the wizard will let you make them before it continues. When you complete the Preview steps, the wizard will return to this step in the process.
6. Click Next.
7. Select the general code generation properties. This page is useful for choosing what is generated for a class. For instance, if you do not need the error-handling code that Visual Modeler generates for each method, you can uncheck "Include Err.Raise in all generated methods."
8. Click Next.
9. Review the items that will be created, then click Finish when you are ready.

      When you click Finish, Visual Modeler will create the code and load it in Visual Basic. When the Code Generation Wizard completes, Visual Basic will be left running with the project open.
      You may encounter messages in the Code Generation Wizard that ask you to confirm the deletion of a form or module in a Visual Basic project. This usually occurs when there is a form module or code module that is not tied into the Visual Modeler model.

Conclusion

      It is vitally important to use some type of design process when building applications. Designs don't have to be fancy. Visual Modeler is just one tool you can use. You can use a white board or even a sheet of paper to build the design. Beginning the design process so you have a starting point and ideas to work with is more important than the initial design. By spending time modeling and testing your design, you can avoid mistakes that might surface later.

Ken Spencer works for the 32X Tech Corporation (https://www.32X.com), which produces a line of high-quality developer courseware. Ken also spends much of his time consulting or teaching private courses.

From the June 2000 issue of MSDN Magazine.