This chapter is from the book
This chapter is from the book
This chapter is from the book
Navigating the IDE
After you've created your first project you should get started adding features to your application. This, of course, requires that you have some base understanding of the many components of the IDE. Figure 2.12 shows a sample website inside the IDE. Notice that the IDE layout is relatively generic: Toolbox on the left, Solution Explorer on the right, and code in the middle. You should expect a similar experience for your applications (at least until you've customized things).
)
Figure 2.12 A simple Web application in the IDE.
Getting around inside the IDE is the first step to being productive. In the following sections, we break down the many items shown in Figure 2.12; it might be useful to refer to this graphic to provide overall context as we discuss a given item.
The Menus
If you've been working with previous versions of Visual Studio, you should find the Visual Studio 2010 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 programming 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 the programming language you are using.
Table 2.1 lists (from left to right across the IDE) some of the more common menus, along with a description of each.
Table 2.1. Visual Studio 2010 Menus
|
Menu |
Figure |
Description |
|
File |
The File menu is used to create new projects and websites. From here, you can also add new items. The File menu lets you save work, work with projects under source control, and print your code. |
|
|
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 such as Find and Replace and IntelliSense. The fly-out 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. |
|
|
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 fly-out menu shows the Other Windows option—the many, many windows of Visual Studio 2010. |
|
|
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. See Chapter 10, "Refactoring Code," for more information on refactoring. |
|
|
Website |
The Website menu is available only when you're working with websites (and not web applications or other project types). It provides access to add new items, add references, 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. |
|
|
Project |
The Project menu is similar to the Website menu but is available to both web and 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 enables you to set things such as the version of the .NET Framework you are targeting, the default namespace, and many more items. |
|
|
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 enables you to control your target build in terms of debug versus release, CPU, and so on. |
|
|
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 fly-out menu shows some of the other debug windows available from this menu. For more information, see Chapter 11, "Debugging Code." |
|
|
Data |
The Data menu enables you to manage your data sources for a given application. You can add new items to your database from this menu. For additional information on working with data, see Chapter 21, "Working with Databases." |
|
|
Format |
The Format menu enables 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. |
|
|
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 fly-out menu). You can also access tools for connecting to other servers and applications, and managing your IDE settings. The items in this tool menu are covered in depth throughout the book. |
|
|
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. |
|
|
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 unit test, manage existing tests, and measure test effectiveness. You can also launch test runs from here. See Chapter 12, "Instrument and Analyze Code," for more information. |
|
|
Window |
The Window menu enables 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. |
|
|
Help |
The Help menu provides direct access to all the help options available from Visual Studio. The Help menu can take you to the MSDN forums, and let you report a bug, review samples, and more. Finally, you can check for updates from here and, of course, access the help documentation. |
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
The Many Toolbars
Visual Studio 2010 includes close to 30 toolbars in just the professional edition. 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 use the Class Designer toolbar to manage classes or change screen magnification. Or if you are building a SQL Query, you use the Query Designer toolbar. We do not cover each of these toolbars here because they are highly specialized. Instead, we stick to a quick tour to cover the common ground.
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 use over and over. The standard commands are on the top left: Create New Project, Add New Item, Open, Save, and Save All. These are followed by Cut, Copy, Paste, and Undo. Figure 2.13 shows the Standard toolbar in the IDE.
)
Figure 2.13 The Standard toolbar in Visual Studio 2010.
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 an arrow on them. One icon's arrow points left and the other's points right. These navigation buttons enable 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. This can really help your productivity.
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 initiates a build of your project and launches you into debug mode. Moving to the right, 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 (the icon on the far right), 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 toolbars that do. Select the Tool menu's Customize item or right-click a toolbar in the IDE and select Customize to launch the Customize dialog box as shown in Figure 2.14. From here, select which toolbars to show, indicate icon size for toolbar items, turn on and off tips and shortcut keys, and more.
)
Figure 2.14 The Customize dialog box in Visual Studio 2010.
You make customizations to the toolbar by selecting an item and choosing one of the option buttons on the right (move up, move down, delete, and so on). If things get messed up, you can use the Reset All button for a selected Toolbar to revert to the default state.
The Toolbars tab on the Customize dialog box enables you to select which toolbars are visible. This dialog box also includes the New button, which enables you to create new toolbars to group existing commands. This gives you a great deal of customization options. After you've click the New button, you name your new toolbar and use the Commands tab (see Figure 2.15) to add items to your custom toolbar.
)
Figure 2.15 The Customize dialog box's Commands tab.
You can also configure your keyboard shortcut combinations from the Customize dialog box. Use the Keyboard button (the bottom of Figure 2.14) to bring up the Options dialog box to the environment's keyboard options screen. Figure 2.16 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.
)
Figure 2.16 Options dialog box keyboard assignments.
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 valuable timesaver. Knowing that these toolbars are available increases the likelihood that you can benefit from their value.
The Solution Explorer
The Solution Explorer enables 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 web pages, forms, class files, XML, and other related items.
Figure 2.17 shows the Solution Explorer undocked from the IDE. Note that a single solution is open (you might only have one solution open at a time), and the solution contains a few applications (called projects). One is a Windows Presentation Foundation (WPF) application (TimeTrackingInterface); another is a website (ProjectTracker); the project at the top is a class library (AppFramework).
)
Figure 2.17 The Visual Studio 2010 Solution Explorer.
You use the Solution Explorer to navigate the many items in your project. You can access an item by first selecting it and then double-clicking it. 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. You can also add a new item (class, image, form) to your application from here by right-clicking a project or folder and selecting the Add menu. Finally, you also use the Solution Explorer during source control scenarios to check items in and out of the source database. For more information, the Solution Explorer is covered in depth in Chapter 4.
The Text Editors
Visual Studio 2010 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, the style sheet editor, and more.
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 writing the guts of your application. It handles indentation and whitespace 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 provides shortcut snippets to help you quickly generate common code such as property definitions. 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 focused, organized, and productive.
The C# Code Editor
Figure 2.18 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 a whole class, method, property, or similar group. This capability enables 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.
- Code lines are numbered along the left edge of the editor. This feature can be turned on or off for different code editors in the tool.
- 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 enables you 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 navy blue, comments are green, text is black, types you create are light blue, string values are red, and so on.
- The two drop-downs at the top of the code editor enable 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).
)
Figure 2.18 The C# code editor.
The Visual Basic Code Editor
The Visual Basic code editor works much the same way as the C# editor. Figure 2.19 shows similar code as in Figure 2.18, this time written using 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 enable 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.
)
Figure 2.19 The Visual Basic code editor.
Of course there are many more text editors inside of Visual Studio. There are other language editors (C++ and F#), XML editors, XHTML editors, and more. Each of these have similar features to the two code editors shown here. We cover many of the specifics of these additional editors throughout the rest of the book.
Editor Customizations
Nearly every aspect of the many 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 box (Tools, Options) to change the editor's background color or the color and font of various text elements within the editor. You can also turn on line numbering, and manage indenting (tabs) and whitespace. You can set options based on language and editor. The full list of customizations for the editors is large.
Figure 2.20 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.
)
Figure 2.20 The Options dialog box set to Fonts and Colors.
If you dig a little deeper in the Options dialog box, you come across the Text Editor node in the option tree. From here, you can manipulate even more settings for the text editor in general for language-specific editors. 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.
One common change we see developers make is controlling how the editor automatically formats code inside the C# editor. It seems granular control of curly braces is a big deal to those who look at code all day. For instance, you might like to see all your curly braces on separate lines or you might prefer them to start on the line that starts the given code block. Alternatively, you may want a might depending on the type of code block. Fortunately, you can control all of that from the Options dialog box. Figure 2.21 shows some of these options available for formatting C# inside the editor. Notice how the option also shows an example of how the code is formatted by the editor.
)
Figure 2.21 Controlling code formatting from the Options dialog box.
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 2010 ships with many such visual designers. Together, they enable you to build the items that make up your application. Items include Windows forms, web forms, class diagrams, XML schemas, and more.
The visual designers all work in a similar way. First, they take center stage within the IDE as tabbed windows surrounded by various menus, toolbars, and panes. Second, you use the Toolbox (we discuss this in a moment) as a palette from which you place items (such as controls) onto the given designer. You then configure each item's many properties using the Properties window.
Figure 2.22 shows the WPF Form 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, note that this figure shows the Layout toolbar. This toolbar enables you to easily position controls relative to one another. We cover the majority of the visual designers in depth in the coming chapters. You can also get a better overview from Chapter 6, "Introducing the Editors and Designers."
)
Figure 2.22 The WPF/XAML Designer.
The Toolbox
The Visual Studio 2010 Toolbox provides access to the many controls when you're building 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, class diagrams, 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. Furthermore, if you are working with a text editor, the Toolbox enables you to save clips of text for quick access.
Figure 2.23 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 to highlight some additional control groups. The many controls inside this Toolbox are covered throughout the rest of the book. The bulk of the Toolbox controls are covered in Part V, "Creating Enterprise Applications."
)
Figure 2.23 The Visual Studio Toolbox configured for a web form.
)
Figure 2.24 The Visual Studio Toolbox configured for more screen real estate.
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 enables 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.
Figure 2.25 shows the Properties window (undocked from the IDE) for a web button control. Note that the window can group similar properties into sections via banded categories, such as Appearance. You can also list properties in alphabetic order by clicking the AZ icon on the Properties window toolbar. Another item worth noting is the lightning bolt icon also on the toolbar (C# only). This gives you access to the events for the given control. From the list of events you can select an event and wire it to code in your project (or double-click it to generate an event handler).
)
Figure 2.25 The Properties window in Visual Studio 2010.