Building Internet Applications
*Certification Objectives
*Using the WebBrowser Control
*Creating ActiveX Documents
*Using Code Within an ActiveX Document to Interact with a Container Application
*Navigating to Other ActiveX Documents
*ActiveX Document Menus
*Creating Dynamic Hypertext Markup Language Applications
*From the Classroom
*Abundant Internet Applications
*Creating Microsoft Internet Information Server Applications
*IIS Application Events
*Certification Summary
*Two-Minute Drill
*Self Test
*
These days, everything’s Internet. Every day, more people are gaining access to the World Wide Web. People have begun to use browsers like Microsoft Internet Explorer and Netscape Navigator like common household items. Many network administrators recognize this, and have incorporated Internet technology into local networks to create intranets.
One of the new features of Visual Basic version 6 is the ability to create full-blown Internet applications. You can use the WebBrowser control to add the functionality of a browser to applications you create. In addition, you can use VB to create Dynamic HTML (DHTML) applications, IIS applications, and ActiveX documents. Not only can you enhance applications by incorporating the ability to access the Net, but you can create applications that run on Web servers.
Ever think you could make a better browser than Microsoft or Netscape? Using the WebBrowser control (with a few other controls), you can add browsing capabilities to an application. Through this control, a user can view Web pages. By combining it with the functionality of other controls on a form, you can even create your own Web browser!
The WebBrowser control acts as a window that the user can use at runtime to view Web pages. Adding this control to your project is done by clicking Components from the Project menu, and selecting Microsoft Internet Controls from this list of available components. After clicking OK, the icon for the WebBrowser control will appear on the Toolbox.
After adding this control to a form, the first property you should change is the Visible property. Because the WebBrowser control displays visual elements inside of it, you should always set this control’s Visible property to False in Design mode. Having the Visible property set to True may cause problems when the user starts the application, as the control may try to display other visual elements of the screen inside of it. By setting it to False, you can then have your code specify an HTML document to display. By initializing the control and specifying a default Web page to display, the user won’t become confused by seeing meaningless garbage in the control.
The WebBrowser control is made up of numerous members for accessing the Internet. While this section covers many of the commonly used properties, methods and events you’ll use, you should view VB’s Help for a full listing and description of members associated with this control.
Of the members you will use most, those that deal with navigation will be common for your applications. The Navigate method of the WebBrowser control is used to specify the Web page displayed in this control. GoHome is a method used to navigate to the Web page specified in the Internet Options dialog box in the Control Panel. Whatever URL has been set as the home page is what will display when GoHome is used. In the case of Navigate, you must specify a specific Web site immediately after invoking the method:
WebBrowser.Navigate "www.microsoft.com"
WebBrowser.Navigate mysite
WebBrowser.Navigate cboURL.Text
In the examples shown above, the Navigate method is used to display a Web page in the WebBrowser control. The first line specifies a Web site, by stating the URL in quotations. The next line uses a variable to specify a Web site, while the third obtains the URL through the Text property of another control (in this case, a combo box). It is through these methods that you specify what will be displayed in the WebBrowser control.
In addition to these navigation methods, there is also GoForward, GoBack, and Stop. When a user has browsed through several Web pages (by indicating different URLs to go to, or clicking on hyperlinks), the GoBack method allows the user to navigate back to a page that was previously displayed. Likewise, after using GoBack, the GoForward property can be used to allow a user to navigate to a previously displayed page. If you think of navigation like using a book, GoBack allows you to flip to previous pages, and GoForward allows you to flip back to where you were. In cases where you don’t want to download any more of a page (should it be incredibly long, or experiencing problems), the Stop method allows the user to stop the downloading of a Web page.
By using these members with the proper controls, you can add the functionality of Web browser to any application. A tool bar can be added to a form, and methods like GoBack, GoForward, and Stop can be associated with its buttons. You can add combo boxes to your form, and use the Navigate method to enable users to type in specific URLs to which they can travel. Should you wish to limit the control a user has to Web sites, you can implement a listbox, command buttons, or other controls. As you can see, while the WebBrowser control acts as the foundation of your browser, other controls work in tandem to use its full functionality.
On the Job: The WebBrowser control leads to numerous possibilities for applications. It allows you to add browsing functionality to an application, while enabling you to control where the user can go via code. As such, you could have your application access only sites that are business-related, and can’t be used for more salacious purposes. In cases where you wish to limit a user’s control of navigation, use listboxes or other controls that limit navigation abilities.
Exercise 12-1 Using the WebBrowser Control
If Button = "Home" Then
WebBrowser1.GoHome
ElseIf Button = "Back" Then
WebBrowser1.GoBack
ElseIf Button = "Forward" Then
WebBrowser1.GoForward
ElseIf Button = "Stop" Then
WebBrowser1.Stop
End If
WebBrowser1.Visible=True
WebBrowser1.GoHome
WebBrowser1.Navigate Combo1.Text
Combo1.AddItem URL
Combo1.Text=URL
The above code is used to add the last URL navigated to the combo box. This creates a history list the user can navigate with.
ActiveX documents are similar to the forms you use to create VB applications. You can add controls, manipulate properties, invoke methods, and add code to events in an ActiveX document just as you would a form. They can be packaged in either in-process or out-of process components. ActiveX documents integrate into container applications, such as Internet Explorer (version 3 or higher), Microsoft Binder, and VB (version 5 or higher). Such applications can open ActiveX documents and access its data files.
To create an ActiveX document, you must start a new ActiveX document project or convert an exiting project into an ActiveX document. First, we’ll discuss creating one from scratch, then cover how to convert one of your standard EXE projects into an ActiveX document.
Creating an ActiveX document is done by selecting New Project from the File menu, and then selecting "ActiveX document DLL" or "ActiveX document EXE". You should choose EXE if you what to create a project that doesn’t require the user to exclusively use a container application to view data. This will allow the project to run as a standalone application. In addition, choosing EXE will have each instance of your ActiveX document started in a separate address space. A major reason to use an ActiveX DLL is speed, as the DLL has faster performance
Choosing either EXE or DLL will create an ActiveX document project that contains a UserDocument. The UserDocument is an object that acts as a foundation for your ActiveX document, and appears similar to a form in a standard EXE project. It looks like a form that doesn’t have a title bar, control box, or min and max buttons. It is the UserDocument object that you’ll use to add controls, hyperlinks, and other objects with which the user will interact.
Adding objects to the UserDocument is the same as when you add objects to a form. A difference between the UserDocument and form is the extensions of the two when they are saved. While a form is saved with the extension .FRM, UserDocuments are saved with the extension .DOB.
In addition to creating ActiveX documents from scratch, you can convert existing projects into ActiveX documents. This is done using the ActiveX Document Migration Wizard, which resides in the Add-Ins menu of VB. Using this add-in will convert forms in a current project into UserDocuments.
When you start the Migration Wizard, the first screen you’ll see is a welcome screen. If you don’t want to see this screen each time you start up the wizard, click the Skip this screen in the future check box. Clicking Next will then bring you to a screen that lists all forms in the project that’s currently open. Beside each form’s name in the list is a check box. Checking the check box beside a form’s name will have that form converted into a UserDocument. You must check at least one form to continue.
The next screen, shown in Figure 12-1, is the Options dialog box. It is here that you can determine what will happen when the forms are converted. Since UserDocuments and forms aren’t identical—they are merely similar—there will be some code that you’ll have to rewrite after conversion takes place. This is because some form events don’t exist in UserDocuments. You will also have to make sure that procedures that are converted will be compatible with any container application you use. By checking the Comment out invalid code? check box, any code found to be invalid for an ActiveX document will be commented out. You can also check the Remove original forms after conversion option to clean up your project, and have the forms that were converted removed from the project.
Figure 1: Options dialog box of the ActiveX Document Migration Wizard
The options available under Your Project Type is invalid determine what kind of ActiveX document will be created. Some new programmers find this a little worrisome when they see this section, thinking that some problem has occurred and the project they’re using is invalid and can’t be used. This is not the case. The options here determine how your current project will be converted; into an ActiveX document EXE or ActiveX document DLL.
Clicking Next, you reach the final screen. You have the option of viewing a report of your choices here, by clicking either the Yes or No option buttons. By clicking the Finish button, your project will be converted based on the settings you selected in this session. To save those settings for future use, click the check box labeled Save current settings as default.
Because an ActiveX document resides in a container application, you will need to incorporate code that interacts with a container. When implementing code, you need to realize that ActiveX documents behave differently in different containers. To deal with the problems caused by some applications not recognizing things like hyperlinks, you need to use different code for different container applications.
The first step to incorporating different code for different containers is having your ActiveX document detect what type of container is being used. The Parent method of the UserDocument and the TypeName function can both be used to obtain information about the container application. UserDocument.Parent is used to return the name of the container. TypeName can be used to return the type of container being used, as seen in the following code:
TypeName(UserDocument.Parent)
In this line of code, TypeName takes an argument, which can be a variable or object and property. It looks at the name passed to it and returns its data type as a string. For example, if the container used were Internet Explorer, UserDocument.Parent would return "Microsoft Internet Explorer". Using the TypeName function with this argument, TypeName would look at this argument and return "IWebBrowser2". This shows that the type of container is a Web browser.
By using a IF…THEN structure, you can conditionally control what code will be executed based on the type of container used. In doing so, you can use TypeName and the Parent property of UserDocument to look at what container is used, then have certain code run based on the type of container or container name. This allows you to control what code is executed in certain container applications.
Even though an ActiveX document resides in a container application, it does have some control over its appearance in the container. By changing the properties of the UserDocument, you can control how a document is displayed, and how scroll bars will be used in the display.
The screen area used to display an ActiveX document in a container application is called a viewport. To determine the size of the viewport, you can use the ViewPortHeight, ViewPortWidth, ViewPortTop, and ViewPortLeft properties. The first of these two properties return the height and width of an area, respectively, in twips. A twip is a screen-independent unit of measurement that equates to 1/1440 of an inch. The ViewPortTop and ViewPortLeft return the y and x coordinates of where the document appears in the viewport, respectively. For example, let’s say you had a large document that you had to scroll across and down. As you scrolled right, you are moving away from the left side of the document, and the value of ViewPortLeft would increase. Likewise, as you scrolled down from the top of the document, the value of ViewPortTop would increase. In short, while ViewPortHeight and ViewPortWidth return the size of the viewport, ViewPortTop and ViewPortLeft return the position that a document is displayed in the viewport.
The syntax for each is as follows:
UserDocument.ViewPortHeight
UserDocument.ViewPortWidth
UserDocument.ViewPortTop
UserDocument.ViewPortLeft
For each of these properties, the data type returned is Single. They are only used to return the current value.
To set the coordinates of the ViewPortLeft and ViewPortTop properties, you use the SetViewPort method. This allows you to configure at what position the UserDocument will be visible in the viewport. The syntax for this method is as follows:
UserDocument.SetViewPort left,top
There are two required parameters to the SetViewPort method. Left is used to specify how far a document is scrolled from the left, while top determines how far down the document is scrolled in the viewport.
You can set whether scroll bars exist when your ActiveX document appears in the viewport through the ScrollBars property. The ScrollBars property can be set through the Properties window, or programmatically using VB constants. In setting this property, you have four options, which are shown in Table 12-1. The default setting of the ScrollBar property is 3-Both or vbBoth.
| Property Value | Constant |
| 0 – None | VbSBNone |
| 1 – Horizontal | VbHorizontal |
| 2 – Vertical | VbVertical |
| 3 – Both | VbBoth |
Table 1: Settings for the UserDocument ScrollBar property
Exam Watch: Unlike VB version 5, the default ScrollBar property setting for a UserDocument in VB version 6 is 3-Both (that is, vbBoth). This allows both vertical and horizontal scroll bars to appear.
If you’ve set your UserDocument to use scroll bars, the determining factor of them appearing is the MinHeight and MinWidth properties. These properties are used to return or set the minimum height and width of a viewport at which scroll bars appear. If scroll bars have been set, and the ViewPortHeight is less than the MinHeight, then a vertical scroll bar appears. If the ViewPortWidth is less than the MinWidth, then a horizontal scroll bar appears.
The MinHeight and MinWidth properties aren’t available in the Properties window, and can only be set programmatically. This is done with the following syntax:
UserDocument.MinHeight=value
UserDocument.MinWidth=value
MinHeight and MinWidth have a Single data type value, and must be set in your code. You cannot set either of these values in Design mode.
It is not unlikely that a container application will contain a number of documents at the same time. As such, it is important to be able to navigate from one ActiveX document to another.
Hyperlinks can be used to navigate between ActiveX documents in Internet-aware containers. The Hyperlink object is a property of the UserDocument, and has methods that allow you to jump from one document to another. The methods of the Hyperlink object that allow for navigation are NavigateTo, GoBack, and GoForward.
NavigateTo allows you to specify a specific document to jump to. This method has one required argument, which is the URL or local document that you want to navigate to. The following example shows the syntax used to invoke this method, and an example that links to Microsoft’s Web site:
UserDocument.Hyperlink.NavigateTo URL
Or
UserDocument.Hyperlink.NavigateTo "http://www.microsoft.com"
While this code takes you to a Web site, you can also use NavigateTo to jump to a specific local document. This is done with the following syntax:
UserDocument.Hyperlink.NavigateTo "file://c:\docs\mydoc.vbd"
In this example, the hyperlink will jump to a file called MYDOC.VBD, which is located in the path C:\docs.
Once you have gone to another document, you can return to the previous ActiveX document using the GoBack method. This method only works if you’ve moved off of one document to another. It’s syntax is as follows:
UserDocument.Hyperlink.GoBack
As is seen in this example, the GoBack method requires no arguments. This is because you are navigating through previous documents or Web sites in the history list.
The GoForward method is a sister method to GoBack. When you’ve used GoBack, you are able to move forward in the history list, to return to the site or document you were viewing before GoBack was invoked. As is seen in the following syntax, the GoForward method requires no arguments:
UserDocument.Hyperlink.GoForward
When creating ActiveX documents, you can implement menus as you would any other VB application. As was seen in Chapter 3, you can create menus using the Menu Editor. While the process of creating menus for an ActiveX document is identical to creating menus for other applications, extra considerations need to be made.
ActiveX documents reside within container applications. When an ActiveX document in loaded into the container, the document’s menus merge with those of the container application. Because the two menu systems have to coexist, this can lead to problems. For example, when creating the ActiveX document’s menu system, you should always use original and distinctive captions so that these menus don’t conflict with the container’s menus. In addition, you shouldn’t create a Windows menu that switches from one document to another, or a menu (such as the File menu) that saves or prints data or closes the container application. Such menus are the responsibility of the container application and can create conflicts. By keeping these restrictions in mind, you will avoid problems when incorporating menu systems into ActiveX documents.
When creating menus with the Menu Editor, the NegotiatePosition property allows you to specify the position of an ActiveX document’s menu item in relation to the container’s menu. Your options for this property are None, Left, Middle, and Right.
The 0 – None setting of NegotiatePosition is used if you don’t want a menu item to merge with a container’s menu system. If this is set, the menu item won’t appear in the container’s menu system.
1 – Left is a little misleading. If this is set, a menu won’t be placed as the left-most menu on the container’s system. This is because the menu that appears furthest left is generally the container’s File menu. Since this spot is reserved for such a menu, when a menu item’s NegotiatePostition is set to left, it will be placed as far left as possible without encroaching on the reserved spot. In other words, it will appear on the left side of the menu, generally by the container’s File menu.
The NegotiatePosition setting of 2 – Middle is used when you have more than two menus, with one of two set as left and the other as right. When a menu item is set to middle, the container places the item somewhere in the middle of the menu. You have no control over where in the middle the menu item will appear.
If a menu item has NegotiatePosition set to 3 – Right, the menu will appear one the right side of a container’s menu system. The exception to this rule is when you have a Help menu that you want to merge with the container’s Help menu. When this is the case, the ActiveX document’s Help menu items will appear in the container’s Help menu.
To merge two such Help menus together, the ActiveX document’s Help menu must have a caption of &Help or Help. After this, set the NegotiatePosition to 3 – Right. You then need to add your menu items under this menu. If you don’t add any menu items to your Help menu, it will appear to the left of the container’s Help menu. If this criterion is met, you Help menu will appear as a submenu item in the container’s Help menu.
A new feature to VB version 6 is the ability to create DHTML applications. DHTML is an acronym for Dynamic Hypertext Markup Language, which is a set of additions to HTML, traditionally used for creating Web pages. DHTML allows Web page authors to dynamically change elements of an HTML document. Using DHTML you can add, delete, and modify what appears on a page.
DHTML applications combine DHTML with VB code, resulting in a browser-based application. The application responds to actions such as mouse movement, keyboard input, and other actions that are expected in VB programs. Through these actions, the application can respond by changing a Web page, adding text, retrieve data from a page to query a database, or other tasks.
A DHTML application is made up of HTML pages, VB code that handles events, and a project DLL that contains your code and is accessed at runtime. For the DHTML application to run, the browser or Web control accessing it must use the runtime DLL called MSVBVM60.DLL. A browser that meets the criteria is Internet Explorer 4.01 with Service Pack 1.
Many of the tasks a DHTML application can perform are the same as those that can be performed by CGI and other scripts. These are scripts residing on a server, which respond to an action and perform some task. Because the DHTML application resides on the user’s computer, rather than a server, processing is performed on the client side. Using methods such as CGI, an event (such as a mouse click) is transmitted to the server, processed, and the result is sent back. With DHTML, many events can be taken care of on the client side, while still enabling requests to be made of the server. This increases the response time of a user request, because the server isn’t processing everything.
To create a DHTML application, click on VB’s File menu and select New Project. When the New Project dialog box appears, select DHTML Application, and then click OK. A new DHTML Project will then appear in the Project Window.
A DHTML project isan ActiveX DLL project that has references set to access the DHTML Page Designer. It also sets the Toolbox to the HTML tab that contains controls for creating an HTML page, and is shown in Figure 12-2. DHTML applications consist of one or more HTML documents, and you will use these tools to design the HTML documents that make up your application.
Figure 2: A DHTML application project, showing the DHTML Page Designer and HTML tools in the Toolbox
On the Job: If a network administrator has upgraded you to VB version 6, be sure that he or she has also upgraded your copy of Internet Explorer to at least version 4.01 with Service Pack 1. To use the DHTML Page Designer, you must be using Internet Explorer 4.01 with Service Pack 1 or greater. If you are using a version lower than this on your computer, an error message will result, and the DHTML Page Designer will fail to load. Upgrading Internet Explorer when installing VB is an easy oversight, but you can’t create DHTML applications when older versions of IE reside on your system.
When viewing the contents of the Project window, you’ll see that the project contains two folders: Modules and Designers. Double-clicking a folder, or clicking the plus symbol (+) beside the folder will expand it to reveal its contents. The Modules folder contains a module in which you can write VB code. The Designers folder contains an HTML page. This is your foundation for creating an HTML document, which when double-clicked, opens the DHTML Page Designer, shown in Figure 12-2 above.
The DHTML Page Designer allows you to create HTML documents without a previous knowledge of HTML. There is one designer for each HTML page in your project. To add additional pages to a project, select Add DHTML Page from the Project Window.
The left pane of the designer is the Treeview pane. It contains a hierarchical representation of an HTML document’s contents. Each item in the HTML document—such as images, text, buttons, and so on—are called elements. Once elements are added, they can be manipulated during runtime through code. Each element listed in the Treeview pane includes information on the type of control, the beginning of its content (for elements such as text), and (when available) an ID. IDs are used to identify an element in code, and appear bolded in the TextView pane. IDs can be added or changed through the Properties window.
At the top level of the hierarchy in the Treeview pane is the document. By double-clicking the document or clicking the plus symbol beside it, it expands to show the BODY(). Everything you add to your page will be contained within the body. This goes back to HTML coding, where the page is made up of a HEAD section and a BODY section. The HEAD is commonly used for information geared toward the browser, or information indicating the program used to create the document. The BODY is used for the data that appears within the browser window.
HTML authors may be interested to know that pages created with the DHTML Page Designer don’t contain HEAD sections. The pages created with the designer have a comment denoting that it was created with this program, the object ID, and class ID. The pages you create with the designer uses the BODY to contain information displayed in the browser window, and a closing </HTML> tag (which shows where the document ends).
The right pane of the designer is the Detail pane. This is a visual representation of the HTML page, and allows you to add, delete, and modify elements of the page. You can use the Detail pane as you would a form in a standard EXE at Design mode. Double-clicking a control on the Toolbox will add a control to the pane. You can also click a control on the Toolbox, then draw it in the Detail pane. Should you wish to modify any existing elements on the page, you merely click any added controls and resize or delete them like controls on a form.
Text can be added to the page by clicking within the pane and typing. The listbox at the top left corner of the designer allows you to apply different styles to your text. These text styles correspond to the various styles of an HTML document, and are covered in Table 12-2. The HTML tags displayed here is what the designer will place in your page. A starting tag, such as <H1> denotes the beginning of a style, while the ending tag (</H1>) specifies where that style ends. While the designer shields you from having to know the HTML language, it is offered here for reference.
| Style | HTML tag (Opening Tag . . . Closing Tag) |
Description |
| Heading 1 | <H1>…</H1> | Very large text style commonly used for titles |
| Heading 2 | <H2>…</H2> | Text style that’s slightly smaller than an H1 style. Commonly used for sub headings. |
| Heading 3 | <H3>…</H3> | Text style that’s slightly smaller than an H2 style. Commonly used for headings that appear below subheadings. |
| Heading 4 | <H4>…</H4> | Text style that’s similar to normal bolded text. |
| Heading 5 | <H5>…</H5> | Text style that’s smaller than normal bolded text. |
| Heading 6 | <H6>…</H6> | Extremely small text style. |
| Normal | <P>…</P> | Normal text. Doesn’t use tags. The <P> tag is used to denote a new paragraph. The </P> isn’t actually used for anything, and is ignored by the browser. </P> is only used for conformity with other tags. |
| Formatted | <PRE>…</PRE> | Used for preformatted text. Will display text as it was originally formatted. |
| Address | <Address>…</Address> | Italicized text used for addresses. |
| Numbered List | <OL>…</OL> <LI>…</LI> |
Used to display numbered items as 1., 2., etc. The <OL> tag is used to show where the list begins, while <LI> is used to denote each individual list item. This type of list is also called an ordered list. |
| Bulleted List | <UL>…</UL> <LI>…</LI> |
Used to display items in the list with bullets. The <UL> tag is used to show where the list begins, while <LI> is used to denote each individual item. This type of list is also called an unordered list. |
| Directory List | <DIR>…</DIR> | Used for displaying a directory of items. |
| Menu List | <MENU>…</MENU> | Used for displaying a menu of items. |
| Definition Term | <DL>…</DL> <DT>…</DT> |
Used for terms that are going to be defined. The <DL> tag is used to show where the definition list begins, while <DT> is used to denote the term being defined. |
| Definition | <DL>…</DL> <DD>…</DD> |
Used for definitions. Commonly used after definition terms. The <DL> tag is used to show where the definition list begins, while <DD> is used to denote the definition. |
Table 2: Styles for text offered in DHTML Page Designer
Beside the Style listbox, you have controls that allow you to further manipulate text that appears in the page. The bold, italic, and underline buttons provide the same functionality as identical buttons that appear in the VB design environment. There is also a listbox for setting the font size of text, and another for specifying the font used for text. At the far right of the top tool bar, you can select whether text appears as left- or right-justified, or centered.
On the Job: In general, you should avoid changing the font to nonstandard Windows fonts. If you select a custom font that appears on your computer, but may not appear on the end user’s computer, the display will be unpredictable. This is because the user’s computer attempts to use the closest font available. In some cases this can be extremely different from the font you chose, and hard to read. In one case, I used a comic book–style font, and it appeared as an extremely difficult to read script font on an end user’s computer. To avoid this, only use the fonts that come with the Windows installation.
The tool bar below the one we just covered contains additional features for creating, opening, and saving pages. The button on the furthest left accesses the DHTML Page Designer Properties dialog box, shown in Figure 12-3. This allows you to set whether a page you’ve created will be saved as part of the VB project, or as a separate file. If it is saved as an external file, you should give the file the extension of .HTM or .HTML. These are the extensions used for HTML documents.
Figure 3: DHTML Page Properties dialog box
Choosing to save as an external file also allows you to specify the path and filename of the document in the field. It also enables the New and Open buttons. Clicking the New button allows you to save your current HTML page as an external file. This brings up a Create New dialog box, which enables you to specify the pathname and filename by browsing your hard disk. Using the New button saves you from having to memorize the correct pathname and filename of your page.
The Open button is used to open an existing HTML file into the page designer. This is used when you’ve already created your HTML page using a program that creates Web pages, like FrontPage. The ability to import such pages into the designer is useful in companies that have a Webmaster on staff, who creates Web pages for the company, or when you wish to hire Web page authors to create your pages. By using the Open button, you can import these pages and then assign code to specific elements of the page.
Exam Watch: You are expected to know how to import pages as well as create pages using the designer. Remember that you aren’t limited to creating pages with a designer, but can import them through DHTML Page Designer Properties.
Should you wish to use an external editor to modify your pages, you must first save your page in the designer as an external file. You can then click the Launch Editor button, located beside the DHTML Page Designer Properties button on the tool bar. This will launch the application specified in VB. By default, the editor used will be Notepad. To specify another editor, select Options from the Tools menu, and then select the Advanced tab. In the External HTML Editor field, specify the path and filename of the application you wish to use as your editor. This can be an application such as FrontPage or any other program that allows you to create and edit Web pages.
The next two buttons on the designer allow for special formatting. The Wrap selection in <DIV>…</DIV> option allows you to group several tags together for processing. An example of this would be grouping several paragraphs with different headers together, and then formatting them as a unit. The Wrap selection in <SPAN>…</SPAN> option applies HTML tags that allows you to select a portion of text for processing. This allows you to select a few words and format them differently from the rest of the text. After selecting the text you want in the Detail pane, you can click either of these two buttons, and the text will appear in the Treeview pane preceded by the word SPAN or DIV. You can then click on the item in Treeview, and the text will become highlighted, allowing you to format it as you wish.
The Link button allows you to make highlighted text into hyperlinks. After selecting the text you want to make into a link, click the button with a picture of the world and a chain. This will underline the text and change it to a different color. By right-clicking this text and choosing Properties, you can then configure where the user will jump to when clicking on the hyperlink.
The Property Page of a hyperlink, shown in Figure 12-4, allows you to configure what will happen when a user clicks the link. The Link type list box allows you to select the kind of link this will be. Your options are as follows:
Figure 4: Property Page of a hyperlink
When you have selected the correct link type, you are then ready to specify the other required information for the hyperlink.
The Link field is used to specify what you want to link to. If you choose mailto for the link type, you would enter your e-mail address here. If you selected file, it would be the path and filename, while http would require a URL to be entered here. While link type is used to specify the protocol and type of link, the Link field narrows what it is you’re linking to.
The final three fields are Create bookmark, Frame target, and Popup text. The first of these allows you to enter a name and create a bookmark. You can then create another link to jump to this bookmark. Frame target allows you to specify whether a linked file or site will appear in the current window or frame, or another browser or frame. Finally, Popup text is used to specify a small explanation of what this link does. When the user holds his or her mouse over the link, the pop-up text will appear in a small box by the mouse.
After you’ve created or imported your pages, you can then add code to controls and elements. Any element of a page can have code attached to it, so long as it has an ID. As mentioned previously, an ID is used to identify an element, and can be modified by selecting the element, and changing the ID property in the Properties window. You can add code to an element just as you would a control in a standard EXE project. Selecting Code from the View menu, double-clicking a control, or right-clicking an element and selecting View Code will bring up the Code window. From here, you can add code to events.
In Exercise 12-2 we will create a DHTML application that converts temperature measurements in degrees Fahrenheit to degrees Celsius. It will add text to the page indicating whether a temperature is hot, cold, or nice.
Exercise 12-2 Creating a DHTML Application
TextField1.Value = (TextField2.Value * 9 / 5) + 32
TextField2.Value = (TextField1.Value - 32) * 5 / 9
If TextField1.Value >= 80 Then
Temp.innerText = "Hot"
ElseIf TextField1.Value <= 60 Then
Temp.innerText = "Cold"
Else
Temp.innerText = "Nice!"
End If
If you feel comfortable enough, attempt to modify this code so it does the same for temperatures entered in the Celsius text field.
TextField1.Value = ""
TextField2.Value = ""
Temp.innerText = ""
Few can argue that the nature of application development is stubble-deep in the cliché of paradigm shifting momentum toward Internet applications. Fat is out, while thin is the "in" thing in development, assuming thin is a synonym for Web-based.
VB has greatly expanded the options for Internet application development. Microsoft Internet Explorer introduced the WebBrowser control for exposing the encapsulation of HTML rendering and HTTP protocol functionality into one simplified programmable object. Through the Web browser control, the Internet Explorer and DHTML object models are exposed, yet VB goes far beyond these capabilities. VB version 6 introduced both DHTML applications and IIS applications.
DHTML application projects are actually just ActiveX DLL projects that automatically configure and set the proper projects preferences, toolbox tab, and controls to allow access to the HTML page designer introduced with VB 6. DHTML applications therefore create an in-process component that extends the functionality of the client browser to accommodate and encapsulate the VB code necessary for the DHTML pages that make of the application.
IIS applications are also a special type of ActiveX DLL project that automatically includes an instance of the brand-new ActiveX designer called a WebClass object. The WebClass object forms the base of an IIS application, utilizing multiple HTML templates and WebItems. An IIS application is deployed as a single CAB file by use of the Package and Deployment Wizard. This CAB file contains project DLLs, DSX, DSR, and all other associated project files.
For the exam, the reader should be familiar with the differences between IIS and DHTML applications, the type of files produced by the Package and Deployment Wizard, the common properties and methods of the WebBrowser control, and the basics of ActiveX documents, including navigation issues and how they compare to other ActiveX components, in terms of use, hosting requirements, and development.
— By Michael Lane Thomas, MCSE+I, MCSD, MCT, A+
Internet Information Server (IIS) is a Web server that can be used for Internet or intranet uses. With VB, you can create applications that reside on IIS. These applications receive requests from browsers, run code associated with a request, and return a response to the browser. Like DHTML applications, IIS applications use HTML pages as a user interface. Unlike our previous topic, IIS applications use special objects called WebClasses.
When your IIS application runs, the WebClass processes data from the browser, and returns a WebItem. A WebItem is an HMTL page or other data, which is sent in response to the request. The procedures you create define how the WebClass will respond and what WebItems are sent.
When a browser accesses a WebClass, a logical instance of that WebClass is created for the browser. What this means is that there is an instance of a WebClass for each browser using a particular WebClass in your application. This one-on-one relationship lasts for the WebClass’s lifetime.
Before creating an IIS application with VB, you must first ensure that a number of system requirements are met. In addition to having VB version 6 installed on your computer, you’ll need a Web server that can run Active Server Pages. If your machine is NT Server 4 or higher, you can install Internet Information Server 3 or higher with Active Server Pages. If you’re using NT Workstation 4, Windows 95, or higher versions of these operating systems, you’ll need to install Peer Web Services 3 or higher, with Active Server Pages. You must also have Internet Explorer 4 for testing the application; you’ll need to install Internet Explorer 4 or higher.
On the Job: To create IIS applications, you need Peer Web Services 3 or Internet Information Server 3 (or higher versions of these) on your development computer. If you don’t have a Web server that runs Active Server Pages, you won’t be able to create a new IIS application in VB 6.0. In addition, you’ll need a browser like Internet Explorer 4 to run and debug your application. If you don’t have these, go to the office of your network administrator, wake him up, and say you need it installed.
The reason that these requirements are in place is due to the relationship between Active Server Pages and WebClasses. When you compile or debug your application, an Active Server Page with the extension .ASP is created for each WebClass. The Web server reads the ASP file, which hosts the WebClass and generates its runtime component. The relationship between ASP files, WebClasses, and WebItems is this: One Active Server Page file is associated with one WebClass, which can contain many WebItems. You can think of an ASP file as a doorway to your application. When a user types in a URL, it access the ASP file that runs the WebClasses, which return WebItems.
Exam Watch: Due to the importance of the relationship between Active Server Pages, WebClasses and WebItems, you should understand them before taking the exam. Even if you don’t get a question that directly relates to them, you may experience questions that indirectly require knowledge of these items and their relationship.
Once you’ve ensured that you meet the system requirements for creating an IIS application, you can then use VB to create one. By selecting New Project from the File menu, the New Project dialog box will appear. Select IIS Application from the dialog box and click OK.
In the Project window, you’ll see a hierarchy of your new project containing a folder called Designers. Expanding this folder displays a single WebClass. You can add additional WebClasses to your project by selecting Add WebClass from the Project menu. Each WebClass you add has its own designer, but will appear under the Designers folder in the Project window.
By selecting a WebClass from the Designers folder and clicking the View Object button on the Project window, the WebClass designer is displayed. As shown in Figure 12-5, the designer is familiar to the one seenin the previous section. When you create a new WebClass or use the empty WebClass in a new project, it will look different from what’s shown here. A new or empty WebClass will contain an HTML Template WebItems folder and a Custom WebItems folder, to which you can add HTML documents and WebItems. Figure 12-5 shows a WebClass that has templates and WebItems added to it. The HTML documents and custom WebItems are what makes up a WebClass.
Figure 5: WebClass designer
The left pane of the designer is the Treeview pane, which displays a hierarchical view of a WebClass. Within this pane, you can view WebItems and events of the WebClass. As is seen by the two folders in Treeview, there are two kinds of WebItems. HTML Document Templates are HTML files that are returned to a browser in response to a request. Custom WebItems contain events, which consist of VB code that can be accessed at runtime. By using the Treeview pane, you can navigate through your WebClass to specific HTML files, custom WebItems, and events.
The right pane of the designer is the Detail pane. What you select in Treeview determines what is displayed in the Detail pane. For example, selecting the HTML Document Templates or Custom WebItems folders will respectively display all of the HTML files and custom WebItems contained within. Selecting the WebClass itself displays these two folders, while the selection of a custom WebItem displays the events of that item. Where the detail pane comes particularly handy is when template files are selected.
When you select a template in HTML Document Templates, you can view the contents of an HTML file that can be used as an event. For example, in Figure 12-5, the template shows a number of hyperlinks. By double-clicking one of these hyperlinks, the Code window appears, allowing you to add code to it.
When viewing an HTML file in the Detail pane, four columns of information can be seen. The first is the Tag column, which shows a graphical representation of the item, and the information as to what that item is. The Attribute column shows the HTML attribute of the tag. An attribute is used in HTML for specifying what an object is or does. For example, a hyperlink has an HREF attribute for setting where the browser will jump to when the link is clicked. The Target column indicates whether a particular element has been "connected" to an event. When this element is activated—such as a hyperlink being clicked—the event associated with it in the Target column is triggered. If the tag is "disconnected," and has no event associated with it, <None> will appear in this column. Finally, the HTML context column shows the HTML code associated with that object.
The tool bar of the designer allows you to configure what will be part of the WebClass, and control Peer Web Services. The first four buttons on this tool bar allow you to cut, copy, paste, and delete items, respectively. This is useful if you have an event you’d like to duplicate and modify, or if you no longer need a particular item in the WebClass.
The next button on this tool bar is used to Add HTML Template WebItem. Clicking this button will open a dialog box that allows you to search your hard disk for an HTML file to add to the WebClass. This file is what the WebClass can then return in response to a browser request.
Add Custom WebItem will add a new custom WebItem to the Custom WebItems folder. When you’ve added a new custom WebItem, you can click the button beside this one on the tool bar to add events to the item. Adding events to an existing WebItem is done by selecting the item in Treeview and clicking Add Custom Event on the tool bar.
The Edit HTML Template button allows you to launch an HTML editor and modify an HTML template in your WebClass. The editor that launches is determined by what you’ve set in Options. To change the default editor, which is Notepad, select Options from the Tools menu. When the Options dialog box appears, select the Advanced tab, and enter the path and filename of the new editor in the External HTML Editor field. If you don’t have the path and filename memorized (as few of us semisane programmers do), you can click the button beside this field to browse your hard disk. To edit the HTML file, you will need to know HTML or have configured VB to launch a graphic editor like FrontPage.
Finally, the last two buttons on the tool bar allow you to start and stop Peer Web Services. These two buttons look like the start and stop buttons on a VCR. If Peer Web Services is currently running, the start button will be disabled, while Stop is enabled. Likewise, if you’ve stopped Peer Web Services, the stop button is disabled and Start is enabled. Shutting down Peer Web Services keeps users from accessing Web pages available on your computer from an intranet, and should always be shut down when using the Internet from a standalone computer used for development.
When creating a WebClass, there are several properties you should always set. The first of these is StateManagement, which can be changed from the Properties window. StateManagement can be set to 1 – wcNoState or 2 – wcRetainInstance. When set to the first option, the WebClass is used for the duration of a browser request, then destroyed. When wcRetainInstance is used, the instance of a WebClass isn’t destroyed until the ASP session times out, or the WebClass calls ReleaseInstance. How you set this property determines whether the WebClass stays alive between requests, or is destroyed when a request is completed.
The Public property can also be set in the Properties window, and determines if the WebClass can be shared by other applications. By default, it’s set to True. If it’s set to False your application won’t be able to run, as other applications can’t access it.
The final two properties you should set are Unattended Execution and Retained in Memory. These properties are set on General tab of Project Properties, which is accessed from the Project menu. Unattended Execution can be enabled or disabled by a check box on this tab. When checked, instances of a DLL class in your project can be allocated on any thread, while unchecking it forces all WebClass instances to be allocated on the same thread. If the Unattended Execution check box is unchecked, the Retained in Memory option is automatically disabled. Retained in Memory allows the runtime support state to be permanently loaded on a server’s threads. If either of these check boxes is unchecked, the result is that the project runs slower.
Once you’ve properly set the properties for your project and WebClass, you are then ready to apply code to events. WebClasses have three kinds of events associated with them: standard, custom, and template. These events are initiated when a user clicks on an element in his or her browser.
A standard event occurs in templates and custom WebItems, and automatically appears in the Code window. These are predefined events, and only appear in the Code window’s Procedure listbox. There are three standard events associated with every WebItem: Respond, ProcessTag, and UserEvent. The Respond event is the default event of a WebItem when it is activated by a request. ProcessTag is used to replace the content of a tag with data specified in your code. Finally, the UserEvent is used to process the events of a WebClass that are created at runtime.
As previously mentioned, you can add code to elements of a template that appear in the designer. When you double-click an element appearing in the designer, a new event with this name is generated and appears beneath the template’s name in the Treeview pane. These are known as template events. Template events are generated when VB parses the HTML document, and its events appear in both the Code window (after an attribute is connected) and the designer.
As mentioned earlier, the Target column of the Design pane displays events associated with an element. This shows that a particular attribute is connected to an event. You can connect an attribute to an event by double-clicking the attribute and writing code for it when the Code window appears.
Custom events are added to a WebClass by clicking the Add Custom Event button on the tool bar. When you add a custom event, it appears in the designer and the Code window. You can then double-click this new event when it appears in the Treeview and write code when the Code window appears. This allows you to add specialized event handling for a WebItem.
When a WebClass gets a request it goes through these events in a specific order. First, when a specific event is requested, an attempt to fire the event is made. It matches the request with the specified WebItem and procedure. If this fails, and the request doesn’t match any existing WebClass or event, the UserEvent for the HTML template is fired. If no event has been specified in a request, the Respond event for the template is fired by the WebClass. Finally, if no WebItem has been specified in a request, the Active Server Page for the application is launched, and the Start event for the WebClass is fired.
Start Q&A
| I can’t view the ActiveX documents I created in Internet Explorer 2, VB 4, and some Microsoft Office applications. Why? | ActiveX documents are relatively new. Versions equal or higher than Internet Explorer 3, VB 5, and Microsoft Binder 1 applications are able to view ActiveX documents. |
| I want to add the functionality of a Web browser to my application. How can I do it? | Add the WebBrowser control to a form, then write controls that allow the user to navigate from one Web page to another. |
| I have a standard EXE project that I’d like to use as an ActiveX document. How can I convert it? | Open the standard EXE project you want to convert. Use the ActiveX Document Migration Wizard, and follow the instructions on each screen. |
| I’ve created a DHTML application, but it won’t run in Internet Explorer. What’s wrong? | Make sure that you are using Internet Explorer 4.01 with Service Pack 1. Any version lower than this will fail to display the DHTML application. |
| I tried to create an IIS application, but VB won’t let me. Why? | You must be running Internet Information Server, or Peer Web Services 3 or higher must be installed. WebClasses won’t be able to run without them. |
The WebBrowser control allows you to add the functionality of users being able to view Web sites through your application. Using its methods and properties, you can combine this control with other controls to make a full-fledged Web browser.
ActiveX documents allow you to create applications that are displayed in container applications like Internet Explorer. You can create ActiveX documents by selecting ActiveX document EXE or ActiveX document DLL when starting a new project. You can also use the ActiveX Document Migration Wizard to convert existing projects into ActiveX documents.
DHTML applications combine VB code with HTML to create dynamic Web pages. With DHMTL applications, you can provide the functionality of a VB program to a Web page.
While DHTML applications are processed on the client’s browser, IIS applications reside on a Web server. Such a Web server must support Active Server Pages, as is the case with Peer Web Services 3 (or higher) and Internet Information Server 3 (or higher). The IIS application responds to user requests, processes the request on the server, and returns information to the browser.
The following Self Test questions will help you measure your understanding of the material presented in this chapter. Read all the choices carefully, as there may be more than one correct answer. Choose all correct answers for each question.