Finally! An integrated Web development environment

At last October's Site Builder Conference, Microsoft unveiled Visual InterDev, software I've been waiting for since the March 1996 Professional Developers Conference. Visual InterDev, which was formerly Internet Studio (I still find myself calling it by this name) and before that BlackBird, has evolved into a new tool for creating Web pages.

Visual InterDev is an integrated development environment that's just one component of the Microsoft Developer Studio, which will soon appear as Visual Studio 97. Visual InterDev lets me access the tools I use most (plus some new ones) to create active, data-driven Web pages. If you've used other visual products (such as Visual J++ or Visual C++) with Microsoft's Developer Studio, you'll feel right at home. If you haven't used these products, don't worry: Visual InterDev has a very comfortable setup and online tutorial.

Visual InterDev Features
Visual InterDev's greatest strength is its ability to provide all the Web development tools you need in one environment--I don't have to leave Visual InterDev to complete the tasks at hand. I can always access tools outside of Visual InterDev, of course, but all the tools I need are there.

Visual InterDev provides two built-in HTML editors: FrontPage 97 and Source Editor. You can access other HTML editors from within Visual InterDev by right-clicking the HTML filename and selecting Open With.

If I'm entering a lot of HTML or repetitious HTML, I like to use HoTMetaL Pro 3.0. But as anyone who's done serious HTML knows, sometimes you just can't beat Notepad. With Source Editor, Microsoft has created a sort of visual notepad. If you haven't set up another program to open as the default HTML editor, you can double-click an HTML file and Source Editor will open and display the file in a color-coded Notepad fashion, as you see in Screen 1.

If you want to see what your page looks like in a Web browser, you right-click the file name and select Preview in Browser. If you haven't changed the defaults, the InfoViewer fires up Internet Explorer (IE) 3.01 inside the integrated development environment.

Visual InterDev lets you create client-side components that run on the client's browser and perform tasks such as form verifications. I'm not ready to go down this path yet because making individual Web browsers such as IE and Netscape Navigator happy is still a pain. However, Visual InterDev's intranet tutorial does a good job of showing you how to implement client-side pages for when you can control which browser your clients use.

If you're familiar with FrontPage's Site Manager, you'll recognize the look and feel of Visual InterDev's Link View. It lets you see all your Web files in a graphical fashion. This tool also lets you visually verify that your links are OK.

Another nice Visual InterDev feature is the ability to control access to your Web files. Visual InterDev can interface with Microsoft's Visual SourceSafe 5.0 to implement file-locking and source-control capabilities. As the Windows NT Magazine Web department grows and I need to delegate more noncritical tasks, I need more control over the files. When I use Visual InterDev and Visual SourceSafe 5.0 together, I can force users to check out and check in the files. I can also roll back any changes someone has made by mistake.

The best way to see how Visual InterDev works is to look at a project. Let's examine the process of creating a new interface for entering and viewing the Windows NT Magazine user group listings.

Getting Started
To make things easy, I installed all the necessary Visual InterDev server components and SQL Server 6.5 on my Intergraph InterServe Web-300 (a 150MHz Pentium Pro that serves as a development and test machine for our Web site). To run Visual InterDev, you must have Internet Information Server (IIS) 3.0, FrontPage 97, and Visual InterDev on the server. The client installs Visual InterDev and FrontPage 97 extensions that let you transfer your work back and forth via HTTP.

After I installed Visual InterDev, I began working on the user group interface by running the Web Project Wizard from the File menu to create a new workspace called Usergroups. The wizard also creates the necessary virtual root on the IIS machine you select.

Web Database Interconnectivity
To create a new database, I right-clicked the project name, selected Add Data Connection, and told Visual InterDev which datasource to use. I then selected the newly created DataView tab you see at the bottom of Screen 1 on the left side and kept expanding the view until I saw the SQL Server Tables label. I then right-clicked Tables to create a new SQL Server table and entered the type of columns I needed for this project.

But what happens if I set up one of the columns with the wrong data type in my database? Hey, it could happen. With or without data in my table, Visual InterDev lets me easily correct the mistake. From the DataView pane, I right-click the database of choice and select Design. From there, I can change the column's data type from, say, an integer to a varchar. If you've ever had to do this with SQL Server, you know that it requires a lot of Data Definition Language (DDL) commands. Fortunately, Visual InterDev Database Designer writes the DDL for you.

After I specified the database, I used the DataView Table function to add a user group listing to the SQL Server table so I'd have a record to work with. With DataView's Access-like look and feel, I can easily input all my data this way. But I have an easier way that will let anyone I want manage the user group list with nothing more than a Web browser.

Accessing the Data

After I set up the user group database, I wanted to create a Web form to make entering and editing user groups easy for users. Creating a data form is easy with Visual InterDev. From the File menu, I chose New, selected the File Wizards tab, and clicked Data Form Wizard. The wizard helped me select the database I wanted to create this form against and identified which columns I wanted to show. I wanted to be able to completely update the user group listing table from the Web, so I selected all the columns from the database. When I clicked Finish, I got three new Active Server Pages with all the HTML and scripting I needed (Screen 1 shows the form with all its scripting, and Screen 2 shows the final Web form).

Next, I wanted to make some of this information available from the Web site. This step is where I got to use one of Visual InterDev's fun tools, the SQL Query Designer. I started by creating an Active Server Page with an HTML table in it. Then I placed a design-time ActiveX Control (Data Range Header Control) after the first row in the table to create the server-side logic to perform the SQL query and write the scripting needed to display and control the returned data.

Now I had a work environment that let me drag the tables I wanted to query and select the columns I wanted to query in the order I wanted the data to appear in. This environment also showed my query being built when I selected the columns, as you see near the bottom of Screen 3.

After I set up the query, I clicked on the SQL Run toolbar icon to see the results. When I got my results, I simply closed the Header Control, and Visual InterDev automatically inserted all the HTML and scripting into the Active Server Page that will display the table. The last step was to insert a Data Range Footer Control on the same page to signify the end of the database formatted fields.

Visual InterDev is the tool I've been waiting for. If you took it apart, you'd have a handful of quality products. But as a whole, Visual InterDev is powerful, creative, timesaving software. It lets you create and edit your entire Web and related database projects from one place using one tool. When I showed it to people around the office, they reacted the same way I did when I saw Internet Studio: Wow!

Visual InterDev 1.0, Beta
Contact: Microsoft 206-882-8080
Web: http://www.microsoft.com/vinterdev
Price: Not yet determined