Additem top to bottom with grid control grid32

ActiveX controls provide all the functionality of a typical Windows application from within Internet Explorer's environment. But there is one function, which is so common among Windows applications, that isn't available to your VBScript applications-the menu bar. HTML layouts don't have a menu bar, and there's no ActiveX control you can place on a layout that would provide the functionality of a menu bar. There are, however, two ActiveX controls that provide a similar functionality. They are not as convenient or flexible as the elaborate Windows menu structures, but they provide the basic functionality of a menu structure. They are the Popup Menu control, which causes a popup menu to be displayed anywhere on the browser's window, and the Menu control, which is a like a custom command button that displays a drop-down menu every time it's clicked.

The Popup Menu

Let's start our discussion with the Popup Menu control, which is the simpler one. Figure 9.1 shows a popup menu that acts as a shortcut menu. (It's displayed when the user right-clicks a specific area of the layout.) The layout of Figure 9.1 contains three Image controls, each with a picture of a different city. Each time the user right-clicks one of the images, a popup menu is displayed with choices about the specific city. The shortcut menus are also context-sensitive, because each one can be invoked only when the pointer is on top of an Image control.

Figure 9.1 : The Popup Menu document uses the Popup Menu control to display shortcut menus.

The Popup Menu control provides four methods that let you manipulate its contents and display it:

ClearThis method clears the menu (removes any existing options) in preparation for a new menu structure. If you must change the items of a Popup Menu control at runtime, you must first clear its current contents. AddItem menuItemAppends another option (command) to the popup menu. menuItem is the string you want to appear in the menu. To insert an option at a specific location in the menu, supply the item's index in the menu. (The first option has index 1.) The statement IEPop1.AddItem "This is the third choice", 1 will insert the specified string at the first menu item. IEPop1 is the default name for the first Popup Menu control placed on a layout or form. RemoveItem indexRemoves the item at the specified index.The statement IEPop1.RemoveItem 1 removes the first item in the menu. The popup menu has two properties, one of them being the ItemCount property, which reports the number of items in the menu. To remove the last item, use the statement IEPop1.RemoveItem IEPop1.ItemCount PopUp (x, y)This method causes the Popup Menu control to pop up on the screen. x and y are the coordinates of the upper-left corner of the control, and you can use them to control the popup menu's location. Both arguments are optional, and if you omit them the menu will pop up at the pointer's location. The values of the x and y coordinates are relative to the window, with the origin being the window's upper-left corner.

To display a popup menu from within a command button's Click event, insert a statement like the following in the button's Click event handler:

Sub CommandButton1_Click() IEPop1.Popup End Sub

To find out whether the user has clicked a menu item, use the Click event of the control, which reports the index of the item that was clicked:

Sub IEPop1_Click(index) MsgBox "Item # " & index & " was selected" End Sub

The Popup Menu Project

After this introduction to the Popup Menu control, you can look at the implementation of the Popup Menu project, which you will find in this chapter folder on the CD. Create a layout with the three Image controls and then place a Popup Menu control somewhere on the layout. The popup menu is not in the toolbox, so you'll have to customize your toolbox by adding an extra control. Right-click an empty area of the current page (or create a new page, if you plan to add many new controls) and from the shortcut menu select Additional controls. In the Insert ActiveX dialog box that will appear, locate Popup Menu Object and click OK. The icon of the new control will be added to the toolbox's current page. Select the tool and draw a small rectangle on the layout.

The size of the Popup Menu control on the layout has nothing to do with its actual size when it pops up. The actual size of the control depends on the number of choices it contains-and it will be large enough to accommodate them all. One thing you should keep in mind is that the current implementation of the control isn't invisible. Instead, a white stripe with the size of the control at design time will remain visible on the layout. Once the Popup Menu control has been placed on the layout, reduce it to a single line to avoid this white stripe on the layout at runtime. The Popup Menu control doesn't have many properties you can set at design time through the Properties window anyway.

If you save the layout now and look at its code, you'll see that the following definition was inserted by the Control Pad:

The menu inserted with the previous OBJECT definition doesn't contain any item yet. Instead, you must add its items with the AddItem method from within your script. To assign some initial items to the popup menu, insert additional PARAM tags with the MenuItem property, as follows:

The MenuItem property is an array with as many elements as there are options in the menu. Notice that where the indexing of the menu item starts at 1, the MenuItem array's indexing starts at zero.

Before you display the popup menu you just placed on the layout, you must populate it with the AddItem method. Use the Script Wizard or your favorite text editor to edit the Click event handler for each Image control. We could have used three Popup Menu controls in our design, one for each image. But because we want to demonstrate how to manipulate popup menus dynamically with VBScript, we used a single one, which will be invoked when the user right-clicks an image. As soon as the code detects a right-click operation on one of the images, it must clear the menu and append the items for the specific image with the AddItem method. Here's the MouseDown event handler for Image1:

Sub Image1_MouseDown(Button, Shift, X, Y) If Button<>2 Then Exit Sub IEPop1.Clear IEPop1.AddItem "Manhattan" IEPop1.AddItem "Brooklyn Bridge" IEPop1.AddItem "Central Park" IEPop1.AddItem "Musicals" IEPop1.PopUp End Sub

(The Click event can't be used because it's not invoked with the right mouse button.) The code tests which button was pressed, and if it wasn't the right button it exits the subroutine. (You would probably execute a different command for the Click event.) Then the IEPop1 menu is cleared and populated with the menu items that apply to the image of New York City. The last statement causes the popup menu to be displayed on the window. The MouseDown event handlers for the other two Image controls are quite similar. They simply add different options to the popup menu.

After the user has made a selection, the popup menu's Click event is triggered, which reports the index of the selected item:

Sub IEPOP1_Click(item) MsgBox "You 've selected option " & item End Sub

The Popup Menu control doesn't provide a property that would return the actual string of the selected item, just its index. If you need access to the actual string from within your code, you must store the options in a global array and use the index returned by the Click event to access the values. Listing 9.1 is the complete listing of the PopMenu layout.


Listing 9.1. The PopMenu project's source code.
1: 38:
39: 41: 42: 43: 44: 45: 46: 47: 48: 49: 51: 52: 53: 54: 55: 56: 57: 58: 59: 61: 62: 63: 64: 65: 66: 67: 68: 69: 71: 72: 73: 74: 76: 77: 78: 79: 80: 81: 82: 83: 84: 85: 87: 88: 89: 90: 91: 92: 93: 94: 95: 96: 97: 98: 100: 101: 102: 103: 104: 105: 106: 107: 108: 109: 110: 111: 113: 114: 115: 116: 117: 118: 119: 120: 121: 122: 123: 124:

In a practical situation, the popup menu's Click event handler will do something more meaningful than simply displaying the index of the selected item. The project RTF Editor makes use of the popup menu to display the usual shortcut menu of a text editor, which implements the Cut, Copy, and Paste operations.

The Menu Control

The Menu control is quite similar to the Popup Menu control, only closer to the actual structure of a menu bar. Each Menu control remains visible on the screen at all times and looks like a command button, as shown in Figure 9.2. When the mouse pointer is moved over the Menu control, the control's caption takes a three-dimensional look. In addition, an arrow pointing down suggests that the menu leads to a submenu. It is possible to have menus without submenus, which behave similarly to command buttons, but they have the same look as the other Menu controls.

Figure 9.2 : The Menu applications demonstrate how to use the Menu controls to build menu bars, similar to ones deployed by most Windows applications.

To implement the project Menu, shown in Figure 9.2, we aren't going to use the Control Pad as usual, because Control Pad doesn't insert a meaningful definition in the HTML file. Start a new HTML document and manually insert the following definition:

This definition doesn't attach any items to the menu; you'll have to insert them manually with PARAM tags. The second Menu control (the File menu) in the Menu document was defined with the following OBJECT definition:

Notice the similarities between the Menu and Popup Menu controls. Moreover, the Menu control provides the same methods for manipulating the contents of the menu at runtime. The Clear, AddItem, RemoveItem, and PopUp methods work with the Menu control as well. It's doubtful that you'll ever need to call the PopUp method to expand a Menu control, but it's an option.

The Menu control has an ItemCount property that returns the number of items in the control, as well as a Caption property that sets the menu's title (the caption of the button). The index of the selected item is reported back to the program from within the control's Click event handler. This event is triggered when a menu option is selected. Because some menus might not lead to submenus, the Menu control recognizes the Select event, which is triggered only when the user clicks a Menu control without a submenu. (The arrow-down symbol will be missing from such a menu.) The Menu document contains three Menu controls and a multiline textbox (inserted with the TEXTAREA tag). The first Menu control is a single command that doesn't lead to a submenu. The other two have their own submenus that are the typical File and Edit submenus of a text-editing application. (VBScript can't save data on the local disk, so what's the point in a File menu? It is possible to store data on the local disk with VBScript; it just isn't a recommended, or common, practice yet. The options of the menus of this project were not implemented, of course. This example is meant to demonstrate how to manipulate the Menu control at runtime.)

The complete listing of the Menu document is shown in Listing 9.2.


Listing 9.2. The Menu document.

Menu demo

The Menu Structure of a Text Editor



The Click event handlers of the File and Edit menus are quite similar. They simply report the index of the item selected. The Help menu's Click event handler reports in a message box that the menu was clicked.

The Popup Window Control

The Popup Window control is a small browser in a window that lets you display any valid URL without leaving the current page. Figures 9.3 and 9.4 show how the Popup Window control works. The page of Figure 9.3 contains two command buttons. When they are clicked, they display the MSN and Netscape pages in a separate window, like the one shown in Figure 9.4. The large window is a Popup Window control that contains the home page of the MSN site. The user can't do anything with it-can't click on hyperlinks, for example, or execute any scripts that happen to be on the page. In fact, as soon as a key is pressed the popup window disappears. Its sole purpose is to provide the user with a preview of an Internet site or document, from within another page.

Figure 9.3 : The PopupWin document lets the viewer preview two popular sites without actually switching to another site.

Figure 9.4 : This is the MSN home page viewed in a popup window.

The OBJECT definition for the Popup Window control is

Sub IEPop1_Click(index)

MsgBox "Item # " & index & " was selected" End Sub

0

The control's dimensions in the OBJECT definition don't matter, because it will be resized to fit the page that's displayed on it. To display the window, use the control's Popup method, which accepts two arguments: the URL of the document to be displayed in the popup window and an optional argument that determines whether the destination document will be resized to fit the popup window or not. The complete syntax of the Popup method is

Sub IEPop1_Click(index)

MsgBox "Item # " & index & " was selected" End Sub

1

where PreVu1 is the default name of the first popup window, URL is the URL of the document to be displayed on the window, and the last argument can be True or False value, which determines how the document will fit into the window: whether the document will be resized to fit the window, or the window will be resized to display the document in actual size. The popup window in Figure 9.4 was invoked with the statement:

Sub IEPop1_Click(index)

MsgBox "Item # " & index & " was selected" End Sub

2

Figure 9.5 shows the same popup window, only this time it was invoked with the line

Figure 9.5 : You can specify that the destination document will be resized to fit in the available space.

Sub IEPop1_Click(index)

MsgBox "Item # " & index & " was selected" End Sub

3

There is also a Dismiss method, which does the opposite. It closes the popup window programmatically. Any user action will close the popup window so the Dismiss method is used rarely, most likely from within a Timer event to close a popup window that remained on the screen for a long period.

The PopupWin example was created with Control Pad, as an HTML document. Start Control Pad, create a new HTML file, and using the Insert ActiveX control command, put two command buttons and a popup window on the document. The text was entered directly on the HTML document (it's not on a label or other control). Once the HTML file is generated for you (the PopupWin document you will find on the CD was edited a little to arrange the buttons), enter the following event handlers in the document's SCRIPT section:

Sub IEPop1_Click(index)

MsgBox "Item # " & index & " was selected" End Sub

4

The two popup windows are invoked with a different URL and a different value for scaling. You can change the values True and False to see how they affect the appearance of each site. The code listing of the PopupWin document is in Listing 9.3.


Listing 9.3. The PopupWin document.
Sub IEPop1_Click(index)

MsgBox "Item # " & index & " was selected" End Sub

5

The popup window is similar to the keywords of a Windows 95 help file. Although most keywords act as hyperlinks to other pages (or topics, in the case of help files), some keywords cause a small frame with a short explanation to be displayed. This should give you an idea of the kind of functionality you can place on your pages with the Popup Window control. Instead of displaying an entire new page (which, admittedly, isn't very practical), you can display a short HTML document that further explains a term on the current page. In this capacity, the Popup Window control is very useful, if you consider how many times you clicked on a hyperlink only to be taken to a small page with a few lines of text.

The Marquee Control

The Marquee control is Microsoft's first attempt to provide the means for simple animation on Web pages. This control has a function similar to that of the MARQUEE tag, only instead of scrolling a piece of text, it can scroll an entire HTML page in a rectangular area on the document. Moreover, the Marquee control can scroll its contents in all directions, even diagonally. The document displayed and scrolled in a Marquee control is a regular HTML document that can contain images, any HTML tags (including the MARQUEE tag), and even its own animation. The only limitation is that it can't handle hyperlinks and can't contain embedded HTML layouts.

To place an ActiveX Marquee control on your page, use the Insert ActiveX control command on the HTML Editor's Edit menu or insert a definition like the following one in the document:

Sub IEPop1_Click(index)

MsgBox "Item # " & index & " was selected" End Sub

6

The Marquee control comes with Internet Explorer 3.0 and you needn't specify its CodeBase property in the control's definition.

Do not add the Marquee control to the Control Pad's toolbox, because any attempt to place a Marquee control on a layout will crash the program. Just type in the definition or open the Marquee project in this chapter's folder on the CD, copy the definition of the object, and paste it in your HTML document. The various properties of the Marquee control are explained shortly.

ScrollStyleX, ScrollStyleY

These properties set the scrolling style of the marquee, and their values can be

CircularThe document is wrapped around the control. When it reaches the end of the control, the document enters the control from the other end. BounceThe document bounces in the control. When it reaches the end of the control, it starts scrolling in the opposite direction.

ScrollPixelsX, ScrollPixelsY

The direction of the scrolling is controlled with the ScrollPixelsX and ScrollPixelsY properties. Assign the number of pixels by which the contents of the control should scroll in each direction. Positive values cause the contents of the control to scroll right and down. Negative values cause the contents of the controls to scroll in the opposite directions. The contents of the Marquee can scroll in both directions simultaneously, which is equivalent to a diagonal movement.

ScrollDelay

The ScrollDelay property is the delay between successive movements of the control's contents, and its value is expressed in milliseconds. This property, along with ScrollPixelsX and ScrollPixelsY, determines how fast the contents of the Marquee will scroll. Consider two Marquee controls with the following properties:

Marquee 1Marquee 2 ScrollPixelsX=0ScrollPixelsX=0 ScrollPixelsY=10ScrollPixelsY=20 ScrollDelay=100ScrollDelay=200

Both controls scroll their contents at the same speed. The first control scrolls its contents by 10 pixels vertically every 100 milliseconds (10 times per second), while the second one scrolls them by 20 pixels at a time, but twice as frequently. Both controls scroll the document by 100 pixels per second, but the movement is smoother in the first control.

LoopsX, LoopsY

The LoopsX and LoopsY parameters specify how many times the contents will scroll in each direction. The value -1 causes the document to loop forever.

szURL

This is the name of the HTML document to be scrolled. The value of this property can be a local file or a URL of any page on the Web.

WhiteSpace

This property defines how much white (blank) space will appear between successive scrolls. If you want some extra space to appear before the next appearance of the document displayed in the Marquee control, set this property to the number of pixels of white space. The WhiteSpace value is expressed in pixels.

Zoom

The document displayed in the Marquee control can be larger or smaller than normal size. The Zoom property reduces or enlarges the document by a percentage value. Its default value is 100 and corresponds to actual size. The value 200 will cause the document to appear twice as large as normal.

WidthOfPage

The WidthOfPage property is identical to the WhiteSpace property but applies to the horizontal direction. It determines the width of an empty area that will be drawn between horizontal scrolls.

The Marquee ActiveX control provides two methods for controlling the scrolling, the Pause and Resume methods, which pause and resume scrolling respectively.

The Marquee control recognizes a number of events, too, which give you control over the control's operation. Some of the Marquee events aren't working with the current implementation of the control, but they are documented and you should expect to find a revised version of the control on Microsoft's Web site. Here are the descriptions of the Marquee control events:

OnStartOfImage, OnEndOfImage

The OnStartOfImage event is triggered immediately before the document starts scrolling and the OnEndOfImage event is triggered immediately after the URL has completely scrolled. Both event handlers accept an argument, the HorizontalOrVertical argument, which is H for horizontal scrolling and V for vertical scrolling.

OnBounce

The OnBounce event is triggered when the document bounces off one end of the control, if the scroll style is set to Bounce (properties ScrollStyleX, ScrollStyleY). This event handler accepts an argument (SideBouncedOff) that tells you on which of four possible sides the document bounced (L for left, R for right, T for top, and B for bottom).

OnLMouseClick

You can capture mouse clicks on the control, too, with the OnLMouseClick event. This event is the same as the Click event of other ActiveX controls, but it's named differently.

The Marquee Example

Figure 9.6 shows the Marquee page (which you'll find in this chapter's folder on the CD). The Marquee page contains two Marquee controls, which both display the Sams Web site. One of them scrolls its contents vertically and the other one horizontally. The two command buttons next to the Marquees demonstrate the Zoom property and the Pause/Resume methods. When the user clicks the ZOOM button, the contents of the top Marquee control are enlarged to 120% and the button's caption becomes NORMAL. If clicked again, it restores the contents of the first control to normal size.

Figure 9.6 : The Marquee example demonstrates the Zoom property and the Pause/Resume events.

The second button temporarily stops the scrolling of the document in the Marquee control, and its caption becomes RESUME. If clicked again, the scrolling resumes and the button's caption becomes PAUSE again. The code of the Marquee document is shown in Listing 9.4.


Listing 9.4. The Marquee document.
Sub IEPop1_Click(index)

MsgBox "Item # " & index & " was selected" End Sub

7

The Chart Control

The Chart control presents numeric data as graphs, and supports a variety of different types and styles of graphs, such as pie charts and bar graphs. You supply the data and the parameters of the graph, and the Chart control generates the graph on-the-fly. Figure 9.7 is a collection of various chart types generated with the Chart control.

Figure 9.7 : Various types of graphs produced by the Chart control.

There are seven chart types you can produce with the Chart control: Pie, Point, Line, Area, Bar, Column, and Stocks. In addition, there are more than one flavor of each of these styles. Most of these types have the following variations: Simple, Stacked, and Full. Use the Chart document, which we will present shortly, to experiment with the various graph types and styles.

The Graph control is in essence a mechanism for plotting data. Because of the numerous parameters a data plot can have, the Chart control has a long list of properties. Yet, there are no methods (short of the About method, which displays information about the control) and no events. Let's start with the simpler properties that control the appearance of the chart.

Rows, Columns

These two values determine the total number of data points to be plotted. Obviously, you must supply Rows ´ Columns data points to the control. (In the section "Manipulating the Chart Control's Data," you'll see how to specify the data to be plotted.)

HGridStyle, VGridStyle

These two properties determine the type of horizontal and vertical grid that will be placed on the graph, and they can have one of the following values:

0No grid 1Solid grid 2Bold grid 3Dotted grid 4Bold dotted grid

ChartType

The ChartType property determines the graph's type and may have one of the following values:

0Simple pie chart 1Special pie chart 2Simple point chart 3Stacked point chart 4Full point chart 5Simple line chart 6Stacked line chart 7Full line chart 8Simple area chart 9Stacked area chart 10Full area chart 11Simple column chart 12Stacked column chart 13Full column chart 14Simple bar chart 15Stacked bar chart 16Full bar chart 17HLC (high low close) simple stock chart 18HCL WSJ stock chart 19OHLC (open high low close) simple stock chart 20OHCL WSJ stock chart

ColorScheme

There are five predefined color schemes (0, 1, 2, 3, and 4), and you can set one of them for your chart by setting the ColorScheme property.

BackStyle

This property determines whether the graph's background will be transparent (BackStyle=0) or not (BackStyle=1).

Scale

This is a scaling factor for the graph data and it can go up to 100%, but no more.

RowName

This property specifies a row name. (The row names are the legends that appears along the Y axis.)

ColumnName

This property specifies a column name. (The column names are the legends that appear along the X axis.)

DisplayLegend

Use this property to view (Legend=-1) or hide (Legend=0) the chart's legend.

GridPlacement

This property controls how the grid is drawn. The grid lines can be drawn either over the chart (foreground) or below the chart (background), and it can have one of the two values

0Grid lines drawn behind the graph 1Grid lines drawn on top of the graph

Manipulating the Chart Control's Data

To manipulate the chart's data, the Chart control provides the RowIndex and ColumnIndex properties. Imagine that the data to be plotted is stored in a tabular arrangement, with Rows rows and Columns columns. Each row of data in the table corresponds to one line in a line graph, one color in an area graph, or one set of bars with a common color in a bar graph. Successive data for each row is stored in successive columns. To address a specific data point, you must first set the RowIndex and ColumnIndex properties of the control. To address the second data point of the fourth data set, use the following statements:

Sub IEPop1_Click(index)

MsgBox "Item # " & index & " was selected" End Sub

8

To set the value of this point, use the DataItem property:

Sub IEPop1_Click(index)

MsgBox "Item # " & index & " was selected" End Sub

9

In other words, you must first select the data point you want to access and then set its value. To assign values to an entire row (which is a data set), use a loop like the following one:

CLASSID="CLSID:7823A620-9DD9-11CF-A662-00AA00C066D2" STYLE="TOP:239pt;LEFT:355pt;WIDTH:17pt;HEIGHT:0pt;TABINDEX:0;ZINDEX:3;">

0

You can also set the legends of the chart in a similar way. The ColumnName and RowName properties are the legends of each dataset and each point along the dataset, respectively. The row names appear along the X axis, and the column names appear in a small box on the graph, as shown in Figure 9.8.

Figure 9.8 : The legends on the chart are specified with the RowName and ColumnName properties.

Supplying Data Over the Internet

The URL property of the Chart control lets you specify the data to be plotted with the remaining parameters of the graph in a file, which you can specify by means of its URL. In other words, if you want to post data that changes daily on your Web, you don't have to reprogram your pages. You can just create a file with the new data and have a Chart control on one of your pages request them from the server. This is done with the URL property, which is assigned the URL of the file with the control's data on the server.

The format of this data file is as follows:

The first line describes the ChartType property and contains a number between 0 and 20, as described earlier.
The second line contains an integer, which is the number of rows.
The third line contains another integer, which is the number of columns, followed by the optional column names (separated by tab characters).
The fourth line, and any additional lines beyond the fourth, contains the data for each row. The first element in each of these lines can be the name of the row (optional). Successive data points are separated by tab characters.

The following data file specifies a chart type 9 (stacked area) with 3 rows and 5 columns. The column names are 1996, 1997, 1998, 1999, and 2000. The first row's name (first dataset) is Domestic, the second row's name is Overseas, and the third row's name is Total.

CLASSID="CLSID:7823A620-9DD9-11CF-A662-00AA00C066D2" STYLE="TOP:239pt;LEFT:355pt;WIDTH:17pt;HEIGHT:0pt;TABINDEX:0;ZINDEX:3;">

1

If you save these lines to a file on the server and assign its name to the Chart control's URL property, the graph described by these values will be plotted automatically. You can also combine this technique with the control's Reload method, which forces the Chart control to read the data again and replot them; you can provide your viewers with graphs based on real-time data. The titles for the graph's columns and rows are optional, and you can omit them. They are used for displaying a legend; a graph can have no legends, legends for one axis only, or legends for both axes.

The Chart Example

Figure 9.9 shows the Chart project, which demonstrates several of the properties of the Chart control. The Chart1 example is simple, but it lets you experiment with the various properties of the control we discussed so far.

Figure 9.9 : The Chart document lets you adjust many of the parameters of a graph.

The layout of Figure 9.9 contains a Chart control and four drop-down List controls. Each list contains all the settings for a specific property. The first list controls the type of the graph, the second and third lists control the style of the grid, and the last list controls whether the grid will be drawn in front of or behind the graph. Drop down each list, select a setting, and see how it affects the graph.

Start the ActiveX Control Pad application and create a new layout. To place the Chart control on it, you must add its icon to the toolbox. The Chart control is called Chart Object in the Insert ActiveX control dialog box. Once the Chart control has been placed on the layout, the following definition is inserted in the ALX file. (You can copy this definition and paste it in your own projects.)

CLASSID="CLSID:7823A620-9DD9-11CF-A662-00AA00C066D2" STYLE="TOP:239pt;LEFT:355pt;WIDTH:17pt;HEIGHT:0pt;TABINDEX:0;ZINDEX:3;">

2

Notice that except for a few standard properties, this definition includes sample data points. The Data array is where all data points are stored. You can edit this definition to change the data or add more data points (and datasets, if you have to). The first index corresponds to the Rows property and the second index to the Columns property.

When the layout is loaded, it populates the drop-down lists and assigns legends to the chart's rows and columns via the RowName and ColumnName property. The actual code of the application, which changes the graph's properties, is quite simple. It picks the property number from the list and assigns it to the appropriate property. The Change event of the first ComboBox control signals that the user has changed the graph's type. Here is the event handler for the event:

CLASSID="CLSID:7823A620-9DD9-11CF-A662-00AA00C066D2" STYLE="TOP:239pt;LEFT:355pt;WIDTH:17pt;HEIGHT:0pt;TABINDEX:0;ZINDEX:3;">

3

Because the Text property of the ComboBox control begins with the setting for the ChartType property, the program isolates this value, converts it to an integer value, and assigns it to the ChartType property of the Chart control.

The complete listing of the Chart project is shown in Listing 9.5.


Listing 9.5. The Chart project.
CLASSID="CLSID:7823A620-9DD9-11CF-A662-00AA00C066D2" STYLE="TOP:239pt;LEFT:355pt;WIDTH:17pt;HEIGHT:0pt;TABINDEX:0;ZINDEX:3;">

4

Figure 9.10 shows the ChartURL document, which is a variation on the Chart document. This time we've added a command button that causes the Chart control to read its data and settings from a local file. The file with the data and settings is called CHARTDATA.TXT, and it contains the sample data of the section titled "Supplying Data Over the Internet." When the user clicks this command button, the Chart control reads the data from the CHARTDATA file and updates the graph accordingly. The code behind the Load from File button simply assigns a value to the Chart control's URL property:

Figure 9.10 : The ChartURL document can read its data and settings from a local file or a URL.

CLASSID="CLSID:7823A620-9DD9-11CF-A662-00AA00C066D2" STYLE="TOP:239pt;LEFT:355pt;WIDTH:17pt;HEIGHT:0pt;TABINDEX:0;ZINDEX:3;">

5

On the CD you will find the CHARTDATA.TXT file, and you can experiment with it. If you can automate the generation of similar files, you can post graphs with live data on the Web. For example, you can write an application that retrieves numeric data from a database and prepares a file with the information needed by the Chart control to graph the data, including the headings. And as you probably know, it takes much less space to store a few dozen numbers than it takes to store the image of the graph that corresponds to these data.

Review

The Chart control is the last of the new ActiveX controls we are going to cover in this book. If you are using some visual programming tools in the Windows environment, you have realized that the ActiveX controls are nothing more than the regular OLE controls that make up the Windows user interface. You are probably wondering whether you should attempt to use the OLE controls already installed on your system. Most of the OLE controls can be used, and we'll look at a few of them in the last part of the book. However, they are not ActiveX controls and the viewers will get a warning every time they open a page that contains old OLE controls (implemented in OCX files). You can use the existing OLE controls on your pages in an intranet environment, and you are going to find interesting examples in the last section of this book.

The ActiveX controls released by Microsoft after the release of Internet Explorer 3.0 and the ActiveX Control Pad are posted at Microsoft's ActiveX Component Gallery at www. microsoft.com/activex/controls. The ActiveX Gallery is the site to visit when you need an ActiveX control for your projects. You will find there a list of all available ActiveX controls from Microsoft and other companies, descriptions of the controls, and the actual controls. Microsoft's ActiveX controls are free, but most of the other ActiveX controls aren't-and you should read the documentation and distribution notes before you download and use them.