Introducing Visual InterDev

Microsoft^® Visual InterDev™ is a Web development tool designed for programmers who want to create:

• Data-driven Web applications using a data source supported by ODBC or OLE DB, such as the database management systems from Microsoft.
  
  
• Broad-reach Web pages using HTML and script in Web applications that take advantage of the latest advances in browser technology, such as Microsoft^® Internet Explorer 4.0, Dynamic HTML and multimedia features.
  
  
• Robust development environment with a Scripting Object Model, design-time controls (DTCs), and an extensible toolbox for rapid design, testing, and debugging of your pages.
  
  
• Web teams that can develop pages in isolation and maintain ready access to a master version, or teams that include nonprogrammers who work on the master version through Microsoft^® FrontPage^®.
  
  
• Integrated solutions that can include applets or components created in Microsoft^® Visual Basic^®, Visual C++^®, Visual J++™, and Visual FoxPro^®.

The following figure provides a summary of features and tools to try in Visual InterDev.

This figure shows an .asp file open in the Design view of the HTML editor. The toolbox, Project Explorer, and Data View window have been resized so you can see their contents easily. You can customize your work area by closing, resizing, or rearranging any of the toolbars, toolboxes, or windows.

Prototype with Site Diagrams, Themes, and Layouts

Why type everything into a text file when you can use tools that let you concentrate on your content and functionality? Leave the details of file management, link repair, and navigation to the tools provided in Visual InterDev 6.0.

Visual InterDev 6.0 includes site design tools that help you easily plan pages, organize their links, and apply a consistent theme to your Web site.

Site diagrams   You can use site diagrams to plan the overall structure of the Web site, to specify navigation between pages, and to take advantage of general visual design elements quickly and easily.

In a site diagram, you can create a prototype site containing multiple files and, at the same time, identify the hierarchical relationships between the files. It is this hierarchy that is used to define the site navigation structure. For example, your home page is considered a parent file. You can "attach" other pages below it to create children files.

Layouts   Once you have established your navigation structure, you can add navigation bars to your Web pages. Using a layout, you can quickly define navigation bars that include combinations of parent, children and sibling files. For example, the home page can link to several children that can link to siblings and so on.

Themes   Easily add a consistent visual impact to your Web pages through themes.

The themes and layouts are extensible and customizable so you can create different styles for all of the pages in your Web application or apply them to parts of your site.

When you use site diagrams, layouts, and themes to develop your Web site, the actual file structure and navigation bars are created automatically. To simplify maintenance once you've developed your Web application, site diagrams allow you to keep your navigation bars current when you update the site diagram.

In the figure above, a new site diagram has just been opened. Any pages added to this diagram are also added to the project when you save the diagram.

Try It!

• Create a site diagram by right-clicking your project in the Project Explorer and choosing Add and then Site Diagram.
  
  
• Add some files to this diagram by using the first button on the Site Diagram toolbar. Save the diagram and notice that files appear in your project.
  
  
• Preview the new pages in your Web browser and test the navigation automatically supplied. If you see "[vinavbar]" on your page, you need to install the NavBar FrontPage extension. You can do this by running Setup and installing the server component.
  
  
• Change the relationships of files in the site diagram, save the diagram, and preview it. Notice that the navigation links have been automatically updated.
  
  
• Apply a theme and layout to your files by selecting files in the site diagram, choosing Apply Theme and Layout from the shortcut menu, and selecting the theme or layout you want.

Develop in WYSIWYG View or Colorized Code

Visual InterDev 6.0 includes three ways to view your HTML and ASP pages.

These three views are the cornerstone of Visual InterDev 6.0. They replace the simple source code editor included with Visual InterDev 1.0 and supports design-time controls (DTCs), debugging, statement completion, and object browsing.

Design view   Creates your page in WYSIWYG view. You enter content or drag items from the toolbox or data environment directly to your page. Use the toolbox, toolbars, and menus to build your page.

Source view   Shows the HTML or ASP source code. Like Design view, you can enter content or drag items from the toolbox or data environment directly to your page. Use the toolbox, toolbars, and menus to build your page.

Quick view   Displays the results of HTML code and client script before the page is saved. If you want to view your page in a browser, you need to save the page. This view does not use a Web server so does not process server script.

Try It!

• Experiment with the Design view by opening a file and adding some text. Select the text and use the HTML toolbar to change the font and size of your text.
  
  
• Insert an event by browsing a list of events in the HTML Outline window. Double-click an event and notice that the event prototype is inserted into the Source view of the document.
  
  
• Add a control and modify its properties. Select the control and choose Properties from the shortcut menu.
  
  
• Explore statement completion in the Source view. Add a script block to the file and then type "window" to display a list of properties and methods.
  
  
• When in Design or Source view, notice the properties on HTML elements in the Properties window. Notice that changing properties here can affect tag attributes without your having to edit the tags directly.
  
  
• Edit and create cascading style sheets in the dedicated CSS editor. Open any CSS file, such as those in the Themes directories of the project. If your project doesn't have a theme directory, you need to apply a theme.

Connect to Data and Create Reusable Data Commands

The new data environment provides easy commands for making your Web application data-driven. Instead of burying complex SQL statements deep within an .asp file, the statements are now exposed, maintained, and reused at the application level through the data environment under the Global.asa file. Instead of modifying the query within each page, you can modify the data command and your changes are incorporated into files that reference that data command. Also, you can drag fields from the command directly onto your HTML or ASP page.

Try It!

• Create a new data connection by right-clicking the project name in the Project Explorer and selecting Add Data Connection.
  
  
• After creating the data connection, notice that a Data Environment object appears under the Global.asa node. Under the Data Environment, you can find the connection.
  
  
• Using the connection, you can add a data command to create a reusable SQL statement in the data environment. Right-click on the project and select Add Data Command. Fill out the property pages to specify the data source for the data command.
  
  
• Try dragging fields directly out of the data environment onto the page. Notice that DTCs are inserted on the page for each field copied.

Display Data with Data-bound Controls

Creating an interactive Web page with data is as simple as dragging and dropping, setting some properties, and saving the page. No coding is required.

However, for those so inclined, Visual InterDev exposes a full object model that allows you to fine-tune your application, perform client validation, and have full control of your Web application. Visual InterDev 6.0 supports not only full-reach applications, using the ASP engine to produce simple HTML pages for the client, but also DHTML and Microsoft^® Internet Explorer 4.0 data binding for a richer client experience.

For example, this figure shows a simple data entry page that was created using data-bound controls.

Try It!

• After creating a new data connection, drag a Recordset control from the Design-Time Control toolbox tab onto a page. Set the control's properties to bind this recordset to the data connection of your choice. You can also drag a data command onto a page to add a recordset bound to that data command.
  
  
• Drag a Textbox control onto the page. Open its properties and bind it to the Recordset control. You can also drag fields from the data environment directly.
  
  
• Drag a RecordsetNavbar control on to the page. Again, open its properties and bind it to the Recordset control.
  
  
• Make sure the PageObject control is still the first control on the page and publish the page. Navigate through the records at will.
  
  
• Switch the type of HTML used by the control. Open the Properties window for the recordset and go to the Implementation tab.

  Select either Generic HTML (ASP-based) or Internet Explorer 4.0 HTML (DHTML-based). Republish the page.

  Notice that for Internet Explorer 4.0, the page does not make a round trip to the server for each new record; instead, the record is replaced in line.

• Go to Source View and notice the object model exposed by each of the Design-Time Controls when the outline tab is displayed.

Debug Server and Client Script within Visual InterDev

To debug script, you can use Visual InterDev installed on the Web server or you can use Visual InterDev on a separate machine to debug script remotely.

Note   In this version, remote debugging is supported only with Microsoft^® Windows NT^® systems. Using a Microsoft^® Windows^® 95 client is not yet supported.

Visual InterDev 6.0 supports full client and server script debugging using everything you expect from a full-featured debugger.

This figure shows an ASP page open in the HTML editor and the debugger active.

Try It!

• Specify a start page for debugging. Right-click a file in the Project Explorer and choose Set as Start Page.
  
  
• View an .asp or .htm file in the browser. In Visual InterDev, choose Processes from the Project menu. After viewing the file, connect Visual Studio to the Internet Explorer and Microsoft^® Internet Information Server (IIS) processes.

  Debug the file just like you would debug any other form or function. View your running documents, open documents to debug, set breakpoints, and then preview the files again. Breakpoints on the client or server will occur and you can single-step through your script and check the process state.

Develop Web Applications on a Team

Visual InterDev 6.0 is specifically designed to meet the unique challenges of team-based Web development. Visual InterDev Web projects are connections to Web applications on a Web server. With Visual InterDev Web projects in local mode, you can take advantage of developer isolation to change and test application files locally before they are committed to the master Web server.

Try It!

• When creating a Web project, select local mode. You can change this later by choosing from the Working Mode options available from the Project menu.
  
  
• With a local copy of a file, save the file, and preview it in the browser.

  Notice that the file is being served by the local system, not the master Web server. If IIS is installed on the client system, .asp files can also be previewed.

• If you are working with team members on the application, try refreshing the project to view files they have been added to the master Web application by other developers. To refresh the project, use the Refresh button on the Project Explorer toolbar or right-click the project and select Refresh.
  
  
• Use Microsoft^® Visual SourceSafe™ to add version control to your Web application.

Creating and Modifying Database Objects

If you are using Microsoft^® SQL Server™, you can also work on your database using the Microsoft Visual Database tools. After you create a connection in your project, you can work on database diagrams, database objects, and queries.

Try It!

• Explore the database by expanding the list of database objects in the Data View window.
  
  
• Experiment with the design of your database without affecting the database until you choose to save your new design by creating a new database diagram.
  
  
• Create, modify, or delete database objects such as tables, views, and stored procedures using Data View.
  
  
• Open a table and add data or choose to design the table and complete complex DDL operations by changing a column’s data type.
  
  
• View and save change scripts of the SQL code for the changes you made in a database diagram. You can submit change scripts to database administrators for review and execution in controlled database environments.

Using the Query Designer, you can choose from four different ways to construct and execute queries against any ODBC-compliant database. The figure below shows a query open in the Query Designer.

Try It!

• Create a new view using the Query Designer. In the Data View window, right-click the Views node and select New View.
  
  
• Drag tables from the Data View tables section to the query and use graphical controls to manipulate the query definition. Drag fields between the table to specify a relationship.
  
  
• Specify search criteria, sort order, and output columns in the criteria grid.
  
  
• Create a variety of query types: Select, Insert, Update, and Delete. Use an SQL pane to type ANSI-SQL statements — or let the Query Designer generate the SQL for you.
  
  
• Browse and edit live views of data in your database tables.