Home

The Code Editor

 

Introduction

There are two main ways you will manipulate an object of your application, visually or using code. In future sections, we will explore details of visually designing a control. As you should have found out from learning C#, code of an application is ASCII text-based, written in plain English and readable to human eyes. For an application, you can use any text editor to write your code but one of Visual Studio's main strengths is the code editor. It is very intuitive.

The Code Editor is a window specially designed for code writing.

Author Note Although all languages of the Visual Studio programming environment share the Code Editor, once you have started a type of application, the Code Editor is adapted to the language you are using. Its parser (a program used internally to analyze your code) behaves according to the language of your choice. The features and behaviors of the Code Editor are also different, depending on your language.

To display the code editor, in the Solution Explorer, you can click the View Code button View Code.

The Code Editor is divided in 4 sections:

The Code Editor
 

Practical LearningPractical Learning: Introducing the Code Editor

  1. To create a new class, on the main menu, click Project -> Add Class...
  2. Set the Name to Circle and click Add

The Tabs Bar

The top section of the Code Editor displays tabs of property pages. Each tab represents a file. To add a new file to the project, on the main menu, you can click

  • File -> New -> File...
  • Project -> Add New Item...

Once in the Add New Item dialog box, in the Templates section, click the type of file you want to create, type a name in the Name text box, and press Enter. After the file has been created, it is represented by a tab in the top section of the Code Editor. In the same way, you can add as many files as you judge them necessary. To access a tab:

  • You can click its name in the Tabs Bar
  • On the main menu, you can click Window and click the name of the desired tab

By default, the tabs display in the order their files were created or added to the project, from left to right. If you don't like that arrangement, click and drag its tab either left or right beyond the next tab

Practical LearningPractical Learning: Introducing the Code Editor

  1. To create a new class, on the main menu, click Project -> Add Class...
  2. Set the Name to Square and click Add
  3. To create a new class, on the main menu, click Project -> Add Class...
  4. Set the Name to Triangle  and click Add
  5. To access the Circle tab, on the main menu, click Window -> Circle
  6. Change the file as follows:
     
    using System;
    
    namespace Exercise1
    {
        class Circle
        {
            private double rad;
    
            public double Radius
            {
                get { return rad; }
                set { rad = value; }
            }
    
            public double Area
            {
                get { return rad * rad * Math.PI; }
            }
        }
    
        class Sphere : Circle
        {
            public new double Area
            {
                get { return 4 * Radius * Radius * Math.PI; }
            }
    
        }
    
        class Cylinder : Circle
        {
            private double hgt;
    
            public double Height
            {
                get { return hgt; }
                set { hgt = value; }
            }
        }
    }
  7. To access another tab, in tabs section, click Triangle
  8. Change the file as follows:
     
    using System;
    
    namespace Exercise1
    {
        class Triangle
        {
            private double bas;
            private double hgt;
    
            public double Base
            {
                get { return bas; }
                set { bas = value; }
            }
            
            public double Height
            {
                get { return hgt; }
                set { hgt = value; }
            }
        }
    
        class Kite
        {
        }
    }
  9. Save all

The Types Combo Box

The top-left section of the Code Editor displays a combo box named Types. As its name indicates, the Types combo box holds a list of the types as classes and structures that are used in the current project. You can display the list if you click the arrow of the combo box:

Each item of the Types combo box displays the name of its type associated with its parent as implemented in the code. The parent can be a class or a namespace. If you select a class in the list, the Code Editor jumps to that class and positions the caret at the beginning of the class' definition.

Practical LearningPractical Learning: Using the Types Combo Box

  1. Click the Circle tab
  2. In the Types combo box, select Exercise1.Circle

The Members Combo Box

The top-right section of the Code Editor displays a combo box named Members. The Members combo box holds a list of the members of classes. The content of the Members combo box depends on the item that is currently selected in the Types combo box. This means that, before accessing the members of a particular class, you must first select that class in the Types combo box. Then, when you click the arrow of the Members combo box, the members of only that class display:

Members

If you select an item from the Members combo box, the Code Editor jumps to that members and positions the cursor to the left of the member.

Practical LearningPractical Learning: Using the Members Combo Box

  1. In the Members combo box, select Area
  2. Press the up arrow key and add a Diameter property
     
    using System;
    
    namespace Exercise1
    {
        class Circle
        {
            private double rad;
    
            public double Radius
            {
                get { return rad; }
                set { rad = value; }
            }
    
            public double Diameter
            {
                get { return rad * 2; }
            }
    
            public double Area
            {
                get { return rad * rad * Math.PI; }
            }
        }
    
        . . . No Change
    }
  3. Save all

Code Colors

Code is written in a wide area with a white background. This is the area you use the keyboard to insert code with common readable characters. The Code Editor uses some colors to differentiate categories of words or lines of text. The colors used are highly customizable. To change the colors, on the main menu, you can click Tools -> Options... In the Options dialog box, in the Environment section, click Fonts and Colors. To set the color of a category, in the Display Items section, click the category. In the Item Foreground combo box, select the desired color. If you want the words of the category to have a colored background, click the arrow of the Item Background combo box and select one:

The Options Dialog Box

In both cases, the combo boxes display a fixed list of colors. If you want more colors, you can click a Custom button to display the Color dialog box that allows you to "create" a color.

Regions

When code of a file is long, it can be tiresome to scroll up and down. The Visual Studio .NET's Code Editor allows you to create sections that allow the code to behave like the tree arrangement of the left pane of Windows Explorer. This means that you can expand or collapse section of code. The Code Editor supports this feature automatically by adding + buttons at the beginning of the lines of sections that can be expanded or collapsed. This is the case for namespaces, classes, methods, interfaces, properties, etc. The end of an expandable section displays a - button to the beginning of the line.

Besides the default sections that the Code Editor is intuitively aware of, you can create your own region. A region must have a beginning and an end. To specify the start of a section, type #region. You can optionally add a label to the right of #region to name the region. After creating a region with #region, the Code Editor adds a + button to its left. To expand a region, you can click its + button. This changes it into a - button. To collapse the region, click the - button.

If you don't specify the end of the region, the code from #region to the end of the file would be considered as belonging to the to the region. Therefore, you should specify the end of the region you created. To mark the end of the region, in the desired line, type #endregion.

Here are examples of regions:

using System;

namespace GeometricFormulas
{	
	interface IGeometry
	{
		double Length { get; set; }
		double Height { get; set; }
	}
	
	class Square
	{
		#region Formulas to Calculate a Square's Perimeter and Area
		public double Perimeter(double side)
		{
			return side * 4;
		}

		public double Area(double side)
		{
			return side * side;
		}
		#endregion
	}

	class Trapezoid
	{
		private double _base1;
	}

	class Rectangle : IGeometry
	{
		private double len;
		private double hgt;

		public Rectangle()
		{
			this.len = 0.00;
			this.hgt = 0.00;
		}
	
		public Rectangle(double L, double H)
		{
			this.len = L;
			this.hgt = H;
		}

		#region IGeometry Members

		public double Length
		{
		    get
		    {
			// TODO:  Add Rectangle.Length getter implementation
			return len;
		    }
		    set
		    {
			// TODO:  Add Rectangle.Length setter implementation
			len = value;
		    }
		}

		public double Height
		{
		    get
		    {
			// TODO:  Add Rectangle.Height getter implementation
			return hgt;
		    }
		    set
		    {
			// TODO:  Add Rectangle.Height setter implementation
			hgt = value;
		    }
		}

		#endregion

		public double Perimeter
		{
			get { return (len + hgt) * 2; }
		}

		public double Area
		{
			get { return len * hgt; }
		}
	}

}

The Code Editor can help you specify the beginning and end of a region.

 

Home Copyright © 2007 FunctionX, Inc. Home