Schongar P.VBScript unleashed.1997

</HTML>

Figure 7.4 : The message changes in the Timer example.

Listing 7.4 uses a timer and a Label control to display a series of messages. This is a nice effect, but with a little more code, you can make it more useful.

Suppose that you create a Web game and you want to give users a choice of places to which they can jump. You can use the index value of the message array to set up a URL for each message, as shown below:

Sub Label1_Click

timer1.enable = 0

If x=0 then MyUrl = "http://www.thespot.com"

If x=1 then MyUrl = "http://www.yahoo.com"

If x=2 then MyUrl = "http://www.cnet.com"

Self.Location.href=MyUrl

End Sub

In this subroutine, you use the Click event for the Label control to interrupt the timer. Because x was declared as a global variable, its value is available to all the procedures in the script. In this case, the value of x is used to determine the value of MyUrl, which is then loaded in the browser.

Using Third-Party Controls

Using controls that you purchase in your pages isn't much different than using controls that are freely available. You must make the control available to your user as an ActiveX control that loads itself, or you need to make sure that the control is registered on your user's machine. You also must adhere to the licensing requirements for the control. Check with the vendor for the details about using their controls in your Web pages.

Using Signed Controls

Because ActiveX controls are potentially such powerful components, you must consider some security issues. Remember that an ActiveX control can do anything that can be done on a client machine. You want users to take advantage of the ActiveX controls that you've linked into your document, so the question is, "How can my reader be sure that the control is safe?"

If you make sure that the controls you use are signed, you'll stand a much better chance of having casual browsers see what you've added to your page. Code signing lets the user know who produced the code and whether that code has been changed since the control was signed. Users can set the level of security for the controls that are loaded into their browsers. They can accept all controls from a particular company, accept controls after a confirmation dialog, and accept

or reject all controls to be loaded on to their machines. If the controls you're using are not signed, Internet Explorer notifies those users who are concerned about network security or simply rejects the control outright.

Creating ActiveX Controls

One of the great things about using OCXs in your Internet documents is that OLE controls themselves are written in a language that's familiar to many programmers: C++.

If you're a C++ programmer, you're probably already familiar with creating OLE custom controls. If you're not a C++ programmer, but you think you might like to become one in order to create OLE controls, this quick look at OCX development might interest you. Here, you'll look at creating the default custom control with Microsoft Visual C++ 4.0.

Programming in C++ is not very much like programming in Visual Basic or VBScript. C++ is a programming language developed by Bjarne Stroustrup in the early 1980s. It's a version of the C language that contains extensive objectoriented features.

Because C++ is a language based on reusable and extensible code, Microsoft has encapsulated the Win32 API, along with many other features, into the Microsoft Foundation Classes (MFC). The MFC is the C++ wrapper around the Win32 API and the basis for development in the VC++ IDE (Integrated Development Environment) using a feature called the OLE Control Wizard. (See Figure 7.5.)

Figure 7.5 : The OLE Control Wizard automates the process of creating ActiveX controls.

Using the Control Wizard to Create the Skeleton Files

The Control Wizard is the part of Developer Studio that generates the files needed to create an MFC-based ActiveX control. To create the basic files for an OCX control, follow these steps:

1.Choose File | New. In the New dialog, double-click Project Workspace.

2.In the Name text box, type Circle. (The Circle is the default ActiveX control.)

3.Select OLE Control Wizard as the project type and then click Create. The OLE Control Wizard appears.

4.Click Finish to exit the New dialog.

The Control Wizard now spends some time generating the skeleton files you'll need for your new control.

Compiling a Control

To build a control, choose Build from the Build menu. Again, this isn't Visual Basic or VBScript, so you'll have to wait a few seconds while your new control is compiled and linked. When it's all over, you'll have a nice CIRCLE.OCX file that you can register with your system.

Registering Your Control

Registering your control from Developer Studio is easy. Simply choose Tools | Register Control and it's done. Now you can test the new control.

Testing Your Control

You can test your new control with the OLE control test container, which you start from the Tools menu in Developer Studio. After the container opens, choose Edit | Insert OLE Control to add the CIRCLE.OCX file to the container. You

can manipulate the file within the test area.

If you're thinking about getting into custom control development with C++ and MFC, you should keep some things in mind:

●You'll hear C++ described as an "elegant language" by experienced programmers (who like it <G>). Don't let that fool you into thinking that C++ is easy to use.

●C++ is a powerful, complex language that you'll spend months-even years-learning.

●If you do decide to take the C++ plunge, you will find that your efforts are rewarded-eventually.

This simple control is the default created by the Control Wizard. To get a control to do even a little more takes a bit of work.

Creating Non-MFC ActiveX Controls

Though the size of the ActiveX controls created with the Control Wizard is modest, for users to access this control in their own browsers, they need to have installed the MFC runtime library, which is quite large. In addition, because ActiveX controls are designed to eventually run on Windows, Macintosh, and UNIX computers, Microsoft wrote a nonMFC specification so that ActiveX controls could be made smaller and more portable. Check the ActiveX Software Development Kit for details.

Signing Your Objects for Internet Use

To have the controls that you create certified for Internet use, you'll have to visit an ActiveX control Certificate Authority and carefully read through the procedures for having your controls certified. Once you've received credentials from such an authority, you'll need to prepare your code for signing. Details and tools for doing this are included with the ActiveX Development Kit. As of this writing, details regarding obtaining credentials could be found at http://

www.microsoft.com/intdev/sdk/docs/com/comintro-f.htm.

Review

In this chapter, you learned about ActiveX controls and how you can use them to enhance your Web pages. You saw that ActiveX controls are extremely powerful, and that verification should be considered when using them. You then examined the controls that are freely available to Web designers and VBScript programmers. Finally, you took a quick look at part of the Microsoft Developer Studio called the Control Wizard, which helps C++ programmers create their own custom controls.

Chapter 8

The ActiveX Control Pad

by Brian Johnson

CONTENTS

●Taking a Tour of the ActiveX Control Pad

Text Editor

Object Editor

Page Editor

Script Wizard

●Using ActiveX Controls

●Creating VBScript with the Script Wizard

●Using HTML Layouts

●Looking at the Available Controls

●Adding Controls to the Toolbox

●Creating Interactive Content

●Using VBScript with ActiveX Layouts

●Review

At a certain point, the potential complexity of the content you can create using ActiveX controls becomes so great that you need specialized tools to easily do what you want. To assist you in the creation of complex ActiveX content, Microsoft has released a tool that enables you to insert and script ActiveX controls in HTML. The name of that tool is the ActiveX Control Pad.

In this chapter, you'll look at the ActiveX Control Pad and how you can use it to create ActiveX-enabled HTML pages. You'll also learn how to use the ActiveX Control Pad to insert and script ActiveX controls. And, finally, you'll learn about HTML layout files and how you can use them to create precise control layouts in Web documents.

Taking a Tour of the ActiveX Control Pad

The ActiveX Control Pad provides an editing environment that makes it easy for you to create or edit HTML files that contain ActiveX objects or ActiveX layouts. The ActiveX Control Pad is a Windows 95 application that runs in Windows 95 or Windows NT. Figure 8.1 shows the ActiveX Control Pad application. This section gives you a quick tour of the application and then discusses how you can use it to create ActiveX-enabled HTML documents and layouts.

Figure 8.1 : The ActiveX Control Pad application.

The ActiveX Control Pad consists of four major components:

● Text editor

●Object editor

●Page editor

●Script wizard

This section discusses these components in general and then describes in detail how to use the ActiveX Control Pad.

Text Editor

The ActiveX Control Pad text editor is basically the same tool you get with Windows Notepad. A significant difference is that the ActiveX Control Pad editor doesn't suffer from the 64KB file size limit that Notepad does. Unfortunately, other than creating a skeleton HTML file by default when opening a new file, there aren't any added HTML helpers such as the ones found in commercial HTML tools. You might find it easiest to create your base HTML files in a program like Microsoft FrontPage and then insert your ActiveX controls into the HTML using the Control Pad.

Object Editor

The object editor makes it easy for you to insert ActiveX controls into your HTML pages. The most difficult thing about using ActiveX controls usually is getting the CLSID numbers right in your HTML code. In addition, you usually need to look up and include the parameters of each control you put into your documents. The object editor automatically places the correct CLSID number into HTML and makes setting parameter values visual and simple.

Page Editor

The World Wide Web Consortium specification for two-dimensional layouts describes methods you can use to place 2-D material into HTML pages. The page editor of the ActiveX Control Pad enables you to create HTML pages that behave and look very much like stand-alone applications created with a programming tool such as Microsoft Visual Basic. In addition to layout capabilities, the page editor contains its own set of ActiveX controls that you can use in special HTML files called HTML Layouts. HTML Layout files have an ALX extension and are embedded into standard HTML files.

Script Wizard

The Script Wizard automates the creation of VBScript and JavaScript code in HTML or ALX files. The Script Wizard gives you easy, graphical access to the methods, properties, and events of ActiveX controls and ActiveX layout components. Figure 8.2 shows the Script Wizard in Code view. Users of Visual Basic will notice that the editing window is very similar to the editor in VB. You'll see later how an ActiveX control and VBScript code were added to the HTML page.

Figure 8.2 : VBScript in the Script Wizard.

Using ActiveX Controls

Adding ActiveX controls to your HTML documents is fairly straightforward. You first need to open the HTML document in the ActiveX Control Pad and place the cursor in your HTML code at the point where you want the control to appear. You then choose Edit | Insert ActiveX Control and select the control that you want from the dialog that appears. Figure 8.3 shows the Insert ActiveX Control dialog. You can select any ActiveX control that's registered on your machine.

Figure 8.3 : Inserting an ActiveX control in HTML with the ActiveX Control Pad.

After you select a control, it appears in its own window along with a Properties dialog for the control. Figure 8.4 shows a Label control in a window. You can size the control inside the window and change the other properties in the Properties

dialog. Closing the window containing the control places the control code in the HTML file.

Figure 8.4 : Editing control properties.

Figure 8.5 : Clicking the icon opens the ActiveX control.

After you have your control in place, you can open it again in the object editor by clicking the Object button next to the HTML code in the editor. (See Figure 8.4.)

Using these steps to insert ActiveX controls in your HTML documents is much faster and is more efficient than trying to manually insert a control, complete with CLSID number and parameters. The next section takes a look at how the ActiveX Control Pad can help you generate your VBScript code.

Creating VBScript with the Script Wizard

After you have your controls in place, you can use the Script Wizard to create the VBScript code that will control the ActiveX objects. The Script Wizard is a tool that enables you to graphically manipulate and use the properties, methods, and events for ActiveX objects in HTML. To create a VBScript code block using the Script wizard, you first place your objects in HTML by choosing Edit | Insert ActiveX Control. You then invoke the Script Wizard by clicking the Script Wizard icon (the one that looks like a scroll at the end of the toolbar) or by choosing Tools | Script Wizard.

The Script Wizard window contains three panes. The first, Select an Event, lists the events available to the programmer based on the controls loaded in the document. Each element is listed in this window with its events shown in outline form.

The second pane, Insert Actions, offers properties and methods that you can access and manipulate. Like the Select an Event pane, Insert Actions is in outline form, and you can expand and collapse the objects listed to access their events.

The final pane in the Script Wizard is where the generated code is displayed and edited. Two radio buttons appear at the bottom of the window that enable you to select List View or Code View. You can see what your program is going to do by running through it in List View, but if you want to create more than very simple scripts, you'll want to use Code View.

Let's create a VBScript page that contains a Label control that changes after it's clicked.

To create a scripted event for the Label control using the Script Wizard, follow these steps:

1.Create a new page and insert a Microsoft IE30 Label Control.

2.In the Properties window, set the Angle property of the label to 90 and change the caption property to "My Cool Label." Set the font size to 35 and resize the control in the preview window so that it fits.

3.Run the Script Wizard. Open the IeLabel1 node in the Select an Event pane and then select click.

4.In the Insert Actions pane, open the IeLabel1 node and double-click caption. An input box appears.

5.In the input box, type I've been clicked!

6.Open the HTML file in Internet Explorer and click the label. You'll see the caption change.

This isn't a very heavy duty example, but it does show you some of the power of the ActiveX Control Pad. Without this tool, you would have to write all the code yourself. Take a look at Listing 8.1 to see how much actual code is generated.

Listing 8.1. Code generated from the Label control example.

<HTML>

<HEAD>

<TITLE>New Page</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="VBScript">

<!--

Sub IeLabel1_Click()

IeLabel1.Caption = "I've been clicked!"

end sub

-->

</SCRIPT>

<OBJECT ID="IeLabel1" WIDTH=100 HEIGHT=368

CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2">

<PARAM NAME="_ExtentX" VALUE="2646">

<PARAM NAME="_ExtentY" VALUE="9737">

<PARAM NAME="Caption" VALUE="My Cool Label">

<PARAM NAME="Angle" VALUE="90">

<PARAM NAME="Alignment" VALUE="4">

<PARAM NAME="Mode" VALUE="1">

<PARAM NAME="FillStyle" VALUE="0">

<PARAM NAME="FillStyle" VALUE="0">

<PARAM NAME="ForeColor" VALUE="#000000">

<PARAM NAME="BackColor" VALUE="#C0C0C0">

<PARAM NAME="FontName" VALUE="Arial">

<PARAM NAME="FontSize" VALUE="35">

<PARAM NAME="FontItalic" VALUE="0">

<PARAM NAME="FontBold" VALUE="0">

<PARAM NAME="FontUnderline" VALUE="0">

<PARAM NAME="FontStrikeout" VALUE="0">

<PARAM NAME="TopPoints" VALUE="0">

<PARAM NAME="BotPoints" VALUE="0">

</OBJECT>

</BODY>

</HTML>

Using HTML Layouts

HTML layouts are an exciting new addition to the World Wide Web. These 2-D layouts give programmers precise control over the placement of objects, such as ActiveX controls, on the page. The ActiveX layout then is inserted into a standard HTML document and is displayed much like a floating frame. The layout itself is contained in a text file with an ALX extension. Using the ActiveX Control Pad to create layout files is very much like creating programs in Visual Basic. This section takes a look at how it's done.

You create a layout by choosing File | New HTML Layout. This opens an empty layout area and a toolbox. To add items to the layout, click the control in the toolbox and drag the item onto the layout with the mouse. You also can drag and drop controls from the toolbox to the layout. Figure 8.6 shows an ActiveX layout with a couple of controls added. You set the properties for the controls that you place on the page by double-clicking the control or by clicking the control and choosing Properties. After you set the controls and properties, you can run the Script Wizard to generate code for the layout.

Figure 8.6 : Creating a layout with the Control Pad.

The amount of control that layouts give you is really quite extraordinary. The rest of this chapter looks at HTML layouts and how you can tap some of the potential for your own Web documents.

Looking at the Available Controls

The HTML Layout control has its own set of ActiveX objects that you can use in your layouts. Because these controls are different than any of the controls discussed so far, they are covered here. In cases in which an HTML Layout control has an intrinsic control counterpart, those characteristics unique to the HTML Layout control are discussed.

Tables 8.1 through 8.3 list the properties, methods, and events common to most of the HTML Layout controls. The size of the properties list alone gives you an idea of the richness of these controls.

Table 8.1. Common HTML layout properties.

Property	Description
Accelerator	Accelerator character for object
Alignment	Position of control relative to caption

AutoSize	Object sized to caption automatically
BackColor	Background color to object
Caption	Caption visible to user
ControlTipText	Hint text for object
Enabled	Control is enabled
Font Object	Font object for caption property
ForeColor	Color of caption text
GroupName	Group that contains control
Height	Height of object in points (1/72 inch)
LayoutEffect	Determines movement of object
Left	Left position of object in layout
Locked	Object locked into position
MouseIcon	Icon when mouse is over object
MousePointer	Sets pointer for object
Name	Name of object
OldHeight	Previous height of object in points
OldLeft	Previous left position in points
OldTop	Previous top position in points
OldWidth	Previous width of object in points
Parent	Name of parent object of control
Picture	Bitmap displayed on object
PicturePosition	Location of picture
SpecialEffect	Visual style of object
TabIndex	Index number in tabbing order
TabStop	Object is in the tabbing order (Boolean)
Top	Top position of object in layout
TripleState	Allows a True/False/Null selection
Width	Width of object in points
Value	Value for object

A few properties mentioned here deserve some explanation. First of all, the Font Object property refers to an object that describes the font used to display the Caption property or the Value property for the various controls.

The Font object has the properties Bold, Italic, StrikeThrough, Underline, Weight, and Name. You easily can specify the value of a font used for a control by setting these attributes individually and then accessing the Font object property by name, as shown in this code:

Dim BigFont

BigFont.Bold = True

BigFont.Size = 36