Sean Alexander
Microsoft Corporation
August 1998
Summary: Introduces WebClasses and the WebClass development model. Some familiarity with Microsoft® Visual Basic® and HTML will be helpful. (6 printed pages) Shows how to:
In case you haven't had the opportunity to tinker with the WebClass designer yet, let's examine exactly what WebClasses are. A WebClass is a Visual Basic–created Component Object Model (COM) dynamic-link library (DLL) that resides within Microsoft Internet Information Server (IIS). A WebClass allows you to create server-side applications that perform all of their processing on the Web server, serving up HTML pages as the user interface, which can be viewed in any browser. If you look at WebClasses in another way, they provide a proxy, or agent, for the client user interface, essentially replacing the Visual Basic form surface. However, WebClasses are not limited to producing pure HTML. They can return any valid Multipurpose Internet Mail Extensions (MIME) type, including such things as Dynamic HTML (DHTML), and Extensible Markup Language (XML).
The functionality behind WebClasses isn't necessarily a new idea. In the Visual Basic version 4.0 days, we had the ability to use the Common Gateway Interface (CGI)-WIN interface to create Visual Basic executables that could be run on the Web. With Visual Basic 5.0, Microsoft introduced the ability to create Visual Basic DLLs that are installed on an IIS server and called from a custom Active Server Page (ASP). In fact, the Visual Basic 5.0 Reviewer's Guide shipped with a sample application (Fortune Teller) that showed users how to create a DLL and link it up to an ASP page. The difference between what was provided in the past and what Visual Basic 6.0 provides centers around enhanced functionality and productivity.
WebClasses introduce a design surface and framework that has been sorely lacking in most Web application development tools up until now. While planning Visual Basic 6.0, we received feedback from Visual Basic developers telling us that they wanted to be able to create Web applications as Visual Basic DLLs using the native code compiler and link them to the Web without having to create separate ASP pages for each page of the application. They also wanted to have familiar Visual Basic features such as syntax checking, IntelliSense®, statement completion, and edit-and-continue debugging available to them. WebClasses offer all of this, tied up into a neat and easily manageable designer.
WebClasses offer developers the ability to separate out the user interface from the application logic—just as they create Win32®-based applications in Visual Basic. In this more familiar Visual Basic paradigm, developers start by creating their visual interface using forms and controls. Then, they double-click an item on the form, such as control and write code behind a particular action or "event" that will fire at run time (for example, the Click event on a command button). Developers maintain a separation of their user interface and code in a way that aids management and maintenance of the project.
WebClasses offer a similar model, whereby developers create HTML templates and import these into their project via the WebClass designer. The template pages are comprised of standard HTML, created using whichever version of HTML (HTML 1.0- 3.2, 4.0, DHTML, or XML) or editing tool is preferred. Perhaps they use HTML 1.0 for an application that needs to be run on DOS– or virtual memory system (VMS)– based text-only browsers, or maybe they support DHTML on the client. This is entirely up to the developer. The WebClass just scoops up the file and serves it out to the client.
WebClass developers create events in a similar fashion to Win32 development. Once the HTML template has been loaded into the designer at design time, the designer parses the file and presents the HTML tags (elements) in the right-hand window. These are synonymous with the controls or elements of the form. Any one of these can be double-clicked to open a Visual Basic code window where application logic can be introduced. For example, perhaps you have a Submit button on your HTML template. By double-clicking the Form item in the Tag Preview window associated with that Template button, you can write code that will return data from the submitted form using the Request.Form.Item property based on the element's name.
I bet I know what you're thinking: What about interactivity? What about dynamically inserting data into the HTML template, such as a list of options from a database? This can be done easily using XML tokens embedded into the HTML page. When the WebClass parses the HTML template at run time, it looks for these XML tokens and, when found, executes code in the Webitem.ProcessTag subroutine for that particular template. Let's take a closer look at how this works.
I'll show how you can create an HTML template that includes a dynamically generated table that displays the capabilities of your browser.
Let's say, for example, that you have a simple HTML template that contains a little bit of formatting information, such as a title for your page and header. Your page might look like the following:
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>Visual Basic 6.0 WebClasses Browser Sample</TITLE>
<!--Styles-->
<STYLE>
<!--
TD {color:black;font-family:Arial,Helvica,Verdana;
font-size:14px}
H1 {color:black;font-family:Arial,Helvica,Verdana;
font-size:24px}
-->
</STYLE>
</HEAD>
<body bgcolor=khaki>
<hr>
<H1>Visual Basic 6.0 WebClasses</H1>
<H2>Browser Capabilities Example </H2>
<hr>
<center>
<WC@BROWSER>Insert Web Browser Capabilities Table Here</WC@BROWSER>
</center>
</body>
</HTML>
Be sure to save your file so that you can import it into the WebClass designer as an HTML template.
Note the "WC@BROWSER" tag. This is a user-defined tag that I created in order to tell the WebClass where I want to perform additional server-side processing with the result to be inserted into this area of the page. I can create whatever tag I wish, as long as I have the "WC@," which is interpreted as a token by the WebClass.
Let's take a moment and look at the impact of HTML templates with tokens. In 1995, I was working at United Video Satellite Group as a contractor on the first pilot of PREVUE.COM. Our challenge was to be the first group to develop a Microsoft Windows NT®-driven television guide for the Web. We were working with Microsoft on their Denali (IIS) alpha team and got an early look at Microsoft's Active Server Pages. We were really excited, because all of our data was already being stored in Microsoft SQL Server™ and beamed out to local cable affiliates. Programming the ASP pages wasn't difficult—the real difficulty came in creating professional-looking user interfaces. We had two teams that were working on graphics design and programming. Trying to train the graphics team to create tight Visual Basic Scripting Edition (VBScript) code within our time constraints was impossible. Having our programmers try to create effective, aesthetically appealing HTML pages and graphics in our time frame was like asking a skilled electrician to paint the Mona Lisa. By completely separating the application logic and the user interface, WebClasses are ideally suited to team-based development of applications, accentuating your team members' strengths rather than their weaknesses.
The next step is to create your WebClass project by starting with the IIS Application template. Create a new IIS Application project in Visual Basic and then add the HTML template you created in the previous step to your project in the designer. In my example, you'll see that I renamed the template "tplBrowser." Now we want to provide the "glue" that will load the HTML template at run time. If you open the Code window and look at the WebClass_Start event, you'll see a bunch of Response.Write events that create a sample HTML page on the fly. This is one way to create the page, but it can be inefficient. In my example, we store all of the style sheet information and page properties in a template. Remove all of the code in the WebClass_Start event and replace it with the following line:
Private Sub WebClass_Start()
tplBrowser.WriteTemplate
End Sub
This code writes the template out and sends it to the client when the WebClass application is instantiated. This is roughly equivalent to the Form_Load event in a traditional Visual Basic application.
The final step in our example is to create an HTML table in code that will be dynamically generated to display browser-specific information—for example, which browser is being used, its version, and its capabilities. In order to do this, we actually talk to the IIS object model directly from our WebClass.
WebClass-based HTML templates have a special event called "ProcessTag" that can be executed whenever you write out a template. The ProcessTag event has three arguments:
In your Code window, first select the General Declarations and add the following line:
Dim bc As Object
Now, select the tplBrowser object and ProcessTag event from your combo boxes. You'll want to add the following code:
Private Sub tplBrowser_ProcessTag(ByVal TagName As String, TagContents As String, SendTags As Boolean)
Select Case TagName
Case "WC@Browser"
Set bc = BrowserType
TagContents = "<TABLE BORDER>"
TagContents = TagContents + "<TR><TD>Browser:</TD>"
TagContents = TagContents + "<TD>" & bc.browser & "</TD></TR>"
TagContents = TagContents + "<TR><TD>Version:</TD>"
TagContents = TagContents + "<TD>" & bc.platform & "</TD></TR>"
TagContents = TagContents + "<TR><TD>Supports Frames:</TD>"
TagContents = TagContents + "<TD>" & bc.frames & "</TD></TR>"
TagContents = TagContents + "<TR><TD>Supports Tables:</TD>"
TagContents = TagContents + "<TD>" & bc.tables & "</TD></TR>"
TagContents = TagContents + "<TR><TD>Supports VBScript:</TD>"
TagContents = TagContents + "<TD>" & bc.vbscript & "</TD></TR>"
TagContents = TagContents + "</TABLE>"
End Select
End Sub
As you can see, we built the table interactively in Visual Basic code, called the BrowserType object, and are able to write out its properties, such as .browser, .version, and .tables as HTML.
Hit F5 to run your WebClass and your should see something similar to Figure 1.
Figure 1. Example of a Visual Basic 6.0 WebClasses UI
Did you do a double take? The picture shows another feature of WebClasses: running and debugging in your choice of browsers.
As you can see, this is a simple example of how developers can use HTML templates to separate application logic and UI and access the IIS Object Model from within a Visual Basic 6.0 WebClass. We also looked specifically at the Browser Capability component and showed how you can create customized applications that dynamically change the user interface on the server to support the browser that is being used by the client.