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!