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^®.

 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.

 Sample

• 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.

Sample

• 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.

Sample

• 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.

Sample

• 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.

 Sample

• 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.

Sample

• 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.

Sample

• 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.

Sample

• 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.

Web Design Tasks

Microsoft^® Visual InterDev™ lets you get right to work on your Web projects, so you can create dynamic, complex Web site.

With Site Designer, you can rapidly prototype the pages in a Web site and design the navigation bar links between those pages in a site diagram. Site diagrams allow you to add pages to an existing Web project and maintain the navigation bar links for pages.Site diagrams provide a graphical representation of pages and allow you to create the hierarchical relationships between pages that Visual InterDev uses to populate the links on navigation bars.

With Link View, you can visualize the links to and from an item in a Web project or any URL on the World Wide Web. Link View displays the links for an item in a link diagram. You can expand and collapse the links for an item in a link diagram to explore inbound and outbound links. Using Link View, you can easily identify the broken links for an item in your Web project.

Templates allow you to create identical pages in your Web site quickly. You can use templates to easily establish a consistent look and feel to HTML or ASP pages in your site.

You can use a site diagram to easily design and build the structure of a Web application. In addition, site diagrams help you to define and modify the navigation links between pages.

Site diagrams can be used to create new Web applications or to redesign the structure of existing Web applications. A Web application can have multiple site diagrams. For example, you can create different site diagrams to define the navigation structure between separate areas of your Web application.

To create a site diagram

• Open or create a Web project.
• From the Project menu, choose Add Item.

The Add Item dialog box appears.

• On the New tab, select the Web Project Files folder and then choose Site Diagram from the pane on the right.
• In the Name text box, type a name for the site diagram. Note that site diagrams files have a .wdm extension.
• Click Open.

A new site diagram appears.

Note When you create the first site diagram for a Web application, Site Designer automatically adds a home page for the site to the diagram. If no home page exists, Site Designer creates one and adds it to the project when you save the site diagram.

Site Designer determines existing home pages based on information on the Web server. In general, Site Designer considers files such as default.htm, default.asp, or index.htm to be home pages. Microsoft® Internet Information Server specifies default.asp for a home page and Microsoft® Personal Web Server specifies default.htm for a home page.

You can add pages to a site diagram from the current project or from other applications. You can also use Site Designer to add new pages to the site diagram and the Web project.

Adding Pages to a Site Diagram

You can add pages to your site diagram in a number of ways. You can drag files from the Project Explorer into the site diagram or you can create new files directly in the site diagram. You can also drag files from other applications, such as Microsoft^® Internet Explorer or Microsoft^® FrontPage^®.

After you have added pages to the site diagram, you can then arrange the pages to create hierarchical relationships. Navigation bars use these hierarchical relationships to determine which navigation links to include on the navigation bars for each page in the site diagram.

Note Each .htm file can only appear once in a site diagram. Other files, such as .asp files, .gif files, and external pages, can appear multiple times in a site diagram.

To create new pages in the site diagram

• Open or create a site diagram.
• From the Diagram menu, choose New HTML Page or New ASP Page.

-or-

Right-click the diagram, and then choose New HTML Page or New ASP Page from the shortcut menu.

A new page is added to the site diagram. You can then drag the page to position it in the diagram. The new page is given a default name.

Each .htm file can only appear once in a site diagram, but .asp files can appear multiple times in site diagrams using different parameters. You can add files to site diagrams by dragging and dropping the files from the Project Explorer into the site diagram or with the Add Existing File command.

Use the Add Existing File command when you want to create a new instance of a file that already exists in your site diagrams. Use the drag and drop method when you do not want to create a new instance of a file but want to include a file in the current site diagram that already exists in another site diagram. If you attempt to drag in a file that already exists in the current site diagram, Site Designer highlights the existing file in the diagram but does not add the file again.

To add pages to a site diagram from a project

1. Open or create a site diagram.
2. From the Diagram menu, choose Add Existing File.

The Choose URL dialog box appears.

3. In the Projects list, select the project name or folder for the file.
4. In the Contents list, select the file you want to add to the diagram.
5. In the Parameters drop-down list, enter a parameter value or bookmark value.
6. Choose OK.

If the file you specify already exists in a site diagram, a message box appears. To add the existing instance, choose Yes. To create a new instance, choose No. If the file does not exist in any site diagram, Site Designer adds the file to the current diagram.

You can then drag the page to position it in the diagram.

To add pages from another application

1. Open or create a site diagram.
2. Open the application containing the page you want to add to the site diagram.
3. Drag the link from the source application into Visual InterDev.
4. Drop the file in the site diagram.

If the file already exists in another site diagram, Site Designer will add the file and its navigation structure to the current diagram. If the file does not exist in any site diagram, Site Designer adds the file to the current diagram.

Note Each page you add to a site diagram from another application or project displays the External page icon. An  external page cannot have child pages in a site diagram.

 Adding a Home Page to a Site Diagram

You can add an existing home page to a site diagram or create a new home page for the Web application. When you create the first site diagram for a Web application, Site Designer automatically adds the site's home page to the diagram. If no home page exists, Site Designer creates one and adds it to the project when you save the site diagram.

If a home page already exists in the Web application, Site Designer identifies the home page based on information on the Web server. In general, Site Designer considers files such as default.asp, default.htm, or index.htm to be home pages. Microsoft^® Internet Information Server specifies default.asp for a home page and Microsoft^® Personal Web Server specifies default.htm for a home page.

To add a home page to a diagram

• Open or create a site diagram.
• From the Diagram menu, choose Add Home Page.

-or-

Right-click the diagram, and then choose Add Home Page from the shortcut menu.

Site Designer automatically adds the current home page for the Web application to the site diagram. When you save the site diagram, the new home page file is added to the current project.

Converting Active Server Pages to HTM Pages

You can create files in Site Designer without regard to the file type and then you can convert individual ASP pages to HTML pages as needed.

To convert ASP pages to HTML pages

• Select the .asp file in the Project Explorer that you want to convert.
• Right-click the page, and choose Rename from the shortcut menu.

Note The Rename command is available for local files only.

• Change the .asp extension to .htm.
• Press Enter.
• In the message box, click OK
• In the Link Pepair dialog box, click Yes.

The .asp file icon is replaced with the appropriate .htm file icon in the Project Explorer.

Applying a Theme and Layout to Pages

Themes and layouts provide a consistent visual design for information on pages. You can apply themes and layouts to new pages created using Site Designer or to existing pages in a site diagram.

To apply themes and layouts

• In a site diagram, select the pages you want to have themes and layouts.
• From the Edit menu, click Apply Theme and Layout.

The Apply Theme and Layout dialog box appears.

• On the Theme tab, select the name of the theme you want to apply.
• On the Layout tab, select the name of the layout you want to apply.
• Click OK.

 

Adding a Page to the Global Navigation Bars

You can create hierarchical relationships between pages using site diagrams. These relationships are used to determine the types of links included on the navigation bars for a page.

You can also indicate that a page appears as a default link on the global navigation bar for a site. For example, you may want your help page and search page to be available as a navigation bar link from any page in your site. Site Designer allows you to do this by specifying that a page is a global navigation bar page.

To add a page to all site navigation bars

• Select a page in the site diagram.
• From the Diagram menu, choose Add to Global Navigation Bar.

A message box appears if the page is currently a child page.

The page is now available as a navigation bar link from all the navigation bars in the site. In the site diagram, the page displays the global navigation bar icon.

To remove a page from all site navigation bars

1. Select the global navigation bar page in the site diagram.
2. From the Diagram menu, choose Remove from Global Navigation Bar.

-or-

Drag and drop the global navigation bar page over another page to create a parent-child relationship.

You can also specify the order in which global navigation bar page links appear on the navigation bars for a site.

To order global navigation bar links

1. From the Diagram menu, choose Reorder Global Navigation Bar.

The Reorder Global Navigation bar dialog box appears.

2. In the Order of pages in global navigation bar list box, select a page.
3. Select Move Up to move the page above another page.

-or-

Select Move Down to move the page below another page.

4. Select OK.

Note You must save the current site diagram in order for the changes to the global navigation bar page link ordering to appear.

Arranging Pages in a Site Diagram

Site diagrams provide an easy way to design and update the navigation structure of a Web application. In a site diagram, you create hierarchical relationships between pages by grouping pages into trees. Trees contain one or more parent pages and one or more child pages. Each Web application can have multiple site diagrams, and each site diagram can have multiple trees.

Tip Each .htm file can only appear once in a site diagram. Other files, such as .asp files, .gif files, and external pages, can appear multiple times in a site diagram.

You drag and drop pages beside or beneath one another in a site diagram to create parent, child, and sibling hierarchical relationships. Use the link lines to aid you in creating hierarchical relationships.

Layouts and the PageNavbar design-time control use trees and independent pages to determine the types of navigation bar links to include in a page.

To create separate groups of pages

1. Select a page in the site diagram.
2. From the Diagram menu, choose Detach from Parent.

The selected page and all its children are now separated from the group of pages above them.

You can easily create child-parent relationships between pages.

To create a parent-child relationship between pages

1. Select the top page of the source tree you want to use as the child pages.
2. Drag the child pages below the parent page until the link line shows the pages connected.
3. Drop the child pages.

You can also create sibling relationships between pages.

To create a sibling relationship between pages

1. Select a source page in the site diagram.
2. Drag and drop the source page beside the target sibling page.

Note Use the link lines to determine the placement of pages either to the right or the left of the target sibling page.