2.4. Interface Between Visual Basic and the Internet

In this section, we want to give readers a basic introduction to the interface between Visual Basic and Internet applications. Visual Basic provides a good environment to connect to Internet applications. For example, VBScript can be embedded into a regular HTML file and can be called and executed by a Web browser.

This section is organized in the following sequence. First, we provide a basic introduction to Internet applications, which gives readers a fundamental picture of Internet programming. Then, a detailed description of developing a DHTML application step by step is provided. We discuss a simple example and build the explanation on the preceding detailed description. An advanced DHTML application example comes next. Finally, we discuss distributing and packaging your application.

2.4.1. Introduction to Visual Basic Internet Applications

An Internet application is an interactive, compiled application that can be accessed through the Internet. In Visual Basic Internet programming, you can add active content to Web pages with little effort. A Visual Basic Internet application links Visual Basic code to one or more HTML pages and handles events raised in those pages by interacting with programs on either a client or a server. There are two types of Internet applications in Visual Basic: server-based Internet Information Server (IIS) applications and client-based Dynamic HyperText Markup Language (DHTML) applications.

• IIS Applications

  Microsoft Internet Information Server applications reside on a Web server and are used to process incoming requests from a browser. IIS applications process the requests, run associated Visual Basic code, and return responses to the user. All processing for an IIS application happens on the server.

• DHTML Applications

  This kind of application combines Visual Basic code with HTML pages to form an integrated project. Visual Basic code can handle events for any element on an HTML page, such as a text string, a text paragraph, a text field, a list box, or a command button. Most processing in DHTML applications happens on the browser computer (client-side), although the application can make calls to the server if necessary. DHTML applications require the end-user to have Microsoft Internet Explorer 4.0 or later, while IIS applications are browser- and operating system-independent to the end-user. Because of this, IIS applications are the appropriate choice when you want to develop an application for a broad audience.

The user interface in a Visual Basic Internet application can be a series of HTML pages, a mix of HTML pages and Visual Basic Forms, or a Visual Basic Form that makes use of special components such as the WebBrowser control to take advantage of some of the power of the Internet. No matter what kinds of user interface are used, the application handles events, calls methods, and sets and retrieves properties based on elements in the HTML page.

As we mentioned, in Visual Basic Internet applications, the user interface can be a series of HTML pages or a combination of Visual Basic Forms and HTML pages. Generally, the HTML pages or Web pages that work as user interfaces should be developed by Web designers or experienced programmers. You can import the developed Web pages or HTML pages into your Visual Basic project and use them as the user interfaces. If you want to create your own HTML pages, of course, you can do that, too.

You can develop Web programs using your skills as a Visual Basic programmer regardless your level of experience with Internet technology. If you are new to the Internet or unfamiliar with its technology, Visual Basic allows you to quickly and easily develop functional applications. If you are more experienced with Internet technology, you can work at a more advanced level.

From one perspective, Internet technology simply provides another area for your development efforts. When you deploy Internet applications on the Web, you may go about it differently, to incorporate HTML pages with your Visual Basic code, provide security features, and so on. But you are still calling methods, setting properties, and handling events. In this way, all of your knowledge as a Visual Basic developer can be carried into the Internet area.

From another perspective, applying Internet technology enables you to extend your knowledge in exciting new ways. For example, writing Visual Basic code that manipulates HTML pages allows you to decrease deployment costs, reduce client maintenance problems, and reach the broad audience of the Internet.^[*]

^[*] Source: Microsoft Corporation. 2002. “Component Tools Guide: Accessing DLLs and the Windows API,” “Extending the Visual Basic Environment with Add-Ins,” and “Building Internet Applications.” Available: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vbcon98/html/vbconComponentToolsGuide.asp. Used by permission.

Because most of our applications concern the request for information or to download a page, we want to concentrate on the DHTML applications for our following discussions.

2.4.2. Developing Steps for DHTML Applications

A DHTML application is a Visual Basic application that uses a combination of Dynamic HTML and compiled Visual Basic code in an interactive, browser-based application. A DHTML application resides on the browser machine, where it interprets and responds to actions the user performs in the browser.

In a general Internet application where no Visual Basic code is applied, all elements are described and written in an HTML file, including the code that is used to set the element's properties and the codes that are used to handle the events associated with elements. It is hard for a beginner to understand the meaning of a complicated HTML file. With Visual Basic, it is much easier for a beginner to understand an Internet application that was developed as a Visual Basic Internet application. You can write Visual Basic code to handle events associated with elements in the HTML page, and you can even use the Toolbox in Visual Basic to add elements to the HTML page, just as you add a Visual Basic component to a Form. In this way, you don't even need to learn anything about HTML.

The disadvantage of developing a Visual Basic Internet application with a full set of Visual Basic components is that you don't have a view of the HTML file. Experienced developers might want to do some modifications to the application on the HTML files.

A functional block diagram that describes the working principle of a Visual Basic Internet application is shown in Figure 2-72.

The Web browser takes charge of loading the HTML pages, and interpreting and executing commands on the HTML pages. A Visual Basic interpreter or a Visual Basic run-time engine resides in the Web browser, and it can execute the Visual Basic codes. By combining a Visual Basic interpreter and a Web browser, a Visual Basic Internet application can be loaded and executed in a client computer.

DHTML applications use Visual Basic code to perform much of the same processing you have previously done with script, CGI processing, and other methods of Internet application development; and much of it can be done without transferring processing to the server.^[*]

^[*] Source: Microsoft Corporation. 2002. “Component Tools Guide: Accessing DLLs and the Windows API,” “Extending the Visual Basic Environment with Add-Ins,” and “Building Internet Applications.” Available: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vbcon98/html/vbconComponentToolsGuide.asp. Used by permission.

Table 2-3 describes a mapping relationship between a Web page and a Visual Basic Form.

Key Objects in DHTML Applications

Three key objects are involved in the life of a Visual Basic Internet application. The following list describes these key objects, and Figure 2-73 graphically represents how they relate to each other.

• BaseWindow object

  Represents an instance of the browser and is used to display the Document object.

• Document object

  Represents the HTML page that the user views in the Web browser or a Web browser control. The events in the Document object are used to access the Dynamic HTML object model and handle user actions in the browser. The Document object, in turn, contains the DHTMLPage object.

  User Interface	Visual Basic Form	HTML Page
  UI Elements	Controls	Elements
  File Format	.frm files	.html or .htm files
  Creator	Developer	Web designer/developer
  Run Time	Visual Basic run-time DLL, msvbvm60.dll	Web browser or Web browser control with msvbvm60.dll

  
  

• DHTMLPage object

  This is included in the Document object and represents a run-time utility that hooks the page up to its Visual Basic code when the application runs. The DHTMLPage object provides functionality such as load, unload, initialize, and terminate events for the HTML pages. You cannot access the DHTMLPage object directly from the Document object.

^[*] Source: Figure 2-73 from Microsoft Corporation. 2002. “Component Tools Guide: Accessing DLLs and the Windows API,” “Extending the Visual Basic Environment with Add-Ins,” and “Building Internet Applications”. Available: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vbcon98/html/vbconComponentToolsGuide.asp. Used by permission.

In a Visual Basic Internet application, especially in a DHTML application, each HTML page is controlled by a Page Designer, which is provided by Visual Basic in the project. This Page Designer works as a Visual Basic Form window, and it controls the appearance and properties of each element added on the page.

Key Events in DHTML Applications

The DHTMLPage object manages the following events in your HTML pages:

• The Initialize event occurs early in the loading process, whenever the run-time DLL for the application is created by the system. It is always the first event in a DHTML application. When the Initialize event is signaled, not all objects on the page can be loaded, so object references may not be valid. Therefore, you should not use this event to reference and set properties for elements on the page.

• The Load event occurs later in the loading process, after the Initialize event. If your page is loading asynchronously, the Load event is signaled after the first element on the page has been created. If your page is loaded synchronously, the Load event is signaled after all elements on the page have been created. You can use the Load event to set information on the page.

• The Unload event occurs when the user moves from the current page to another page referenced by the DHTMLPage Designer object or closes the application. During unload, all of the objects on the HTML page still exist. This is therefore a good time to do any state management, cleanup, or other processing that needs to reference items on the page.

• The Terminate event occurs when the HTML page is about to be destroyed. None of the objects on the page exist in memory during the Terminate event, so you cannot use this event to reference items on the page for state management or other processing.^[*]

  ^[*] Source: Microsoft Corporation. 2002. “Component Tools Guide: Accessing DLLs and the Windows API,” “Extending the Visual Basic Environment with Add-Ins,” and “Building Internet Applications.” Available: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vbcon98/html/vbconComponentToolsGuide.asp. Used by permission.

DHTML Application Development Process

The steps for developing a DHTML application are similar to creating any other project in Visual Basic. The development skeleton is listed here, and a detailed description is provided in the following section with a simple example.

We will use a simple example to illustrate how to develop a DHTML application step by step in the following section.

2.4.3. A Simple Example of a DHTML Application

This simple example contains two HTML pages; one is created in the Visual Basic domain and the other one is added as an existing external HTML page. The functionality of this example is simple. By clicking some elements (command buttons) on the pages, you can navigate from one page to another. Also, a hyperlink is added into a page to connect to the Internet to display the home page of Johnson C. Smith University.

Launch Visual Basic 6.0 and create a new project by selecting DHTML Application as the type for this project (see Figure 2-74), then click OK to open this new project.

Two folders are displayed on the Project Explorer; the top one is called Modules and the bottom one is called Designers. Click the Modules folder; a Visual Basic module named modDHTML appears. This module is used to store the cookies information if you develop any component by using cookies in the project. Click the Designers folder; a HTML page named DHTMLPage1 is displayed. This HTML page is the user interface (as a Form in a Visual Basic project), and you will add more elements on this page to finish your user interface design later.

When you begin a DHTML application, a DHTML Application project automatically sets the correct references you need to access the designer for your HTML pages and the appropriate toolbox as well as controls. Besides setting the correct references, Visual Basic automatically inserts a Designer into the new project and displays it on the Project Explorer when you open this new project. The Designer, as we mentioned earlier, works as a single HTML page and acts as the base on which you create its user interface. You can add more Designers into the project if you want to develop a multiple-page application. A DHTML Application project is an ActiveX DLL project. The application you created runs as an in-process component in the Web browser or Web browser control. In other words, your application is based on a new instance of the Web browser object (BaseWindow).

Now double-click the Designers folder to open the default HTML page, DHTMLPage1. This is the user interface we need to finish our project. In this project, we have two pages, DHTMLPage1 and DHTMLPage2. We want to create the first page from within the Visual Basic domain but create the second page as an external page and then add it as an existing page.

The opened HTML page has two windows. The left window is used to display the elements you add on the page that is represented by a Document folder, and the right window is the page itself. To add an element to the page, just select a desired element from the Toolbox, click on the page, and drag it in a suitable size to a certain location on the page. You don't need to know any HTML tags to build a page in this way, because Visual Basic creates the tags and attributes for each element for you. This design method is quick and easy and allows you to create functional pages without learning the details of HTML.

But Visual Basic is not designed to be an advanced HTML editor and does not contain some useful features you will find in many HTML editors. For example, you cannot view the source code for your page, and you cannot easily work with some advanced features such as animation. It is best to create your pages in Visual Basic when your pages (application's user interfaces) are relatively simple or you don't want to work in the HTML code.

Because our first project is simple, we can create it in the Visual Basic domain. When adding elements to a DHTML page, you need to pay special attention to several issues. One issue is the element's properties, which are different than the properties of a Visual Basic component. For example, in Visual Basic, when you add a component or control to the Form, you can use its properties to modify the content and appearance of that control. Also, in Visual Basic, the Name property is a unique ID for each control, used to identify the control by system as the project runs. However, for elements in a DHTML application, the unique ID is not the Name property but an ID property, although the Name property still works. The point is that the Name property will play an important role when a set of elements with the same ID is created, which is very similar to a control array developed in a regular Visual Basic project.

The ID property must be unique to each element added to a page in the Visual Basic domain. But, you can have multiple IDs with the same value if you create and add those elements from external sources, such as in an HTML page developed in some HTML editors. So don't be confused about this difference because Visual Basic will assign each different ID for each element by attaching a sequence number when you import existing HTML pages to a Visual Basic project.

Another issue is the Caption and Text properties. In a regular Visual Basic project, the Caption is used to display a label for a button, and the Text is used to display a default text for a text field or a list box. But in DHTML applications, you will not find Caption and Text properties. A property named Value is used here for elements to replace those two properties used in a regular Visual Basic project.

One more issue is that you have to assign a unique ID to an element you added on the page if you want to reference it when the project runs. For example, say you add some text as a label on the page and you want to change or modify this text later as the project runs. You cannot access that text if you didn't assign a unique ID to that text because the system cannot identify that element at all as the project runs.

Keeping in mind all issues just discussed, now let's add the following elements to the page DHTMLPage1. The procedure is the same as adding some components to a Visual Basic Form.

Now, click on the page to select it and go to the properties window; enter VBPage1 to the ID field as the ID for DHTMLPage1. While in the Properties window, click the bgColor field and enter gray to set the background color as gray for this page. Then return to the page window, click on the upper-left corner of the page, and enter the following text as a label for this page:

Welcome to Interface Between Visual Basic and Internet

To position this text suitably on the page, you have to use the space or backspace keys from the keyboard, not the mouse. You can change the font and size for this label by selecting different tools from the toolbar.

We want to add a hyperlink to the page. There are two ways to create a hyperlink:

• Use the Make Selection Into Link toolbar icon if you want to turn existing text on the page into a hyperlink.

• Use the hyperlink icon on the HTML panel of the toolbox if you want to create a new hyperlink.

Figure 2-75 shows how our page and each element we add to this project will look on screen.

In our application, we added a hyperlink by using the first method. To turn an existing text into a hyperlink, first we need to type some text on the page. Click on the page pane below the two TextFields and type Join JCSU in 2002, as shown in Figure 2-75. Then highlight that text and click the Make Selection Into Link icon from the toolbar. The highlighted text will change color. Right-click that text to open its Property Pages dialog box, shown in Figure 2-76.

In the opened dialog box, click the down-arrow of the Link type: field, then find and select the http: item as the type for this hyperlink because we want to use an absolute address for this page. In the Link: field, enter www.jcsu.edu after the type http://. The other fields are not important to our application, but you can enter some text in the Popup text: field if you like. The content in the Create bookmark: field is the name for this hyperlink. Your finished dialog box should match the one shown in Figure 2-76. Click the Apply and OK buttons to save these settings for this hyperlink.

Your finished page pane should match Figure 2-77.

The purpose of the two TextFields is to show you how to add TextField elements to the page pane. You should enter something into these two fields as the project runs. Later we will show you the coding for these two fields.

After the user interface is developed, the next step is to code for each element on the page and set a connection between the event and element on the page.

Recall in the early part of this section that the first element we added to the HTML page DHTMLPage1 was a label. But we left a blank in the ID property of that label. This means that we cannot access this label as the project runs because no valid ID is assigned to this label. We did this on purpose because we want to leave it alone and don't want to disturb it as the project runs.

Next, let's discuss how to code the Start button. The purpose of clicking the Start button is to navigate to another page, but that page is located on our computer, not on the Internet. We can create that page in a standard HTML editor, such as NotePad, and add it into our project as an existing HTML page. First, let's open the NotePad editor and enter the following code to create an HTML file, which is shown in Figure 2-78.

This HTML file is very simple; first we create the Welcome Page title. A "Welcome to VB Internet" label is added into this page. A horizontal line and a TextField are also added into the page. The purpose of this HTML is to test the functionality of adding an external HTML page into our project. We also need to add a button to this HTML file, but we want to leave this job until later in the Visual Basic domain.

Save this file to our user-defined project directory C:VBWet and name it Welcome.html. Don't forget to enclose this name in a pair of double quotation marks when you save this file; otherwise, the NotePad editor cannot recognize that your file has a type of html. In our case, you need to save this file as "Welcome.html".

Now that we have created an HTML page outside the Visual Basic domain, we can add this HTML to our project as an external existing page. Before we can do this, however, we first need to take a look at the Save Options for Pages and Designers in DHTML applications.

Save Options for Pages and Designers

When you add a page to the project, you have to decide how your page will be saved and if you will create a new page or edit an existing HTML page from your hard drive. There are two ways you can save your page:

• Save it within the Designer file. This method allows you to easily share files between developers or move your development project from computer to computer without worrying about paths to any external pages. However, saving your pages in this way prevents you from using the Launch Editor feature to edit the pages in an external HTML or a text editor.

• Save the page to a location on your computer, such as a user-defined project directory. This method creates external HTML files that are referenced in the Designer's SourceFile property by an absolute path. When you save your page in this way (to an external file), you can use the Launch Editor feature to open an external HTML editor or a text editor to edit the page. However, moving your file from computer to computer may cause the path you entered for your source file to become invalid.

The SourceFile property for the Designer reflects the save method you selected. When you save the page within the Designer, the SourceFile property is blank. When you save your page as an external file, the SourceFile property reflects the full path to the file you selected.

The save options you select apply only when the project is built. At that time, the system generates external HTML files for the pages in your project and stores them in a location you specify. In this simple example, we use the first method to save all pages to our project's Designer. In this way, we can share all pages we added into the project, and we don't need to worry about the locations and paths where all HTML pages are located.

Follow the next steps to add an external HTML page to our project and save it within our current Designer.

• Click the Project|Add DHTML Page menu item from the Visual Basic menu bar, and a dialog box appears. In the resulting dialog box, select Save HTML in an external file:, as shown in Figure 2-79.
  
  
  

  Figure 2-79.

  

  
  
• Then click the Open. . . button to open an existing HTML file from our computer.
  
  
• From the opened dialog box, browse to our user-defined project folder, C:VBWet, and select the Welcome.html file we created earlier.
  
  
• Click the Open. . . button to add this HTML file to our project. You will find that this file has been added to the opened dialog box (see Figure 2-80).
  
  
  

  Figure 2-80.

  

  
  
• Click the Apply button from this dialog box.
  
  
• Then click the Save HTML as part of the VB project item.
  
  
• Click the Apply button again, and click the OK button to close this dialog box.
  
  

Now, in your page pane, you will find that the HTML page, Welcome.html, has been added to our project. Also, a new icon, DHTMLPage2, is created and added under the Designers folder in the Project Explorer.

Click on this page, and enter lightblue in the bgColor property field from the Properties window. Also enter Page2 to the Id property field as the ID for this page. Now, we want to show you how to add an element to an existing HTML page from within the Visual Basic domain. Click a button from the Toolbox in Visual Basic and drag it under the TextField on the HTML page. Click this button to select it, and set the following properties for this button:

ID: cmdOK

Name: cmdOK

Value: OK

Your finished DHTML page, DHTMLPage2, should match the one that is shown in Figure 2-81.

Now we can continue the coding for our project. Return to the Visual Basic workspace, and keep the default page DHTMLPage1 selected. Click the View Code button from the Project Explorer to open the code window. Select General from the Object list to open the General Declaration section and enter the code shown in Figure 2-82 to create two of the Form's level variables.

Two of the Form's level variables, mUserName and mPassWord, are used to reserve the user input from the two TextFields, txtUName and txtPWord, that we added previously.

Many elements on an HTML page have a default action. For example, the default action for a hyperlink is to launch the specified Web page when clicked. When you write Visual Basic code for an object on the page, you have to include a statement that enables the default action to be activated after your procedure is processed.

In Internet Explorer 4.x, when you attach an event to any object, the system returns a True or False value when the event is signaled. A returned value of True allows the default action to be activated, and a value of False prevents the action from occurring. Visual Basic always defaults Booleans to False, so by default, any event procedure that the system runs prevents the default action from occurring. To make sure the default action is activated, you must include a line of code that returns a value of True.

In our case, we added a hyperlink in the project. Accordingly, a hyperlink1_onclick() event will be created. The default returned value of this event function is a Boolean value, False, which means that when you run the project, the system will prevent this onclick action from occurring. Now, let's modify this event function to make the default value True.

Click the View Object button from the Project Explorer to open the page pane, double-click the Join JCSU in 2002 hyperlink to open its event procedure, then enter the code shown in Figure 2-83 into this procedure to make the default value of this event True.

Before we can continue to write code for our project, we need to get a basic understanding of the events, which are a bit different than events in Visual Basic.

Events in Dynamic HTML

Most events in the DHTML object model are similar to the events in the Visual Basic programming model. However, the event names are slightly different. All event names in DHTML are preceded by the word “on”; for example, a click event corresponds to onclick, a load corresponds to an onload, and so on.

Table 2-4 lists some commonly used events in Visual Basic and in DHTML models. The last three events are unique to the DHTML model.

Now, select the cmdStart item from the Object list in the code window to open its event procedure, and enter the code shown in Figure 2-84 into this procedure.

In the Code Window, select the cmdExit item from the Object list to open its event procedure, and enter the code shown in Figure 2-85 into this procedure.

Here we try to call one of the methods on the instance of the browser object, Close, to end our project. This command will close the instance of the browser, BaseWindow. Later, we will show you that this is not a good method to end a DLL. Our project will be finally compiled to an ActiveX DLL file. This DLL file is a Visual Basic DHTML application and will be called by a Web browser. This application will be automatically closed when the user opens another page, so you don't need to put in any code to end this application within the DLL file.

Now, we have finished coding for the first page, DHTMLPage1. Let's turn to the second page, DHTMLPage2, to finish coding for that page. For this page, we need to code only for one element, the command button cmdOK, which we added from within the Visual Basic domain earlier.

Double-click the DHTMLPage2 icon from the Project Explorer to open the second page pane, then double-click the OK button to open its event procedure, and enter the code shown in Figure 2-86 into the procedure.

The functionality of clicking the OK button is to return to page1, DHTMLPage1. So a similar command is used here to navigate back to the page1.

Now, save all page files and our project to our user-defined directory C:VBWet by clicking the File|Save DHTMLPage1.Dsr As, File|Save DHTMLPage2.Dsr As, and File|Save Project As menu items to save them. You can keep the default page names and project name, or you can enter different names for these files. In our case, we changed the project's name to MyDHTMLProject.vbp.

Finally, we need to build our project to an ActiveX DLL file. Click File|Make MyDHTMLProject.dll. . . to compile the project. Make and save this DLL file to our user-defined project directory C:VBWeb. Now, it is time to test and debug our project.

Open Microsoft Internet Explorer by double-clicking it from the desktop, and minimize it. In the Visual Basic workspace, click the Run|Start menu item to start our project. A moment later, our project's page1, DHTMLPage1, is displayed on screen, as shown in Figure 2-87. Now, click the Start command button to start the project. A message box with the information shown in Figure 2-88 is displayed on screen. This means that your two TextFields, txtUName and txtPWord, are blank, and you need to enter something in these two TextFields to begin the project. For example, enter your name and your four-bit pin number for your ATM card in the User Name and Password TextFields, respectively. Then click the Start command button. The second page of our project, DHTMLPage2, is displayed on the screen, as shown in Figure 2-89.

Enter something in the TextField, such as your name again, and click the OK button; you will return to page1. Now click the hyperlink, Join JCSU in 2002, to open the Johnson C. Smith University home page, shown in Figure 2-90.

Now, close this home page and return to the first page by clicking the Back Arrow on the upper-left corner of this window. When you return to DHTMLPage1, click the Exit button to try to close our project. After you click the Exit button, a system message box, as shown in Figure 2-91, is displayed on screen.

Click the Yes button to close the page; this closes the instance of the browser object, but our project still runs. To terminate the project, click the Stop button from the menu bar. At this point, our project is perfect!

We now want to add one more functionality to our project; we want to test a transfer of data across pages. During our project runs, when we navigate to the second page, we can type something (data) in the TextField on the second page, then click the OK button to return to the first page. As we do that, we want to store the data entered in the second page to a client-side cookie by using the system method PutProperty. After we return to the first page, we want to retrieve the data we entered and stored in a client-side cookie by using another system method, GetProperty, and display that data at the TextField txtUName.

Now, open the Code Window of the second page, DHTMLPage2. Select cmdOK from the Object list to open this event procedure. Add one more command, as shown in Figure 2-92.

The newly added command is located at the top. The name of the data to be stored is “newName,“ and you can select any legal name for this data's name you like. The element from which we obtain the data is the TextField, txtName, but the real data is stored in the Value property. We call the PutProperty method to store this data in a cookie in the BaseWindow's Document object.

Open the Code Window of the DHTMLPage1, and click the DHTMLPage item from the Object list to open its Load event procedure. Enter the code shown in Figure 2-93 into this procedure.

The DHTMLPage_Load event procedure is the first procedure to be called and executed when this page is loaded. We add some commands in this event procedure to retrieve the data we stored in the second page and display this data in the txtUName TextField. First, a local variable newName is created, and this variable is used to hold the retrieved data that is obtained by calling the GetProperty system method. The data is stored in a cookie that belongs to the BaseWindow.Document object. After the data is picked up, we assign it to the txtUName TextField to display it.

Now, recompile the project and run it. First enter something in the txtUName TextField on the first page, such as Test. Also, enter a number, such as 50, in the Password field (see Figure 2-94). Click the Start button to navigate to the second page and enter a name, such as James Bond, in the txtName TextField on the second page. Then, click OK to navigate back to the first page. You will now find that the word Test you entered in the txtUName TextField has been updated to James Bond. Refer to Figure 2-95 to see this result. Our project is very successful.

All files in this project, including the Visual Basic source files, external HTML file, Module file, user interface files, and terminal DLL file, are stored on the accompanying CD-ROM in the Chapter 2VBWebSimple folder. You can copy all these files onto your computer to test and debug this project.

We will discuss how to package and deploy this project in Section 2.4.5, but first we want to emphasize a few more points for developing a DHTML application and then provide a more advanced example in Section 2.4.4.

As the standard Visual Basic project, DHTML application projects have code modules and visual designers—in this case, the DHTML page designer. Visual Basic creates a page designer for each HTML page in your application. The following files are stored in the application for each page designer.

• A .Dsr file: .Dsr files are plain text files that contain the source code for the designer and references to the HTML pages they contain.

• A .Dsx file: .Dsx files contain binary code about the designer.

HTML pages associated with an application are saved to the location you specify. Any files associated with the HTML pages are also a part of your project, and they must be deployed together with the project. For example, if your HTML page references a series of images, the image files themselves must be deployed with the project together as an integrated component.

When compiling a DHTML application, Visual Basic creates a DLL containing the page designer and its code. The HTML pages and their associated files are stored separately from the DLL and must be deployed with it. During compiling, Visual Basic generates several additional files. These include your project file, a .vbw file that contains layout information on your project, an .exp file, and a library file.

The terminal DLL contains your Visual Basic code and it is accessed by the run-time component, generated automatically when you debug or compile the DLL file. When you finally deploy your DLL file, it can be called by the run-time engine that resides in the Web browser.

2.4.4. An Advanced DHTML Application Example

In this section, we want to introduce a DHTML application that requires the following tasks:

• Dynamically create and add elements to an HTML page.

• Replace the text and label dynamically when this is activated by the user.

• Link to an external HTML page.

Launch Visual Basic and create a new DHTML application. Save the Designer and the project as VBDHTMLPage.Dsr and VBDHTMLProject.vbp, respectively, by clicking File|Save DHTMLPage1 As and File|Save Project As from the Visual Basic menu bar.

In the newly opened project, click the Designers folder and DHTMLPage1 icon to open its pane (HTML page), and add the following elements to this pane, so that your screen looks like that shown in Figure 2-96.

• Set the background color for the pane.

  Click on the pane, go to the Property window, and enter Page1 in the ID property field to set an ID for this pane. Enter BurlyWood to the bgColor property field to set the background color for this page. You can select any color you want as the background color for the pane.

• Insert an image in the pane and locate it on the upper-left corner.

  Click the Image icon from the Toolbox window (not the InputImage icon), move the cursor to the pane, and drag and enlarge it on the upper-left corner of the page. Right-click this blank image and select the Properties. . . item to open its Property Pages dialog box, shown in Figure 2-97.

  
  

  Figure 2-97.

  

  
  

• To insert an image, we need to use the CD-ROM that accompanies this book. Insert the CD into the CD drive on your computer. Click the button located at the right-side of the Image source: field, as shown in Figure 2-97, to select the image source. Browse to the Chapter 2VBWebAdvanced folder on the CD, and select the Diagonal Sand.jpg item. Click the Open button to add this image source to the new project. Then click the Apply and OK buttons to save this setting and close the dialog box. The image has been added to the page.

  Click on this image, go to the Property window, and enter Image1 in the ID property field to set an ID for this image. You can insert a different image if you like. For example, you could insert an image from your scanner or digital camera, or from a file of your choice.

• Add a bold label as the head.

  Now, click your mouse, move the cursor to the top of this page, and locate the cursor just at the right of the inserted image. Type the following text from the keyboard:

  DHTML Application

• Select a size of 5 from the toolbar of the pane editor. Go to the property window and enter DarkRed in the color property field and lblTitle in the ID property field, respectively.

• Add a subhead.

  Similarly to the last step, from the keyboard type (Advanced DHTML) on the page. Set the lblSubTitle as the ID and DarkGreen as the color for this element.

• Add three hyperlinks.

• We need to add three hyperlinks on this page.

  Click the mouse and move the cursor to locate it below Image1. From the keyboard, type the first text, Dynamically Add Elements, on the page. Then highlight this line of text and click the Make Selection Into Link icon. The selected text will be underscored and the color will be changed to dark pink. Set the ID of this object as Hyperlink2.

  Because we want to use this hyperlink to dynamically add some HTML elements to the current page when the project runs, we don't need to connect this link to any internal or external pages. Later, we will show you how to add the elements dynamically to the current page by coding to the event in the project.

  Similarly to adding the first hyperlink, type Join JCSU in Fall 2002 following the first hyperlink. Highlight it and click the Make Selection Into Link icon. We will show you how to connect this hyperlink to an external Web page in the next step. Set the ID of this object as Hyperlink1.

  Type Open the Second Page below the second hyperlink. Highlight it and click the Make Selection Into Link icon. We will show you how to connect this hyperlink to an internal Web page in the next step. Set the ID of this object as Hyperlink3.

• Add one command button.

  Click the button element from the Toolbox window and move it into the page, click it on the page, and enlarge it. Enter the following properties for this button:

  ID: cmdUpdate

  Name: cmdUpdate

  Value: Update

  
  

Your finished page, DHTMLPage1, should match the one that is shown in Figure 2-96. Click File|Save Project to save our new project.

In a Visual Basic DHTML application, you can create HTML elements and insert them in a page from code. You can do this if you want to create a page in response to a user's actions by using the DHTML object model's InsertAdjacentHTML and InsertAdjacentText methods.

In this application, we want to dynamically create and add some simple items to the current page (page1) to illustrate the functionality of using this technology. Of course, you can create and add any element you want in your project if you like. For our case, we will create and add the following elements to the page:

• a command button named Reset, which is used to close the project window;

• bold text, which works as a greeting message; and

• horizontal lines, which are used to decorate the page.

Double-click the hyperlink Dynamically Add Elements from the page to open its event procedure and enter the code shown in Figure 2-98 into this procedure.

The Document is an object of the current HTML page and this Document belongs to the current instance of the Web browser object, BaseWindow. Because we only create and use one instance, we don't need to put this instance (BaseWindow) in front of the Document object.

All HTML instructions are inserted into the current page by using the DHTML object model's InsertAdjacentHTML and InsertAdjacentText methods.

First, a Reset button is inserted in the page by using an Input type tag. A window.close() system function will be called when that button is activated by the user. Following a new paragraph, a pair of horizontal lines are inserted in the page. A text message, New Dynamic DHTML Page, is inserted between the horizontal lines on the page.

In this way, we dynamically create and add elements to the current page as the project runs. You can create and add other elements based on your requirements.

Now, let's take a look at the text replacements in the DHTML applications. Text replacements are a regular operation in Visual Basic programs. In Form-based Visual Basic applications, we usually make the text replacements by setting new text to the Text property of the control in question.

For HTML pages in a DHTML application, text replacements are handled differently. A standard text element in an HTML page consists of both a set of tags and the text that is embedded between them. When you want to make changes to text on an HTML page, you should specify whether you want to replace it with straight text only or with text that includes additional HTML tags. Additionally, you need to indicate if the original tags for the text should be affected by the replacement. You do this with two sets of properties: innerText and outerText, and innerHTML and outerHTML.

To change text within HTML tags, when you don't want to change the original tags, use the innerText or innerHTML properties. These properties both replace the existing text without touching the tags around the text. There are two differences between these two properties.

• innerText provides changes that the system inserts as straight text, without performing any parsing.

• innerHTML provides text replacements and additional HTML tags that must be parsed and inserted between the original tags.

To change both the text and the original tags around the text, you can use either outerText or outerHTML. Both properties replace the text enclosed in the HTML page for a specific element and the element tags themselves. Similar to innerText and innerHTML, they differ in terms of how the system processes them.

• outerText provides changes that the system inserts as straight text, without performing any parsing. This text replaces the entire original element, including its HTML tags.

• outerHTML provides text replacements and additional HTML tags that must be parsed and inserted in place of the original tags.

If you use outerHTML to change the ID for an element, any Visual Basic code you wrote for events on the old element ID will no longer work. You must either copy your old code to the appropriate procedures for the new element ID, or leave the ID unchanged. In addition to replacing text, you can also append text to an existing element with the insertAdjacentHTML property.

For our application, we want to keep the original HTML tags unchanged; we only want to change the text. Click DHTMLPage1 from the Project Explorer to open this page. Double-click the Update command button on the page to open its event procedure, and enter the code shown in Figure 2-99 into this procedure to change the text.

An innerText property is used here to replace the original text, DHTML Application, with new text, New DHTML Project. Also, we update the Border of Image1 from 0 to 2. This update is only used to display the change on the border of the image.

You can update or do any replacement on your pages in the same manner. Now, click the File|Save Project menu item to save our project. It is time for us to take care of the hyperlinks we created earlier.

We create three hyperlinks for this page. The first one is used to dynamically create and add elements to the current page, so it does not need to set any external link. The second hyperlink is used to connect to an external Web page, that is, the Johnson C. Smith University home page. The third hyperlink is used to connect to an internal HTML page. Now, let's first set a link to the second hyperlink, and then we will handle the third hyperlink.

While still on DHTMLPage1, highlight the second hyperlink, Join JCSU in Fall 2002. Then, right-click on this hyperlink and select the Properties item from the pop-up menu to open the Property Pages dialog box for this element, as shown in Figure 2-100.

Click the down-arrow button that is located on the right of the Link type: field and select the hypertext transmission protocol item, http:, from the list. Then type the Web site, www.jcsu.edu, into the Link: field following the http://. You can type something in the Popup text: field or leave it blank. Click OK to save this setting and close this dialog box. In this way, we connect this hyperlink to an external Web page.

Before we can set a connection for the third hyperlink, we first need to develop an HTML page and use it as an internal HTML page that will be referenced by the third hyperlink.

Open the NotePad editor and enter the HTML code shown in Figure 2-101 into a new HTML file named Iceberg.html. The title for this page is The Second DHTML Page.

To develop this HTML page, we need to use an image file from the accompanying CD-ROM. Insert the CD into your computer's CD drive. The Iceberg.jpg image will be the background for our page. A BACKGROUND tag followed by the image filename Iceberg.jpg sets this up. You can use any image as the background for this page if you like. The only thing you need to do is to copy that image to a folder on your computer and type the full name, including both the image name and the folder name, after the BACKGROUND tag in the HTML page. In this application, we don't need to put a folder name in front of the image name because the image is located in the same project folder that the project is located in, C:VBWeb.

A heading is created with formatted text next. The color code #000066 means that the heading will be dark blue.

Following the head, a hyperlink named Back is inserted in this page inside an HTML tag <HREF>. This hyperlink is connected to our main page, or page1 (DHTMLPage1) in our project. When the user clicks this Back hyperlink, the system will navigate back to our main page, page1. Also, a pair of tags, <CENTER> and </CENTER>, is used to center the hyperlink text Back on the page.

Save this HTML file as Iceberg.html to our user-defined directory, C:VBWeb. Don't forget to use a pair of double quotation marks to enclose this filename when you save it; otherwise, the NotePad cannot recognize that you are saving an HTML file.

Now return to our main page, page1, and highlight the third hyperlink, Open the Second Page. Right-click on this hypertext and select the Properties item from the pop-up menu to open its Property Pages dialog box, shown in Figure 2-102.

Click the down-arrow button that is located on the right of the field Link type: and select the file: item from the list. Click the Browse. . . button to locate our HTML page, Iceberg.html, which is located in our user-defined project folder C:VBWeb, and select it. Then click the Apply and OK buttons to save this setting and close this dialog box. At this point, we have finished developing this project.

Click the File|Make VBDHTMLProject.dll. . . menu item from the Visual Basic menu bar to build our project. In the opened dialog box, select our user-defined project folder C:VBWet as the destination for this DLL file.

Now, let's test our project. Open Microsoft Internet Explorer, and then click Run|Start from the Visual Basic menu bar to run our project. You can also press the F5 key to start the project. As the project runs, our main page, page1, is displayed on screen, as shown in Figure 2-103.

Now, click the first hyperlink, Dynamically Add Elements, and you will find that our desired elements, including one Reset button, one text head, and two horizontal lines, have been added, as shown in Figure 2-104. If you click the Reset button, a message box will pop up and you will be prompted to exit the window. You can click Yes to exit the current window, but the project is still running. You need to click the Stop button from the Visual Basic toolbar to end the project.

After finishing the test to dynamically create and add elements to the current page, restart the project to test some other functionalities. After the main page is opened, click the second hyperlink, Join JCSU in Fall 2002, to open the Johnson C. Smith University home page. The opened home page is shown in Figure 2-105.

Click the Back button located on the upper-left corner on the page to return to our main page. Then click the third hyperlink, Open the Second Page, from the main page. The second HTML page is displayed on the screen, as shown in Figure 2-106. On the opened second page, click the Back hyperlink, and the system will return to our main page. Our project is successful once again!

All files for this project, including the page file, source code file, HTML files, and DLL file, are stored on the accompanying CD-ROM in the Chapter 2VBWebAdvanced folder. You can copy these files onto your local machine and test them.

2.4.5. Package and Deploy Your Application

You package and deploy the DHTML application using the Visual Basic Package and Deployment Wizard. By using this Wizard, you can package your project DLL files and all associated files into a cabinet (.cab) file. Then the Wizard can deploy this cabinet file and its associated support files to a location you indicate on a Web server.

Before you can deploy that cabinet file, you should first perform a digital signature to get the authority for your cabinet file in the Microsoft Internet environment.^[*]

^[*] Source: Microsoft Corporation. 2002. “Component Tools Guide: Accessing DLLs and the Windows API,” “Extending the Visual Basic Environment with Add-Ins,” and “Building Internet Applications.” Available: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vbcon98/html/vbconComponentToolsGuide.asp. Used by permission.

The application files that must be deployed include:

• The DLL files for the project, including the Visual Basic run-time DLL and the .Dsr and .Dsx files for the project. These are automatically packaged into the .cab file when you run the Package and Deployment Wizard.

• The HTML pages associated with the project. The Package and Deployment Wizard cannot package these into the .cab file; it only copies them to the indicated location on the Web site when you deploy the .cab file.

• Any files referenced by the HTML pages, such as image files. The Package and Deployment Wizard cannot automatically recognize these dependencies, but you need to add them to the list of additional files to deploy.

The files that users need to download for a DHTML application vary depending on whether or not they have previously downloaded an application. If the user is downloading for the first time, he or she needs to download the Visual Basic run-time DLL and the page designer run-time DLL in addition to the files associated with the application. If you have previously downloaded a DHTML application, you do not need to download the run-time components again.

The process for deploying the DHTML application to the Internet can be divided into the following steps:

• Debug and compile your DHTML application.
  
  
• Use the Package and Deployment Wizard to build a .cab file that contains the necessary files for your DHTML application.
  
  
• Make sure that the HTML files for your application are listed on the Included Files screen as you are packaging. If not, use the Add button to manually include these files one by one.
  
  
• Digitally sign your .cab file and rebuild it.
  
  
• Use the Package and Deployment Wizard to deploy your application to the Web server you want to use.
  
  
• Manually copy any files associated with your application's HTML pages, such as image files, to the necessary location on your Web server.
  
  Note You can also use the Package and Deployment Wizard to perform this step:
  
  
• Test the pages in your application to make sure that all the links to associated files are still working. If not, you may have to modify the location of your files on the Web server to match the URLs in the HTML pages.
  
  

For a detailed discussion of using the Visual Basic Package and Deployment Wizard to package and deploy a DHTML application, refer to Microsoft Internet Development Documentations. This topic is beyond the scope of this book.