Chapter 2 -- Using the Integrated Development Environment

Chapter 2

Using the Integrated Development Environment

The Visual InterDev IDE and Project System

The Microsoft Visual InterDev 6 integrated development environment (IDE) is much like the one provided by Microsoft Visual Basic. The interface provides a drag-and-drop environment, a Toolbox, a Task List, and a built-in WYSIWYG editor. The menus and toolbars have changed from those in Visual InterDev 1, along with almost every other part of the working environment.

Users of Microsoft development tools will be immediately familiar with the new IDE, and new users should find it intuitive and easy to use. The IDE provides an integrated, global work area for Visual InterDev Web projects. You can open multiple projects simultaneously within the work area. For example, you might want to create a Visual InterDev Web page for use in one project and then open another project and reuse the same page. Opening both projects in the IDE allows you to simultaneously test and modify those projects.

Views and Windows

Visual InterDev 6 includes several views in its main window for working with HTML and Active Server Pages (ASP) Web pages:

• Design view Displays the page in WYSIWYG view, almost as you would see it in a browser. You can create and modify pages in this view.
• Quick view Displays pages as they appear in Internet Explorer 4. However, server script does not execute and data-bound controls (DTCs) do not display data.
• Source view Displays the source code for pages. Objects such as DTCs and HTML intrinsic controls are shown as they appear in a rendered Web page. Pages can be created and modified in this view.

In the Design and Source views, the HTML Outline window, which you can access in the bottom left corner of the IDE, shows the HTML tags for the particular Web page you are viewing. You can create and modify pages by using this window.

In Source view only, the Script Outline window shows the properties, events, and methods for the objects on the viewed Web page.

Figure 2-1 shows the IDE in Source view displaying the script for a page. You change the view in the IDE by clicking a different tab at the bottom of the current view.

The Project Explorer window

The Visual InterDev 6 IDE includes a main Project Explorer window that lets you view and navigate a Web site using the Windows Explorer-based metaphor. The Project Explorer presents the entire site, including the site's content (such as HTML pages, GIF and JPG images, controls and applets, Active Server script files, and other files) and its complete subdirectory structure. Displaying a hierarchical list of the items in a Visual InterDev project or solution (which we'll discuss soon), the Project Explorer provides you with a window into your project and serves as your central point for working with file and data type objects. Take another look at Figure 2-1 to see an example of the Project Explorer displaying a project's structure.

Figure 2-1. Visual InterDev's integrated development environment provides multiple ways into your project, including three main views and various windows depicting information and enabling you to modify the project.

The Project Explorer interface is quite intuitive. You can drag items from Project Explorer and drop them into the editor and you can drag items from Windows Explorer and drop them in Project Explorer. Project Explorer also features a context menu that you can access by right-clicking any item in the window.

To make items in Project Explorer active, select the item with the mouse or move the cursor. Once an item is active, you can rename it, display its properties, and take other actions. Note also that Project Explorer is automatically updated every time you change a setting, insert or change a file, or perform any action with Developer Studio. Project Explorer actions work just like those in Windows Explorer. For instance, to copy a file, you must hold down the Control key when you drag and drop the file. If you do not hold down the Control key, the file will be moved instead of copied. You can rename a file by clicking on the file and pressing F2 or by right-clicking the file and selecting Rename. You can also rename a file by clicking it once, waiting a second, and then clicking it again.

You can also select multiple items in the window by using the same techniques used in Windows Explorer. To select multiple contiguous items, click the first item and then, while holding down the Shift key, click the last item of the group you want to select. You can also use either the up or down arrow key with the Shift key to select contiguous items. Select multiple noncontiguous items by clicking the first item and then, while holding down the Ctrl key, clicking any additional items you want in the selection. You can expand and collapse the project lists and folders in the project by clicking the + or - icon to the left of the project name or item. If you want to edit or examine a particular element of the site, double-click the file. Visual InterDev will display the Open File dialog box, asking you if you want to retrieve a working copy or open the file in read-only mode. You can also check the Use As Default Response check box to make your answer the default for future files. If you select Get Working Copy, the file is retrieved from the site, copied to your workstation, and opened in the appropriate editor for that file type. Once you make the desired changes, you can save the changes locally or save the file on the Web server.

You can reset your default answer by using Tools|Options and displaying the Projects|Web Projects properties. The options under When Opening A File control what happens when you double-click a file in Project Explorer.

Finally, you can also preview a page in a browser by right-clicking the page in Project Explorer and selecting View In Browser or Browse With.

The Properties window

The Properties window lists the design-time properties for selected objects and their current settings. As you work with objects, the Properties window will be updated continually to display the current properties for the current object. As you change properties, the changes are applied immediately.

Figure 2-2 shows the Properties window, containing the properties for the Textbox design-time control.

You can display the properties in a category format by clicking the Categorized button on the Properties window toolbar.

The first property shown in the Properties window in Figure 2-2 is Custom. You can click the ellipsis to the right of Custom, or click the Property Pages button (that is, the third button) on the Properties window toolbar, to make Visual InterDev 6 display the Properties page for the object. Figure 2-3 shows the Custom property pages for the Textbox object shown in Figure 2-2.

Figure 2-2. The Properties window displays the properties for an object and allows you to change them at design time.

Figure 2-3. The Properties page for an object organizes the properties and can provide additional features beyond those in the Properties window.

The Properties window and the Properties page will display properties for the currently selected item. In the design window, just click on the item, and the property display will update. You can also use the drop-down list at the top of the Properties window to display the properties for another item.

The Data View window

Visual InterDev 6 has a new Data View window display, as shown in Figure 2-4.

Figure 2-4. The new Data View window has been enhanced by the addition of its own toolbar and the enrichment of its context menu.

Data View is available at any time in a project's Data Environment. (See Chapter 12 for more information about the Data Environment.) You can use Data View for many different tasks, including:

• Providing a view into a database that your project has a connection to
• Supplying tables to drop into Query Designer
• Providing access to the Stored Procedure and Trigger editors
• Copying SQL Script to the clipboard
• Displaying the properties for a table or a column
• Providing access to database diagrams and table design features

The Toolbox

The Toolbox displays design-time controls, ActiveX controls, Java applets, Java Beans, HTML intrinsic controls, and HTML and code scraps. The elements displayed in the Toolbox are based on the editor you are using and are enabled only when the associated editor is active.

While each Visual Studio application has its own default set of Toolbox items, the Toolbox always contains the pointer tool. The pointer is used to resize or move a control that has been drawn on a form.

You can work in the following ways with the Toolbox:

• Drag Toolbox items and controls from the Toolbox and drop them onto pages in one of the editors.
• Double-click a Toolbox item to insert it at the current cursor position in the page currently open in an editor.
• Place new items in the Toolbox by dropping them onto the Toolbox. For example, you can drag an item, such as an ActiveX control, from the Windows Explorer and drop it onto the Toolbox. You can also drag text from the editor to the Toolbox, thereby creating a named code fragment that you can reuse. And you can paste items from the clipboard onto the Toolbox by right-clicking the Toolbox and selecting Paste.
• Rearrange items on a Toolbox tab by dragging them to a new location.
• Delete an item from the Toolbox.
• View Toolbox items in a list view format by selecting List View (which is the default setting) from the context menu when you right-click the Toolbox window.
• Customize the Toolbox by creating tabs for custom groups that contain Toolbox items.

Note that items that you add to the Toolbox and changes that you make there appear only on the machine on which they were added or created.

You can add your own tabs to the Toolbox by following these steps:

1. Right-click the Toolbox.
2. Select Add Tab from the context menu.
3. Type the name for the new tab.

As mentioned, the Toolbox can be extended by adding other controls or text. You can add items to the Toolbox by dragging them and dropping them onto the Toolbox. You generally add ActiveX controls to the Toolbox by using the Customize interface:

1. Right-click the Toolbox.
2. Select Customize Toolbox from the context menu.
3. Click the check box beside the component you want to add. You can also click the Browse button to look for the component's executable file.

Projects and Solutions

Your work with Visual InterDev 6 will be based upon projects and solutions. There are two kinds of projects you can create with Visual InterDev—Web projects and database projects, both of which we'll discuss in this book. A project is a collection of all the files in a project, the settings for that project when it was last saved, and the configuration of Developer Studio when the project was last saved.

A Visual InterDev 6 Web project consists of, simply put, a Web site. Unlike with traditional client-server tools, when you open a Web project with Visual InterDev, you are actually opening a live view of a site as it exists on the Web server. The server can be a personal development server running on your workstation, but more typically it is a staging or production Web server running on a network. The IDE is thus a complete Web site management tool that lets you easily modify the structure of a site (for example, by adding a subdirectory) and edit, add, move, rename, and delete files and folders on the site.

A solution is a container for projects. A solution might contain only one project, or it might contain multiple projects. The information for a solution is stored in an .sln file named for the solution. For instance, a solution named 32XStuff has a solution file named 32Xstuff.sln. This file is stored in the parent directory of the first project in the solution. The "File Types" section at the end of this chapter contains more information on project-related and solution-related file types.

Multiple projects can be opened simultaneously in a solution. Solutions in Visual InterDev 6 provide the same context as that provided by the Workspace in Visual InterDev 1. If there's only one project in a directory and the solution file has the same name, when you open a project file (*.v?p) the solution file is automatically opened. This enables to you to have a project participate in multiple solutions.

The project model is multiuser, allowing multiple developers to work on the same site simultaneously. Check-in and check-out capabilities are provided via integration with the Microsoft Visual SourceSafe version control system. The project system uses the Microsoft FrontPage server-side extensions, which are available for all major Web servers in both the Microsoft Windows NT and UNIX environments. Visual InterDev users and FrontPage users can also work together, simultaneously, on the same sites.

The IDE makes it easy for you to create new sites via wizard technology and to import content, including entire directory trees, into existing sites. You can also browse pages in the project directly from the IDE. This is an important productivity feature because you do not have to pull up a separate Web browser window to view a site under construction. The View in Browser option uses the default browser on your system. When you use this feature, the page you are viewing actually runs in the browser, including all Java applets, ActiveX controls, ActiveX documents, scripting, style sheets, and HTML/DHTML features such as tables and frames.

The IDE also provides a Browse With feature so that you can set up another browser (for example, Netscape Navigator) and with three mouse clicks preview any page of a project in a separate window running that browser.

And you can use the IDE's text editor or HTML editor to edit files in your projects. By default, the IDE associates itself with many file extensions in Windows, including:

• *.txt Text files
• *.asp Active Server Pages files
• *.html HTML files
• *.htm HTML files
• *.java Java application source files
• *.bat DOS batch files
• *.cmd OS/2 and NT command files

To use the IDE's editors to open one of these files, right-click on the file from within Windows Explorer and choose Edit With Visual Studio. If you are using Visual InterDev and you have a file in your project that has an extension that the IDE does not recognize, select the file in Project Explorer, right-click it, and then choose the Open With... command. The Open With... dialog box will display all of the IDE's internal editors so that you can choose one and make it the default editor for that file type.

If you want to open a project's file without loading the whole project, choose the File|Open File command.

The IDE can also open Word files, Excel files, or any file type that can be hosted as an active document. Use the File|Open File command to open these files. The IDE will transform to host Word, but you'll still have all your docking windows available. This is useful when using Word to document specifications or schedules in a project, and you can read or update them without leaving the IDE.

Using Menus and the Keyboard

There are often several ways to accomplish a given task within Developer Studio. Standard Windows-based elements such as toolbars, menus, context menus, and drag-and-drop operations are available for different tasks and sometimes for the same task. The Developer Studio menus contain many options for Visual InterDev projects. You can use the menus to open a Web site or a file, insert a data source into a project, or rearrange the windows displayed within Developer Studio. Be aware that Developer Studio menus can change, depending on the other applications you have installed on your system. For example, if you have Microsoft Visual J++ installed, you will see Build, Debug, and other options that are specific to Visual J++.

The material in this chapter, unless otherwise stated, assumes a default installation of Visual InterDev with no additional Developer Studio-hosted products installed.

As you move around within Developer Studio, notice also that the IDE's menus change in response to your actions. For instance, when you place the cursor in a file, several new options appear on the Edit menu. Other menu options are also added and removed as the context of the current environment changes.

The next few paragraphs describe the various menus.

The File menu is the far-left menu and is used for most file-related tasks, such as creating new files, projects, and solutions; opening existing files, projects, and solutions; and, of course, saving files, projects, and solutions. The File menu also contains other utility commands for file-related tasks.

The Edit menu contains commands related to manipulating text and other attributes within an Edit window. For instance, the standard Cut, Copy, Paste, and Undo commands are located here. The commands on the Edit menu can change, depending on where the cursor is when the Edit menu is selected. For instance, the bottom part of the menu will show the Advanced and Insert File As Text commands when the cursor is located in an HTML page, but you won't see those entries when you are editing a text file.

The View menu contains commands that change Visual InterDev's display characteristics. These include the Refresh command for updating the display and the View Links command, which displays the Link View for the current page and the Broken Links report for troubleshooting links in a site. The View menu also includes the View In Browser and Browse With commands for previewing Web pages.

The Project menu contains commands for inserting new items into the current solution and performing general project-level actions. A command can be as simple as one that inserts a new file into the current project or can be more complex, such as one that inserts an entire project into the current solution. The Project menu also contains commands that work on either an entire project or an entire Web site, such as the Deploy Solution command.

The Tools menu provides direct access to setting Visual InterDev options and customizing the Toolbox. You will also find the View Links On WWW command on the Tools menu.

The Window menu contains items familiar to anyone who has used a multiple-document interface (MDI) application such as Microsoft Word or Microsoft Excel.

Although context-sensitive help is available on a seemingly endless array of subjects throughout Visual InterDev simply by pressing the F1 key, the Help menu also provides access to this information.

You can customize Visual InterDev menus with these steps:

1. Right-click a menu, and select Customize from the context menu.
2. Click the Commands tab to display the Customize dialog box.
3. Select the Command Category that contains the command you need.
4. Select the command you need from the Commands list.
5. Drag the command, and drop it where you want it to appear on the menu.
6. Close the Customize dialog box.

Regarding the keyboard, several keystrokes are especially useful in Visual InterDev. The Esc key will take you from any tool window back to the current document window. Pressing Shift-Esc will close any tool window.

Drag-and-drop actions and popup menus

Developer Studio makes the most of point-and-click technology. The easiest way to do almost anything is to either drag-and-drop an element or right-click the mouse to display a popup menu. Once you get acquainted with the IDE, your productivity will take another big jump over what you can accomplish in other environments. Until you become more familiar with Developer Studio, experiment with dragging and dropping elements and right-clicking the mouse instead of looking through every menu and toolbar. We have documented a lot in this book, but we've also left a few pleasant surprises for you to discover.

You can click the right mouse button at any time to display a context-sensitive (popup) menu of frequently used commands relating to the area in which you click the mouse. This method works throughout Developer Studio in views, Project Explorer, and other areas. For instance, if you right-click over an HTML page, the menu shown in Figure 2-5 appears.

Figure 2-5. These menu commands work within an HTML page.

Any item on the menu that is not relevant to the current cursor position is grayed out, indicating that the item is unavailable. The available items on a menu change as you move the cursor. Even within a given window—say, an HTML file—the popup menu can change. For instance, if you right-click a design-time control, the Show Run-Time Text command is available. If you right-click anywhere else, the Show Run-Time Text command is not on the menu and thus is not available.

If you right-click over a filename in Project Explorer, the menu shown in Figure 2-6 appears.

We recommend that you spend some time right-clicking around in the IDE in different places to familiarize yourself with the available options. Each IDE area has a different set of options that are designed to work with the particular item you click on. For instance, you can customize a toolbar by right-clicking it.

Drag-and-drop options also work in many places. You can drop the URL for a file into an HTML page by simply grabbing the filename in the File View of the Project pane and dropping it into a page in the Edit window. To insert a Data Command, just grab the command in Project Explorer and drop it into an ASP Web page. It doesn't get any easier than this!

Figure 2-6. These menu commands are available for files in Project Explorer.

Table 2-1 illustrates some of the elements that you can drag-and-drop into a page that is open in Design or Source view. Remember, not all drag-and-drop elements are included in this table.

Table 2-1. Drag-and-drop elements in the editors.

Drag-and-Drop Element	Source View	Description
Data Command	Project Explorer	Inserts a Recordset design-time control
Data Command Fields	Project Explorer	Inserts a design-time control for each field and links it to the Recordset
File	Project Explorer	Inserts the URL for a file into the file open in the editor, complete with an anchor tag
Graphic File	Project Explorer	Inserts an IMG tag
View	Data View	Inserts the SQL for the view
Stored Procedure	Data View	Inserts the SQL for the stored procedure
Toolbox item	Toolbox	Inserts the text or object
Text or object	Source or Design View Editors	Drag text or an object and drop it onto another location on a page
Text	Source View Editor	Insert text from a file into the Toolbox

Using the Find Command

The Find dialog box lets you do different types of searches from one window. You can use the Find command to search within any of the following:

• The current document (the default)
• All open documents
• The current selection
• The current project folder
• Any number of folders that you choose

You can activate Find by pressing Ctrl-F or through Edit|Find and Replace.

If you want to search in multiple folders, type the paths separated by commas in the Look In: combo box. To refresh the results list when you are doing a multifile search, click the Find button. To step among the results in the results list, press F3. In addition to finding text, you can do automatic search-and-replace operations with Find. You can also dock the Find window by dragging its title bar to the Project Explorer or another window. Doing this can be helpful when you are stepping through large numbers of hits in the results list. If you want to hide a column in the results list of the Find window, simply drag the divider to the right of the column's heading to size the column down to zero.

Toolbars

Visual InterDev 6 provides numerous toolbars that are used to accomplish different tasks. These toolbars, like the IDE's menus, operate from a standard set of commands that are provided by Visual InterDev and Visual Studio. The toolbars contain buttons that are shortcuts to some commonly used menu items. You only need to click a toolbar button once to activate a task.

You can customize toolbars by changing their location, adding commands, removing commands, resizing them, and more. This allows you to customize the interface that Visual InterDev provides.

You can add commands to toolbars following steps similar to those for adding a command to a menu:

1. Right-click a blank spot on a toolbar, and select Customize from the context menu.
2. Click the Commands tab.
3. Select the Command Category that contains the command you need.
4. Select the command you need from the Commands list.
5. Drag the command, and drop it where you want it to appear on the toolbar.
6. Close the Customize dialog box.

To remove commands from a toolbar:

1. Point the mouse at the item you wish to remove from a toolbar.
2. Press and hold down the Alt key.
3. Drag the button from the toolbar into an open area and release it.

To move a toolbar, drag the toolbar to another location. You can also dock the toolbars to one side of the IDE or to a window. To resize a toolbar, grab the corner of a toolbar and drag it to its new size. You can resize any toolbar that is not docked. Docked toolbars do not display a title. If you make a toolbar shorter, the buttons will wrap and the toolbar will change its aspect ratio to accommodate the buttons.

Configuring the Interface

Developer Studio toolbars and windows are free-floating and dockable. A dockable object can be free-floating within the Developer Studio interface or docked to one of the borders. For instance, the toolbars that appear at the top of Developer Studio are merely docked there. You can click on the double bars of a docked toolbar and drag the toolbar, thereby undocking it, as shown with the Query toolbar in Figure 2-7 below. You can even drag it to the bottom of the window and release it, docking it to the bottom of the window frame. Likewise, the Project Explorer window that displays your Web site and its files is merely docked. You can drag it from the border or even maximize it to fill the entire Developer Studio parent window.

When you enable a toolbar, by default it floats freely in Developer Studio. You can grab a toolbar with the mouse and drag it to any location. When you drag a toolbar or a window to a docking location (such as the top of the Developer Studio environment), it changes shape to fit that location and the title bar for the toolbar disappears. Drag the toolbar into place and drop it to complete the docking operation. To make a toolbar free-floating again, simply grab it with the mouse and drag it out of a docking location.

To drag a toolbar that is not docked, place the mouse over the toolbar's title bar and then click the left mouse button and drag. To drag a toolbar that is docked, place the mouse over the toolbar but outside of any toolbar button, and then click the left mouse button and drag. (If you have trouble finding a point outside of all toolbar buttons, click the double bars.) If you double-click a docked toolbar, it moves to its previous floating position.

Figure 2-7. The Query toolbar has been undocked and left free-floating.

You can hide a toolbar you don't need by right-clicking a blank spot on the toolbars and clicking the toolbar's name on the popup list to deselect the toolbar you wish to hide. You can reenable that toolbar by using this same method and then selecting the name of the desired toolbar.

You can dock windows in the IDE on top of each other by dragging the title bar of one docking window to another. To switch among the windows, use the tabs that appear at the bottom of the docked set. If you want to separate the windows, drag one of the tabs to another location outside the current window.

Visual InterDev 6 uses named window layouts for configuration information. You can see this in Figure 2-7. Notice the list box just above the right end of the Query toolbar? This is the window layout name that we are currently using. You can change window layouts by selecting one from the list.

Visual InterDev 6 has several standard window layouts:

• Debug Used when Visual InterDev switches to debug mode
• Design Used in design mode, displays Project Explorer, Data View, and the Toolbox
• DevStudio The normal Developer Studio mode; changes the interface to a Visual InterDev 1 look
• Edit HTML Used when editing HTML; displays Project Explorer, HTML outline, and the Properties window
• Full Screen Hides all windows and displays the edit window full screen
• Visual Basic Changes the interface to a Visual Basic look and feel

The window layouts are nice because you can reconfigure the interface with the click of a mouse. When you wish to flip back to another window layout, click again and it's right back. And not only can you quickly change the interface, you can create your own named window layouts:

1. Change the configuration.
2. Select Define Window Layout from the View menu.
3. Enter the name for your view.
4. Click Add.

The IDE now supports multiple monitors. Using Windows 98 or Windows NT 5, you can place the IDE or its docking windows on a secondary monitor. This is especially helpful for debugging because you can have your running application on one monitor and your code on the other.

The IDE supports different keyboard schemes. By default, Visual Studio ships with Visual Basic, Developer Studio, and Visual C++ 2 keyboard bindings. You can also create your own keyboard scheme by using Tools|Options and selecting the Environment/Keyboard node in the tree.

Task List

The Task List is new for Visual Studio 6. The Task List helps you customize, categorize, and manage work associated with your project. The Task List does this by displaying your tasks, specially marked comments, named shortcuts, warnings, and detected errors. Some errors, such as SmartEditor and comment errors, are generated as you type in the Editor window. You can also add named shortcuts and other items within the Task List itself at any time.

You can display the Task List by pressing Ctrl-Alt-K or by choosing Task List from the Other Windows command on the View menu.

You can add a task to the Task List by taking these steps:

1. Click the first line in the Description column where it says "Click here to add a new task."
2. Enter the task description.
3. Click the leftmost column to change the task's priority.

You can sort tasks with these steps:

1. Right-click anywhere in the Task window.
2. Choose Sort By from the context menu.
3. Choose the type of sort from the context menu.

You can also add shortcuts to a comment in your code and later jump to the comment's location in the editor. Figure 2-8 shows the Task List with two comments that have shortcuts. You can see the second comment just past the Loop command.

Figure 2-8. The Task List can track all types of information and link it to specific locations in files.

You can insert shortcuts to comments using these steps:

1. Insert a valid comment in the code window.
2. Right-click the comment, and choose Add Shortcut from the context menu.

Now you can jump to the location of the comment at any time by double-clicking the shortcut icon in the Task List line containing the comment.

The text editor automatically looks for code comments with tags like "TODO" or "HACK" and puts those lines of code on the Task List. To add your own comment tags that the editor will scan for, use Tools|Options and choose the Environment/Task List node.

The Task List lets you type in your own tasks and associate them with the current solution. When you open that solution in the future, the tasks that you entered will be shown. If someone else uses the same solution file, your tasks are not shared—they are saved on your machine only.

You can also tie any line of code to a task in the Task List. To tie a line of code to a task:

1. Open the file in the text editor.
2. Place the cursor on the line you want to tie to a task.
3. Press Ctrl-K and then Ctrl-H.

When the shortcut appears on the task list, click in the description field and give it an appropriate name. This is also helpful for marking where you were last working in a file or for describing a problem you were trying to solve and the next steps to take.

You can check off a completed task by clicking the complete box just to the left of the task's description.

You can also filter the tasks that are displayed in the Task List:

1. Right-click anywhere in the Task window.
2. Choose Show Tasks from the context menu.
3. Select the tasks that you want to display.

To delete tasks from the Task List:

1. Right-click the task you want to delete.
2. Choose Delete Task from the context menu.
3. Confirm the deletion by answering Yes.