Microsoft.NET

……………………………………………….Expertise in .NET Technologies

Quick Tour of Visual Studio IDE

Posted by Ravi Varma Thumati on February 10, 2015

Configuring Development Environment

Booting the new IDE for the first time will result in a dialog box asking you to choose your environment settings. As Visual Studio becomes the central tool for so many developers, testers, architects, and even project managers, it’s harder and harder to satisfy them all with a single tool. To aid in this dilemma, Microsoft has created an entire set of environment settings that are configured for the usual developer type. For instance, if you set your environment to C#, the New Project dialog box will automatically highlight C# projects above other languages. Figure below shows the available options.

Only your first use of Visual Studio will launch the default settings dialog box. On subsequent visits, you’ll go straight to the tool. However, you might consider switching your environment settings if you do a lot of switching from one language to another or if you switch roles. For example, C# developers might use the C# development settings most of the time. They might then toggle to the Tester or Project Management Settings if they intend to do a lot of testing for the project.

 IDE1

The Environment Settings options dialog box.

You manage your environment settings from the Tools menu’s Import and Export Settings option. Figure below shows the first screen in this wizard. This screen allows you to choose to execute either a settings export or an import.

 IDE2

The Import and Export Settings Wizard.

You can choose from several setting collections when importing. There are a few default collections, including those based on language and role (such as web developer and tester). In addition, you can browse to a custom settings file. Figure shows the import settings collection options.

 IDE3

Choosing a collection of settings for import.

Another key screen to the Import and Export Settings Wizard is the settings selection screen. On this screen, you decide which options are important for import. This allows you to pick and choose settings you plan to import. For example, you may love the way a friend has configured her code editor in terms of font and contrasting colors, but you do not want all her other settings, such as her keyboard configurations. Figure 2.5 provides a glimpse at the granular level to which you can manage your environment settings.

IDE5

Choosing settings to import.

The Start Page

When you first get into the Visual Studio 2008 IDE, you are presented with the Start Page for the tool. This feature looked promising in previous versions but now seems to be actually useful in Visual Studio 2008. Figure 2.6 shows an example of the new Start Page.

The Start Page contains a number of web parts. Starting from the upper left, there is the Recent Projects area. From here, you can launch a project you were recently working on or create a new one. Moving down, you see the Getting Started area. This web part is useful if you are looking for learning opportunities with the tool. This can be a great place to set out exploring with a starter kit, what’s new, or the “How do I…?” question-and-answer section. Below this is the headlines area for Visual Studio.

Here, you are notified of recent releases or can provide feedback to Microsoft yourself. Finally, in the middle of the page are the headlines and offers from MSDN. This area can be useful to peruse at project

Startup—especially if you find yourself spending too much time on the project and feel yourself losing touch with the goings-on in the development world.

Startup Options

If you just don’t like the Start Page or prefer to launch directly into the project you’ll be spending the next few months of your life working on, you can customize what happens when the IDE boots. From the Options dialog box (Tools, Options), choose the Environment node and then the Startup leaf. Figure shows some of the options available at startup.

 IDE7

FIGURE The Visual Studio 2008 Start Page.

IDE6

FIGURE Startup options.

From here, you can configure where to get your start page news items. You can also tell the environment to load the last solution, show the new or open project dialog boxes, open your browser’s home page, or do nothing (show an empty environment). You can also configure how often your content is automatically refreshed from the server.

Your First Project

The next, natural step is to create your first project. Doing so will quickly expose you to some of the basic project and file management features within the IDE. From the File menu, you’re given the option to create a new project or website. Projects are simply templates that group files for Windows, Office, mobile, and similar executable applications (see Chapter 4, “Solutions and Projects”). You can also create web projects that you mix with other compiled projects. A website creates a set of web files that get promoted and managed as files (and not complied code).

Figure shows a sample website inside the IDE. We chose C# as the target language of this website. Notice that the IDE layout is relatively generic. You should expect a similar experience for your first few applications (until you’ve customized things). In the following sections, we will break down the many items on this screen; it might be useful to refer to this graphic to provide overall context as we discuss a given item.

IDE8

FIGURE a basic C# website inside the IDE.

The Menu Bar

If you’ve been working with previous versions, you should find the Visual Studio 2008 menu bar to be standard fare. It is very intuitive; options are where you’d expect them; and new menus appear depending on your place within the IDE, the tools you’ve chosen to install, and your default language. For example, a Refactor menu appears when you are in the C# code editor; the Project menu shows up when you have a project open; and the File menu configures itself differently depending on Visual Basic or C#. Table 2.1 lists (from left to right across the IDE) some of the more common menus, along with a description of each.

Note that each menu screenshot in below was taken using the C# menu default settings. In each case, Visual Basic has an equivalent, albeit slightly different, menu. In addition, the keyboard shortcut callouts in the menu items are also those of C#. Visual Basic developers will recognize a lot of them as the same. All of them can be customized to an individual developer’s preference.

Visual Studio 2008 Menus

  1. File: The File menu is used to create new projects and websites. From here, you can also add new items to the same. The File menu lets you save work, work with projects under source control, and print your code.

          IDE9

  1. Edit: The Edit menu is used for managing items on your Clipboard and fixing mistakes with Undo and Redo. In addition, the Edit menu provides access to important tools like Find and Replace and IntelliSense. The flyout menu in the graphic shows some of the advanced options available from the Edit menu, such as Format Document, which is useful to apply your formatting settings to the code with which you are working.
  1. View: The View menu provides access to the multitude of windows available in Visual Studio. If you lose your way (or window) in the tool, the View menu is the best place to look to find your bearings. From here, you can access the Server Explorer, Solution Explorer, Task List, and other key windows of the IDE. The flyout menu shows the Other Windows option—the many, many windows of Visual Studio 2008.

          IDE10

  1. Refactor The Refactor menu (C# only) provides access to options such as renaming code elements, extracting code from a method to a new method, and promoting local variables to parameters.

          IDE11

  1. Website: The Website menu is available only when you’re working with web applications. It provides access to add new items, add references to your web application, copy your website to a deployment location, and work with project dependencies. You can also set the start page for the application and access ASP.NET configuration options for the given website.

           IDE12

  1. Project The Project menu is similar to the Website menu but is available to non–web-based projects. From here, you can add new items and references to your projects, set the startup project, and change the build order for projects in your solution. In addition, you can access the Properties for a given project. This will allow you to set things such as the version of the .NET Framework you are targeting, the default namespace, and many more items.

          IDE13

  1. Build: The Build menu enables you to invoke the given compiler(s) for your solution. From here, you can force a build or rebuild on the entire solution or an individual project within the solution. You can also access the Configuration Manager from the Build menu. This dialog box allows you to control your target build in terms of debug versus release, CPU, and so on.

           IDE14

  1. Debug: The Debug menu provides developers access to the debug commands for Visual Studio. These commands include options for starting your project inside a debugging session and attaching a new debug session to an existing, executing process. In addition, you can manage debug breakpoints from this menu. The flyout menu shows some of the other debug windows available from this menu.

          IDE15

  1. Data: The Data menu allows you to manage your data sources for a given application. You can launch the new data source wizards from the items in this menu.

          IDE16

  1. Format: The Format menu allows you to manipulate the layout of controls on a window or web form with respect to one another. For example, you can select a number of controls on your form and manage the vertical and horizontal spacing between them. You can also use this menu to lock (and unlock) controls in place so that they do not accidentally get moved around.

          IDE17

  1. Tools: The Tools menu provides access to many of the tools that ship with Visual Studio. This includes managing Visual Studio Add-Ins and Macros that extend your environment (see flyout menu). You can also access tools for performance, connecting to other servers and applications, and managing your IDE settings. The items in this tool menu are covered in depth throughout the book.

          IDE18

  1. Table: The Table menu (available when in design view for a web form) is used exclusively for adding and manipulating tables on a web form. From here, you can create a new table, insert rows into an existing table, and resize table items.

           IDE19

  1. Test: The Test menu enables you to manage tests in Visual Studio. For example, you can use options on this menu to create a new test, manage existing tests, and measure test effectiveness. You can also launch test runs from here.

           IDE20

  1. Window: The Window menu allows you to manage the open windows in the IDE. You can hide windows, close all open windows, and turn an existing window such as the Solution Explorer from a docked window into a tabbed document.

          IDE21

  1. Help: The Help menu provides direct access to all the help options available from Visual Studio. For example, you can turn on dynamic help from the Help menu; doing so will have the IDE tracking your context and providing help as you need it. The Help menu also takes you to the MSDN forums, and lets you report a bug, review samples, and more. Finally, you can check for updates from here and, of course, access the help library.

          IDE22

The Many Toolbars

Visual Studio 2008 includes more than 30 toolbars. If you use a set of commands often, there is a good chance that there is a matching toolbar to group those commands. As a result, a large percentage of the toolbars are highly specialized. For example, if you are working with the Class Designer, you would, of course, use the Class Designer toolbar to manage class groups or change screen magnification. Or if you are building a SQL Query, you would use the Query Designer toolbar. We will not cover each of these toolbars here because they are highly specialized. Instead, we will stick to a quick tour and cover the common ground here and save the sidetracks for the upcoming chapters.

The Standard Toolbar

The Standard toolbar is present at all times during your IDE sessions (unless, of course, you customize things or turn it off). It provides quick access to all the commands you’ll use over and over. The standard commands are on the top left: Create New Project, Add New Item, Open, and Save. These are followed by Cut, Copy, Paste, and Undo. Figure 2.9 shows the Standard toolbar undocked from the IDE.

We suggest you learn the keyboard equivalents for such standard commands as Cut, Copy, Past, Undo, and the like. You can then remove these toolbar icons from the toolbar to save precious screen real estate for commands that have you reaching for the mouse anyway (and have harder-to-remember shortcut keys).

 IDE23

FIGURE The Standard toolbar in Visual Studio 2008.

Additional items worth mentioning include the two navigation commands on the toolbar. These are the icons that look like a document (or code file) with a blue arrow on them. One icon’s arrow points left and the other’s points right. These navigation buttons allow you to move backward and forward through your code and your solution. They keep track of special lines in your code or windows you have visited and provide one-click access up and down this line.

The button to the right of the navigation commands (the one that is a green arrow) is often called the Run or Play button. This will initiate a build of your project and launch you into debug mode. Moving to the right (downward in the graphic), you see options for initiating a search within your code. This capability can be handy for quickly finding the place where you left off or the place you are looking for. To the right of this are icons for quick access to displaying one of the many windows of Visual Studio. Just as with the View menu, these icons give you quick access to the Solution Explorer, Properties window, Object Browser, Toolbox, and so on. You even have an icon for Other Windows, which gives access to even more windows.

Customizing Toolbars

In the event that the standard toolbars that ship with Visual Studio don’t meet your needs, you can create custom ones that do. To do so, you select the Tool menu’s Customize item or right-click a toolbar in the IDE and select Customize. This launches the Customize dialog as shown in Figure 2.10. From here, you select which toolbars to show, indicate icon size for toolbar items, turn on and off tips and shortcut keys, and more.

 IDE24

FIGURE The Customize dialog in Visual Studio 2008.

To customize a toolbar, first make sure the Customize dialog is open. Then simply grab toolbar items (icons) and move them around and delete them as necessary. You can also use the Commands tab (see Figure 2.11) to add specific commands to a given toolbar. If things get messed up, you can use the Reset button from the Toolbars tab to revert to the default state.

 IDE25

FIGURE The Customize dialog’s Commands tab.

The New button enables you to create new toolbars to group existing commands. This gives you a great deal of customization options. Once it’s clicked, you name your new toolbar and use the Commands tab to add items. You can also drag commands off other toolbars and place them on your new one.

You can also configure your keyboard shortcut combinations from the Customize dialog. Use the Keyboard button to bring up the Options dialog to the environment’s keyboard options screen. Figure 2.12 shows an example. First, you find a command in the list; next, you press a shortcut key to map (or remap) a combination. Notice that if the option is already assigned a shortcut key, Visual Studio warns you before you make the reassignment.

We recommend that you do some of your own exploration into the many toolbars (and toolbar customization options) within Visual Studio. Often their usefulness presents itself only at the right moment. For instance, if you are editing a Windows form, having the Layout toolbar available to tweak the position of controls relative to one another can be a very valuable timesaver. Knowing that these toolbars are available will increase the likelihood that you’ll benefit from their value.

IDE26

FIGURE Options dialog keyboard assignments.

The Toolbox

The Visual Studio 2008 Toolbox provides access to the many controls when you’re building both Web and Windows forms. It also provides access to nearly anything that can be dragged onto one of the many designers used for creating forms, XML schemas, classes, and more. As an example, if you are building a web form, the Toolbox provides the many controls, grouped for easier access, which can be added to the form. New for 2008 are the AJAX controls. These are used for creating rich, browser-based applications, if you are working with a text editor, the Toolbox allows you to save clips of text for quick access.

Figure shows the Toolbox in a standard configuration (undocked from the IDE) for building a web form. Note that the “Standard” group of controls is closed up to highlight some additional control groups. Note that these controls are covered throughout the book. They are first covered in Chapter 6, “Introducing the Editors and Designers.”

You can customize the Toolbox to your liking. For example, you can add your own groups (called tabs). You can also configure the Toolbox to show more icons on the screen at a time. As you familiarize yourself with the various standard controls, you can turn off their text descriptions and simply show them as icons. To do so, right-click the control group (tab) and uncheck List View. Figure 2.14 illustrates the additional screen real estate you will gain in doing so.

 IDE27

FIGURE The Visual Studio Toolbox configured for a web form.

 IDE28

FIGURE The Visual Studio Toolbox configured for more screen real estate.

The Visual Designers

Visual Designers are the canvases that you work on using the mouse to create items such as forms via drag, drop, move, resize, and the like. Visual Studio 2008 ships with many such Visual Designers. Together, they allow you to build the items that make up your application (and understanding of it). Items include Windows forms, web forms, class diagrams, XML schemas, and more.

The Visual Designers all work mostly the same way. First, they take center stage within the IDE as tabbed windows surrounded by various menus, toolbars, and panes. Second, you use the Toolbox as your palette to place items on the designer. You then configure each item’s many properties using the Properties window.

Figure shows the Windows Forms Designer in action (the middle, highlighted tab). Note that the Toolbox is on the left and the Properties window is on the bottom right.

Additionally, many of the designers have their own toolbars. Note that this graphic that the Layout toolbar is shown when you’re working with forms. This allows you to easily position controls relative to one another.

 IDE29

FIGURE The Windows Forms Designer.

The Text Editors

Visual Studio 2008 has several text editors or word (code) processors. Each text editor is based on a common core that provides the basic set of functionality for each editor such as the selection margin, the capability to collapse nested items, and colorization. Each editor derives from this core and is customized to give you the editors for code (C#, VB, and so on), the XML editor, the HTML (or aspx) editor, and the style sheet editor.

The Code Editors

The code editor, for our money, is where the magic happens. It is here that you get down to business leveraging your favorite language to define objects and their functionality. Of course, you can write code outside the Visual Studio editor, but why would you? You can also write a novel using Notepad or do your taxes by hand. A good code editor means higher productivity, plain and simple. And Visual Studio has some of the best code editors around.

The code editor is front and center when you’re working on code. It handles indentation and white space to make your code clean and readable. It provides IntelliSense and statement completion to free you from having to look up (or memorize) every object library and keyword. It groups code into blocks; it provides color codes for keywords and comments; it highlights errors; it shows new code relative to previously compiled code. All in all, the Visual Studio code editor does quite a bit to keep you productive.

C# Code Editor

Figure shows the C# code editor. Some items to note include the following:

  • The code is grouped into logical sections along the left side. You can use the minus signs to close up a whole class, method, property, or similar group. This capability allows you to hide code you are not working on at the moment. You can also create your own custom, named regions to do the same thing.
  • New code is signaled inside the section groups with a colored line. Yellow is used for new code that has yet to be saved. The highlighted line turns green after a save and disappears after you close and reopen the file. This feature allows you (and the editor) to track where you have made changes to code during your current session.
  • The name of the open code file is listed as the code window’s tab across the top. The asterisk indicates that the code has changed since the last time it was saved.
  • IntelliSense is invoked as you type. You can use the arrow keys to quickly find the item in the list. Hovering over the item shows details for the given item (tip text to the right). You can press the Tab key to complete the item from IntelliSense.
  • The code is highlighted in various colors. By default, keywords are blue, comments are green, text is black, types you create are light blue, string values are red, and so on.

 IDE30

FIGURE The C# code editor.

  • The two drop-downs at the top of the code editor allow you to navigate between the classes in the file (left-side drop-down) and methods, fields, and properties within a given class (right-side drop-down).

The Visual Basic Code Editor

The Visual Basic code editor works much the same way as the C# editor. Figure shows the same code as in Figure written inside the Visual Basic code editor. Some of the differences between the editors are as listed here:

  • Horizontal lines are used to separate methods and properties within the editor.
  • The IntelliSense drop-down list is filtered into a common subset and all the possible values.
  • The code navigation drop-downs at the top of the code editor allow you to navigate the entire, active object hierarchy (including events). The left-side drop-down shows namespaces, objects, and events. The right-side drop-down shows all methods for the given type, including those you have not yet overridden. The items you have implemented are highlighted as bold within the list.

 IDE31

FIGURE The Visual Basic code editor.

Editor Customizations

Nearly every aspect of the text and code editors can be customized to your every whim. From our experience, it seems no two developers see their code the same way. You can use the Options dialog (Tools, Options) to change the editor’s background color or the color and font of various text within the editor. You can also turn on line numbering, and manage indenting (tabs) and white space. The full list of customizations for the text editor is large. You can set language and editor-specific options.

Figure shows the Options dialog box set for Fonts and Colors. From here, you can tweak the many display items in the editor in terms of their color, font, and font size. If you dig a little deeper in the Options dialog box, you will come across the Text Editor node in the option tree. From here, you can manipulate even more settings for the text editor. For example, you can remove the horizontal procedure separators in the Visual Basic editor or turn off the automatic reformatting of code by the editor. Even better, you can control how the editor automatically formats your code inside the C# editor. If you like to see all your curly braces on separate lines or prefer them to start on the line that starts the block, you can do so from here. Figure 2.19 shows some of the options available for formatting C# inside the editor.

 IDE32

FIGURE  The Options dialog box set to Fonts and Colors.

 IDE33

FIGURE  Controlling code formatting from the Options dialog box.

The Solution Explorer

The Solution Explorer allows you to group and manage the many files that make up your application. A solution simply contains multiple projects (applications). A project groups files related to its type. For instance, you can create a website, Windows Form application, class library, console application, and more. The files inside the project containers represent your code in terms of forms, class files, XML, and other related items.

The Solution Explorer is the place where you typically start when adding a new item (class, image, form) to your application. It is also used to access these items. Double-clicking an item in the Solution Explorer opens the given designer or editor associated with the type of file you request. For example, opening a file with the extension .cs opens the C# code editor. Finally, you also use the Solution Explorer during source control scenarios to check items in and out of the source database.

Figure shows the Solution Explorer undocked from the IDE. Note that a single solution is open (that is the limit), and the solution contains a few applications (called projects). One is a Windows form application (AdminUI); another is a website (Contoso); the project at the bottom is a class library (Services).

 IDE34

FIGURE  The Visual Studio 2008 Solution Explorer.

The Properties Window

It seems that with every new release and every new tool, programming becomes less and less about writing code and more and more about dragging, dropping, and configuring. The many tools, controls, and rich designers that free us from the repetitive code also now require our attention in the form of maintenance. This work is typically done through the manipulation of the literally hundreds of properties that work in concert to define our application. This is where the Properties window comes into play. It allows us to control the size, appearance, and behavior of our controls. Furthermore, the Properties window groups common properties into sets for easier access. Finally, the Properties window also gives us access to connecting the events for a given control to the code inside our application.

IDE35

FIGURE  The Properties window in Visual Studio 2008.

Figure shows the Properties window (undocked from the IDE) for a button control. Note that, by default, the window group’s similar properties into sections via banded categories, such as Appearance. You can turn off this capability and list properties in alphabetic order by clicking the AZ icon on the property toolbar. Another item worth noting is the lightning bolt icon also on the toolbar. This gives you access to the events for the given control.

Managing the Many Windows of the IDE

To round out our whirlwind tour, we thought it important to provide you guidance on customizing and managing the plethora of windows available within the IDE (lest they leave you with a postage-stamp-size window in which to write your code). To manage these windows, you really need to know only two skills: pinning and docking.

Pinning

Pinning refers to the process of making a window stick in the open position. It is called pinning in reference to the visual cue you use to perform the act: a pushpin (refer to the Toolbox title bar in Figure 2.22). Pinning is imperative because you sometimes want full screen real estate for writing code or designing a form. In this case, you should unpin (hide) the various extraneous windows in your IDE. Note that when a window is unpinned, a vertical tab represents the window (see the Solution Explorer tab in Figure 2.22). Moving the mouse near this tab will result in the window unfolding for your use. After you use it, however, it will go back to its hiding spot. Alternatively, you might be working to drop controls on that form. In doing so, you might want to pin (stick open) the Toolbox window. This keeps open just the window you are working with and closes everything else.

 IDE36

FIGURE Pinned and unpinned windows in the IDE.

Docking

Docking is the process of connecting windows to various sticky spots within the IDE. Typically, this means docking to the left, top, right, or bottom of the IDE. For example, the Toolbox is, by default, docked to the left side of the IDE. You may prefer to put it at the bottom of the screen, docked below the active designer (see Figure 2.23). You can also dock windows to one another. For example, you may want to dock the Properties window below the Solution Explorer. Or you may want the Properties window to be a tab within the same window to which the Solution Explorer is docked.

To help with docking, Visual Studio 2008 has revamped the visual cues and helpers that first appeared in 2005. First, you start with a pinned window (you cannot dock unpinned windows). You click and hold the title bar with the mouse. You then drag the window to where you want to dock it. Visual Studio will display some docking icons.

 IDE37

FIGURE Some docking options in the IDE.

 IDE38

FIGURE  A window being docked.

Four icons are at the edge of the IDE, one each at the left, top, right, and bottom. These icons are used for docking the window at the given edge of the IDE. Using these icons will result in the window being docked across the full length (or width) of the IDE. Figure 2.24 shows the window housing the Solution Explorer and related tabs being docked to the full right side of the IDE.

There is also an icon in the middle of the IDE. This icon is used for docking the selected window relative to the other windows in the IDE. For example, you might want to dock the Solution Explorer to the right side of the IDE but above the Toolbox. You would do so with the rightmost icon inside this center group. Finally, the centermost icon in the center group is used for docking a window to another window as a tabbed item (as in the Class View pane at the bottom of Figure).

Of course, you can also undock items. This is simply the process of floating windows off by themselves (outside, or on top of, the IDE). To do so, you simply grab (click with the mouse) a pinned window by the title bar and move it off to the side of the IDE or just don’t choose a docking icon.

Finally, when working with a floating window, you can right-click the title bar and tell Visual Studio how the window should behave. Figure 2.25 shows the available options. A docked window provides a down-arrow menu for access to the same features. The Floating option indicates that the window will float wherever you put it, on top of the IDE. This can be useful if you find yourself moving windows about but do not want to constantly trigger the docking options. You turn off this option by choosing Dockable (default state).  You can also add a window to the center of your IDE to behave just like a designer or code editor. This is the Tabbed Document option.

 IDE39

FIGURE The IDE window options.

Summary

We’ve covered the standard items you’ll encounter when journeying out on your own. We hope you’ve found your bearings and can begin pushing onward.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: