The combination of ActiveX and VBScript makes your Web pages more appealing and easier to use-features that are vitally important in a Web where thousands, even millions, of Web sites are competing for attention. ActiveX and VBScript bring your Web pages to life; you will soon see how quickly and easily you can create interactive, intercreative Web pages that Web users will want to visit and return to visit again.
ActiveX is the technology that will eventually bring together the Internet or World Wide Web and the desktop-whether it's Windows or Macintosh-as one seamless environment. One of the most exciting aspects of using ActiveX and VBScript to enhance your Web pages is that you help further the development of the Web in a direction that was merely a pipe dream only months ago.
You might be surprised and even a little disappointed to learn that ActiveX controls are actually nothing new. Windows as we know it would not exist but for ActiveX controls, or as they used to be known, OCX controls. Although ActiveX controls are somewhat less bulky, they are really the same as OCX controls, which gives you a huge advantage when using ActiveX. Years of usage and development went into the underlying OLE (Object Linking and Embedding) technology.
This chapter gives you some of the basic knowledge that you need to get started using ActiveX controls: how you add them to the page and how you can customize them to suit your needs. You'll also take your first look at the tool du jour, the ActiveX Control Pad, which makes the job of interfacing ActiveX controls quicker and easier.
The ActiveX Control Pad and HTML Layout control that come together as a complete package are freely available for download from Microsoft's Site Builder Workshop Web site at http://www.microsoft.com/workshop/ (see Figure 1.1). Simply follow the links to the ActiveX Control Pad download area. At the time of writing, Microsoft requires you to complete a very straightforward registration form prior to downloading the ActiveX Control Pad.
Figure 1.1 : The Microsoft Site Builder Workshop.
To install and use the ActiveX Control Pad, you must first have Microsoft Internet Explorer 3.0 installed on your machine. Additionally, your system must have the following minimum specification:
The ActiveX Control Pad and HTML Layout Control are very easy to install. The single file containing them both is a self-extracting, self-installing archive. To set up the Control Pad, all you have to do is locate the file you downloaded (setuppad.exe) and double-click it to extract the contents and commence the installation procedure, as shown in Figure 1.2.
The installation creates a program group called Microsoft ActiveX Control Pad that you can access from the Windows 95 Start button. As with all software you install, the first thing you should do is read the readme, but you always do that anyway-don't you?
The ActiveX Control Pad is an HTML authoring tool with a difference. It enables you to add active controls and active scripting to your HTML pages. When I say active controls, I don't mean only ActiveX controls; you can embed Java applets, too. Active scripting doesn't mean only VBScript; JavaScript and Microsoft's implementation of JavaScript, known as JScript, are also supported. You can add controls quickly and easily using the familiar Windows point and click method.
ActiveX controls can be as simple as the buttons or drop-down lists you regularly find in Windows programs, or they can be complete stand-alone programs, somewhat like a Java applet.
You'll learn more about the theory of ActiveX controls in Chapter 21. But for now, create a simple active-content HTML page using one of the preloaded ActiveX controls.
Open the ActiveX Control Pad as you would any other Windows application by double-clicking the icon in the ActiveX Control Pad program group. Figure 1.3 displays the ActiveX Control Pad as it appears when you first open it. You'll notice that it automatically creates a new HTML page, complete with a simple HTML template, ready for you to start creating your active-content Web page.
Figure 1.3 : The ActiveX Control Pad showing the automatic
HTML template.
| NOTE |
In this book, I assume that you're already up to speed with HTML, so unless there are any new HTML tags or tags specifically designed to handle active objects, I won't waste your time detailing the HTML. If you need an HTML refresher or primer, you can consult Appendix A, "HTML Reference/MSIE Extensions." As a bonus, the book Teach Yourself Web Publishing with HTML 3.2 in 14 Days, Professional Reference Edition by Laura Lemay is included on this book's CD-ROM. |
Take a look around the ActiveX Control Pad window. You have a text editor but no WYSIWYG screen. WYSIWYG editing and control placement are the jobs of the HTML Layout Control, which I examine in detail in Chapter 14, "Using the HTML Layout Control." The goal of using the ActiveX Control Pad is to place code that implements ActiveX and Java controls and any associated scripts in your HTML Web pages with a minimum of fuss and trouble and even without any programming skills. The ActiveX Control Pad is where you start to build or edit your active-content HTML pages.
To try the text editor and start getting a feel for the environment, enter some simple HTML into the document.
By default, the Control Pad saves all work in the Program Files\ActiveX Control Pad\ subdirectory. In the Control Pad, the saved HTML page should look like the one in Figure 1.4.
Figure 1.4 : welcome.htm in the HTML text editor of the Control Pad.
After you save the page, run it with the Internet Explorer either by opening the Internet Explorer and opening the page from the File|Open menu option or by clicking the filename that is now available in the recent Documents menu attached to the Start button-assuming you set Internet Explorer as your default browser. The page should look like the one in Figure 1.5.
Figure 1.5 : welcome.htm in the Internet Explorer.
Now that you're satisfied that the ActiveX Control Pad can create
normal flat HTML Web pages, your next step is the one you've been
waiting for: adding some active content. Return to the ActiveX
Control Pad, and if you've closed it in the meantime, reopen welcome.htm.
| TIP |
You can invoke the ActiveX Control Pad and open an HTML document in it by right-clicking the HTML document's icon in Windows Explorer and selecting Edit in ActiveX Control Pad from the pop-up menu. |
Insert an empty line after the </H1> tag. Enter a <P> paragraph tag to add some space under the heading and press Return, making sure your cursor appears at the beginning of this blank line.
To insert an object, select Insert ActiveX Control from the Edit menu. The Control Pad displays a dialog box similar to Figure 1.6, which contains all the insertable ActiveX controls registered on your system.
Figure 1.6 : The Insert ActiveX Control dialog box, scrolled to show the MS Forms 2.0 controls.
You should at least see a number of Microsoft Forms 2.0 controls
listed in the ActiveX Control dialog box; however, the number
and type of controls available to you depends upon the software
you previously loaded on your computer.
| NOTE |
If you installed Microsoft Visual Basic 4.0, you'll see a large variety and number of controls, most of which will be immediately familiar to you, confirming that the OCX custom controls used in development environments such as Visual Basic are in fact ActiveX controls and can be used as such. In Chapter 21, you construct a Web page using one of the Visual Basic custom controls. |
Take a moment to scroll through the list of controls. Find the control named Microsoft Forms 2.0 Label, select it so that it is highlighted, and click OK. Figure 1.7 shows what you should see next.
Figure 1.7 : The ActiveX Object Editor and Properties window.
The small window on the left is the Object Editor (see Figure 1.8). This is NWYSIWYG, Nearly-What-You-See-Is-What-You-Get. The object you selected in this window is shown as it will appear on the HTML Web page but not in the place where it will appear. The placement is still determined by its order within the HTML source document. However, you can use the mouse to change its size and other properties, as you'll see shortly.
Figure 1.8 : The ActiveX Object Editor.
The larger window to the right is the Properties window (see Figure 1.9). Here, you can see a long list of attributes that this label possesses. Take a moment to scroll down the list of properties. Some are self-explanatory; others are somewhat more obtuse. All the property values listed here are the default values for this particular control. You change a property by selecting the particular property value next to the property name.
Figure 1.9 : The ActiveX Properties window.
Some of the controls you'll use are just fine with their default property values, but most of the time, you'll want to customize the control in some way to suit your purposes. After all, customization is one of the really neat things about Windows controls. You can see from the list of properties that not only can you change the outward appearance of a control, but you can also change how the control operates. You can make the changes quickly and easily even if you haven't written a program in your life. Here's how you set an object's properties:
The label automatically reduces in width. It's really as simple as that; some of the properties have many different values you can choose, and some rely entirely on your input, but customizing each object is very straightforward.
To save the current property values and return to the HTML page, simply close the Object Editor window. The relevant HTML code for this object and its parameters are then transcribed automatically onto the HTML document in the Text Editor window (see Figure 1.10).
Figure 1.10: The control's HTML definition is automatically placed in the text editor.
All the code that defines and implements an ActiveX control is added for you, including the horrendous-looking CLASSID that uniquely identifies each type of control. You can now see just how easy it is to add ActiveX controls to your Web pages. At this point, you'll probably get a rush of adrenaline and want to start adding all types of controls all over your pages-so don't let me stop you. Here's how to do it:
Your new property value appears in the property list and displays on the command button itself in the Object Editor window.
You can also change properties by using the Object Editor. Click the button that you created in the Object Editor window. A hatched marquee containing eight small, white drag blocks appears around the button. You can use the drag blocks at the corners of the button to increase or reduce the size and width in the same operation. You can use the blocks at north, east, south, and west to drag the button's height and width independently of each other.
Click in the center of the button. This gives you a flashing cursor, and you can see that the text on the button face has the focus. Using your arrow keys, move the cursor to the end of the word Click, press the space bar, and type Me. Notice that the change is echoed in the Properties window. Editing properties is that simple. To save the current properties and return to the Text Editor, close the Object Editor window. Your HTML page should now look like the one in Figure 1.11.
Figure 1.11: The command button definition added to the HTML page.
Save the file with the Save icon or choose Save from the File menu, and run the page with your Internet Explorer browser. It should look like the page in Figure 1.12. If your browser is loaded with the page from earlier in the chapter, simply click Refresh to see the amended Web page.
Figure 1.12: The page with an HTML caption, an ActiveX label, and an ActiveX command button.
Now you have two ActiveX controls on your page: a label and a command button. You probably think your ActiveX Label control looks far from appealing, more like a mistake than state-of-the-art active content! You can do something about that.
Return to the ActiveX Control Pad with your welcome.htm page open. Look down the left margin of the text editor. You see (and probably saw before) two blue cube icons. As you might guess, these icons represent the ActiveX objects you placed on your page. Click the cube icon next to your label control. Voila! The Object Editor and Properties window open, ready for editing.
Now you can do something about this label. By default, the label's background color was set to the same color as a standard Windows button-gray. So follow these steps to change the label's background color to white so that the label blends into the page:
| NOTE |
The ellipsis button displays whenever you select a property that can be set using a separate dialog box for sample color or font. |
Figure 1.13: The ActiveX color palette.
You can choose one of 48 basic colors or create any custom color you want for the background of your label. This color palette is available for most color properties. For this exercise, set the background to white:
The BackColor property shows the hexadecimal value for white, and the label in the Object Editor displays white. Because the background of the HTML page is also set to white, the user will see only the text that is on the label; the rest of the label will blend into the background.
The main property of a label is its caption-the words that the outside world sees displayed on the page. It's about time you gave your label a meaningful caption:
If your label has all the right default settings, it might not look quite as you anticipated because labels are by default set to wrap words. This means that characters that do not fit within the width of the label are forced onto a new line; as a result, the words appear down rather than across the label. Change the WordWrap property as follows:
| NOTE |
In effect, when you set the label's WordWrap property to True, the width of the label is fixed, and the height is variable. When you set WordWrap to False, the width of the label changes to accommodate the caption in one unbroken line, and the height is fixed. |
The label should now have its correct proportions, but it's still somewhat small. You should increase the size of the font as follows:
| NOTE |
Remember that not everyone has the same fonts that you have on your system. You can create a Web page with the very latest and greatest fonts that look stunning on your computer, but when a user with a standard set of fonts downloads the Web page with his browser, it might look very different indeed. It's therefore wise to stick to the main system fonts. |
The label caption and the label itself should change size. If the label didn't grow to accommodate the new larger text, make sure that the AutoSize property is True.
Close the Object Editor or Properties window to save the properties you just amended. Save the page and look at it in Internet Explorer. You see your first ActiveX welcome page as shown in Figure 1.15.
Figure 1.15: Your ActiveX Welcome Web page.
Impressed? You've just created your welcome page; it is rather straightforward, but it's ActiveX without the active. To give the page some interactivity, you need to provide some instructions to the controls, which is where VBScript comes in. In the next section, you'll find out how to use VBScript to quickly and easily interface ActiveX controls on your Web pages.
Active scripting refers to the technology of adding to your Web pages a script or program that interfaces with the active controls. Scripts download within the HTML page as ASCII text so that they are safe, meaning that a rogue programmer cannot write a hidden virus or other mischievous program within the script. Internet Explorer supports any scripting language that is written to the ActiveX scripting specification.
This book concentrates on VBScript, which has the full title Visual Basic Scripting Edition. Adding VBScript procedures via the ActiveX Control Pad is as easy as other point-and-click operations because of the Script Wizard. By default, the built-in Script Wizard generates VBScript code; however, it also has the capability to generate JavaScript (or JScript, as Microsoft now calls its implementation).
VBScript is a subset of Visual Basic for Applications (VBA). To ensure the safety of Web pages downloaded across the Internet, VBScript leaves out several major features of VBA that deal mainly with functions and procedures that interface with the hard drive and the underlying operating system. You can implement VBScript only to function within the context of the browser.
With VBScript in particular and active scripting in general, you can access a control's properties, methods (things a control can do), and events (things done to it), making the controls truly active. Above all, you can achieve very professional results in very little time with little or no programming knowledge. Of course, the deeper you get into using active controls and active scripting, the more you need to know about the workings and implementation of controls and scripting. In later chapters, you will learn how to produce complex programs with VBScript.
Add some life to the welcome page you created in the last section. First, open the welcome.htm page in the ActiveX Control Pad. You can open the Script Wizard in one of three ways:
The Script Wizard dialog box, shown in Figure 1.16, contains the ActiveX objects you placed in the HTML page earlier.
Figure 1.16: The ActiveX Script Wizard.
The Script Wizard has three main components. The left pane of the dialog box is the Events window. If you click one of the plus signs next to an object, a list of the events for the object expands under it. The diamonds to the left of the event names denote whether a script was attached to the event (black diamond) or not (white diamond). The right area of the Script Wizard contains the methods and properties for each of the objects. The properties are denoted by a white icon containing small blue lines. The methods icon is yellow and contains an exclamation mark (!). The bottom pane contains the scripted actions for the Web page; you see two radio buttons marked List View and Code View. List View displays a general brief description of the code that was generated; Code View displays the code itself.
Add a short procedure to the button so that when the user clicks the button, the caption of the label changes:
To view the actual code that is generated by the Script Wizard, click the option marked Code View. That's how easy it is to add active scripting to your Web pages. Before you rush off to try your new page, you must add code to one more event.
Collapse the events list by clicking the minus (-) symbol next to the CommandButton1 object. Do the same thing with the Properties list for the Label1 object in the right pane. Add code to the MouseMove event for the Label1 object that displays a message in the status bar at the bottom of the browser:
To generate all the required code and return to the Text Editor, simply click OK at the bottom of the Script Wizard screen. The Script Wizard places the code for the two events on your HTML page, which should now look like the page in Figure 1.18.
Save your welcome.htm file in the Control Pad Text Editor, and run the page with the Internet Explorer to make sure it all works (see Figure 1.19). When you pass the mouse arrow across the label, a message appears in the browser's status bar at the bottom of the screen. When you click the button, the label caption changes to read "Hello ActiveX." Congratulations.
Figure 1.19: Your almost-finished welcome page.
You now have an active welcome page. As a welcome page, it's lacking a major ingredient, though-links. Your welcome page should do just that: welcome visitors to your site. From the welcome page, your visitors then roam around your Web pages viewing, reading, and generally experiencing that which interests them. How are your visitors going to get from your welcome page to the rest of the site? In HTML, you use the good old anchor tag, <A HREF=...>...</>, and of course, you can use this tag in your ActiveX page as well. But what you really want is a state-of-the-art ActiveX hyperlink, right? Well, this is your lucky day!
ActiveX and VBScript enable you to use any of the controls you place on the screen as hyperlinks, buttons, images, and labels. You can script everything in such a way that clicking the control causes the browser to load a new page. In this section, you'll create a hyperlink menu that actively displays a short description of the linked page.
If welcome.htm isn't open in your ActiveX Control Pad, open it for editing as you saw earlier.
To place the controls on the page in a logical order, you need to construct an HTML table. The following code provides the framework you need to add to the page under the button control and just above the </CENTER> tag:
</OBJECT> <TABLE WIDTH=80%> <TD> <!--The first pseudo hyperlink goes here--> <TD ROWSPAN=2 VALIGN=TOP> <!--The hyperlink description goes here--> <TR> <TD> <!--The second pseudo hyperlink goes here--> <TR> </TABLE> </CENTER>
The preceding definition creates a table in the center of the page with two rows in the left column and a single row in the right column that spans the two left rows.
Place your cursor under the first <TD> tag (the top left cell), and select Insert ActiveX Control from the Edit menu. Select the Microsoft Forms 2.0 Label control and click OK.
Amend the following properties to these values:
ID Link1
BackColor White
ForeColor Blue
Font Size 12 Point, Bold
WordWrap False
Caption My Links Page
You'll remember from the earlier sections that to change a property
value, you simply select the property you need to change in the
Properties window. Then, in the case of the ID and Caption
properties, type the new value into the text box at the top of
the Properties window and click Apply. For the other values you
need to change, click the ellipsis button-which displays the relevant
dialog for the particular property, either the color or font-and
then simply select what you need with a mouse click and click
OK.
| TIP |
A neat shortcut to save time when setting properties is double-clicking the property value in the Properties window, which immediately invokes any associated dialog box or toggles the property value in a selection list (such as True or False). |
After you set these property values, close the Object Editor window to transcribe the object declaration to the HTML page.
Move your cursor so that it is under the <TD ROWSPAN=2 VALIGN=TOP> tag, which will contain the description of the link. This tag appears on the right side of the table, and as you can see, the cell takes up the whole height of the column. You're going to place a label control here. Select Edit|Insert ActiveX Control, choose Microsoft Forms 2.0 Label, and click OK.
Edit the properties for this label as follows:
ID LinkDescription
BackColor White
Font Size 12 Point
There is no caption because it is added actively. Unless stated, all the other properties are left with their default values. The only other thing you need to do with this label is increase its size as follows:
Close the Object Editor, and you're ready to add the last object. Place your cursor after the final <TD>, and insert another label as you did before. Change its properties as follows:
ID Link2
BackColor White
ForeColor Red
Font Size 12 Point, Bold
WordWrap False
Caption My Fun Page
Close the Object Editor, save the page, and give it a test run with the browser. Your page should look like the one in Figure 1.20.
Figure 1.20: Your welcome page complete with hyperlabels.
It takes several steps to create a hyperlink that lets the user immediately identify what the link promises, both in terms of its content and also its filename. You need procedures that provide visual clues as the mouse is passed over the control, and you must also instruct the browser to load the new page when the control is clicked.
Add the following procedures to this page for each hyperlink:
With welcome.htm loaded in the ActiveX Control Pad, select Script Wizard from the Tools menu.
To create the script that places text in the description label, change the font color of the label and display a status message when the user passes the mouse over the first link:
You now have a list of three actions for the MouseMove event for Link1, and your Script Wizard window should look like the one in Figure 1.21.
Figure 1.21: Your Link1 MouseMove event action list.
Remain in the Script Wizard because you need to add the event that changes the page when the link is clicked:
Figure 1.22: The code automatically generated for the Link1 object.
Figure 1.23: The finished welcome page with ActiveX hyperlinks.
To complete your code for this welcome page, you need to repeat the preceding steps for Link2. For Link2, choose a green color for the LinkDescription ForeColor, and when entering the caption for LinkDescription, use wording that describes the fun page.
When you complete the code for Link2, save the HTML page and open it in the browser. When you pass the mouse over the link, two things happen. First, you see a description of the page on the right of the link in the color of the link, and second, the filename appears in the status bar.
You covered a lot of ground in this first chapter, and if some of the terminology and methodology is unfamiliar and confusing, don't worry too much at this stage. The goal of this first chapter was to stimulate your imagination. You can see how straightforward it is to create professional active content for your Web pages. ActiveX goes beyond animation applets and things that look pretty; it is about creating fully active content where all the objects you place on the page can be programmed in some way to interact with each other and with the browser, too.
Any programming language is just a beginning, an empty shell. As with an artist's canvas and a palette of oils, it's up to you to exploit the power of the language and add the creativity, and that is what I will help you do through the rest of the book.
Now that you've had a chance to use some ActiveX controls, use the ActiveX Control Pad, and write some basic VBScripts, you can delve deeper into the rest of the book.
| Can I use other ActiveX controls that I've downloaded from pages on the Web? | |
| Possibly. Some ActiveX controls that your browser grabbed from a Web site as part of that site's content show up in the ActiveX Control dialog box. However, you cannot use many of these controls unless you have the license agreement for them. See Chapter 12. | |
| How do I know that a user will have the controls I used in the welcome page example on his or her computer? | |
| In order for visitors to use this page, they must have Microsoft Internet Explorer 3; therefore, they must be running Windows 95. As a result, they'll have the Forms 2.0 controls ready and waiting. When you use other controls, you might need to provide copies of the controls on your Web site for the browser to download them. See Chapter 12. |
