öþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþpment Environment Overview
You learn which components make up the Visual InterDev integrated development environment.
This chapter explains the development process needed with Visual InterDev.
Learn about the various document windows that ship with Visual InterDev.
Docking windows allow you to customize Visual InterDev to the way you work.
Work more efficiently by customizing Visual InterDev with macros, custom toolbars, and other methods.

Order entry systems are the most commonly requested database applications for businesses. In this chapter we will look at building one as a Web site. Using the advanced database connectivity features of Microsoft Internet Information Server 3.0 and Visual InterDev, building an online order entry system is a snap.

Visual InterDev Development Process Overview

Web site development with Visual InterDev requires software on both client and server. On the client side you have the Visual InterDev development environment, while on the server side you have the Visual InterDev server extensions (also required are the other server applications, such as Internet Information Server 3.0 running the FrontPage Server Extensions and Active Server Pages). Both client and server sides of Visual InterDev work together to help organize your Web sites. The server side of Visual InterDev is transparent to the developer and requires no maintenance, so from here on, when we use the name "InterDev" we are referring to the Visual InterDev development environment, unless otherwise noted.

InterDev itself runs on the Microsoft Developer Studio 97 (version 5.0 of Developer Studio) environment. This development environment is also used with other Microsoft Visual tools, including Visual Basic, Visual C++, and Visual J++.

Another tool that ships with InterDev is the Visual Database Tools. The Visual Database Tools are seamlessly integrated into InterDev, so you have a single workspace for building complex Web sites as well as database applications, and more importantly, you can easily integrate these two technologies together, thus building either data-driven Web sites or database applications using standard Internet protocols.

Organization of a Web Site

InterDev organizes your Web sites and databases by means of projects and workspaces. A project is simply an individual database or Web site. A workspace is InterDev's method of storing multiple projects together, such as a Web site and database.

When you create a new Web site project in InterDev, you have the option of adding to an existing workspace or creating a new one. If you choose to create a new one, InterDev will create a directory on both the server and your local InterDev workstation with the same name as your project. On the local workstation this directory will be a subdirectory of \DevStudio\MyProjects.

On the server it will be a subdirectory of your \inetsvr\wwwroot directory. On the server it will also create a virtual directory using the name of the project and will point that directory to the new \inetsvr\wwwroot\myprojectname subdirectory (where myprojectname is the name of your project). Within this directory on the server, it will also create an \images subdirectory as a default to store the sites images. On the client workstation, it will duplicate the server directory structure and use it when bringing local copies of the files down for editing.

Workspaces

Workspace information is stored in a .DSW (Developer Studio Workspace) file within a project directory on the client side. The project directory used will be the one that was created at the time the workspace was created. If you create an empty workspace (using the Blank Workspace Wizard) with no projects in it, you'll still be asked for a name, and this name will be used to create a subdirectory in the \DevStudio\MyProjects subdirectory.

Within a workspace you can create multiple projects. This does present a slight dilemma in that you can delete projects from a workspace. If you delete a workspace's original project, the project directory will remain there, since it still has a workspace (.DSW) file in it.

CAUTION:
Be aware that if you delete a workspace's original project, that project's directory will not be deleted from the \DevStudio\MyProjects directory.

Projects

Project information is stored in a .DSP (Developer Studio Project) file within the project's directory. You can create both Web site and database projects. Just as a Web site project points to a single Web site, a database project points to a single database. If you need to work on more than one Web site or database concurrently, you can add multiple projects to a workspace. You can add database projects to your workspace by either using the New Database Project wizard or by simply adding a data connection to your Web site using the Data Connection Wizard.

Editing Content

As you load a Web page into the Visual InterDev developer environment for editing, a copy of the page is made locally. Then, as you make changes to this page, you are working with a local copy. Whenever you save any changes, InterDev detects this and updates the server's copy.

The advantage of this is that because the page is copied locally, you can then edit it with the editor of your choice. For example, you may want to use Adobe Photoshop to edit images, instead of Microsoft Composer. After setting up Photoshop as a content editor for images, you can then double-click the image to open it, InterDev will copy it locally, and then Photoshop can work with the image. As you save it from Photoshop, InterDev will detect the save and update the copy of the image on the server.

The Development Process

The development process falls into the following three parts:

  1. Create a workspace and projects.

  2. Author the content.

  3. Program scripts and components.

When the last two steps are finished, your Web site will be finished, because you're working directly with your live Web site.

Create a Workspace with Projects First you need to set up your Visual InterDev workspace. This is normally done simply by creating a Web site or database project, since InterDev will automatically create a workspace if you don't assign the new project to an existing one. You can also import existing projects into a workspace.

If you run the Insert Data Connection Wizard to create a database project, it will create a GLOBAL.ASA file specifying the database connection for the site.

Author the Content Next you are ready to start authoring your content. For static sites that don't change very often, you can usually accomplish this with straight HTML pages and perhaps a few ActiveX controls such as the HTML Layout Control (.ALX files). Content authoring can run concurrently with any programming requirements.

Program Scripts and Components At the same time that the content authoring is taking place, you can also develop any scripting or programming for dynamic/data-driven content. For scripting you can use client- or server-side scripting with VBScript or JavaScript. You can also get more advanced by programming your own ActiveX components, which can likewise run either on the server or the client. You can program these controls in virtually any programming language. The most common are C++, Visual Basic, and Java.

Advantages of the Visual InterDev Architecture

The advantages of the Visual InterDev architecture include the following:

The Developer Studio Integrated Development Environment

As mentioned earlier, Visual InterDev is built within the Developer Studio 97 (DevStudio) environment. Developer Studio is now in its fifth iteration, having been used for many years with Microsoft's Visual C++. It offers advanced editing tools, organizational features, and documentation support. Figure 5.1 illustrates the main features of the DevStudio environment.

FIG. 5.1
The main components of the Developer Studio 97 environment.

Windows and Toolbars

As with most Microsoft Windows 97 programs, the menus are fully customizable and located on floating toolbars. The main workspace is split between the different docked and document windows. Docked windows, as the name implies, are usually docked to a border of the application. The docked windows of Visual InterDev include the Project window and the Output window for debugging. Document windows are loaded as needed for editing a particular type of content or database object. You make a docked window a floating window by dragging off the border its currently docked to.

Document Windows Document windows often load their own toolbars appropriate to the type of content being edited. Figure 5.2 shows a Microsoft Word for Windows document loaded into Visual InterDev. Notice how this document window has loaded not only its own toolbars, but even its own menus via Microsoft's OLE 2 in-place activation technology.

FIG. 5.2
Visual InterDev supports in-place activation via OLE 2.

A few of the document editors Visual InterDev has built in are as follows:

Docking Windows Docking windows typically provide information that you want visible at all times. This can include views of your Web site and database as well as the online documentation. To move or undock a docked window, simply drag it by the title bar to an open area of the screen.

TIP: To convert a docked window to a floating window, double-click its title bar.



The Dockable Windows used by Visual InterDev include the following:

TIP: You can customize the Project window by right-clicking any of the tabs.



Menus and Toolbars Both menus and toolbars are similar to docked windows, in that you can dock them to a border of the application or make them free-floating. Both are fully customizable via the Tools, Customize menu option or by right-clicking a toolbar or menu and choosing Customize.

Developer Studio's default configuration displays the Standard toolbar just below the menu bar. Other toolbars appear automatically as you open different editors. Based on your workspace preferences and the size of your screen, you can display as many toolbars as necessary or none at all. You can resize a toolbar, add a menu to it, enlarge its buttons, or move it to a different location.

The menu bar acts as a normal toolbar with a few exceptions: it always fills a complete row when docked horizontally, and you cannot hide it unless you are in full-screen mode. If you do hide it while in full-screen mode, you still have access to the menus by using keyboard shortcuts.

Editing Tools

By double-clicking a document or database object in the project workspace, an editor is automatically loaded. There are two main types of editors: content editors and object editors. Content editors are typically code editors or WYSIWIG editors, while with object editors you are typically filling out properties in a dialog box.

Content Editors Content editors include the source editor and the FrontPage Editor (see Figure 5.3). These editors work with files stored locally in your project directory. The editors are launched by double-clicking the document in the Project workspace.

FIG. 5.3
The FrontPage Editor allows WYSIWIG editing of HTML documents.

CAUTION:
Open only .HTM files with the FrontPage Editor for Visual InterDev editor. If you use it to open .ALX, .ASA, or .ASP files, you may damage them.



Object Editors Object editors allow you to edit components and objects in your Web site or database. These objects include ActiveX controls, Design-Time ActiveX Controls, and database objects. Design-time controls act like ActiveX controls, but they also automatically generate the HTML and scripting logic necessary to drive the ActiveX control or specified process. Working with an object is similar to setting properties in a Properties dialog box (see Figure 5.4).

FIG. 5.4
The Data Connection Object Editor.

Working with Project Workspaces

You can see the organization of your site in the Project workspace window of Visual InterDev. It offers a hierarchical view of Web sites, databases, and online documentation. This "explorer" view lets you create, delete, and edit most objects in a Web site or database. The Project workspace has the following three views:

File View The File view is a representation of the files and directories stored on your Web site. If you create a directory in the File view, a corresponding directory will be created in your \DevStudio\MyProjects\ProjectName subdirectory and on your server in the \inetsvr\wwwroot\ProjectName subdirectory. You can import existing documents easily by dragging them from the file manager or desktop into the File view of your project.

When you load a document for editing, Visual InterDev copies the file from the server to your local development workstation's \DevStudio\MyProjects\ProjectName subdirectory. You now have what is called a working copy. If a document's icon is ghosted, it means you don't have working copy of it (see Figure 5.5). There are many commands and options available from the pop-up menu when you right-click in the File View window.

FIG. 5.5
Notice the documents that we have working copies of are not ghosted.

Data View The Data view also uses a hierarchical view, this time of your database (see Figure 5.6). With databases, you don't need to copy information down locally to your hard drive, so you'll never see an icon ghosted. Depending on the database you're connected to you'll have all or some of the following objects available:

FIG. 5.6
This workspace has two database connections: one to an Access .DBF file, and one to a SQL Server database.

NOTE: Microsoft Visual Data Tools are also available in Microsoft Visual C++ 5.0 Enterprise Edition, and as an add-in for Microsoft Visual Basic 5.0 Enterprise Edition.



Info View The InfoView tab contains the online documentation in hierarchical format. By simply double-clicking any topic you can display it on the InfoView browser. The InfoView browser works identically to a Web browser. You have Go Forward and Go Back buttons in the toolbar (see Figure 5.7). You can search the documentation with the Search button or the Find box on the toolbar. The online documentation offers extensive samples, help, and online resources for quick answers to common questions.

FIG. 5.7
The InfoView browser works identically to a Web browser.

The Visual Database Tools

A key aspect to Visual InterDev environment is the Visual Database Tools component. It allows you to create, edit, and administer any ODBC (Open Database Connectivity) compatible database. Currently ODBC features work with all leading database management systems on the market, including SQL Server, Access, FoxPro, Oracle, Sybase, Informix, IBM DB2, Borland dBASE, and others. The Visual Database Tools are integrated right into the InterDev environment, facilitating the creation of fully dynamic, database-driven Web sites.

A Data view in the project workspace displays all the objects related to any database project or data connection assigned to your workspace (see Figure 5.8).

FIG. 5.8
The Data view organizes all of your database objects in a hierarchical view.

By using VBScript and JavaScript development you can easily develop powerful database Web applications. Many of the design-time controls and wizards that ship with InterDev will generate most of this code for you. For connectivity, you can use the Microsoft Active Data Objects (ADO), Microsoft Advanced Data Connector (ADC), or any of the many existing HTML-ODBC connectivity products currently on the market. Within Visual InterDev, you can connect to multiple databases and pull data from multiple sources into a single Web page.

Another impressive capability of the Visual Database Tools is that InterDev performs almost every action via SQL (Script Query Language), and you always have the option of viewing or altering this code before letting InterDev execute it. Listing 5.1 shows a sample SQL script generated automatically by simply adding, deleting, and editing fields as well as setting up a few constraints. True, you could write all of this by hand, but why bother when it's so easy with Visual InterDev!

Listing 5.1A Sample SQL Script Written by Visual InterDev

BEGIN TRANSACTION
SET QUOTED_IDENTIFIER ON
GO
SET TRANSACTION ISOLATION LEVEL SERIALIZABLE
GO
COMMIT
BEGIN TRANSACTION
ALTER TABLE dbo.sales
DROP CONSTRAINT FK__sales__title_id__1BA8264C
GO
COMMIT
BEGIN TRANSACTION
ALTER TABLE dbo.sales
DROP CONSTRAINT FK__sales__stor_id__1AB40213
GO
COMMIT
BEGIN TRANSACTION
CREATE TABLE dbo.Tmp_sales
(
stor_id char(4) NOT NULL,
ord_num varchar(20) NOT NULL,
ord_date datetime NOT NULL,
payterms varchar(12) NOT NULL,
title_id tid NOT NULL,
New_Field char(20) NULL
) ON "default"
GO
12345678901234567890123456789012345678901234567890123456789012345678
IF EXISTS(SELECT * FROM dbo.sales)
EXEC('INSERT INTO dbo.Tmp_sales(stor_id, ord_num, ord_date,payterms, title_id)
SELECT stor_id, ord_num, ord_date, payterms, title_id FROM dbo.sales TABLOCKX')
GO
DROP TABLE dbo.sales
GO
EXECUTE sp_rename 'dbo.Tmp_sales', 'sales'
GO
ALTER TABLE dbo.sales ADD CONSTRAINT
titleidind UNIQUE NONCLUSTERED
(
title_id
) ON "default"
GO
ALTER TABLE dbo.sales ADD CONSTRAINT
UPKCL_sales PRIMARY KEY CLUSTERED
(
stor_id,
ord_num,
title_id
) ON "default"
GO
ALTER TABLE dbo.sales ADD CONSTRAINT
CK_sales CHECK ((New_Field <> 'Bad Data'))
GO
ALTER TABLE dbo.sales ADD CONSTRAINT
FK__sales__stor_id__1AB40213 FOREIGN KEY
(
stor_id
) REFERENCES dbo.stores
(
stor_id
)
GO
ALTER TABLE dbo.sales WITH NOCHECK ADD CONSTRAINT
FK__sales__title_id__1BA8264C FOREIGN KEY
(
title_id
) REFERENCES dbo.titles
(
title_id
)
GO
GRANT REFERENCES ON dbo.sales TO guest
GRANT SELECT ON dbo.sales TO guest
GRANT INSERT ON dbo.sales TO guest
GRANT DELETE ON dbo.sales TO guest
GRANT UPDATE ON dbo.sales TO guest
COMMIT

The Query Designer

The Query Designer is an advanced visual SQL query tool for creating Select, Delete, Update, and Insert queries. You can type straight SQL code into the Query Designer, or let InterDev generate it for you by dragging and dropping tables and fields (see Figure 5.9).

FIG. 5.9
The Query Designer offers simple drag-and-drop query editing.

The Database Designer

The Database Designer offers a visual way to create entity relationships between tables in Microsoft SQL Server databases. It allows you easily to set up triggers, constraints, foreign keys, and much more (see Figure 5.10).

FIG. 5.10
Within the Database Designer, you can set up relationships and table properties.

Tables and Views

You can create new database tables and views from scratch within InterDev. For table creation you can simply right-click the Tables folder and choose New Table. After choosing a name, you'll be able to create fields for the new table (see Figure 5.11).

FIG. 5.11
Here we have clicked the Save Change Script button in the toolbar during the creation of a new table.

Stored Procedures

Visual Database Tool supports both Oracle and Microsoft SQL Server stored procedures (see Figure 5.12). As with tables, you can create a new stored procedure by right-clicking the Stored Procedure folder and choosing New Stored Procedure.

FIG. 5.12
You can view a stored procedure's variables by opening it in the Data View window.

Triggers

You can create triggers in your database by means of the Insert, New Database Item menu option. Figure 5.13 shows a new trigger being created and the dialog box that appears after choosing Insert New Database Item.

FIG. 5.13
Notice that in the New Database Item dialog box, you can create new items in any database you currently have access to.

Automating Tasks and Customizing the Developer Studio

As you have seen, the Developer Studio is a very flexible environment. However, you can customize it even further by altering its menus, toolbars, and keystrokes. You can organize commands the way you want them, so you can find and use them quickly. You can add and remove menus and buttons, change the image or text for a button, and even create your own custom menus. Previous versions of Developer Studio allowed only buttons on toolbars, but with Developer Studio 97 toolbars can contain menus and buttons.

Creating Macros

You will often have a header you would like included on every page of your site. This might be HTML code or it might simply be copyright notices placed in comment tags within the HTML. The Server-Side Include (SSI) #INCLUDE directive is a simple way to do this. It will insert the contents of other files at the location of the directive. The line of code would read:

<!-- #INCLUDE FILE="Header.inc" -->

Because this will need to be inserted on every page, we are going to make a macro to accomplish this, and then assign that macro to a button on the toolbar and a keystroke sequence. Developer Studio supports VBA (Visual Basic for Applications) just as Microsoft Office does. Applications that support VBA expose all of the internal objects, methods, and properties, so that you can automate virtually any task by writing a simple Visual Basic program. The latest buzzword for this is Automation (OLE Automation). We'll take a shortcut and use Developer Studio's macro recordinöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþöþL>

FIG. 5.14
Recording a macro is the easiest way to get started with VBA programming.

TIP: To figure out quickly the VBA syntax for a particular command for a function in InterDev, use the Macro Record command and then go back and edit the resulting VBA code later.

  1. You'll notice that the cursor changes to a pointer with a cassette tape This indicates that InterDev is going to record every step you take from this point on. For now simply type the tag <!-- #INCLUDE FILE="Header.inc" --> into the Source Editor and press Enter (see Figure 5.15).

    FIG. 5.15
    While recording a macro, Stop and Pause buttons appear on the screen.

    CAUTION:
    The recorder can't record mouse actions when moving the insertion point or selecting text. You have to use the keyboard to record these actions. Also, the recorder doesn't always convert keystrokes into commands. Make sure you double-check the macro after recording.
  2. Click the Stop Macro button, and InterDev will generate the code shown in Listing 5.2. Simply close the Macro Editor and choose Yes to keep the changes. Now your macro is complete.

Listing 5.2A Sample SQL Script Written by Visual InterDev

'------------------------------------------------------------------------------
'FILE DESCRIPTION: New Macro File
'------------------------------------------------------------------------------

Sub InsertHeader()
'DESCRIPTION: Insert the include directive

'Begin Recording
ActiveDocument.Selection = "<!-- #INCLUDE FILE=""Header.inc"" -->"
ActiveDocument.Selection.NewLine
'End Recording
End Sub

To test this macro, choose Tools, Macro to display the Macro dialog box and double-click the InsertHeader macro to run it.

Assigning Macros to Toolbars

Our next step is to assign this macro to a keystroke and a button on the toolbar. To create a button on the toolbar for this macro, take the following steps:

  1. Choose Tools,
  2. InterDev displays a Button Appearance dialog box, asking which icon to use on the toolbar for this macro, so click one of your choice, then choose OK (see Figure 5.17).

FIG. 5.17
The Button Appearance dialog box allows you to assign an icon to your custom toolbar command.

Now you'll see a new button on the standard InterDev toolbar (see Figure 5.18). You can test it by clicking it while the cursor is in a source code window.

FIG. 5.18
Notice the new button at the right edge of the Standard toolbar.

Assigning Macros to Shortcut Keys

It's a simple process to assign the same macro to a shortcut key. Choose Tools, Customize again, but this time click the Keyboard tab. In the Customize dialog box, choose Macros as the Category, and press Ctrl+Shift+H. You should see that this shortcut key is unassigned. Now just click Assign and it will be assigned to the macro (see Figure 5.19). Finally, click Close to close the Customize dialog box.

FIG. 5.19
When assigning a macro to a shortcut key, make sure you watch the Currently Assigned To: setting to make sure you don't overwrite an important shortcut key.

You can test the new shortcut key by pressing it while in a Visual InterDev Source Editor.

From Here

In this chapter, we've covered the Visual InterDev integrated development environment, explained it's architecture, outlined the development process, and demonstrated ways of customizing it to suit your needs. For further information on these topics, see the following chapters:

  • Chapter 3, "Installing the Visual InterDev Client," tells you how to install the Visual InterDev client.

  • Chapter 4, "Installing the Visual InterDev Server," covers installation of the Visual InterDev Server components.

  • Chapter 7, "Designing and Organizing an Visual InterDev Site," outlines the design and development process with Visual InterDev.

  • Chapter 38, "Creating Engaging Content," discusses issues related to building a successful Web site.