Objective

Overview

Prerequisites

Code Map in Action

Exploring relations in project level

Debugging in a way

Code Map improvements in Visual Studio 2015 CTP6

Reference

Authors’ Info

2

2

2

2

3

5

5

6

6

white paper

www.hcltech.com

white paper

TABLE OF CONTENTS

Visual StudioCode Map: Visualizationof Complex Code

Code Maps, earlier known as “Directed Graph Documents”, are a great way to visualize the relationships and interdepen-dencies between the components of .NET applications. Microsoft makes it much easier to grasp the architecture of our application.

Code Maps are a core part of the features of Visual Studio that help you to visualize and get insights about code easily and a graphical manner.

Jumping into the huge code base and grasping the relations among the code snippets is cumbersome task. But every developer has to do this at some point in his career, especially in enhance and support projects. At the same time debug-ging is also a tedious method in large projects where developer has to jump to the different methods in different layer. To find out the relations among objects/methods most of us usually end up with using a piece of paper to diagram out relationships in our code.

• You know absolutely nothing about the code base,. Here you have Code Map• Graph which describes the relationships between methods and variables• View Code and Pictorial representation of relations on the same time.

Objective

Microsoft provides many tools with visual studio, among them Code Map is one of the tool which provides pictorial repre-sentation. It’s a very user friendly tool by which we can create and manipulate relations.

These tools also help you covey your findings more easily with the people involved with your project. The Code Map and Debugger Integration in Visual Studio 2012/2013/2015 can add a lot of value in large sized projects with plenty of legacy code and sparse documentation.

Similar to dependency graphs, Code Map allow us to visualize code relationships. When we create a new code map, it appears in a tab next to the code editor. This allows us to see where you are in the hierarchy of the code while you're working in the code itself in parallel.

• Visual Studio 2012 ultimate/premium (update 1/4)/ Visual studio 2013/2015• Microsoft outlook to share Code Map.

Once our instance of Visual Studio 2012 is updated (Version 4)/2013 with, the Code Map feature will be available in a context menu when inside your code while right clicking.

It gives following options:• Show on Code Map is the core feature that generates the Code Map for the current solution.• Show Related Items on Code Map allows you to expand the default Code Map to include other items related to the code. This includes displaying base types, derived types, references, and the containing namespace

User can create Code Map for ther whole solution or particular project or method by right clicking on the solution or project or method.

Overview

Prerequisites

Code Map in Action

As shown in snapshot above GetUsers() node can be create by right clickcing on the GetUsers() method in the code and click on the Show in Code Map option. When we right-click on the GetUsers() node in the graph, it will give three options as shown.

There are many options available with the Map so that user can set the color of node, set the flag etc .and finally user can share the graph with the team.

User can change the layout of the Map, put comment etc in the graph itself.We can hover mouse over any node to get more detail and/or you can double-click any node to see the code associated with it.

To view the code Map on project level, user will have to right-click on the project in Solution Explorer, and choose “Show on Code Map” Option.

Code Maps will show relationships in your code and appear next to the code editor. A green arrow shows our cursor’s position in the code. It will give a pictorial representation of the relations among the classes in the project in a hierarchy way .

User can expand a node from the graph by clicking on the node itself

Fig. 1: Different options available in the context menu of the node

Exploring relations in project level

We can create the Map of a method by simply right clicking on the method, it will immediately open a .dgml file right to the code window with pictorial representation and user can navigate from one node to its definition, Find all references or Show Containing Type etc.

Go to definition

GetUser( )

Find All References

Show Containing Type

Fig.2: ”GetUserByID” method throwing an object of Exception class

Fig.2:”Main” method calling it’s method “InitializeLibrary()” which in turns call GetUserByID

Let us assume that we have a cosole application containing a class “UserHcl.cs” which has a method “GetUserByID()” and it has no implementation, just throwing an exception.

As shown above in the Main method we are creating an object of the program class itself and then call it’s “CallMethod”, which in turns call the method of “UserHcl” class.

It give s a clear picture of the code flow. As our “GetUserByID” method throws an Exception which is external to the solution, because of that it will show as Externals.

Code Maps Integration with visual studio 2013 debugger helps us to visualize the debugging process more efficiently.We can launch code map while debugging by clicking on the “Code Map” option in the main menu to synchronized debug session with code map.

• Faster display and better responsiveness• Progressively visible solution structure and dependencies• Additional dependency link styles• Assembly styling depending on the project type• Less clutter with implicit .NET type dependencies hidden• Filters for code elements as well as dependency links

When we run Code Map with this project, we will get a map like below.

Fig.3:”Code Maps” on execution

Debugging in a way

Code Map improvements in Visual Studio 2015 CTP6

Reference

Authors’ InfoGourik Kumar Bora

Navin Saini

Hello there! I am an Ideapreneur. I believe that sustainable business outcomes are driven by relationships nurtured through values like trust, transparency and �exibility. I respect the contract, but believe in going beyond through collaboration, applied innovation and new generation partnership models that put your interest above everything else. Right now 105,000 Ideapre-neurs are in a Relationship Beyond the Contract™ with 500 customers in 31 countries. How can I help you?

TM

contact.ers.info@hcl.com or Visit http://www.hcltech.com

1. http://channel9.msdn.com/Series/Visual-Studio-2012-Premium-and-Ultimate-Overview/ Visual-Studio-Ultimate-2012-Understanding-complex-code-with-Code-Map-ENU2. http://msdn.microsoft.com/en-us/library/jj739835.aspx3. http://blogs.msdn.com/b/mvpawardprogram/archive/2013/11/08/code-maps-in-visual-studio-2013.aspx

Gourik is a Technical Lead with more than 7.5 years of experience. He is specifically focused on Microsoft technologies. He has been instrumental in developing and deploying various Web applications with ASP.net (C#.net & VB.net, jquery etc.) with SQL Server and Oracle as database engines. SOA is another area on his leverage. He has worked with multiple window services, web services, console application and form based application earlier. In his recent experience, he started developing Sharepoint custom application using C# and ASP.net and is involved in ‘Simplify’, a knowledge management system from ERS.

Navin Saini is a Senior Project Manager with HCL Technologies. Since the last few years, he is specifically focused towards Sharepoint development with both, OOTB (Out of the Box) & Custom implementation (using C# & ASP.net). Using Sharepoint 2007 & 2010, he has been instrumental in developing & deploying various Sharepoint Portals which include Dashboards & Knowledge Management systems.