Layer Diagram in Visual Studio 2012

In one of my previous articles Code Generation from UML Class Diagram in Visual Studio 2012 Ultimate, I explained the code generation feature in VS 2012 Ultimate using UML class diagram. In this article, we will explore one additional feature of Visual Studio 2012 Ultimate called Layer Diagram. Layer Diagram belongs to the ‘Architecture’ menu provided in VS 2012. Although this menu is more useful for Solution Architects, because of the various diagrams like UML class diagram, Sequence diagram, Used Case diagram, Layer diagram etc, I feel developers can also make use of Layers diagram to verify the application structure. Layer Diagram are used to describe the application structure at a higher level. The major advantage of these diagrams is to verify that the code satisfies the high level application design. This validation ensures that the code and the design architecture are inline during the development process.

The design of the Layer diagram is really very simple. It shows major components of the architectural design and the dependencies between these components. The diagram contains a node, which is known as “Layer”. The layer is a logical group of the application architecture.

Consider a scenario, where the application is logically divided into components like, Data Access Layer (DAL), Business Logic Layer (BLL) and User Interface Layer (UI). The data communication across all the layers is now handled by the Data Transfer Object (DTO) or Entities. This means that the DTO layer is supposed to be commonly used by all the layers of the application architecture. The application architecture is as shown below:

The above diagram provides a high level expected structure of the application system. One of the most important components of the above diagram is the use of the Data Transfer Object (DTO). Every component of the application is making use of the DTO layer for Data communication.

Let us assume for discussion that the developer is responsible for designing the application using C# as a programming language, it may be Desktop or Web application and is designed as shown below:

(Note: The layer diagram is also available in VS 2010 Ultimate)

Step 1: Open VS 2012 and create a blank solution, name it as ‘Layered_Application’. In this solution, add a new Class library project and name it as ‘Com.DAL’. Rename ‘Class1.cs’ to ‘DataAccess.cs’ and add the following classes in it:

using System;
using System.Collections.Generic;

using System.Data.SqlClient;
namespace Com.DAL
{
/// <summary>
/// The DTO object
/// </summary>
public class EmployeeInfo
{
    public int EmpNo { get; set; }
    public string EmpName { get; set; }
    public int Salary { get; set; }
    public string DeptName { get; set; }
    public string Designation { get; set; }
}
/// <summary>
/// The Data Access Class
/// </summary>
public class DataAccess
{
    SqlConnection Conn;
    public DataAccess()
    {
        Conn = new SqlConnection("Data Source=.;
        Initial Catalog=Company;Integrated Security=SSPI");
    }

    public List<EmployeeInfo> GetEmployees()
    {
        List<EmployeeInfo> Employees = new List<EmployeeInfo>();
        Conn.Open();
        SqlCommand Cmd = new SqlCommand();
        Cmd.Connection = Conn;
        Cmd.CommandText = "Select * from EmployeeInfo";
        SqlDataReader Reader = Cmd.ExecuteReader();
        while (Reader.Read())
        {
            Employees.Add(new EmployeeInfo()
            {
               EmpNo = Convert.ToInt32(Reader["EmpNo"]),
               EmpName = Reader["EmpName"].ToString(),
               Salary = Convert.ToInt32(Reader["Salary"]),
               DeptName = Reader["DeptName"].ToString(),
               Designation = Reader["Designation"].ToString()
            });
        }
        Reader.Close();
        Conn.Close();
        return Employees;
    }
}
}

The above code contains EmployeeInfo class. This is the DTO object. The class DataAccess contains ‘GetEmployees’ method which returns List of EmployeeInfo. As the part of the application architecture diagram, it specifies that DAL makes use of DTO. The above DataAccess class satisfies the rule.

Build the library and make sure that it is error free.

Step 2: In the solution, add a new class library project and name it as ‘Com.BLL’. Since this class library is depending upon the DAL, add the reference of the Com.DAL.dll in this project. This reference will make the DataAccess class and the important EmployeeInfo DTO available to BLL. This is again as per the rule in the above architecture diagram.

Step 3: From the Com.BLL project, rename class1.cs to ‘BusinessAction.cs’ and add the following class and code:

using System.Collections.Generic;
using Com.DAL;

namespace Com.BLL
{
    public class BusinessAction
    {
        DataAccess objDs;

        public BusinessAction()
        {
            objDs = new DataAccess();
        }

        public List<EmployeeInfo> GetEmployees()
        {
            var Employees = objDs.GetEmployees();
            return Employees;
        }
    }
}

The above code shows that the constructor instantiate a DataAccess class from DAL. The BusinessAction class contains a GetEmployees method which returns List of EmployeeInfo, the DTO.

Build the project and make sure that it is error free.

Step 4: In the same solution, add a new WinForm project (you can make use of ASP.NET, MVC, WPF etc.) and name it as ‘Com.UI’. Now as per the architecture, the UI layer makes call to BLL and also makes use of DTO for parameter passing and displaying output. So in the UI layer, add reference to Com.BLL.dll and Com.DAL.dll. The reference of DAL is for making use of EmployeeInfo, the DTO object.

Step 5: Design the WinForm with a Button and DataGridView and write the following code on the click event of the Button:

private void btnGetEmployees_Click(object sender, EventArgs e)
{
    var Employees = new BusinessAction().GetEmployees();
    dgvEmployees.DataSource = Employees;
}

The above code makes call to the BLL and reads Employees as return data and assigns it to the DataGridView.

Step 6: Make UI project as startup project and run the application. The result will be as shown below:

Now we need to check whether the code written by the developer really conforms the architectural diagram provided. Let’s revisit the architecture diagram. It clearly specifies that all the components (UI, BLL, and DAL) make use of DTO, in-short, these components are dependent upon DTO. Now if the DTO needs to be changed by adding or removal of a property, then as per the current code, it is required to make change in the DAL and rebuild it. This creates problem by increasing maintenance cost. So let’s verify the code using Layer Diagram.

Step 7: In the solution, add a new Model project, name it as ‘MDL_Layer_Diagram’. In this project, right click and add select new item and select Layer Diagram, name it as ‘AppLayer’ as shown below:

Step 8: From the toolbox, add ‘Layer’ to the designer and name every layer as shown below:

Step 9: To associate the above layer with the various projects in the solution, drag-drop each corresponding project in the corresponding layer, e.g. Drop-Drop, Com.DAL project in Data Access Layer project and so on. The diagram will be as shown below:

‘1’ specifies project associated with the Layer.

Step 10: As per the architecture diagram provided, there is dependency across layers e.g. UI dependent upon BLL which is dependent upon DAL. Set the dependency using Dependency control from the toolbox as below:

This completes the Layered diagram.

You can now see the Layer explorer, which shows the association between the Layers and the component as shown below:

Step 11: We need to validate the Layer Diagram to conform whether components in the code satisfy the architecture design or not. To do this, right-click on the designer and select ‘Validate Architecture’ as below:

Visual Studio will perform validation and the following result will be displayed:

The above image shows a validation error, this means that even though the application is showing the desired result,  the code components are not getting conformed as per the architecture diagram. If you carefully read the error message, it clearly specifies that there exist an invalid dependency between Com.UI and Com.DAL. This is because Com.DAL contains the EmployeeInfo DTO object and since this DTO object is required by UI to display result data, we need to add the reference of DAL in the UI layer also. The problem is the reference of DAL is present in both BLL and UI layers where as per the architectural diagram DTO is supposed to be the separate component all together.

So now the application code needs to be changed as shown below:

Step 12: In the solution, add a new Class library project and name it as ‘Com.DTO’. In this project, move the EmployeeInfo class from Com.DAL and build the project.

Step 13: Add the reference of Com.DTO.dll into the Com.DAL project and build it. Also add the reference of the Com.DTO into Com.BLL project and build it. From Com.UI project, remove reference of Com.DAL.dll and add reference of Com.DTO.dll and build it. After running the UI application, you will get the same result as shown in Step 6.

Step 14: Open the Layer diagram and add a new Layer in it, name it as ‘Data Transfer Object Layer’. Associate this layer with Com.DTO by dragging dropping Com.DTO into this new layer. Also set the dependency from UI, BLL and DAL layers to this new DTO layer as below:

Step 15: Validate the diagram. The result of the validation will be as shown below:

This conforms the application architecture diagram to the code structure.

Conclusion: The Layer Diagram is beneficial for mapping the coding structure with the architectural diagram. In a real application system development scenario where processes are followed, a solution architect provides the expected architecture design to the developer and then the developer has to implement the architecture in his code where several libraries need to be created which have dependencies between each other. The Layer diagram helps to verify the coding efforts by developer with respect to the architecture diagram and hence streamline communication between solution architect and developer community in the organization.

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

Mahesh Sabnis is a DotNetCurry author and a Microsoft MVP having over two decades of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions), and Front-end technologies like Angular and React. Follow him on twitter @maheshdotnet or connect with him on LinkedIn