Hands-On Lab. Lab Manual HOL007 Understanding, Designing, and Refactoring Code Using the New Class Designer Tool in Microsoft Visual Studio 2005

Transcription

1 Hands-On Lab Lab Manual HOL007 Understanding, Designing, and Refactoring Code Using the New Class Designer Tool in Microsoft Visual Studio 2005 Please do not remove this manual from the lab Page 1

2 Information in this document is subject to change without notice. The example companies, organizations, products, people, and events depicted herein are fictitious. No association with any real company, organization, product, person or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation. Microsoft may have patents, patent applications, trademarked, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property Microsoft Corporation. All rights reserved. Microsoft, Visual Basic, Visual Studio, and Windows are either registered trademarks or trademarks of Microsoft Corporation in the U.S.A. and/or other countries. Other product and company names herein may be the trademarks of their respective owners. Page 2

3 Contents CLASS DESIGNER: UNDERSTANDING, DESIGNING AND REFACTORING CODE USING THE NEW CLASS DESIGNER TOOL IN MICROSOFT VISUAL STUDIO Lab Objective...1 Exercise 1 Using the Class Designer with a C# application...1 Task 1.1 Open the C# Sample Solution...2 Task 1.2 Create a New Class Diagram...3 Task 1.3 Explore the Shape Functionality...4 Task 2 Explore Inheritance Hierarchy...8 Task 3 Viewing Relationships between Classes...11 Task 4 Build a Simple Class...14 Task 5 Implement Abstract Class and Override Base Class Method...20 Task 6 - Implement Interfaces...23 Task 7 Rename Refactoring...25 Task 8 Document and Presentation...28 Exercise 2 Using the Class Designer to build a Visual Basic application...32 Task 1.1 Open the VB Sample Solution...32 Task 1.2 Create a New Class Diagram...34 Task 1.3 Explore the Shape Functionality...35 Task 2 Explore Inheritance Hierarchy...39 Task 3 Viewing Relationships between Classes...42 Task 4 Build a Simple Class...46 Task 5 Implement MustInherit Class and Override Base Class Method...51 Task 6 - Implement Interfaces...54 Task 7 Rename Refactoring...58 Task 8 Document and Presentation...59 Lab Summary...63 Page 3

4 Page 4

5 Class Designer: Understanding, Designing and Refactoring Code Using the New Class Designer Tool in Microsoft Visual Studio 2005 Lab Objective Estimated time to complete this lab: 45 minutes This lab illustrates the benefits of the new Class Diagramming tool available in Microsoft Visual Studio The Class Diagramming tool, also referred to as the Class Designer, provides visualization, class building, refactoring and documenting features to help architects and developers work with class structures. Developers can use the Class Designer for understanding existing code, designing new class, reviewing/refactoring and documenting code. Class diagrams are constructed to display notation native to a.net language (e.g., C#, Microsoft Visual Basic ). Moreover, they automatically synchronize with the underlying code to ensure that diagrams remain relevant throughout the development cycle. This lab can be done using C# as your implementation language or Visual Basic. This lab is constructed such that instructions for C# implementation are described first followed by instructions for Visual Basic implementation. If you are implementing in Visual Basic, skip directly to page 30. Exercise 1 Using the Class Designer with a C# application Before you start, the following is the user name and password to login to the machine. Username: administrator Password: pass@word1 In this exercise you will open an existing C# Class Library project and create a diagram from the existing class structure. You will then use the Class Designer to enhance the class library s structure and visualize the changes made to the code base. If you have already done Task 1 to 3 previously or if you are running short on time, you can start Task 1.1 to open the solution and jump straight to Task 4. Page 1

6 Task 1.1 Open the C# Sample Solution Task 1.1 shows you how to open the C# sample application. Open Visual Studio 2005 Beta by going to the Start Menu Programs Microsoft Visual Studio 2005 Beta 2 Microsoft Visual Studio 2005 Beta 2. Click menu File Open Project/Solution to bring up the Open Project dialog box. Browse to the C:\HOL007\CorpLibCSharp folder in the dialog box. As shown in the following figure, select the CorpLibCSharp solution file within this directory. Figure 1.1 The Open Project Dialog Box Selec CorpLibCSharp solution and click Open button to open the solution. The CorpLibCSharp solution is displayed in the Solution Explorer. Page 2

7 Select Build Rebuild Solution from the top menu to build the whole solution. There are two projects (CorpLibCSharp and SoftwareProject) listed in the solution explorer. Figure 1.2 Add a new Class Designer diagram from the class file Task 1.2 Create a New Class Diagram You will learn how to use the Class Designer to visualize your class. Right click file SoftwareProject.cs file under project SoftwareProject and select menu View Class Diagram. After a few seconds, you will notice that a new Class Designer diagram is created and added to the project with class SoftwareProject displayed in the diagram. Figure New Class Designer diagram created Page 3

8 Tip: You can also right click the project node in the Solution Explorer to quickly create a new diagram. For example, right-click project node SoftwareProject and select menu View Class Diagram. Once it is selected, all the types in the project will be shown in the diagram. Compare to individually drag-drop classes onto the diagram, this is a quicker way to view all the types. Task 1.3 Explore the Shape Functionality In this task, you will learn how to work with the class (shape) on the diagram. Click and drag the shape for class SoftwareProject to the center of the diagram. Examine the classes properties from the Properties Window. If you cannot find this window, you can bring it up from View Properties Window top menu. Click the chevron button in the shape header region to expand the class to see its members. Figure 1.3 SoftwareProject class shown in the diagram Click each member and examine its properties in the Properties Window. You can also use the arrow key to navigate members in the class. Figure 1.4 SoftwareProject class and its member properties Page 4

9 Hover the mouse over the class or its members will show tooltip information. Figure 1.5 Tooltip shown when hovering mouse on top of property Requirements Click the and buttons in the compartment header allows you to show/hide groups of members in the class. Click the Display Member Types button in the Class Designer toolbar. It displays member types of all the type members shown in the diagram. Note: If the Class Designer tool bar is not present, you can bring it up from View->Toolbars->Class Designer top level menu. Figure 1.6 Various buttons in the Class Designer tool bar One thing to point out is that the change applies globally. That is, all the shapes will be affected. There are times you may notice that some of the member types are partially clipped in the shape. Page 5

10 Click the Adjust Shapes Width toolbar button allows you to adjust the shape width to ensure the text is not clipped by the shape. Figure 1.7 Class shown after clicking Adjust Shapes Width tool bar button You can also group all the class members by various categories. The default is to group class members by kind (i.e. Properties/Fields/Methods/Events). You can also group by Access or sort the members alphabetically. Note that the member ordering only applies to viewing in the diagram, the actual ordering in the code file will not be changed. Click the Sort Alphabetically toolbar button allows you to view members in alphabetically order. Figure 1.8 Members sorted alphabetically shown on class SoftwareProject Click the chevron button again in the shape header region will hide all the compartments. Page 6

11 Tip: You can also invoke these tool bar buttons by right clicking on the diagram. Figure 1.9 Context menu shown when right mouse click the diagram You can navigate from the Class Designer directly to the code. From the designer, right click on the class header region or the method and choose menu View Code. This will take you to the code file where the class is defined. You can also double-click the shape header region or member to achieve the same effect. Once you re in the code file, you can navigate back to the diagram by clicking the ClassDiagram2.cd tab in the client space. Double-click SoftwareProject class in the diagram and it will take you to the actual code. Figure 1.10 Click the caption here takes you back to the diagram Page 7

12 Task 2 Explore Inheritance Hierarchy You will now use the Class Designer to visualize the inheritance hierarchy in the project. Right click the shape header region of class SoftwareProject and select menu Show Base Classes. The Project class appears on the diagram. Notice the inheritance line, which points from the SoftwareProject class to the Project class. Also notice that class Project comes from the referenced project CorpLibCSharp. This is indicated by the File Name property for class Project and the glyph in the Project shape header region. Figure 1.11 Class Project is shown non-editable Click the chevron button on class Project to see its members. Since the class is defined in a referenced assembly, it is not editable and the shape and properties in the Properties Window are all grayed out. Often while exploring a project you may find that shapes end up overlapping each other (as shown below), Class Designer lets you automatically layout the diagram for you and arrange in a manner that they don t overlap each other. Page 8

13 Click the diagram, choose Layout Diagram menu and the diagram will be re-arrange properly. Figure 1.12 Choose automatic diagram layout option to rearrange the diagram Find the Employee.cs file from the Solution Explorer and drag this file into the diagram. Right-click the class Employee shape header region and select Show Derived Classes menu item. Observe that class Developer and ProgramManager are both shown in the diagram. Page 9

14 Expand class Employee, Developer and ProgramManager by using the chevron button in the shape header region. Examine members in these class shapes. You will notice that abstract class and method are shown in italic form. Figure 1.13 Abstract class and member are shown in italic form You can also examine the class members from the Class Detail Window. It is a tool window that is normally docked in the bottom section of the IDE. If it is not present, you can bring it up by choosing View Other Windows Class Details top level menu. Once the window is shown, you can click each member and see its definition (Note, the detail on using the Class Detail Window will be covered in later tasks.). Tip: You can invoke Layout Diagram at any given point of time to help you re-arrange the diagram so the shapes are not overlapped. Page 10

15 Task 3 Viewing Relationships between Classes In this section, you will learn how to set up and examine the relationships between classes. Select Members property in class Project. Right-click the Members property and select menu Show as Association. It will show an association line from Project to IList<T>. Figure 1.14 Show as Association on property Members Notice that interface in the Class Designer is shown in a different color. Examine properties in Properties Window for interface IList indicates that this type comes from mscorlib.dll and is not editable. From the shape itself, we know it is a generic interface which also implements interface ICollection<T>, IEnumerable<T> and IEnumerable. Expand the chevron button in the shape header region to examine its properties and methods. Figure Generic interface IList<T> Select the association line, right click and choose Show as Property will show Members as a regular property. Note that this will remove the association line and show the property Members as a regular entry in class Project. It is more often the case that you want to visualize the collected type of a collection property than the collection itself. For example, the actual code for property Project.Members (defined in Project.cs file) is defined to be: public IList<Employee> Members { get { return members; } set { members = value; } } In this case, you may want to visualize the association to the collected type in the Members property. Page 11

16 Right-click the Members property and selecting the command Show as Collection Association. This will bring up the Employee class into the diagram with an association line between the Project class and the Employee class. Notice that the line is slightly different from the regular association line. The double arrow indicates that Members property holds a collection of Employee objects. Figure 1.15 Show as Collection Association on property Members Expand the Employee class if it s not expanded beforehand. Select property EmployeeType, rightclick and choose menu Show as Association. This will bring the enumeration into the diagram and an association line drawn from the Employee class to EmployeeType enumeration. Notice that enumeration in the Class Designer is shown in a different color. Expand the chevron in the EmployeeType shape header region to examine all the enum members. Page 12

17 Tip: You can view a field or property as either members within a class shape or as associations. As you might expect, the underlying code is unaffected by the chosen view. Association lines help you understand the relationships between important classes in a project. You can also use the Class Designer to understand the existing assemblies referenced in the current project. You can do so from the Class View Window (If this window is not present, choose menu View Class View.). From the window, you can drag and drop an entire namespace, or one of more types that you are interested in visualizing. For example, if you re interested in the generic class Stack<T>, you may type Stack<T> in the search field which will show all types that match that pattern in the Class View. You can then drag and drop this type from the Class View into the diagram or right-click the type and choose View Class Diagram. Figure 1.16 Stack<T> shown in the Search field in the Class View Note that you can also multiple-select the interested types and drag-drop them into the diagram. When you are done with the diagram, you can close the current diagram and move onto the next task. Close the diagram by clicking the button at the top right corner of the diagram. When prompted for asking the save the changes? Click No to close the dialog. Figure Close the diagram by clicking the X button Page 13

18 If you are running short on time, you can quit the session now and come back later. All you have to do is to start Task 1.1 and jump straight to Task 4. Task 4 Build a Simple Class In this task, you will learn how to create a new class and work with Class Detail Window in the Class Designer. Go to the Solution Explorer tool window, right-click the SoftwareProject project node, choose Add Existing Item to bring up the dialog box, Figure Add an existing item from the project node Page 14

19 In the Add Existing Item dialog box, choose All Files (*.*) in the Files of Type: combo box, select CSharpTask4.cd and click Add button to add this diagram file into the project. Figure Add CSharpTask4.cd into the project Double-click CSharpTask4.cd in the Solution Explorer to open the class diagram. Figure Open the CSharpTask4.cd diagram Page 15

20 From the Toolbox window, drag-drop Class item into the diagram (If you cannot find the Toolbox Window, you can select View Toolbox top level menu item.). Once you release the mouse button, you will be presented with the New Class dialog box. Figure Create new class dialog box Type Tester as the class name, click OK button and a new class Tester is created on the diagram. Right-click the shape header region of class Tester, choose menu Add Constructor to create a new constructor. You can also navigate from the Class Details Window to the code file by right clicking the member and selecting View Code menu. You can also explore other menu options listed in these context menus. You can also right-click the shape header region to quickly add new members to the class. Figure Context menu to add various type of members to the class Page 16

21 Go to the Class Detail Window (This is a tool window docked in the bottom of the VisualStudio IDE. If it is not present, you can bring it up by choosing View Other Windows Class Details top level menu.) and create a new method CreateTestPlan by first clicking <add method> cell and typing CreateTestPlan. Figure 1.18 Click text <add method> and start typing CreateTestMethod Figure 1.19 When finishing typing and cursor stays at the end, hit TAB key to move to the next column Figure 1.20 Once TAB key is entered, the method is created with default return void type. Focus stays at void. Change the return type from void to bool by first typing letter b Page 17

22 Figure 1.21 Once you type letter b, notice that the intellisense is shown with all the types in scope. You can finish typing bool or pick bool from the list. Once the type is changed, hit TAB to move onto the Modifier column. Figure 1.22 Now you re in the Modifier column, click the from public to internal. button to change the modifier Now that the internal method is created, let s create a new parameter in method CreateTestPlan. Page 18

23 Click the button at the beginning of this method. Once clicked, the parameter section is expanded underneath the method. Click <add parameter> text once to start typing task as the parameter name. After typing, hit TAB key to move onto Type column. Start typing CorpLibCSharp.ITask. Notice that the intellisense is listing all the types in the scope. Notice a new parameter is created for this method. Figure 1.23 While typing the text CorpLibCSharp.ITask, notice that intellisense shows up to assist the user to choose the correct type. Page 19

24 Task 5 Implement Abstract Class and Override Base Class Method In this task, you will learn to create inheritance between classes and also to override virtual methods defined in the base class(s). Click the Inheritance item once in the Toolbox to select the line tool. Move the mouse from class Tester shape header region (notice the changed cursor), press left mouse key, move the mouse to class Employee shape header region and release the left mouse key. Once you release the mouse key, you will notice an inheritance line created between classes Tester and Employee. Figure 1.24 Click Inheritance toolbox item once to select the line drawing tool Page 20

25 Figure 1.25 Left mouse key down and move the mouse. As you move along the mouse, notice the ghost line drawn between two classes. Now that the inheritance relationship is created between class Tester and Employee, examine the members in class Tester. You will notice that the Class Designer automatically overrode the base abstract method GetCurrentTask defined in the base class. Right click on the member GetCurrentTask and invoke the View Code command. This will take you to the definition of this method in the code file. You will notice that the class designer has automatically created the method with a default method stub that throws a NotImplemented Exception reminding the user to implement this method at later time. public override CorpLibCSharp.ITask GetCurrentTask() { throw new Exception("The method or operation is not mplemented."); } Now, let s go back to the diagram and try to override a virtual method defined in the base class. Page 21

26 Right click Tester shape header region, choose menu Intellisense Override Members. This will bring up the Override Members dialog box. Once it s up, click the button in front of CorpLibCSharp.Employee node. Figure 1.26 Override members dialog box You will notice that this dialog box lists all the classes in the inheritance hierarchy of the class Tester (System.Object and CorpLibCSharp.Employee). Click in front of CorpLibCSharp.Employee node to list all the overrideable methods defined in that class. Click the check box in front of GetHobbies node. Click OK button to override virtual method GetHobbies. Observe method GetHobbies is overridden in class Tester. Figure 1.27 GetHobbies method listed in Tester class Double click method GetHobbies. This will take you to the definition of the GetHobbies method in Tester.cs. Examine the method body which looks like the following: public override string GetHobbies() { throw new System.NotImplementedException(); } Remove the throw statement in the method body and replace with text: return "running;climbing"; Page 22

27 Tip: The Override Members dialog box also allows you to override virtual/abstract methods defined in your ancestor types. You can multi-select nodes in the dialog box and the Class Designer will override the selected methods for you. Task 6 - Implement Interfaces In this section you will learn how to implement interface from class using the inheritance line tool. Right click on the Requirements property in the class SoftwareProject and select menu Show as Collection Association. The Requirements class will now be shown on the diagram. Also notice the collection association line is drawn between them. Click chevron button in class Requirements shape header region to expand its members. Right click on the tasks field in class Requirements, and select menu Show as Collection Association. The Task class will now be shown on the diagram. Notice the collection association line color is in blue. This indicates it s a coming from a field (As opposed to coming from property which is depicted in light brown color.). Expand class Task to observe its members. Figure 1.28 Collection association relationship between the SoftwareProject, Requirements and Task Go to the Class View tool window; If your Class View looks like the following, you are in the search mode. Simply click button and you will be back to the normal browsing mode. Figure 1.29 Class View in search mode Page 23

28 Go to the Class View tool window, expand CorpLibCSharp namespace, find the interface ITask, and drag drop into the diagram. Expand the chevron to view its interface methods. Figure Task, ITask and the Class View tool window Go to the Toolbox window, click Inheritance tool box item once to select it and draw the line from Task to ITask. Once it s done, you will notice that Class Designer automatically generated interface method stubs for interface ITask and class Task now implements interface ITask. Instead of the inheritance line shown previously, notice that a new lollipop shape is attached to shape Task. This indicates that class Task now implements interface ITask. Figure 1.30 Task now implements interface ITask Page 24

29 Double-click class Task shape header region and the Class Designer will navigate to the code file. Examine the content and you will notice that an ITask region is generated with all the interface methods defined in ITask. #region ITask Members public TaskStatus Status { get { throw new Exception("The method or operation is not implemented."); } } public void BeginTask() { throw new Exception("The method or operation is not implemented."); } public DateTime GetStartDate() { throw new Exception("The method or operation is not implemented."); } public DateTime GetEndDate() { throw new Exception("The method or operation is not implemented."); } #endregion Tip: You can also use the Inheritance line tool to create inheritance between interfaces. Task 7 Rename Refactoring In this task, you will see how easy it is to perform rename refactoring operation from the Class Designer. Click the class Requirements shape header region and start typing text Requirement. Figure 1.31 Class Requirements is now in the edit mode Page 25

30 Change the text from Requirements to Requirement. Commit your change either by click other parts of the diagram or hit the ENTER key. Look at the Output Window and you will see that all references to this Requirements class throughout the current project have been updated. You will also notice that all relationship lines between the Requirement class and other classes in the diagram are maintained. If the Output Window is not present, you can bring it up from View Other Windows Output top level menu. Figure Output window shows the rename refactoring results View the code for the Requirement, SoftwareProject, ProgramManager, and Task classes. Notice the changes made to each of these classes as a result of the rename. For example, the underlying return type for method ProgramManager.CreateRequirement is now changed to: public Requirement CreateRequirement() { throw new System.NotImplementedException(); } Tip: It might be hard at times to find the type on the diagram. You can go to the Class View tool window, find the type in the tree view and right-click menu View Class Diagram. It will bring it into the diagram (if it is note present in the diagram) and focus this class for you. In stead of using in-place editing support in the Class Designer, you can invoke the rename refactoring dialog box by following the following steps: Page 26

31 o From the Class Diagram, right-click the class Requirements and select menu Refactor Rename... The Rename dialog box appears. Figure Rename refactoring dialog box o In the New Name field type Requirement and Click OK. You will see a Preview Changes Rename dialog. Accept the default by clicking the Apply button to close the dialog box. Once it s done, the class is renamed though out the current project. There are other refactoring features supported in the Class Designer. You can extract an interface from methods/properties/events in the class by right-clicking a class and select menu Refactor Extract Interface You can encapsulate field by right-click a field and select menu Refactor Encapsulate Field You can reorder/remove parameters on a method by right-click a method and select menu Refactor Reorder Parameters /Remove Parameters These refactoring features allow you to refine your code and the change will be applied through out the whole project. Page 27

32 Task 8 Document and Presentation In this task, you will learn how to publish the diagram for sharing with team members. Right-click the diagram and select Display Member Types if you want to view the member type in the diagram. Right-click the diagram and select Adjust Shapes Width to ensure that all the text is visible. You can also adjust the width yourself by either moving the handle sideways to adjust the width or double click the handle. Figure 1.32 Resize the shape width As you work on the diagram, you might need to zoom in/out at times. You can do so by right-clicking the diagram and selecting submenu under Zoom. The following figure shows how to zoom in/out within the diagram. Figure 1.33 Zoom in/out from the diagram Page 28

33 Alternatively, you can also use the zoom in/out buttons in the Class Designer toolbar. You can also zoom in/out by pressing down the CTRL key and rolling the mouse wheel forward/backward. Figure 1.34 Zoom in/out from the Class Designer toolbar button You can also choose to hide certain members in the class by right-clicking the member and choosing the menu Hide. This is particularly useful if the classes in your diagram have many members and only several members are important to communicate for your particular diagram. After this operation, the member is hidden from the class. A funnel glyph is shown in the shape header region to indicate that the class has one or more members that are hidden. The following screen shot shows the SoftwareProject class with its constructor method hidden. Figure 1.35 Hide members in a class Figure 1.36 Funnel glyph shows there are members hidden on the class Page 29

34 You can unhide the hidden member by un-check the check box in the Class Detail Window. The following screen shot shows how to unhide the member. Figure 1.37 Unhide the member by un-check the member in the Class Detail Window Once you have arranged types in the diagram, you may want to share this diagram with other team members to review or include it in a design document. You can use the Export Diagram as Image feature to publish the diagram as an image. Page 30

35 Right-clicking the diagram and selecting menu Export Diagram as Image. This will bring up the Export Diagram As Image dialog box. Figure 1.38 Export Diagram as Image dialog box In this dialog box, you can choose the diagram, export location and file format for exporting images. You might want to remember the export location (i.e. folder C:\HOL007\CorpLibCSharp in the example above.) so you can check the image when the export is finished. Click the Export button to export the image. Once the export is finished, the dialog box will be closed and the image(s) are exported to the designated location in the dialog box. You can then use the File Explorer to navigate to the folder and examine the exported image. Tip: In a collaboration environment, you can export the image in a public folder and ensure your document access the image on the public folder. Once the image is updated, subsequent access to the document will be able to access the image staged in the public folder. Page 31

36 Exercise 2 Using the Class Designer to build a Visual Basic application Before you start, the following is the user name and password to login to the machine. Username: administrator Password: pass@word1 In this exercise you will open an existing VB Class Library project and create a diagram from the existing class structure. You will then use the Class Designer to enhance the class library s structure and visualize the changes made to the code base. If you have already done Task 1 to 3 previously or if you are running short on time, you can start Task 1.1 to open the solution and jump straight to Task 4. Task 1.1 Open the VB Sample Solution Task 1.1 shows you how to open the VB sample application. Open Visual Studio 2005 Beta by going to the Start Menu Programs Microsoft Visual Studio 2005 Beta 2 Microsoft Visual Studio 2005 Beta 2. Click menu File Open Project/Solution to bring up the Open Project dialog box. Page 32

37 Browse to the C:\HOL007\CorpLibVB folder in the dialog box. As shown in the following figure, select the CorpLibVB solution file within this directory. Figure 2.1 The Open Project Dialog Box Selec CorpLibVB solution and click Open button to open the solution. The CorpLibVB solution is displayed in the Solution Explorer. Select Build Rebuild Solution from the top menu to build the whole solution. There are two projects (CorpLibVB and SoftwareProject) listed in the solution explorer. Page 33

38 Task 1.2 Create a New Class Diagram You will learn how to use the Class Designer to visualize your class. Figure 2.2 Add a new Class Designer diagram from the class file Right click file SoftwareProject.vb file under project SoftwareProject and select menu View Class Diagram. After a few seconds, you will notice that a new Class Designer diagram is created and added to the project with classes displayed in the diagram. Figure New Class Designer diagram created Page 34

39 Task 1.3 Explore the Shape Functionality In this task, you will learn how to work with the class (shape) on the diagram. Click and drag the shape for class SoftwareProject to the center of the diagram. Examine the classes properties from the Properties Window. If you cannot find this window, you can bring it up from View Properties Window top menu. Click the chevron button in the shape header region to expand the class to see its members. Figure 2.3 SoftwareProject class shown in the diagram Click each member and examine its properties in the Properties Window. You can also use the arrow key to navigate members in the class. Figure 2.4 SoftwareProject class and its member properties Page 35

40 Hover the mouse over the class or its members will show tooltip information. Figure 2.5 Tooltip shown when hovering mouse on top of property Requirements Click the and buttons in the compartment header allows you to show/hide groups of members in the class. Click the Display Member Types button in the Class Designer toolbar. It displays member types of all the type members shown in the diagram. Note: If the Class Designer tool bar is not present, you can bring it up from View->Toolbars->Class Designer top level menu. Figure 2.6 Various buttons in the Class Designer tool bar One thing to point out is that the change applies globally. That is, all the shapes will be affected. There are times you may notice that some of the member types are partially clipped in the shape. Page 36

41 Click the Adjust Shapes Width toolbar button allows you to adjust the shape width to ensure the text is not clipped by the shape. Figure 2.7 Class shown after clicking Adjust Shapes Width tool bar button You can also group all the class members by various categories. The default is to group class members by kind (i.e. Properties/Fields/Methods/Events). You can also group by Access or sort the members alphabetically. Note that the member ordering only applies to viewing in the diagram, the actual ordering in the code file will not be changed. Click the Sort Alphabetically toolbar button allows you to view members in alphabetically order. Figure 2.8 Members sorted alphabetically shown on class SoftwareProject Click the chevron button again in the shape header region will hide all the compartments. Page 37

42 Tip: You can also invoke these tool bar buttons by right clicking on the diagram. Figure 2.9 Context menu shown when right mouse click the diagram You can navigate from the Class Designer directly to the code. From the designer, right click on the class header region or the method and choose menu View Code. This will take you to the code file where the class is defined. You can also double-click the shape header region or member to achieve the same effect. Once you re in the code file, you can navigate back to the diagram by clicking the ClassDiagram1.cd tab in the client space. Double-click SoftwareProject class in the diagram and it will take you to the actual code. Figure 2.10 Click the caption here takes you back to the diagram Page 38

43 Task 2 Explore Inheritance Hierarchy You will now use the Class Designer to visualize the inheritance hierarchy in the project. Right click the shape header region of class SoftwareProject and select menu Show Base Classes. The Project class appears on the diagram. Notice the inheritance line, which points from the SoftwareProject class to the Project class. Also notice that class Project comes from the referenced project CorpLibVB. This is indicated by the File Name property for class Project and the glyph in the Project shape header region. Figure 2.11 Class Project is shown non-editable Click the chevron button on class Project to see its members. Since the class is defined in a referenced assembly, it is not editable and the shape and properties in the Properties Window are all grayed out. Often while exploring a project you may find that shapes end up overlapping each other (as shown below), Class Designer lets you automatically layout the diagram for you and arrange in a manner that they don t overlap each other. Page 39

44 Click the diagram, choose Layout Diagram menu and the diagram will be re-arrange properly. Figure 2.12 Choose automatic diagram layout option to rearrange the diagram Find the Employee.vb file from the Solution Explorer and drag this file into the diagram. Right-click the class Employee shape header region and select Show Derived Classes menu item. Observe that class Developer and ProgramManager are both shown in the diagram. Page 40

45 Expand class Employee, Developer and ProgramManager by using the chevron button in the shape header region. Examine members in these class shapes. You will notice that abstract class and method are shown in italic form. Figure 2.13 Abstract class and member are shown in italic form You can also examine the class members from the Class Detail Window. It is a tool window that is normally docked in the bottom section of the IDE. If it is not present, you can bring it up by choosing View Other Windows Class Details top level menu. Once the window is shown, you can click each member and see its definition (Note, the detail on using the Class Detail Window will be covered in later tasks.). Tip: You can invoke Layout Diagram at any given point of time to help you re-arrange the diagram so the shapes are not overlapped. Page 41

46 Task 3 Viewing Relationships between Classes In this section, you will learn how to set up and examine the relationships between classes. Select Members property in class Project. Right-click the Members property and select menu Show as Association. It will show an association line from Project to IList(Of T). Figure 2.14 Show as Association on property Members Notice that interface in the Class Designer is shown in a different color. Examine properties in Properties Window for interface IList indicates that this type comes from mscorlib.dll and is not editable. From the shape itself, we know it is a generic interface which also implements interface ICollection(Of T), IEnumerable(Of T) and IEnumerable. Expand the chevron button in the shape header region to examine its properties and methods. Figure Generic interface IList(Of T) Select the association line, right click and choose Show as Property will show Members as a regular property. Note that this will remove the association line and show the property Members as a regular entry in class Project. It is more often the case that you want to visualize the collected type of a collection property than the collection itself. For example, the actual code for property Project.Members (defined in Project.vb file) is defined to be: Public Property Members() As System.Collections.Generic.IList(Of Employee) Get Return listmembers End Get Set(ByVal value As System.Collections.Generic.IList(Of Employee)) listmembers = value End Set End Property Page 42

47 In this case, you may want to visualize the association to the collected type in the Members property. Right-click the Members property and selecting the command Show as Collection Association. This will bring up the Employee class into the diagram with an association line between the Project class and the Employee class. Notice that the line is slightly different from the regular association line. The double arrow indicates that Members property holds a collection of Employee objects. Figure 2.15 Show as Collection Association on property Members Expand the Employee class if it s not expanded beforehand. Select property EmployeeType, rightclick and choose menu Show as Association. This will bring the enumeration into the diagram and an association line drawn from the Employee class to EmployeeType enumeration. Notice that enumeration in the Class Designer is shown in a different color. Expand the chevron in the EmployeeType shape header region to examine all the enum members. Page 43

48 Tip: You can view a field or property as either members within a class shape or as associations. As you might expect, the underlying code is unaffected by the chosen view. Association lines help you understand the relationships between important classes in a project. You can also use the Class Designer to understand the existing assemblies referenced in the current project. You can do so from the Class View Window (If this window is not present, choose menu View Class View.). From the window, you can drag and drop an entire namespace, or one of more types that you are interested in visualizing. For example, if you re interested in the generic class Stack(Of T), you may simply type Stack in the search field which will show all types that match that pattern in the Class View. You can then drag and drop this type System.Collections.Generic.Stack(Of T) from the Class View into the diagram or right-click the type and choose View Class Diagram. Figure 2.16 Stack shown in the Search field in the Class View Note that you can also multiple-select the interested types and drag-drop them into the diagram. Page 44

49 Close the diagram by clicking the button at the top right corner of the diagram. When prompted for asking the save the changes? Click No to close the dialog. Figure Close the diagram by clicking the X button If you are running short on time, you can quit the session now and come back later. All you have to do is to start Task 1.1 and jump straight to Task 4. Page 45

50 Task 4 Build a Simple Class In this task, you will learn how to create a new class and work with Class Detail Window in the Class Designer. Go to the Solution Explorer tool window, right-click the VBTask4.cd node, choose menu Include In Project. Figure Include VBTask4.cd into project MySoftwareProject Page 46

51 Double-click VBTask4.cd in the Solution Explorer to open the class diagram. Figure Open the CSharpTask4.cd diagram From the Toolbox window, drag-drop Class item into the diagram (If you cannot find the Toolbox Window, you can select View Toolbox top level menu item.). Once you release the mouse button, you will be presented with the New Class dialog box. Figure Create new class dialog box Type Tester as the class name, click OK button and a new class Tester is created on the diagram. Page 47

52 Right-click the shape header region of class Tester, choose menu Add Constructor to create a new constructor. You can also navigate from the Class Details Window to the code file by right clicking the member and selecting View Code menu. You can also explore other menu options listed in these context menus. You can also right-click the shape header region to quickly add new members to the class. Figure Context menu to add various type of members to the class Go to the Class Detail Window (This is a tool window docked in the bottom of the VisualStudio IDE. If it is not present, you can bring it up by choosing View Other Windows Class Details top level menu.) and create a new method CreateTestPlan by first clicking <add method> cell and typing CreateTestPlan. Figure 2.18 Click text <add method> and start typing CreateTestMethod Page 48

53 Figure 2.19 When finishing typing and cursor stays at the end, hit TAB key to move to the next column Figure 2.20 Once TAB key is entered, the method is created with default no return. Focus stays at Type column. Change the return type from nothing to Boolean by first typing letter bo Figure 2.21 Once you type letter bo, notice that the intellisense is shown with all the types in scope. You can finish typing Boolean or pick Boolean from the list. Once the type is changed, hit TAB to move onto the Modifier column. Page 49

54 Figure 2.22 Now you re in the Modifier column, click the from Public to Friend. button to change the modifier Now that the Friend method is created, let s create a new parameter in method CreateTestPlan. Click the button at the beginning of this method. Once clicked, the parameter section is expanded underneath the method. Click <add parameter> text once to start typing task as the parameter name. After typing, hit TAB key to move onto Type column. Start typing CorpLibVB.ITask. Notice that the intellisense is listing all the types in the scope. Notice a new parameter is created for this method. Figure 2.23 While typing the text CorpLibVB.ITask, notice that intellisense shows up to assist the user to choose the correct type. Page 50

55 Task 5 Implement MustInherit Class and Override Base Class Method In this task, you will learn to create inheritance between classes and also to override virtual methods defined in the base class(s). Click the Inheritance item once in the Toolbox to select the line tool. Move the mouse from class Tester shape header region (notice the changed cursor), press left mouse key, move the mouse to class Employee shape header region and release the left mouse key. Once you release the mouse key, you will notice an inheritance line created between classes Tester and Employee. Figure 2.24 Click Inheritance toolbox item once to select the line drawing tool Page 51

56 Figure 2.25 Left mouse key down and move the mouse. As you move along the mouse, notice the ghost line drawn between two classes. Now that the inheritance relationship is created between class Tester and Employee, examine the members in class Tester. You will notice that the Class Designer automatically overrode the base abstract method GetCurrentTask defined in the base class. Right click on the member GetCurrentTask and invoke the View Code command. This will take you to the definition of this method in the code file. You will notice that the class designer has automatically created the method with a default method stub. Public Overrides Function GetCurrentTask() As CorpLibVB.ITask End Function Add the text Return Nothing into GetCurrentTask function body. Public Overrides Function GetCurrentTask() As CorpLibVB.ITask Return Nothing End Function Now, let s go back to the diagram and try to override a virtual method defined in the base class. Page 52

57 Right click Tester shape header region, choose menu Intellisense Override Members. This will bring up the Override Members dialog box. Once it s up, click the button in front of CorpLibVB.Employee node. Figure 2.26 Override members dialog box You will notice that this dialog box lists all the classes in the inheritance hierarchy of the class Tester (System.Object and CorpLibVB.Employee). Click in front of CorpLibCSharp.Employee node to list all the overrideable methods defined in that class. Click the check box in front of GetHobbies node. Click OK button to override virtual method GetHobbies. Observe method GetHobbies is overridden in class Tester. Figure 2.27 GetHobbies method listed in Tester class Double click method GetHobbies. This will take you to the definition of the GetHobbies method in Tester.cs. Examine the method body which looks like the following: Public Overrides Function GetHobbies() As String End Function In the method body, add the following text: Return "running;climbing" Page 53

58 Tip: The Override Members dialog box also allows you to override Overridable/MustOverride methods defined in your ancestor types. You can multi-select nodes in the dialog box and the Class Designer will override the selected methods for you. Task 6 - Implement Interfaces In this section you will learn how to implement interface from class using the inheritance line tool. Right click on the Requirements property in the class SoftwareProject and select menu Show as Collection Association. The Requirements class will now be shown on the diagram. Also notice the collection association line is drawn between them. Click chevron button in class Requirements shape header region to expand its members. Right click on the listtasks field in class Requirements, and select menu Show as Collection Association. The Task class will now be shown on the diagram. Notice the collection association line color is in blue. This indicates it s a coming from a field (As opposed to coming from property which is depicted in light brown color.). Expand class Task to observe its members. Figure 2.28 Collection association relationship between the SoftwareProject, Requirements and Task Page 54

59 Go to the Class View tool window; If your Class View looks like the following, you are in the search mode. Simply click button and you will be back to the normal browsing mode. Figure 2.29 Class View in search mode Go to the Class View tool window, expand CorpLibCSharp namespace, find the interface ITask, and drag drop into the diagram. Expand the chevron to view its interface methods. Figure Task, ITask and the Class View tool window Page 55

60 Go to the Toolbox window, click Inheritance tool box item once to select it and draw the line from Task to ITask. Once it s done, you will notice that Class Designer automatically generated interface method stubs for interface ITask and class Task now implements interface ITask. Instead of the inheritance line shown previously, notice that a new lollipop shape is attached to shape Task. This indicates that class Task now implements interface ITask. Figure 2.30 Task now implements interface ITask Page 56

61 Double-click class Task shape header region and the Class Designer will navigate to the code file. Examine the content and you will notice that all the interface methods defined in ITask are now generated in the code file. Public Sub BeginTask() Implements CorpLibVB.ITask.BeginTask End Sub Public Function GetEndDate() As Date Implements CorpLibVB.ITask.GetEndDate End Function Public Function GetStartDate() As Date Implements CorpLibVB.ITask.GetStartDate End Function Public Property ID1() As Integer Implements CorpLibVB.ITask.ID Get End Get Set(ByVal value As Integer) End Set End Property Public Property Status() As CorpLibVB.TaskStatus Implements CorpLibVB.ITask.Status Get End Get Set(ByVal value As CorpLibVB.TaskStatus) End Set End Property Tip: You can also use the Inheritance line tool to create inheritance between interfaces. Page 57

62 Task 7 Rename Refactoring In this task, you will see how easy it is to perform rename refactoring operation from the Class Designer. Click the class Requirements shape header region and start typing text Requirement. Figure 2.31 Class Requirements is now in the edit mode Change the text from Requirements to Requirement. Commit your change either by click other parts of the diagram or hit the ENTER key. Note that; Unlike the C# application in Exercise 1, there is no results listed in the Output Window. View the code for the Requirement, SoftwareProject, ProgramManager, and Task classes. Notice the changes made to each of these classes as a result of the rename. For example, the underying return type for method ProgramManager.CreateRequirement is now changed to: Public Function CreateRequirement() As Requirement End Function Tip: It might be hard at times to find the type on the diagram. You can go to the Class View tool window, find the type in the tree view and right-click menu View Class Diagram. It will bring it into the diagram (if it is note present in the diagram) and focus this class for you. Page 58

63 Task 8 Document and Presentation In this task, you will learn how to publish the diagram for sharing with team members. Right-click the diagram and select Display Member Types if you want to view the member type in the diagram. Right-click the diagram and select Adjust Shapes Width to ensure that all the text is visible. You can also adjust the width yourself by either moving the handle sideways to adjust the width or double click the handle. Figure 2.32 Resize the shape width As you work on the diagram, you might need to zoom in/out at times. You can do so by right-clicking the diagram and selecting submenu under Zoom. The following figure shows how to zoom in/out within the diagram. Figure 2.33 Zoom in/out from the diagram Page 59

64 Alternatively, you can also use the zoom in/out buttons in the Class Designer toolbar. You can also zoom in/out by pressing down the CTRL key and rolling the mouse wheel forward/backward. Figure 2.34 Zoom in/out from the Class Designer toolbar button You can also choose to hide certain members in the class by right-clicking the member and choosing the menu Hide. This is particularly useful if the classes in your diagram have many members and only several members are important to communicate for your particular diagram. After this operation, the member is hidden from the class. A funnel glyph is shown in the shape header region to indicate that the class has one or more members that are hidden. The following screen shot shows the SoftwareProject class with its constructor method hidden. Figure 1.35 Hide members in a class Figure 2.36 Funnel glyph shows there are members hidden on the class Page 60

65 You can unhide the hidden member by un-check the check box in the Class Detail Window. The following screen shot shows how to unhide the member. Figure 2.37 Unhide the member by un-check the member in the Class Detail Window Once you have arranged types in the diagram, you may want to share this diagram with other team members to review or include it in a design document. You can use the Export Diagram as Image feature to publish the diagram as an image. Page 61

66 Right-clicking the diagram and selecting menu Export Diagram as Image. This will bring up the Export Diagram As Image dialog box. Figure 2.38 Export Diagram as Image dialog box In this dialog box, choose diagram (click the check box on diagram VBTask4.cd), export location and file format for exporting images. You might want to remember the export location (i.e. folder C:\HOL007\CorpLibVB in the example above.) so you can check the image when the export is finished. Click the Export button to export the image. Once the export is finished, the dialog box will be closed and the image(s) are exported to the designated location in the dialog box. You can then use the File Explorer to navigate to the folder and examine the exported image. Tip: In a collaboration environment, you can export the image in a public folder and ensure your document access the image on the public folder. Once the image is updated, subsequent access to the document will be able to access the image staged in the public folder. Page 62