JoeN's Blog

TechEd 2004 - VS 2005 C# IDE Enhancements Walkthrough (long)

Some people have expressed interest in the slides and demos that I showed at TechEd 2004.

 

The slides for my session can be downloaded here and the demos can be downloaded from MS Download (note that the demos are packaged as an MSI, the MSI simply copies the demos into your “My Documents” folder).

 

I did all the demos on the build of Visual Studio 2005 given out at the conference. Hopefully this article has enough information so you can recreate them on the May 2004 Community Technology Build of Visual Studio 2005.

 

What you’ll need:

• A clean machine with Visual Studio 2005 Community Technology Preview May 2004 installed on it. The Community Technology Preview was handed out at TechEd 2004 or MSDN subscribers can download it via MSDN. I used a Virtual PC for my session and the performance was great! I put the VPC on an external USB drive and gave the VPC session 512Mb of memory (my laptop has 1Gb of memory).

Before you start you’ll need to:

• Download the demos to your machine. The demos can be downloaded from MS Download
• Copy the “Base Demos” to the “Demos” directory. This is really just to create a clean copy of the demos so you can repeat them again.
• Point VS to the demo specific snippets. Go to Tools.Code Snippet Manager, Select C# in the language dropdown, then hit the Add… button to point to the directory that contains the snippets you just copied.
• Configure the display. If you’re presenting to an audience you’ll most likely be projecting at 1024x768 so you should play with the fonts to get everything to appear larger for the audience. Here’s the settings I use:
  • Set standard resolution. Screen Resolution 1024x768 (16 bit color). The color quality is important as the Quake Model demo only works at this color depth.
  • Bump up some of the OS fonts. VS uses some of the OD fonts in different windows. Right Click on the desktop and select Properties.
    • Change the Appearance.FontSize = Extra Large Fonts. This helps highlight the size of the Intellisense windows as well as the Text Tool windows in the demo (Find All References, Class View etc).
    • Change Appearance.Advanced.Item.ToolTip= Tahoma, 14 point.
  • Bump up the VS editor font. In VS choose Tools.Options.Fonts and Colors.Text Editor = Lucinda Colsole, 14 point works for me.
• Warning. In this build you always want to have at least one document open at all times in the main view (if you have no documents open and open something from the solution explorer you may not see the document!).

Presenting is a very personal experience so in the script below I’ll write the words as I’d say them. I’ll also outline the main talking points that I made during the demo and point to the specific feature(s) being shown.

 

If you want more detail let me know and as soon as we have the TechEd presentations up and on-line I’ll add a link from here so you can see how I put all the features together.

 

Understanding Code (MDLView)

The first demo is all about how you get up to speed on an existing code base. To emphasize the problem I renamed nearly all the files so they were numbers which brings home the point about not understanding what the code is actually doing.

 

Load and run the MDLViewer application and describe it’s general attributes: Winform hosting a Direct X drawing surface, we erase the screen and work out all the coordinates in C# and redraw every time. Set the application into the stand animation and hit the play button, change to texture draw at some stage.

 

Demo Points

• Search in Class View. I need to find the main form for the application, solution explorer shows physical file view, class view shows the logical view. I’ll open Class View and you’ll notice that it now has a new look with the members now appearing at the bottom of the screen. Class View also has a search facility that allows me to search for specific types. I’ll type in Form and have Class View find all the matches for me. Once I’ve found the MainForm class I can simply navigate to the code by double clicking on it.
• Investigate Code. As I start to walk through the code I’d probably start drawing a diagram for myself describing the class hierarchy and relationships in the code.
• Class Designer. In VS 2005 Team System we now have the ability to visualize this information using a Class Diagram. I can add a new Class Diagram by simply adding a Class Diagram through the Project New Item dialog.
  • Drag MainForm from Class View to diagram (zoom to 150%). Once I have a class diagram I can simply drag a class from Class View onto the surface and if I click on the chevron I can see the members of the class organized by kind. I can even change the way that members are shown in the diagram by right clicking on the diagram surface and selecting other options.
  • Show as Association- SkinPanel. Someone of the project said that the SkinPanel was an important class and if I scroll down the member list for MainForm I can see this member variable. I want to understand this class a lot better so I select it, right click and choose “Show as Association”. This extracts SkinPanel from the members list and shows it in a new form allowing me to explore the members of SkinPanel. I notice that this class has an OnPaint method. I know this is an important method in Winforms so I want to explore this code. I simply double click on the method to look at the code. [Walk through the code and explain what’s going on]
  • Show Base Class. I want to look at this class a little bit more so I go back to diagram surface, select SkinPanel, right click and select “Show Base Class”. Notice that there is a lock symbol on the base class showing that this class can’t be modified. This is actually a two way designer, Class Diagram simply reflects what’s in the code. If I open up the SkinPanel source code in a Horizontal Tab Group (right click on the document tab) you can see that I can see the code as well as a the diagram at the same time. If I cut the base class definition from the source code you’ll see the diagram change to reflect the change. When I paste the code back in, you’ll see it revert. [Warning: drag the source code window back up the main window dock at this point].
  • Add a comment from the ToolBox. Class Diagram’s also allow you to put comments on the diagram itself to help explain what’s going on. I can drag and drop a comment from the toolbox onto the design surface and add a comment. This quickly allows me to add more context and information to my diagrams. Because the class diagram is simply a file in the project I can multiple of them in my project, each highlighting a different aspect of the application. The diagrams never get stale as they are simply reflections of the code.
• Find All References – SurfacePanel. I’ve established that the OnPaint is an important call, where is this class being used? If I move the cursor into the SurfacePanel declaration, I can right click and select “Find All References”. In VS 2002 and VS 2003 we simply took you to the first reference without giving you any idea about how many references you actually had. In order to see all the references you would have to move between the references and notice when you scrolled around the list. In VS 2005 we now show all the references in a list so you can see how many occurred and navigate to them in any order you wish.
• Find all References – SkinPanel. Now that we can see where this is referenced, I want to look at the SkinPanel variable declaration. If I select this variable I can “Find All References” on it. This found a lot more usages and if I walk down the list I can see a number of calls to SkinPanel.Invalidate();
• Investigate Invalidate call. Now let’s investigate this code. Let’s start by looking at the enumRenderingMode.
• Goto Definition – enumRenderingMode. What other types of enum values can I potentially have? I’ll select the enum, right click and select Goto Defintion. Note how we navigate to the declaration of the enum.
• Code Navigation – Ctrl -. Use Ctrl – to navigate back to the original code so we can continue to investigate.
• Goto Definition – EventArgs. We don’t have the code for EventArgs in our solution. Right click and select Goto Definition. In VS 2003 when we didn’t have the code we should go to the Object Browser and show you the information. This caused a context shift and C# developers told us that they wanted to stay in code. In VS 2005 we now generate a C# “header” type file that shows you the members on the type as C# source code.
• Lots of windows – Close All But This. [Navigate back to the original calling code]. Now we have all these documents open and sometimes you lose track with all the windows being open. In VS 2005 you can simply select a document tab, right click and select “Close All But This”. This dramatically reduces the time having to close multiple documents.
• Code Definition Window. So we have great navigation techniques but we really wanted to make sure that you didn’t have to open all those other windows when you want context on code you are looking at. In VS 2005 we now have a Code Definition window that tracks what you have your cursor on and displays information about it. [Open the Code Defintion window and cursor to the enumRenderMode and the EventArgs to show feature]

 

That’s just a few of the features in VS 2005 to help developers get up to speed with existing code bases.

 

Modifying Code (MDLView)

 

Now that we understand this code base, let’s make some modifications to the code. In this demo we do things:

1. Run FxCop and fix all the messages.
2. Fix the review comments embedded in the code.

Demo Points

 

• FxCop integration. The first thing we need to do is run FxCop as part of our build. [Explain FxCop]. In VS 2003 FxCop was delivered as part of the .NET SDK and you needed to run it from the command line outside of VS. As part of VS Team System, FxCop has been directly integrated into the IDE. Simply select the project, right click and view the properties.

·         Project Properties. In VS 2005 we now have a Project Designer that aggregates useful information from different places (AssemblyInfo, project files etc) into one convenient place for editing. One of the tabs is the Build Tab, and down the bottom we now have an option to Enable FxCop. To enable this we simply select the checkbox and close the designer.

·         Build is two stage. Now when we do a build it actually does two things: first it builds the project and then it runs FxCop on the output. In this build this process may be a little slow.

·         Error list. In VS 2005 we now have a new window called the Error List that allows developers to quickly and easily move between the errors, warnings and messages associated with their build. In VS 2003 we jammed everything, compile messages, TODOs etc into the Task List. The Error Window really helps developers concentrate on the core messages associated with building their projects. If we look at the warnings associated with the FxCop we see 4 warnings – all of them to do with naming conventions.

·         Navigate to error via Class View. The first warning is simple, the enum should have a capital as the first letter. The warning doesn’t have a file or line number associated it but we can quickly find the type using the search capability in class view. Now all I have to do is actually change the name – so how would I do this today? One option is to simply make the change and then recompile, I’d get compilation errors and I could simply fix all the errors. Another way is to make the change, do a careful search and replace and then compile. In VS 2005 you simply move your cursor to the thing you want to change, right click and select Refactor->Rename. This brings up a dialog that allows me to change the name and it also has an option that allows me to preview the changes. When I click on OK VS analyzes the code in the solution, and presents me with the Preview Changes dialog that allows me to look at the changes and once I’m satisfied I simply click rename and VS does the work for me.

·         Navigate to second error. Let’s fix the next warning. Once again I’m using Class View to navigate to the source of the warning. At this stage here I could simply repeat what I just did to fix this warning but we heard from C# developers that they want to stay in the editor so we worked on a different model as well. The most natural action for developers to rename something is to simply change the name in the editor – let’s do that now. Notice the small indicator on the new name, if I hover over it a smart tag appears and it has two options: one to rename and one to rename with a preview. Let’s select the preview option and we can see the preview dialog from before and make the change again.

·         The fix for the third warning is similar. Once you get used to this feature you can quickly make changes that before took lots of time. With this fix, all I do is change the name, invoke the smart tag via the keyboard (Ctrl-.) and make the change without previewing.

·         The same fix for the forth.

·         Now that we’ve fixed all the FxCop rules, let’s make the changes from the code review that the team did. The team has put some shortcuts in the code pointing to code that needs to be changed. [Open the TaskList and select shortcuts from the combo box]. Navigate to the first shortcut and walk through the long constructor.

·         Extract Method. It’s obvious that this method needs to be broken into smaller sections. Let’s look at the first piece of code that needs to be broken out.

o       This first piece of code needs to extracted into a new method. How would I do this today? I’d cut the code out go down to the bottom of the class paste the code back in, look at and write the method signature based on the code. Once I’d finish the method, I’d go back to the place I cut the code from and put a call into the method I just generated. That’s a fairly mechanical operation. In VS 2005 you can simply select the code that you want to extract, right click and select Refactor->Extract Method. VS works out the method signature and all you have to do is type in the name of the method. Once you click OK Visual Studio creates the method for you and adds a call to it.

·         Extract Method (2). [Do it again for the next block of code].

·         Open the Demo.cs. [Extract the swap method so people get a feel for what this functionality does on a smaller level. Note the generated code uses ref as a parameter modifier as it changes the value inside the swap method]

·         Open Demo2.cs. [Show Reorder Parameter functionality via smart tag on the method name].

 

Debugging Code (DebugDemo)

 

This demo really requires some setup by showing and talking to how information was shown in VS 2003. The main issues with the current display are:

 

1. Too much information. In VS 2003 we simply dump the members of a type in alphabetical order
2. Not enough context. In VS 2003 looking at the list you can’t tell what something is e.g. is it a property, is it public etc?

 

If you put these two things together it’s really a reflection of the fact that the debug time display of a type is significantly different from the design time view. Compare the IntelliSense view of a type to the debugging view. In VS 2005 we wanted to close the gap between these two views.

 

Demo Points

·         Open the Debug Demo. [Run the code and hit the breakpoint]

·         Open the watch window and type in dt. Note that the top line view is similar to VS 2003. However when we expand the type we see a very different experience. Notice the glyphs in the window as well as the grouping of static and non-public members. The grouping and glyphs are now on by default for C# developers and make looking at an object significantly easier than before.

·         Change the watch to point to ds. Next is a DataSet. If I expand a DataSet I get all the benefits of the glyphs and the grouping but it still doesn’t address the problem of being able to see the actual data in the DataSet quickly and easily. Notice the magnifying glass in the value column. If I click on the dropdown button and see that a DataSet Visualizer is available. When I click on this I see a DataSet visualizer appear and it displays the information in the Data Set in a much more natural manner.

·         Change the watch to point to longString. Let’s hover over the value column and see how long strings are displayed. You’ve all seen long strings in the debugger and this is sometimes not the best view of a long string. In VS 2005 I simply click the magnifying class dropdown and select the String visualizer to get a much better display of a string.

·         Change the watch to point to xmlString. XML is an important data type in .NET but it has been difficult to really get a good view on XML. If I hover over the value column, notice that I get a big string that is difficult to read. In VS 2005 I simply click the magnifying class dropdown and select the XML visualizer.

 

One of the things I want to emphasize here is that the Visualizer functionality is completely extensible. You can write the add visualizers to any type you want (regardless of whether you have the source code to the type or not). You can remove the visualizers that we provide, replace them with their own – it’s completely open.

 

·         Change the watch to point to contact. This is a user type in the current project and note how the value column is the type name with some {}’s around it. In VS 2003 this was the default processing and while there was a hidden file you could change this behavior with it was not supported or documented. We have added a whole range or features to allow you to customize the value that gets displayed.

·         Overriding ToString on contact. One common pattern in .NET is to override ToString to provide a string representation of an object. The debugger now shows the contents of ToString if a type overrides it. [Open the Contacts.cs file, Goto the bottom of the file and start to type override] Notice that override is now in the IntelliSense completion list, once I complete on override when I hit space VS offers up the list of potential overrides that you could complete. This functionality was in VS 2003 but notice now when I type “string” (because I know ToString returns a string) that the IntelliSense list filters to only show me methods that return a string. VS automatically fills in the implementation of the method (note that customers asked us to fill in generated methods with NotImplementedException). Let’s change the method to return the contact name, and let’s run this application again.

·         Notice that the contact value in the debugger now shows the contact name.

·         Debugger attributes. ToString was a start but it quickly became obvious that this wasn’t enough. We didn’t want customers to have to change their ToString implementations just for the debugger. We needed a better mechanism for users to be able to say how they wanted the debugger to display variables, so we turned to a set of attributes for this.

·         Add DebuggerDisplay attribute. Just to show the basics of this I’ll add some attributes to these classes. First I’ll remove the ToString implementation and then add some attributes to do the same thing. [Type in debugdemo]. Note that these attributes simply take a string that describes what to put in the value column in the debugger. You can put any expression between the brackets. [Move the second attribute down to the Company Class]. Rerun the application and show the new values.

·         Debugger Data Tips. So we have down a lot of enhancements to the basic display of variables in the debugger, but we heard from C# developers that they wanted to stay in the editor. When we looked at this feedback and we thought about how to give you this information in the editor. Most of you are familiar with the debugger data tips that we provided in VS 2003 that gave you a one line summary of the object [Hover over dt]. Notice the + sign on the Tool Tip, in VS 2005 you can now drill into objects and see more information [Drill into the data associated with dt] As you start to drill into the data you can get a lot of information but it starts to obscure the underlying code. If you hold the Ctrl key down you’ll see the tooltips become transparent so you get back to the code.

·         Debugger Data Tips and Visualizers. You can even get to the visualizers via the Data Tips. [Hover over ds and invoke the DataSet visualizer].

 

Writing Code (WriteCode)

 

Writing code has historically been a strong point for Visual Studio and in VS 2005 we have a number of features that make this experience even better.

 

For this demo I want to write some simple code that counts the number of words in a file. I’ll write two classes: one that does the actual counting and one that simply tests the other class.

 

Demo Points

·         Open WriteCode project. Let’s write the first class. Note that as I type in class that it appears in the IntelliSense list. Once I select the class completion and hit tab notice that the brackets for the class are filled in for me and that there is this yellow region with MyClass in it. This is a new feature for VS 2005 called snippets. Snippets are essentially a mechanism you can use to inject boilerplate code into your source code. Snippets are implemented as simple XML files that VS knows about.

·         Rename the generated class to CountWords.

·         Tools.Code Snippet Manager. VS now has something called the Code Snippet Manager that can be used to point VS at a set of directories that contain snippets. By default we will install snippets with the product [Drill into the Expansions node in the list] and you can see the class snippet here is simply an XML file in a directory. One of the things you can do here is add new directories to look for snippets and you can see that I have added a directory here for some snippets I am using for this demo.

·         Open class.xml. Lets look at class.xml and get a feel for what these things actually look like. It’s a small XML file that has three main sections:

1.      The Header Section. The header section describes the snippet, it’s title, it’s shortcut (this is what appears in the IntelliSense list) and the type of snippet.

2.      Declarations. This section contains any fields that you want to want to use in your generated code. This one has a field for the name of the class, it has a tooltip and a default name.

3.      The code section. This is a really the main part of the snippet as it contains the code that will be generated when the snippet is activated. Note that you can refer to the declarations you have declared by using the name of the declaration and surrounding it with $ signs. You’ll also notice the $end$ this describes where the cursor goes after the snippet is injected and $selected$ refers to where any selected code will be injected (you can imagine a snippet being used to surround some code – you’ll see this later).

 

·         Lets create the Test Class. [Use the class snippet to create a class called Test]. I need a Main method so we’ll use the snippet “svm” that injects a main method for me.

·         Instantiate CountWords. The first thing I need to do is create an instance of CountWords. [Type CountWords count = n] Note that new is in the completion list and notice that CountWords is automatically selected in InteliSense.

·         Call a method on it. Now I want to call a method on the CountWords class. I need to return an int for the number of words [Type int numwords = count.] At this stage CountWords has no methods, so IntelliSense simply shows us the methods on object. Lets just type in a method called WordsInFile and pass in a string for the name of the file we want to use [type in WordsInFile(@”c:\test.txt”);].

·         Console.WriteLine. Now I just want to write out the number of words in the file to the console. I have a snippet for this [Type in cw] but notice something unusual here – the Console class is not highlighted. WE heard from C# developers that they wanted to get more information about the code they were looking at. In VS 2005 you can now set colors for classes, structs, enums, interfaces so you can quickly get more information about the code you are looking at. It looks like Console is not being recognized as a class. Anyone have an idea of why not? [Audience immediately says that the using statement is not there]. That’s right I need to add a using statement but IntelliSense can figure this out so I just move my cursor onto Console, invoke the Smart Tag and it gives me an option to either add the appropriate using Statement, or fully qualify the type. I’ll get it to inject the using statement and keep typing. [After finishing the code should look like Console.WriteLine(“# of words = {0}”, numwords);]

·         Generate Method Stub. Now that I have completed the calling code I need to go back and actually write the implementation of WordsInFile. Looking at the code I see that the method returns an int and takes a string. Typically I’d copy the calling code and then generate the method but again IntelliSense knows this so why don’t I simply get it to do it for me. [Move the cursor into the WordsInFile call, invoke the Smart Tag and get it to generate the method stub]

·         Property Expansions. I want to create two properties in the CountWords class, one to hold the FileName and one to hold the actual Contents of the File. [Use the prop snippet to generate both properties – notice how the type and variable name change to be consistent as you enter in the information]

·         Flesh out the WordsInFile method. [Type in the following code:

FileName = p;

Contents = File.ReadAll(FileName);

return Contents.Split(‘ ‘).Length;

 

You will need to use the Smart Tag once you type in File to add the fully qualified name]

 

·         Run the code. [Run the code and see that a count is returned – make sure that the file existsJ]

·         Exception Assistant. Now let’s see what happens when the file doesn’t exist. [Change the name of the file to one that doesn’t exist, Rerun the application].

o       Exception is thrown and Exception Assistant is displayed. In VS 2003 we showed you the Exception dialog and let you break. If you remembered the exception information is shown in the locals window. In VS 2005 we show the exception assistant that even has links to help topics about how to potentially fix this exception. This is a completely extensible mechanism that you can plug into. You can add information to the exceptions that we provide as well as adding information for any of your exceptions.

·         Formatting. The last thing I want to show you is formatting. In VS 2003 we had fairly limited support for formatting control. In VS 2005 we have greatly extended the level of formatting support [Open Tools.Options.TextEditor.C#.Formatting and show the number of options] If we look at some code here [Open FormatDemo.cs] you can see that it is badly formatted. If I copy this code and copy it back into the file you can see that we reformat the code based on your formatting settings.