Microsoft Visual InterDev 1.0, Beta

Finally! An integrated Web development environment

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

Visual InterDev is an integrated development environment that's just onecomponent of the Microsoft Developer Studio, which will soon appear as VisualStudio 97. Visual InterDev lets me access the tools I use most (plus some newones) to create active, data-driven Web pages. If you've used other visualproducts (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 Webdevelopment tools you need in one environment--I don't have to leave VisualInterDev to complete the tasks at hand. I can always access tools outside ofVisual InterDev, of course, but all the tools I need are there.

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

If I'm entering a lot of HTML or repetitious HTML, I like to use HoTMetaLPro 3.0. But as anyone who's done serious HTML knows, sometimes you just can'tbeat Notepad. With Source Editor, Microsoft has created a sort of visualnotepad. If you haven't set up another program to open as the default HTMLeditor, you can double-click an HTML file and Source Editor will open anddisplay 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, youright-click the file name and select Preview in Browser. If you haven'tchanged the defaults, the InfoViewer fires up Internet Explorer (IE) 3.01 insidethe integrated development environment.

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

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

Another nice Visual InterDev feature is the ability to control access toyour Web files. Visual InterDev can interface with Microsoft's Visual SourceSafe5.0 to implement file-locking and source-control capabilities. As the WindowsNT Magazine Web department grows and I need to delegate more noncriticaltasks, I need more control over the files. When I use Visual InterDev and VisualSourceSafe 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 viewingthe Windows NT Magazine user group listings.

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

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

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

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

After I specified the database, I used the DataView Table function to add auser 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 thisway. But I have an easier way that will let anyone I want manage the user grouplist 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 tomake entering and editing user groups easy for users. Creating a data form iseasy with Visual InterDev. From the File menu, I chose New, selected the FileWizards tab, and clicked Data Form Wizard. The wizard helped me select thedatabase I wanted to create this form against and identified which columns Iwanted to show. I wanted to be able to completely update the user group listingtable from the Web, so I selected all the columns from the database. When Iclicked Finish, I got three new Active Server Pages with all the HTML andscripting I needed (Screen 1 shows the form with all its scripting, and Screen 2shows the final Web form).

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

Now I had a work environment that let me drag the tables I wanted to queryand select the columns I wanted to query in the order I wanted the data toappear in. This environment also showed my query being built when I selected thecolumns, 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 theresults. When I got my results, I simply closed the Header Control, and VisualInterDev automatically inserted all the HTML and scripting into the ActiveServer Page that will display the table. The last step was to insert a DataRange Footer Control on the same page to signify the end of the databaseformatted 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 ispowerful, creative, timesaving software. It lets you create and edit your entireWeb and related database projects from one place using one tool. When I showedit to people around the office, they reacted the same way I did when I sawInternet Studio: Wow!