Microsoft Visual InterDev 1.0 Strategic Whitepaper
The Evolution of Web Applications
The Intranet Phenomena
The Tools Dilemma
Integrated Visual Development Environment
Support for Building Active Server Applications
Powerful Integrated Database Tools
Integrated Site Management and Content Development
Openness and Extensibility
While the World Wide Web began its life as a platform for sharing documents over the Internet, today the Web is being used for much more than simple document publishing. In fact, most commercial and corporate Internet sites can be more accurately described as Web applications because they require complex processing to create a more compelling, informative experience for users. Web technology is also experiencing widespread growth as an effective platform for deploying corporate intranet applications. Unfortunately, however, developers of both public Internet sites and corporate intranet sites are finding that integrated visual tools for building dynamic Web applications are just emerging, and today's offerings often fail to meet even their most basic needs. While a variety of Hypertext Markup Language (HTML) editing tools are on the market, they are targeted at publishing static Web pages, as opposed to creating and managing dynamic Web applications. These editing tools provide little help for developers building sites that require sophisticated processing, such as server-side components and database connectivity. The lack of integrated Web application development tools is due to the fact that the underlying technology for Web applications is fundamentally different from traditional client/server technology, so traditional rapid application development (RAD) tools do not work for Web applications. As a result, Web developers must resort to a variety of non-integrated tools, often consisting of little more than text editors, complex common gateway interface (CGI) scripting, and various software libraries stitched together in the most rudimentary ways. Besides impacting developer productivity, the lack of integrated, visual development tools is preventing many corporations from more widely adopting Web technology for internal applications, despite the many potential benefits of the technology.
To meet the needs of developers, Microsoft is introducing Microsoft® Visual InterDev® (formerly code-named "Internet Studio") for building dynamic Web applications for corporate intranets and the Internet. As a member of the Microsoft visual tools family, Visual InterDev was designed from the ground up for developing HTML-based Web applications. In addition, Visual InterDev fully interoperates with the Microsoft FrontPage™ Web authoring and management tool. Because most Web sites are created by teams of people with different skill sets, the combination of Microsoft Visual InterDev and Microsoft FrontPage offers organizations an effective workgroup development platform for developers and non-programmers alike.
Over the past few years, the Internet has blossomed as the most important worldwide communications network, physically connecting consumers and organizations while also providing robust standards for publishing shared information via the World Wide Web. There is no doubt that the Internet has become the de facto information superhighway, and Web protocols have become the information publishing standards for this highway. But as the Web continues to evolve from a document publishing platform to a platform for networked applications, a variety of development issues are being introduced.
Just as Internet Web sites are evolving into sophisticated Web applications, corporations are also beginning to use Web technology within their private corporate networks, or intranets, as an effective way to build and deploy internal applications. For management information systems (MIS) organizations, intranets provide the following core benefits for internal application development:
- Decreased deployment costs. Because intranet applications are server-based, access is seamless for users. The MIS department does not have to distribute client-side software or configure users' desktops. Rather, users can navigate directly to the intranet site and have seamless access to the application with no additional setup or desktop configuration necessary. If the application functionality needs to be changed, MIS professionals can make updates on the server, and all users will instantly be upgraded with the new capabilities. In organizations with thousands of desktops potentially distributed throughout hundreds of remote offices, these benefits alone can justify the use of Web technology for internal application deployment.
- Cross-platform applications. Intranet applications are delivered as HTML pages and are cross-platform in nature. This allows organizations with heterogeneous desktop platforms to ensure that all users can access the application without leaving some users out—or requiring special versions for each platform.
- Low-bandwidth applications. With Web applications, most processing is done on the server and only HTML pages are delivered to the client (sometimes with small embedded software components and scripting information). Because of this, Web applications are automatically suited for low-bandwidth connections. This is convenient for organizations that have many mobile workers, such as sales agents who need to dial in to access corporate information from the field or workers who need to dial in to work from their homes.
While these benefits are tangible, MIS organizations are constrained because the tools to support Web application development are immature at best—often consisting of little more than a simple text editor!
The lack of tools for developing Web applications is due to the fact that the existing, more mature, client/server tools do not work for Web application development. This is because the underlying network and user interface technologies for Web applications are fundamentally different from traditional client/server applications. For example, traditional client/server development environments can rely on persistent connections between the clients and servers, while Web connections over Hypertext Transfer Protocol (or HTTP, the network protocol used to send and receive information over the Web) are intermittent—constantly being established, broken, and reestablished as the browser requests pages and objects over the network. Also, user interfaces for traditional client/server development make use of multiple windows and are typically based on proprietary forms technologies provided by RAD tools. These tools leverage the underlying operating system to present the various elements of the user interface. A Web-based graphical user interface, on the other hand, is based on a page-browsing metaphor and is constructed using HTML—a document publishing standard that works across platforms. Finally, traditional client/server applications can easily maintain state between the various windows that comprise them (for example, using globally scoped variables); Web applications are a series of loosely connected pages with no notion of persisted state between them.
Because of these fundamental differences, a new category of development tools geared toward Web technologies needs to evolve. To meet this challenge, Microsoft is introducing Microsoft Visual InterDev, a complete development system for building dynamic Web applications for corporate intranets and the Internet. Besides sharing the same look and feel as other Microsoft visual development tools, Visual InterDev makes it easy to integrate components and business processes developed using Microsoft Visual Basic, Microsoft Visual C++®, Microsoft Visual FoxPro® , Microsoft Visual J++®, and a variety of third-party tools within the context of an overall Internet or intranet solution, thus leveraging an organization's investment in these tools.
Visual InterDev is a tool specifically designed for developers who want to build sophisticated, dynamic Web applications, as opposed to non-programmers. Visual InterDev supports team-based development and fully interoperates with Microsoft FrontPage 97, a tool targeted at end users and designers. Thus, teams of developers and nonprogrammers can work together on Web sites. Visual InterDev is based on the following key design goals:
- Integrated visual development environment. Visual InterDev includes a comprehensive development environment that integrates all the tools necessary to build and deploy Web applications.
- Support for building Active Server applications. Active Server applications are based on Active Server Pages, a new feature of Microsoft Internet Information Server 3.0. As a server-side application framework, Active Server Pages make it easy to build dynamic Web applications with sophisticated server-side processing such as database access, state management, server-side scripting, and reusable server components. Visual InterDev is the best way to build Active Server applications.
- Powerful, integrated database tools. Visual InterDev offers the most complete and advanced database development features available in any Web development tool. Visual InterDev provides scalable Internet and intranet-based access to databases supporting Open Database Connectivity (ODBC). This includes high-end database management systems such as Microsoft SQL Server™ , Oracle, Informix and IBM DB/2, as well as desktop databases such as Microsoft Access and Microsoft Visual FoxPro.
- Site management and content development tools. Visual InterDev includes complete Web site management that is compatible with Microsoft FrontPage, including a unique site-visualization tool to aid in ongoing site management tasks. In addition, Visual InterDev includes a version of the FrontPage WYSIWYG HTML editor as well as tools for developing Web-based images and sound effects.
- Open and extensible. Visual InterDev is designed to support industry standards such as HTML, HTTP, ODBC, ActiveX, the Component Object Model (COM), and Java. As such, it provides the highest degree of interoperability with other tools and platforms and provides for seamless extensibility through third-party components.
Visual InterDev and Microsoft FrontPage
Figure 2. Almost all Web sites are created and maintained by teams of people working together, including both programmers and non-programmers alike. The combination of Microsoft FrontPage and Microsoft Visual InterDev is an ideal workgroup solution, because team members can work on the same Web site simultaneously, each using a tool tailored for his or her specific needs.
The Visual InterDev IDE and Project System
Figure 3. Microsoft Visual InterDev is an integrated development system for building dynamic Web applications for corporate intranets and the Internet. The IDE brings together a variety of visual tools that help increase the productivity of Web developers building sophisticated Web sites. Visual InterDev shares the same IDE as Microsoft Visual J++ and Microsoft Visual C++, enabling developers to have projects using Visual C++, Visual J++ and Visual InterDev open simultaneously within a single, global work space.
Visual InterDev includes a variety of visual tools within a single well-integrated development environment. Developers can create and manage shared Web projects, and Visual InterDev will automatically publish the content developed to a Web server and provide ongoing site management capabilities for that Web site. The integrated development environment (IDE) also includes visual database tools for creating and managing data-driven Web sites where Web pages are dynamically constructed based on live connections to databases.
The Visual InterDev IDE is based on the next-generation Microsoft Developer Studio shell, first introduced with Microsoft Visual C++ and also used by Microsoft Visual J++. Users of these tools will be immediately familiar with the IDE, and new users will find it very intuitive and easy to learn. It is important to note that the IDE provides an integrated, global work space for Visual InterDev Web sites, Visual J++ projects, and Visual C++ version 5.0 projects. Developers can open multiple projects of these types simultaneously within the global work space. For example, a developer might have a Visual J++ applet project open in the IDE as well as an Visual InterDev project so that he or she can both develop and test the applet on the Web site within a single development environment.
A Visual InterDev project consists of a live Web site. Unlike the process involving traditional client/server tools, when developers open a "project" they are actually opening a live view of a site as it exists on the Web server. The server can be a personal development server running on a developer's workstation, but more typically it will be a staging or production Web server running on a network. The IDE is thus a complete Web site management tool that allows the developer to modify the structure of a Web site easily (for example, adding a subdirectory) and to edit, add, move, rename, and delete files and folders on the Web site. Multiple Web sites (projects) can be open at the same time. The Visual InterDev IDE includes a main File View that allows the developer to view and navigate a Web site using the Explorer-based metaphor in the Windows® 95 operating system. The Visual InterDev IDE presents the entire Web site, including all content (such as HTML pages, .gif/.jpg image files, controls and applets, and other files) as well as the complete subdirectory structure of the site.
To edit or examine a particular element of the site, the developer simply clicks the file and it is retrieved from the Web site, copied to the developer's workstation, and opened in the appropriate editor for that file type. Once the desired changes are made, the developer can save the changes locally, or choose to "release" the file back to the Web server. The project model is multiuser: Multiple developers can work simultaneously on the same Web site. Check-in and check-out capabilities are provided by integration with the Microsoft Visual SourceSafe® version control system (a topic covered later in this document). The project system makes use of the FrontPage server-side extensions so that Visual InterDev developers and FrontPage users can work together simultaneously on the same Web sites.
The IDE makes it easy for developers to create new sites with wizard technology and to import content into existing sites, including entire directory trees. Developers are also able to browse pages in the project directly inside the IDE, an important productivity feature, since developers do not have to pull up a separate Web browser window to view a site under construction. The integrated browser is based on the Microsoft Internet Explorer 3.0 Web browser control and supports all its features, including viewing pages with Java applets, ActiveX controls, ActiveX Documents, scripting, style sheets, and HTML 3.2 features such as tables and frames. The IDE also provides a "preview in browser" feature so that the developer can set up other browsers (for example Microsoft Internet Explorer 3.0 and Netscape Navigator) and with a single mouse click preview any page in separate windows running those browsers.
Design-Time ActiveX Controls
Design-time ActiveX controls are an important new feature introduced with Visual InterDev. They provide all of the benefits of component software offered by standard ActiveX controls, such as plug-and-play functionality and visual editing at design time. However, design-time ActiveX controls generate HTML-based content, viewable on any platform and any browser.
Because design-time ActiveX controls differ from standard ActiveX controls in that they do not contain a binary, run-time component, Microsoft has decided to name them as a separate category of ActiveX controls. It is important to note that design-time ActiveX controls do implement COM interfaces, so they can be arbitrarily shared across development tools provided by various software vendors. However, because they generate HTML and text-based scripting, there is no binary run-time component—hence their output can be viewed on any platform in any browser. These controls are based on published COM interfaces developed during design previews held at Microsoft, and any interested third party can build them. Design-time ActiveX controls will co-exist with standard ActiveX controls, which do provide a binary run-time component that offers run-time functionality not offered by design-time ActiveX controls. For example, standard ActiveX controls, unlike design-time ActiveX controls, are exposed as COM objects at run time and design time, and can be scripted at run time by exposed methods, properties, and events.
Design-time ActiveX controls can also automatically generate server-side or client-side scripting required to accomplish simple or very complex tasks within a Web site. In essence, they are visual helper components that help developers construct dynamic Web applications based on HTML.
It is hard to overstate the importance of design-time ActiveX controls for Visual InterDev. The product derives maximum extensibility using design-time ActiveX controls; third-party software vendors and corporations can seamlessly extend the tool with specialized functionality using custom design-time ActiveX controls. Design-time ActiveX controls are based on COM and hence can be shared across tools and applications. They can be developed in any language that supports COM such as C, C++, Java, Visual Basic version 5, and many others. Visual InterDev provides several integrated design-time ActiveX controls, such as the Data Command Control for visually constructing complex data queries and various other data access controls. These controls provide an easy-to-use, visual mechanism for developers to construct complex database connectivity logic within a Web site, with the control doing the hard work of generating the HTML and scripting necessary for the run-time processing of the application.
Microsoft plans to supply a growing set of design-time ActiveX controls on the Visual InterDev Web site, in effect allowing the live upgrading of the tool with new functionality. In addition, Microsoft expects that over time, independent software vendors (ISVs) will provide hundreds of design-time ActiveX controls compatible with Visual InterDev, just as there are hundreds of ActiveX controls available for use with Visual Basic. It should be noted that Visual InterDev also supports standard ActiveX controls as a way to extend Web pages with client-side software components that execute inside the browser.
Visual InterDev and Active Server Pages
Visual InterDev is an integrated visual development tool that makes it easy to develop dynamic Internet and intranet applications based on Active Server Pages, a new feature for the Microsoft Internet Information Server.
Active Server Pages were formerly known as The ActiveX Server Framework. Active Server Pages will be an integrated feature of Microsoft Internet Information Server 3.0. Visual InterDev includes this feature, so that existing users of the Windows NT® Server operating system 4.0 and Internet Information Server 2.0 can easily upgrade their Web servers with this new functionality simply by installing the Visual InterDev server components on Windows NT Server 4.0. Active Server Pages can also be used with the development versions of Internet Information Server available on Windows NT Workstation 4.0 and Windows 95. In either case, there are no additional server licensing fees for this feature.
As a server environment, Active Server Pages are compatible with the most popular Web browsers, so applications developed with Visual InterDev require no special client software and can be viewed on most browsers on any platform. To understand the flexibility of Visual InterDev to meet the needs of both Internet and intranet developers, it is important to first examine the rich functionality Active Server Pages provide.
Web Origins: Linked Static Content
Originally both the Web server and Web client were "dumb," with a server sending HTML files, which rendered formatted text to a client. This arrangement is still often in use. In this scenario, a user sends a request to a Web server by way of HTTP for a particular HTML file. The server receives the request and sends the HTML back to the client's browser. The browser reads the HTML and displays it accordingly. While this model provides instant access to nicely formatted pages of information for employees or potential customers, interaction between the user and the Web server is limited. In addition, the information is only as up-to-date as the last time someone manually edited the files.
With CGI, Internet Server Application Programming Interface (ISAPI and other gateway interfaces, a user can send an HTTP request to an executable application instead of requesting a static HTML file. The server immediately runs the specified program. The program can read environment variables and standard input to determine what values were passed with the request (for example, values that a user enters by filling out an HTML form). The program then parses the values for meaningful information and generates output in HTML to send back to the client. The disadvantage of gateway programs is that they are difficult to create and change, and they require an entirely different design process than HTML pages. In addition, CGI-type applications have high server overhead since they require the Web server to change contexts between the server process and the CGI executable process on each program request.
Figure 4. Active Server Pages are a powerful new Web application development framework for building dynamic Web sites. Active Server Pages are HTML pages that contain scripts processed on the server before being sent to the Web browser. These server-side scripts, written in VBScript, JScript, Perl or other scripting language, can make use of custom or packaged ActiveX Server components to extend the Web server with application-specific functionality.
Microsoft Internet Information Server 3.0 and Active Server Pages
Active Server Pages are based on the ActiveX scripting engine for Microsoft Internet Information Server 3.0, which allows developers to include server-side executable script directly in HTML content. Hence, applications developed with Visual InterDev are:
- Content-centric—Completely integrated with the underlying HTML files
- Simple—Easy to create with no compiling or linking of programs
- Powerful—Object-oriented and extensible with ActiveX Server components
What does this mean for Web application developers? It means the difference between publishing content and providing interactive business applications, as the following examples illustrate.
- For the human resources (HR) manager, it is the difference between publishing an HR handbook and providing interactive benefits management.
- For the real estate broker, it is the difference between advertising properties and providing interactive appointment scheduling, mortgage application processing, and more.
- For the travel agent, it is the difference between publishing flight schedules and providing online reservations and ticketing.
- For the mutual fund manager, it is the difference between publishing a prospectus and providing online portfolio management.
- For MIS professionals, it is the difference between setting up a Web site to share documents and setting up a site to provide fully interactive Web applications.
With Active Server Pages, developers can use various scripting languages, including VBScript and JScript to build robust and highly scalable solutions. Visual InterDev provides a complete development system for developing ActiveX Server applications, including a variety of visual tools. Many of these tools automatically generate much of the server scripting necessary to perform complex tasks, such as establishing pooled database connections that can be used globally in a site; performing complex Structured Query Language (SQL) queries against databases and integrating the data into dynamically constructed HTML pages; and creating HTML forms that are directly linked to databases. While the visual tools are powerful and easy to use, Visual InterDev always provides the developer with the option of working directly with source code for maximum flexibility.
Active Server Pages
The basic ActiveX Server unit is the Active Server Page file, or .asp file. An .asp file consists of straight ASCII text in one of three forms:
Figure 5. An Active Server Page (ASP) is an HTML page that contains server-side scripting. Server-side scripts are designated with an opening and closing <%> tag and are processed before the page is sent to the browser. In this case, a simple loop is performed to display "Hello World" in an increasing font size within an HTML page. The result is shown in Figure 6.
Figure 6. Pictured above is the Hello World Active Server Page. All server scripting is processed on the server, and only HTML is sent to the client, as the associated source code viewed from Microsoft Internet Explorer 3.0 shows.
Script consists of commands inside ActiveX script tags or HTML <SCRIPT> tags that can be processed on the server by the ActiveX Server engine. When a user requests a URL with an .ASP file extension, the ActiveX Server engine reads through the file from top to bottom, sending text and HTML back to the user's browser, and executing any commands. ActiveX Server scripting is completely integrated with HTML pages. All that's needed to enable the ActiveX Server engine to read a file is to give the file an .asp file extension. Thus, existing HTML files can simply be renamed from an .HTM extension to an .asp extension, and they become Active Server Pages. Developers can then make the HTML dynamic by adding ActiveX Server script to the ASP page. The host language of ActiveX Server scripting is VBScript or JScript. However, developers can use the <SCRIPT> tags to include scripts from other scripting languages, such as Perl.
Multitier Applications With ActiveX Server Components
Even though writing ActiveX Server scripts with Visual InterDev is relatively easy, the scripts provide a powerful environment for Internet and intranet applications. For example, developers can incorporate sophisticated functionality through ActiveX Server components (previously known as OLE Automation Servers). ActiveX Server components are an extremely important feature of Visual InterDev. ActiveX Server components do not need to be constrained to the safety restrictions imposed by VBScript and JScript because they execute on a controlled server as opposed to users' desktops. They can thus be used to extend ActiveX Server scripting with capabilities such as direct access to the file system and access to machine and network resources.
As COM components, they can be driven by VBScript and JScript, and they can execute as either in-process Dynamic Link Libraries (DLLs) or out-of-process executables. For lightweight components designed as in-process DLLs, performance can be dramatically improved over CGI solutions, because no context switching between processes is incurred as Web users browse pages that use the component. In addition, ActiveX Server components can be instantiated once and shared between all users connected to the Web site for more efficient use of server resources. Using Visual InterDev, developers can easily integrate ActiveX Server components written in Java, Visual Basic (4.0 or higher), C, C++ or other languages that can create COM components.
Visual InterDev with ActiveX Server components enables developers to create multitier Web applications easily. For example, a component that provides financial modeling and analysis functions could be used to build portions of a financial services Web application. Using Visual InterDev, the developer could create Active Server Pages that execute the component on the Web server, and use the component's methods (functions) to return financial modeling information to users in dynamically constructed HTML pages. Because the component executes on the server, the content can be viewed on any platform by any browser.
Integrating Legacy Systems into Web Applications with ActiveX Server Components
ActiveX Server components provide a convenient and effective way to tightly integrate a Web application with internal and legacy systems. For example, a client/server insurance processing application written in Visual Basic can be exposed as a set of ActiveX Server components that can be called directly from Web pages by way of ActiveX Server scripting. In this fashion, Visual InterDev helps to protect and extend organizations' investments in existing tools and systems, ranging from mainframe applications to more recently deployed client/server applications. Visual InterDev serves as the tool that can be used to effectively integrate the functionality of these systems directly into the Web site with ActiveX Server components.
Distributing ActiveX Server Components Using DCOM
Figure 7. Visual InterDev enables corporations to take advantage of distributed ActiveX Server components with distributed COM (DCOM). DCOM provides complete network transparency, so developers program DCOM components using the same scripting logic as if the components were running locally on the Web server. DCOM components can provide greater scalability and fault tolerance for mission-critical Web applications.
Because ActiveX Server components are COM objects, out-of-process server components can be seamlessly distributed over a server network using distributed COM (DCOM). This means that components requiring a heavy amount of processing can be distributed to application servers that work in conjunction with the Web server to efficiently process requests from users browsing the site. For example, a price look-up component that performs complex pricing calculations could be built as an ActiveX Server Component and distributed through DCOM to execute on a specialized application server. The advantage of DCOM is that distributed computing is transparent to the developer. The ActiveX Server scripting used to execute and manipulate the remote component is exactly the same as if the component were running directly on the Web server. Distributed solutions built with DCOM components and Visual InterDev offer more effective load balancing, higher performance applications, and greater fault tolerance for enterprise-class Web applications. Active Server Components can optionally be managed using the Microsoft Distributed Transaction Coordinator.
Database Development for the Web
Figure 8. Visual InterDev provides a visual interface for quickly adding sophisticated database features to a Web site. Pictured above is the data connection dialog box that allows the developer to add a data connection within a Web site to any ODBC data source. The property page allows the developer to visually set properties for the connection, such as the data source, cursor driver, query time-out values, and others. Visual InterDev does the hard work of generating the HTML and server-side scripting, automatically saving the logic into an Active Server Page.
Powerful database connectivity options and visual database tools are an integral component of Visual InterDev. The database connectivity features are based on the industry standard ODBC, and the visual tools work with databases supporting ODBC, including Oracle, Microsoft SQL Server, Microsoft Access, Microsoft Visual FoxPro, Informix, IBM DB/2, and many others. In addition, Visual InterDev enables the creation of scalable database solutions because it leverages Active Server Pages. The core database components of Visual InterDev include:
- Integrated Data View
- Database design-time ActiveX controls
- Database wizards
- The Query Designer
- The Database Designer
The integrated database-access tools are based on Microsoft Active Data Objects, which provides flexible, object-based database connectivity to ODBC data sources. In addition, Visual InterDev can be used with alternate data access components developed by third parties.
Active Data Objects
Active Data Objects (ADO) are used to provide flexible and scalable database connectivity within Visual InterDev applications. Specifically designed for Web-based data access, ADO provides an object-based approach to data access over the Web. Through ActiveX scripting, connections to databases can easily be established to any ODBC data source, and a variety of methods within the component provide the developer with a powerful set of database commands for manipulating data and creating data-driven Web pages. ADO allows manipulation of database-defined data types, including binary large objects (BLOBs) such as .gif and .jpg image files retrieved from databases and dynamically written into Web pages. In addition, ADO provides a rich set of properties for setting locking levels, cursor options, query and login time-outs, transaction support, result set scrolling, error handling, and more. Using VBScript or JScript, ADO provides developers with maximum flexibility to develop powerful database functionality within their Web sites.
Figure 9. Visual InterDev includes an integrated view into any ODBC data source being used within the Web site. Pictured above, the Data View pane on the left shows an open data source to a Microsoft Access database and a Microsoft SQL Server database, including its tables, fields, and views for each.
Visual InterDev includes the Data View feature, which provides a visual interface to all of the databases being used within a Web site. Besides depicting each database connection being used in the site, the Data View provides a live connection to each database, allowing developers to work directly with these databases within the IDE during Web site development. For example, the developer can open any database to view tables, defined views, and even stored procedures. The Data View can provide detailed information on objects and properties within each database, including table definitions and field types, key structures, stored procedures, and so on. The Data View works with the Query Designer and Database Designer features and provides a sophisticated database development, administration, and maintenance system tightly integrated with the Visual InterDev IDE. The Data View works against any ODBC-compliant database and will show multiple connections against heterogeneous databases.
Database Design-Time ActiveX Controls
Visual InterDev builds on the ADO foundation by providing special design-time ActiveX controls that automatically generate much of the server-side scripting, including the ADO calls necessary to establish database connections within a Web site, perform queries and display results. In many cases, the developer can use the design-time ActiveX controls to create data-driven Web sites with little additional programming required. Visual InterDev, however, provides developers with the ability to view and develop directly in ActiveX Server scripting using the ADO component for maximum flexibility.
One example of a design-time control is the Microsoft Data Command Control. With the Data Command Control, the developer can select a database connection to an ODBC data source and then visually build a query against that connection using the Visual InterDev Query Designer. Once tested and complete, the Data Command Control generates all of the ActiveX Server scripting necessary to perform the query and automatically adds the scripting information in the appropriate Active Server Page. Data range controls provide similar functionality for visually building complex data queries, but also generate the looping and display logic necessary to page through a result set as a series of dynamically constructed HTML pages.
Figure 10. The Data Form Wizard steps the developer through the process of building sophisticated and highly customized HTML forms bound to databases. The wizard automatically generates the HTML and server-side scripting logic, which can be further modified, if desired, by the developer.
In addition to design-time ActiveX controls, Visual InterDev also provides wizards that lead the developer through the process of creating custom data-bound HTML forms. After prompting the developer for information, the Data Form Wizard will automatically generate the HTML and ActiveX Server scripting information required to create complex HTML forms that are bound to databases. For example, a developer could use the Data Form Wizard to visually construct a guest book form, complete with the logic to accept user input; update a database of registered users; and display a listing of all users registered in the guest book database. Because the wizards, like design-time ActiveX controls, generate standard HTML and ActiveX Server scripting, developers can modify the generated source code as desired for further customization.
The Query Designer
Figure 11. The Visual InterDev Query Designer allows the developer to visually construct complex SQL queries against any ODBC data source.
Visual InterDev provides a sophisticated SQL Query Designer that works against any ODBC data source. The integrated Query Designer provides an extremely easy-to-use interface for visually constructing even the most complex SQL statements and generates the Data Manipulation Language (DML) for SELECT, INSERT, UPDATE, and DELETE queries. Developers can open live views of data sources and drag tables directly into a design pane of the Query Designer window to build their queries. As the developer selects fields from tables, the SQL pane will show the dynamically constructed SQL statement. Developers can directly modify the SQL statement and the changes will be reflected in the query design pane. In addition, the Query Designer allows developers to execute any SQL statement to test it and displays the results in a results pane. The Query Designer enables developers to create complex queries across multiple tables and databases easily, automatically creating SQL joins and visually depicting these relationships in the design pane.
The SQL pane also is a live pane and can be used to create stored procedures, execute arbitrary database definition language (DDL) commands directly against any ODBC data source, or perform ad hoc SQL queries. Visual InterDev thus provides a complete, tightly integrated database development and administration tool for Web developers. It is important to note that the Query Designer works in conjunction with the Query Control (a design-time control), so that once developed and tested in the Query Designer, the HTML and server scripting necessary to execute the query is automatically generated and embedded in the appropriate Active Server Page.
The Database Designer
Figure 12. The Database Designer allows developers to create database schemas for Microsoft SQL Server databases. The tool provides a powerful and flexible database administration environment that simplifies the most complex SQL Server administration tasks.
In addition to providing the visual Query Designer, which works against any ODBC-compliant database, Visual InterDev also provides a complete Database Designer for users of Microsoft SQL Server version 6.5. The Database Designer is based on an extensible architecture so that support for other database systems can be added in the future. Using the Database Designer, database administrators and developers can create new SQL Server databases and modify the structure and properties of existing SQL Server databases. Plus, database administration operations that used to take hours can be accomplished with a couple of clicks of the mouse. For example, a developer or database administrator can use the Database Designer to change the data type on a SQL field (for example, from a type CHAR to a type INT) with a simple drop-down selection. Visual InterDev will then automatically change the field type, which ordinarily would require manual DDL operations to export the entire table, drop the table, create a new table with the new data type, and import the data into the new table. The Database Designer can generate scripts of DDL that can be reviewed and submitted to database administrators for review and execution in controlled database environments.
The Database Designer can also be used to set up complex database designs with unique and check constraints and to define relationships between tables using foreign keys. By allowing developers to group tables together functionally, database diagrams can be dragged into the Query Designer to quickly construct queries against these logical groupings.
Some database tools for Web applications offer visual aids for easing the development of data-driven Web sites, but do not provide the scalability required for Internet sites or production intranet sites hosting mission-critical applications. Visual InterDev, however, provides both ease of use with extensive visual tools, and the scalability required for mission-critical, data-driven Web sites. For example, global database connections can be established for an entire site, and Internet Information Server will automatically pool these database connections across users. Pooling, connection caching, and time-out values are all established automatically based on default properties, but they can easily be customized by the developer. Visual InterDev also makes it easy to connect to multiple heterogeneous databases within a Web site, returning or updating data that has been visually integrated within a single HTML page for the user. For example, Visual InterDev can be used to return data from an Oracle database running on a UNIX server, as well as data from a SQL Server database running on a Windows NT–based computer, all integrated within a single HTML page for the user.
Site Management Features in the Project System
Visual InterDev includes extensive site management features integrated within the development environment. These features begin with the integrated project system that presents a live view of the site as it exists on the Web server. The project system provides the developer with the ability to create new Web sites, to view content on an existing Web site, and to create, add or modify folders and files within a Web site. Specific site management features within the project system include:
- Creation of new Web sites with Web site wizards. The wizards step the user through the process of creating new Web sites, automatically creating a new site on the Web server chosen.
- Direct file manipulation of any item in a Web site. Developers can copy, delete, add, rename, and edit any file in the Web site from within the IDE, using the File View feature.
- Ability to import content files and directory trees into a Web site. Developers can use the Import File and Import Folder commands to import existing content from any local or network resource into the Web site.
- Copy Web command. An entire Web can be moved from one server to another server using the Copy Web command. This is useful for moving a Web from a staging server to a production server, for example.
- Object properties. Developers can right-click on any object on the Web site, and Visual InterDev will present a property page that contains useful information, such as file size, modification date and all incoming and outgoing links to a file.
Automatic Link Repair
The project system is able to track links within a Web site and ensure that they are valid. For example, should a developer rename a file, the system will automatically detect all the pages throughout the site that reference that name as part of a URL reference (hyperlink) and automatically fix these references to avoid broken links. In addition, should a file be moved or the site physically restructured using Visual InterDev, the system will automatically repair links in this manner. Finally, should a page or file be deleted, Visual InterDev will notify the user of all the references to that file that exist within the site.
Figure 13. Link View allows developers to visualize the logical structure of a Web site. Pictured above, Link View shows a graphical representation of two HTML pages within a Web site and the references these pages have to various elements, such as .gif images and .wav files. Broken links are depicted in red.
Besides providing developers with automatic link repair and site management capabilities through the File View, Visual InterDev also has a unique Web visualization tool, called Link View. Link View presents a graphical view of the Web site, visually showing the logical relationship of pages within the site. For example, Link View can be used to visually depict the links from a particular HTML page to other pages inside or outside the Web site. Developers can expand or collapse the view to any level, showing as many pages or sections of the Web site as they want. Besides diagramming links, Link View also depicts specific information on each file, using visual icons to depict its file type, such as HTML pages, Active Server Pages, .gif/.jpg image files, ActiveX controls, Java applets, 2.5D Layout files and even design-time controls. Link View will graphically depict all broken links in red, as well as show external links in addition to internal links. Link View thus provides a smart design-time view of the site, and developers can use the graphical view to launch editors on each file simply by double-clicking the file.
With Link View, the developer is also able to filter the view so that only specific information is depicted. A developer may choose to filter the view to show (in any combination):
- HTML pages
- Multimedia files
- External files
- Primary links
- Secondary links
Multiuser Development and Integration with Visual SourceSafe
Visual InterDev provides integrated source management for users of Microsoft Visual SourceSafe 5.0. Organizations using Visual SourceSafe can place a Web project under source control. Source management is especially helpful when teams of people will be working on the same Web site, because it provides explicit check-in and check-out capabilities for all files in the site. In addition, the Visual SourceSafe revision tracking and merging features help developers to protect their work—giving them, for example, the ability to roll back to an earlier version of a file or to compare in detail the differences between two versions of a file.
Visual InterDev integrates with Visual SourceSafe so that any project can be put under source control without requiring Visual SourceSafe itself to be installed on the developer's workstation. Instead, all Visual SourceSafe features execute on the server. For Visual InterDev projects under source control, the Visual SourceSafe integration features include the following:
Automatic creation of Visual SourceSafe projects. When a project is placed under source control, Visual InterDev will automatically create the Visual SourceSafe project on the Web server, and add the existing content of the Web site to the source control database.
Check-in and check-out files. As developers request to edit individual files in the Web site, Visual InterDev will explicitly check the file out of the Visual SourceSafe project before opening the file. Should another person already have it checked out (for instance, another Visual InterDev user or a FrontPage user working on the same project), the developer will be notified and permitted a read-only copy.
Automatic addition of elements to a Visual SourceSafe project. As developers create new files for a Web site, Visual InterDev will automatically put these elements under source control, using the Visual SourceSafe project set up for the site. For example, if a developer chooses to import a folder that contains 10 files and two subfolders, Visual InterDev will automatically add these elements to the Visual SourceSafe project. Should a user create a new file, such as a new HTML page, Visual InterDev will create the new entry in the Visual SourceSafe project and automatically check the element out to the developer for editing.
Content Development Tools
Besides offering an integrated visual environment for developing the next generation of server-based Web applications and data-driven Web sites, Visual InterDev also provides integrated tools for developing Web pages, including Web pages with client-side scripting, ActiveX components, and Java applets. In addition, Visual InterDev includes multimedia content editing tools: Microsoft Image Composer and Microsoft Music Producer. These tools allow developers to develop sounds and images easily for use in a Web site.
WYSIWYG HTML Editing
Visual InterDev includes a version of the award-winning FrontPage 97 HTML editor. Thus, teams of developers and business end users can share a common, leading-edge HTML editing environment while working in the tools specifically designed to meet their differing needs.
ActiveX Controls and Java Applets
Visual InterDev includes integrated support for adding ActiveX controls, Java applets and Netscape plug-ins to Web pages. When working with ActiveX controls, developers are presented with a visual Object Editor that allows them to visually modify the component to fit their needs. A visual property table, similar to the Visual Basic property table, allows developers to modify a component's properties easily, without ever needing to see or work with source code. After visually working with a component, the Object Editor will automatically generate all of the HTML syntax (based on the W3C industry-standard OBJECT tag) to bring the component into the Web page and execute it. Perhaps most important, the ActiveX controls are displayed in true WYSIWYG fashion directly in the FrontPage 97 editor, and can even be dragged, dropped and sized directly within the page. With over 1,000 ActiveX controls currently available, providing a wide range of functionality ranging from multimedia to multipoint conferencing to real-time data feeds, Visual InterDev offers true extensibility.
The integrated FrontPage editor also provides support for easily inserting Java applets and Netscape plug-ins. Developers can visually set characteristics such as size and position, and the editor will display the frame for the Java applet or Netscape plug-in within the document.
Figure 14. The Script Wizard provides a visual interface for building client-side scripts that wire together various ActiveX controls on a Web page. The Event Pane allows the developer to select from a list of events and wire an event to an action in the Action Pane. The Script Wizard generates both VBScript and JScript code and provides a code entry window where developers can conveniently enter lines of custom code.
Client-Side Scripting in HTML Pages
Visual InterDev also includes a client-side Script Wizard, first introduced with the ActiveX Control Pad. The Script Wizard makes it easy to add interactivity to Web pages, based on actions and events associated with ActiveX controls. The Script Wizard includes a visual interface for easily connecting an event (such as a mouse click) with an action (such as playing a video clip). The Script Wizard lists all of the events associated with a given ActiveX control in the Event Pane. The developer can select an event in the Event Pane and associate it with an action in the Action Pane. Multiple actions can be added in this manner to a single event, without requiring any programming, because the Script Wizard generates the actual lines of script code added to the HTML page.
Using the Script Wizard, developers can easily integrate the behaviors of multiple controls, thus creating an integrated application from potentially diverse sets of components, with each component providing a specific functionality. The Script Wizard will generate either VBScript or JScript code, depending on developer preference. While aiding the developer in connecting events to client-side scripts, the Script Wizard's code-entry window always permits the developer to code in straight VBScript or JScript if desired, or to modify the code generated. All client-side scripts developed with the Script Wizard are embedded as text within the HTML document using the W3C HTML <Script> tag.
2.5D HTML Layout Editor
Visual InterDev also includes a 2.5D (or "frame-based) HTML Layout Editor introduced with the Microsoft ActiveX Control Pad. The HTML Layout Editor, similar to a Visual Basic form, makes it possible to precisely place multiple ActiveX controls, providing the developer with exact control over x, y coordinate placement and z-ordering (layering) of controls. But rather than converting the form-based layout information into a best possible representation in HTML (which currently provides no 2.5D layout capabilities), the HTML Layout Editor saves the information using new (draft) World Wide Web Consortium (W3C) syntax that extends HTML with 2.5D layout capabilities. This provides developers with exact control over object placement and object layering on a Web page. The HTML Layout regions use the new style sheet attributes specified in a W3C draft specification for Cascading Style Sheets (see http://www.w3.org/TR/WD-layout.html) and are rendered by the HTML Layout Control, which is part of the Microsoft Internet Explorer 3.0 Web browser.
The HTML Layout Control provides the run-time rendering of 2.5D layout regions within Microsoft Internet Explorer 3.0. It is included in the "Complete" installation of Microsoft Internet Explorer 3.0, and is also available for separate, automatic download as an ActiveX component. The HTML Layout Control also works in Netscape Navigator on Windows 95 and Windows NT through the ActiveX plug-in for Netscape.
Figure 15. Visual InterDev includes a 2.5D HTML Layout Editor, similar to a Visual Basic form.
HTML Layout regions provide developers with a form upon which they can exactly position any number of ActiveX controls. Scripting within HTML Layout regions is also possible by using the Script Wizard. The HTML Layout Editor thus makes it possible to build rich, interactive user interfaces for Web pages. As the W3C finalizes the specification for 2.5D layout in HTML, support for browsing 2.5D regions will become native to Microsoft Internet Explorer and, quite likely, to other Web browsers.
The HTML Layout Editor offers the following editing features:
- Toolbox control customization. Right-clicking on the toolbox allows users to add and delete individual controls supplied by third-party vendors.
- Toolbox custom tabs. New toolbox tabs can be added using the toolbox shortcut menu.
- Toolbox object templates. Users can drag objects from the form back to the toolbox, creating an object template. The template captures all of the properties set by the user and can be used to incorporate objects with custom properties easily into new pages. Groups of controls can also be used as object templates in this manner.
- Multiple level undo and redo. Most edit operations can be undone easily.
- Control alignment, spacing and sizing. Controls can be aligned, sized and spaced automatically for easier layout.
- Control drag-and-drop. Controls can be positioned exactly with drag-and-drop editing. Also, controls can be dragged from one page to another page.
- Control layering (z-ordering). Object layering can be set by right-clicking on any control.
- Script Wizard. The Script Wizard can be invoked from the menu to add interactivity to a 2.5D layout region.
Microsoft Image Composer
Microsoft Image Composer is especially useful for developers who need to modify or create images to fit a Web site, and it is designed as an easy-to-use tool for developers who are not graphics professionals. It will recognize most popular image formats, including directly reading Adobe PhotoShop files, while making it easy to save images into .gif or .jpg file formats for use on the Web. It is easy to arrange, customize and create images in Microsoft Image Composer for use on Web sites developed and maintained in Microsoft Visual InterDev. Users can launch Microsoft Image Composer from Visual InterDev by clicking a toolbar icon or clicking images directly from within the IDE. Microsoft Image Composer has a command that automatically saves images directly to the Microsoft Visual InterDev project. For detailed information on this tool, see the Microsoft Image Composer Web site at http://www.microsoft.com/imagecomposer/.
Microsoft Music Producer
In addition to Microsoft Image Composer, Visual InterDev also includes a unique music creation tool for creating sound effects for use on Web sites. Music Producer employs the pioneering Microsoft Music Technology (MMT), and simplifies music creation with prebuilt, innovative musical styles. More versatile and powerful than static music clips, styles define entire musical genres (such as samba or Texas swing) as well as musical moods and sets of instruments. Over 100 predefined styles are included. Even first-time users can create music immediately because everything needed to create quality original music is presented on one simple screen.
Microsoft Media Manager
Microsoft Media Manager is a utility that makes it easy for developers to track and manage dynamic and static media assets such as images, sound clips, video clips, HTML files, and office documents. It increases productivity by allowing developers to quickly search, preview, play, and retrieve media assets stored in Media Manager libraries. The utility integrates seamlessly with the Windows 95 and Windows NT operating system and uses the same explorer-based navigation paradigm. Microsoft Media Manager provides extended search capabilities, thumbnail previews of images, and previews of other media content such as sound clips and video clips directly from the library navigation (explorer) pane. Media assets can be dragged and dropped from a media library into an Visual InterDev project.
The open and extensible architecture of Visual InterDev is a critical aspect of the tool, because it provides a very high degree of flexibility for developers. Visual InterDev delivers on the promise of openness by doing the following:
- Supporting the HTML and HTTP Internet standards
- Supporting ODBC for connectivity to all popular database systems
- Delivering "thin-client" cross-browser and cross-platform Web applications
- Providing full client-side and server-side extensibility via ActiveX components and Java applets
- Supporting VBScript and JScript client-side and server-side scripting, as well as other scripting engines through third-party scripting engines
Visual InterDev is an integrated visual development tool designed to meet the needs of developers who want to build dynamic database-driven Web applications for corporate intranets and the Internet. Because Visual InterDev fully interoperates with Microsoft FrontPage, a tool designed for end users and graphic designers, teams of developers and non-programmers can work together on Web sites. Visual InterDev delivers on the following key design goals:
- Integrated visual development environment
- Support for building Active Server Applications
- Powerful, integrated database tools
- Integrated site management and content development tools
- Open and extensible
Visual InterDev is a comprehensive Web development system, including integrated programming, database development, site management, and content editing tools. Developers will find that Visual InterDev helps increase their productivity by providing a single, integrated development environment that includes easy-to-use visual tools for building sophisticated Web applications. By using the powerful database development tools in Visual InterDev, programmers can work with any database that supports ODBC. Finally, Visual InterDev delivers HTML-based Web applications that are browser- and platform-independent, while also providing open extensibility with third-party components that can be used to extend the tool's capabilities seamlessly. Corporations will find that Visual InterDev provides them with a distinct business advantage for their Internet and intranet-based applications.