Sunday, June 29, 2008

The Integrated Development Environment (IDE)

The VS2005 Integrated Development Environment (IDE) consists of windows for visual design of forms, code-editing windows, menus, and toolbars providing access to commands and features, toolboxes containing controls for use on the forms, and windows providing properties and information about forms, controls, projects, and the solution.

But more important than the physical layout of the IDE is the productivity boost it provides to you, the developer. You can visually drag controls from the toolbox onto a design window or a code window. In code editing windows , Intellisense automatically pops up a list of all the available members for any given situation. Syntax errors are highighted in code windows, signalling a problem even before you try to compile the project. The list goes on: a little time invested getting familiar with the IDE will reap tremendous payback.

Layout

VS2005 consists of a single parent window, which contains multiple windows. All the menus, toolbars, design and editing windows, and miscellaneous other windows are associated with the single parent window.

A typical layout of the IDE is shown in Fig.9 Basically, it consists of a menu and toolbar arrangement across the top and a work surface below, flanked by other toolbars and windows.

Fig.9 Typical IDE layout



When working on content files, such as page, user control, or master page files, which all have visual content, you have your choice of two different views, selectable by tabs at the bottom of the screen. Design view shows the content in a WYSIWYG mode. Source view shows the source code for the content, that is, the server control declarations, any HTML and static content, and any script blocks on the page.

VS2005 has a title bar across the top with menus below. Under the menus are toolbars with buttons that duplicate many of the common menu commands. Nearly everything that can be done through menus can also be done with context-sensitive pop-up menus, as described in the discussion that follows. You can easily customize the menu and toolbars by clicking on Tools->Customize.

The toolbars are docked along the top of the window by default. As with many Windows applications, they can be undocked and moved to other locations, either free-floating or docked along other window edges. You move the toolbars by grabbing them with the mouse and dragging them where you want.

Fig.9 shows a Source view of a web form, with the Source window occupying the work surface in the center of the screen. When you click the Design button at the bottom of the window, the work surface will display a visual representation of the page. In either Design or Source view, you can drag and drop controls, components, or data sources from the Toolbox or Server Explorer onto the page. In Design view, this puts an accurate visual representation on the page. In Source view, it puts the control or component declaration in the source code. You can work in either mode, switching to whatever is most convenient at the moment, editing in either mode and seeing those results in either mode.

Along the right side of the screen are two windows, both of which will be covered in more detail later in this chapter. The upper window is the Solution Explorer. Below that is the Properties window. Many other similar windows are available to you as will be described.

Right-clicking on the title bar of a dockable window pops up a menu with five mutually exclusive check items:

Floating

The window will not dock when dragged against the edge of the VS2005 window. The floating window can be placed anywhere on the desktop, even outside the VS2005 window.

Dockable

The window can be dragged and docked along any side of the VS2005 window.

While dragging a window to be docked, two sets of blue docking icons will appear in the window. One icon will be located at each edge of the application window and a set of five icons will be located in the center of the current window. Dragging and releasing the window to be docked over one of these docking icons will cause it to dock against the indicated edge. The center docking icon of the set of five will cause the window to be one of the tabbed windows on the central work surface.

You can double-click on the title bar or the tab to dock and undock the window. Double-clicking on the title when docked undocks the entire group. Double-clicking on the tab just undocks the one window, leaving the rest of the group docked.

Tabbed Document

The window occupies the work surface, with a tab for navigation, the same as the code and design windows.

Auto Hide

The window will disappear, indicated only by a tab, when the cursor is not over the window. It will reappear when the cursor is over the tab. A pushpin in the upper-right corner of the window will be pointing down when Auto Hide is turned off and pointing sideways when it is turned on.

Hide

The window disappears. To see the window again (unhide it), use the View menu.

In the upper-right corner of the window are two buttons: a pushpin and an X. The pushpin toggles the AutoHide property of the window. The X is the standard close window button. The work surface uses a tabbed metaphor, meaning the tabs along the top edge of that window indicate there are other windows below it. You can change to a Multiple Document Interface (MDI) style, if you prefer, in Tools Options Environment General.

You will find navigational aids along the bottom of the work surface. Depending on the context, there may be one or more buttons. When you're looking at a web page, for example, as shown in Fig.9 and 10, two buttons labeled Design and Source allow switching between the design view and underlying source code. Buttons represent the HTML hierarchy of the page, seen as "body" and "div" buttons in Fig.10 The cursor in the code window or the focus in Design view dictates which objects will be represented as buttons: one button for the current level and one more for each parent level. Clicking on any of the buttons highlights that level of code in the code window.

When you switch from a design window to a code window, the menu items, toolbars, and toolbox change in a context-sensitive manner.

Fig.10 Design view window in IDE




The code window has context-sensitive drop-down lists at the top of the screen for navigating around the application. In the HTML editor, the left drop-down lists Client Objects & Events and Client Script, and the right drop-down lists event handlers. In the C# code editor, the left drop-down contains a list of all the classes in the code, and the right drop-down has a list of all the objects in the current class.

The left margin of a code window shows a yellow bar next to lines that have been changed and a green bar next to lines that have been saved. This color coding is per session; it resets when the project is first loaded.

Along the bottom edge of the IDE window is a status bar, which shows such information as the current cursor position (when a code window is visible), the status of the Insert key, and any pending shortcut key combinations.

Building and Running

You can run your application at any time by selecting either Start or Start Without Debugging from the Debug menu, or you can accomplish the same results by pressing F5 or Ctrl-F5, respectively. In addition, you can start the program by clicking the Start icon () on the Standard toolbar .

The program can be built (i.e., .exe and .dll files generated) by selecting a command under the Build menu . You have the option of building the entire solution or only the currently selected project. For a full discussion of application deployment, please see Chapter 19.

Menus and Toolbars

The menus provide access to many of the commands and capabilities of VS2005. The more commonly used menu commands are duplicated with toolbar buttons for ease of use.

The menus and toolbars are context-sensitive (i.e., the available selection is dependent on what part of the IDE is currently selected and what activities are expected or allowed). For example, if the current active window is a code-editing window, the top-level menu commands will be the following:

-File

-Edit

-View

-Website

-Build

-Debug

-Tools

-Window

-Community

-Help

If the current window is a design window, the Data, Format, and Layout menu commands will also become available, for example.

The following sections describe some of the menu items and their submenus, focusing on those aspects that are interesting and different from common Windows commands.

File Menu

The File menu provides access to a number of file-related, project-related, and solution-related commands. Many of these commands are context sensitive. Below are descriptions of those commands that are not self-explanatory.

New

As in most Windows applications, the New menu item creates new items that you can work on in the application. In VS2005, the New menu item has four submenu items, to handle the different possibilities:

Project... (Ctrl-Shift-N)

The New Project command brings up the New Project dialog shown in Figure 2-6.

Web Site...

The New Web Site command brings up the New Web Site dialog box shown in Figure 2-2.

File... (Ctrl-N)

The File command brings up the Add New Item dialog box shown in Fig.11 It offers a range of template files, including Web Form, for adding web pages to a pre-existing project. Files created this way are located in the project directory.

Project From Existing Code...

This command brings up a wizard which walks you through the steps necessary to copy existing files to a new project.

Fig.11 Add New Item dialog box



The New command has an equivalent button in the Standard toolbar , which exposes the New Project and New Web Site commands.

Open

The Open menu item is used to open preexisting items. It has four submenu items:

Project/Solution... (Ctrl-Shift-O)

Opens a previously existing project. Radio buttons give you a choice of adding this project to the current solution or closing the current solution before opening the project.

Web Site...

An Open Web Site dialog box is presented. Buttons down the left side of the dialog box give you the choice of opening a web site from the filesystem, local IIS, an FTP site, or a remote web site. As described back in the section on Projects and Files, these buttons dictate the type of access to the web site, e.g., through the filesystem versus a virtual directory.

File... (Ctrl-O)

Presents a standard Open File dialog box, allowing you to browse to and open any file accessible on your network. Files opened are visible and editable in VS2005, but are not part of the project. To make a file part of the project, use one of the Add menu commands described later in this chapter. The Open File command has an equivalent button on the Standard toolbar.

Convert

The Convert dialog box displays a list of converters to convert from one type of project to another, e.g. VB 6.0 to VS2005, and radio buttons to add the converted project to the current solution or create a new solution.

Add

The Add menu item gives you options for adding a new or existing project or a new or existing web site to a pre-existing solution.

Advanced Save Options...

Advanced Save Options is a context-sensitive submenu that is only visible when editing in a code window. It presents a dialog box, which allows you to set the encoding option and line ending character(s) for the file.

Source Control

The Source Control submenu item allows you to interact with your source control program if it is installed, such as Visual Source Safe.

Edit Menu

The Edit menu contains the text editing and searching commands that one would expect but also includes commands useful in editing code. The most useful are discussed in this section.

Cycle Clipboard Ring (Ctrl-Shift-V)

The Clipboard Ring is like copy and paste on steroids. You can copy a number of different selections to the Windows clipboard, using the Edit Cut (Ctrl X) or Edit Copy (Ctrl-C) commands. Then, you can use Ctrl-Shift-V to cycle through all the selections, allowing you to paste the correct one when it comes around.

This submenu item is context-sensitive and is visible only when editing a code window.

Finding and replacing

VS2005 offers a number of useful options for finding and replacing text, both in the current file and in a range of files.

Quick Find (Ctrl-F) / Quick Replace (Ctrl-H). These slightly jazzed names are for slightly jazzed versions of the typical Find and Replace. Both commands call essentially the same dialog boxes, switchable by a tab at the top of the dialog box, as shown in Fig.12 and 13.

Fig.12 Find and Replace dialog box: Quick Find tab



The search string defaults to the text currently selected in the code window or, if nothing is selected, to the text immediately after the current cursor location.

The Look in drop-down offers the choice of the Current Document, All Open Documents, the Current Project, and the current method.

Fig.13 Find and Replace dialog box: Quick Replace tab



You can expand or collapse the search options by clicking on the plus/minus button next to Find Options. By default, Search hidden text is checked, which allows the search to include code sections currently collapsed in the code window. The Use checkbox allows the use of regular expressions (see the sidebar) or wildcards. If the Use checkbox is checked, the Expression Builder button to the right of the Find what textbox will become enabled, providing a handy way to insert valid regular expression or wildcard characters.

Once a search string has been entered in the Find what textbox, the Find Next button becomes enabled. In Quick Find mode is a Bookmark All button, which finds all occurrences of the search string and places a bookmark (described in the Bookmarks section later in this chapter) next to the code.

In Quick Replace mode, there is also a Replace with text box, and buttons for replacing either a single or all occurrences of the search string.

Find in Files (Ctrl-Shift-F). Find in Files is a powerful search utility that finds text strings anywhere in a directory or in subdirectories (subfolders). It presents the dialog box shown in Fig.14. Checkboxes present several self-explanatory options, including the ability to search using wildcards or regular expressions.

Replace in Files (Ctrl-Shift-H). Replace in Files is identical to the Find in Files command, described in the previous section, except that it allows you to replace the target text string with a replacement text string.

If you click on the Replace in Files tab at the top of the Find and Replace dialog box shown in Fig.14, you will get the Replace in Files dialog box shown in Fig. 15.

Fig.14 Find and Replace dialog box: Find in Files tab



This command is useful for renaming forms, classes, namespaces, projects and so on. Renaming objects is a common requirement because you don't want to be saddled with the default names assigned by VS2005.

Renaming should not be difficult, but it can be. Object names are spread throughout a project, often hidden in obscure locations such as solution files, and throughout source code files. Though all of these files are text files and can be searched and edited, it can be a tedious and error-prone task. The Replace in Files command makes it simple, thorough, and reasonably safe. Of course, you can always undo a Find and Replace operation if you make a mistake.

Find Symbol (Alt-F12). Clicking on this command will bring up the Find Symbol dialog box shown in Fig.16. This allows you to search for symbols (such as namespaces, classes, and interfaces) and their members (such as properties, methods, events, and variables). It also allows you to search in external components for which the source code is unavailable.

Fig.15 Find and Replace dialog box: Replace in Files tab



Fig.16 Find and Replace dialog box: Find Symbol tab



The search results will be displayed in a window labeled Find Symbol Results. From there, you can move to each location in the code by double-clicking on each result.

Go To...

This command brings up the Go To Line dialog box, which allows you to enter a line number and immediately go to that line. It is context-sensitive and is visible only when editing a text window.

Insert File As Text...

This command allows you to insert the contents of any file into your source code, as though you had typed it in. It is context-sensitive and is visible only when editing a text window.

A standard file browsing dialog box is presented for searching for the file to be inserted. The default file extension will correspond to the project language, but you can search for any file with any extension.

Advanced

The context-sensitive Advanced command is visible only when editing a code window. It has many submenu items. These include commands for the following:

-Creating or removing tabs in a selection (converting spaces to tabs and vice versa)

-Forcing selected text to uppercase or lowercase

-Deleting horizontal white space

-Viewing white space (making tabs and space characters visible on the screen)

-Toggling word wrap

-Commenting and uncommenting blocks of text

-Increasing and decreasing line indenting

-Searching incrementally (described next)

Incremental search (Ctrl-I)

Incremental search allows you to search an editing window by entering the search string character by character. As each character is entered, the cursor moves to the first occurrence of matching text.

To use incremental search in a window, select the command on the Advanced submenu or press Ctrl-I. The cursor icon will change to a binocular with an arrow indicating the direction of search. Begin typing the text string to search for.

The case sensitivity of an incremental search will come from the previous Find, Replace, Find in Files, or Replace in Files search (described earlier).

The search will proceed downward and left to right from the current location. To search backward, use Ctrl-Shift-I.

The key combinations listed in Table 2 apply to incremental searching.

Table 2. Incremental searching



Bookmarks

Bookmarks are useful for marking spots in your code and easily navigating to them later. Several context-sensitive commands are on the Bookmarks submenu (listed in Table 3, along with their shortcut key combinations). Unless you add the item to the task list, bookmarks are lost when you close the file though they are saved when you close the solution (as long the file was still open).

Table 3. Bookmark commands



This menu item only appears when a code window is the current window.

Outlining

VS2005 allows you to outline, or collapse and expand, sections of your code to make it easier to view the overall structure. When a section is collapsed, it appears with a plus sign in a box along the left edge of the code window. Clicking on the plus sign expands the region.

You can nest the outlined regions, so one section can contain one or more other collapsed sections. Several commands facilitate outlining shown in Table 4.

Table 4. Outlining commands



You can set the default behavior for outlining with the Tools->Options menu item. Go to Text Editor and then the specific language for which you want to set the options. The outlining options can be set for VS2005 under Basic->VB Specific and for C# under C#->Advanced.

IntelliSense

Microsoft Intellisense technology makes the lives of programmers much easier. It has real-time, context-sensitive help available, which appears under your cursor. Code completion automatically completes words for you, reducing your typing. Drop-down-lists provide all methods and properties possible in the current context, available at a keystroke or mouse click.

Unlike previous versions of Visual Studio, Intellisense works in all code windows, including the C# code-behind files, but also within server-side (script) and client-side (HTML) code in content files, i.e., in .aspx and .ascx files.

The default Intellisense features can be configured by going to Tools->Options and then the language-specific pages under Text Editor.

Most of the Intellisense features appear as you type inside a code window, or allow the mouse to hover over a portion of the code. In addition, the Edit->Intellisense menu item offers the commands shown in Table 5.

Table 5. Intellisense commands



The member list presents itself when you type the dot following any class or member name.

Every member of the class is listed, and each member's type is indicated by an icon. There are icons for methods, fields, properties, events, etc. In addition, each icon may have a second icon overlaid to indicate the accessibility of the member: public, private, protected, and so on. If there is no accessibility icon, then the member is public.