Example #3A: Using the HTML Layout Control

The HTML file you will create for this application is intended only to hold the HTML Layout control. The HTML Layout will span the entire web page; all of the content and all of the ActiveX controls will be placed within it. This development approach is very similar to that used for creating a form in Visual Basic.

Step 1

Create a folder named example3 in a convenient location on your computer.

Step 2

Start a new HTML file in ActiveX Control Pad. The default title for the web page is New Page. Change the title from New Page to Simple Animation. Then add the BGCOLOR attribute to the <BODY> tag and set it to WHITE. Your HTML code in the HTML Source Editor should look like this:

<HTML>
<HEAD>
<TITLE>Simple Animation</TITLE>
</HEAD>
<BODY BGCOLOR="WHITE">

</BODY>
</HTML>

Step 3

Now you need to add a form to the web page to hold the HTML Layout control. Add the form by placing the following code in the body section of the page:

<FORM NAME="frmAnimate">

</FORM>

Step 4

Now you will add the HTML Layout control to the HTML document. Make sure that your cursor is positioned between the <FORM></FORM> tags in the HTML Source Editor. From the Edit menu, select Insert HTML Layout. You will be presented with a dialog box that allows you to specify the name for a new HTML layout. In the File Name input box, type animate.alx and select the example3 folder you created earlier. Figure 9-15 shows the new HTML Layout dialog box.

Figure 9-15.

The new HTML Layout dialog box.

Click the Open button. A message box will be displayed, indicating that the file does not exist and asking whether you want to create it. Click the Yes button. The HTML Layout control will be inserted between the <FORM></FORM> tags, and an HTML Layout icon will be displayed in the left margin. By default, the absolute path is included with the animate.alx reference in the VALUE attribute of the ALXPATH property. (For example, the VALUE attribute may be file:C:\example3\animate.alx.) Remove the path information so that the HTML Layout control will look for animate.alx in the current folder. Figure 9-16 shows the resulting code in the HTML Source Editor.

Step 5

Your HTML page is now complete. From ActiveX Control Pad, select Save from the File menu. Save the file as animate.htm in the example3 folder, where you also saved animate.alx.

Figure 9-16.

The HTML Source Editor after the HTML Layout control has been inserted and the animate.alx path has been removed.