A Complete ActiveX Web Control Tutorial

• Download demo project - 231 Kb

Introduction

ActiveX is a Microsoft technology developed in the mid 90’s, that allows for the creation of applet-like applications that can be downloaded and run within Microsoft's Web browser. This article is intended for Visual C++ developers who are trying to learn how to develop their first ActiveX control for a web application but finding it difficult. While trying to learn this technology myself, I found much of the information available on ActiveX was either no longer available, out of date, or missing critical information, making it extremely difficult for me to create an ActiveX control necessary for my development project. This article is intended to help you get up to speed quickly with developing an ActiveX control. It will show you the basic concepts you need to know about ActiveX, such as methods, properties, and events, and how to communicate between an ActiveX control and a web page. You will learn how to implement the control for use with default security settings in Internet Explorer on Windows XP, without getting unsigned or unsafe control warning messages.

For this tutorial, we will create an ActiveX control that displays a progress bar animated GIF when the control is loaded as a way to indicate to users that the control is loading and processing information. The control will contain functionality to demonstrate how to pass information between the control and the web page. You will be guided step by step on creating the control using Microsoft Visual Studio 2005.

Creating an ActiveX Control

To create an ActiveX control, use Microsoft Visual Studio 2005 to perform the following steps:

1. From File menu, select New, then Project.
2. In the New Project dialog, as shown in Figure 1, under Project types, select Visual C++, MFC. Under Templates, select MFC ActiveX Control.
3. Name the project MyActiveX; for Location, enter the working folder for the project's source code, and then click the OK button.

   Figure 1. New Project Dialog

4. In the MFC ActiveX Control Wizard dialog, as shown in Figure 2, select Control Settings.
5. Under Create control based on, select STATIC. We are using a static control, as we are just displaying the output from the control and not accepting input.
6. Under Additional features, make sure Activates when visible and Flicker-free activation are checked and Has an About box dialog is not checked.

   Figure 2. MFC ActiveX Control Wizard Dialog

7. Click the Finish button to enable the MFC ActiveX Control Wizard to create the project's source code. By default, the wizard creates the project to use MFC in a shared DLL. We need to change this since the ActiveX control will not run unless the required MFC DLLs are already installed on the system where the control is being downloaded and run. This is one of the causes of a red X displayed where an ActiveX control should be on a web page. From the Visual Studio menu, select Project, Properties. Navigate to Configuration Properties, General. Change the entry “Use of MFC” to “Use MFC in a Static Library”.
8. The wizard has created the following three classes:
   • CMyActiveXApp – This is the ActiveX application class derived from COleControlModule. It is the base class to derive an OLE control module object that contains the member functions for initialization (InitInstance) and code cleanup (ExitInstance).
   • CMyActiveXCtrl – This is derived from the base class COleControl. This is where we will implement most of the functionality for our control.
   • CMyActiveXPropPage – This is derived from the base class COlePropertyPage. It is used to manage the property page dialog for the control. The ActiveX Control Wizard has created a default dialog to serve as a property page for the control.

Adding Support for Animated GIF

In order to implement support for displaying a progress bar animated GIF from the ActiveX control, we will use theCPictureEx class presented by Oleg Bykov in a CodeProject article. Refer to the References section for more details. First, add the source files pictureex.cpp and pictureex.h to your project, by selecting the Solution Explorer tab in VS 2005, then right click on the Header Files or Source Files in the source tree, and then Add, Existing Item to select the appropriate source file.

To add an animated GIF resource to the project, we have to work around a defect in Visual Studio 2005 (and VS 2003) that does not allow importing a GIF image file. If you try it, you will get an error reporting that the file is not a valid GIF file. You can work around this defect as follows:

1. Copy the GIF file ProcessingProgressBar.gif to your project working folder, and rename the file toProcessingProgressBar.gaf with a “gaf” file extension. In Resource View, right click on the resource fileMyActiveX.rc, and select Add Resource. In the Add Resource dialog, press the Import button, and select the fileProcessingProgressBar.gaf. In the Custom Resource Type dialog, enter “GIF” for Resource type, and press OK. This will import the GIF image file into the project. You will find it listed under GIF in Resources. Navigate to this item, and change the control ID from the default of IDR_GIF1 to IDR_PROGRESSBAR.
2. Now, we need to make things right with the image file. First, save the resource file MyActiveX.rc. Navigate to the project working folder, and edit this same resource file with Notepad. Navigate to the line item definition forIDR_PROGRESSBAR, and change the filename in quotes to “ProcessingProgressBar.gif”. Also, change the GIF image filename in the working folder to “ProcessingProgressBar.gif”. From Notepad, save the resource fileMyActiveX.rc. Visual Studio will then report that the file myactivex.rc has been modified outside of Visual Studio, click Yes to reload the file. One more correction needs to be made. Select Solution Explorer, navigate to the item “ProcessingProgressBar.gaf”, and select it. In Properties, select Relative Path, and correct the filename to “ProcessingProgressBar.gif”.

Adding Dialog for Progress Bar Graphic

Now, we will add a dialog for the progress bar graphic.

1. In Resource View, right click on the dialog item in the tree, and select Insert Dialog to create a default dialog.
2. Delete the OK and Cancel buttons that are not needed, and adjust the size of the dialog to 230 x 40.
3. Change some of the default properties of the dialog to: Border – None, Style – Child, System Menu – False, Visible – True.
4. Change the control ID to IDD_MAINDIALOG.
5. Insert a picture control into the dialog, by selecting the Toolbox tab on the right of Visual Studio, selecting a picture control, and clicking in the dialog. Adjust the size of the control to 200 x 20. Change the control ID toIDC_PROGRESSBAR and the Color property to White.
6. Create a class for the dialog, by right clicking on the dialog and selecting Add Class. This results in the MFC Class Wizard dialog as shown in Figure 3. Name the class CMainDialog, with the base class CDialog. ClickFinish for the wizard to create the default source files for the class.

Figure 3. MFC Class Wizard – CMainDialog

Now, we add the member variables for the classes. The member variable m_MainDialog is associated with theCMainDialog class, and m_ProgressBar is associated with the progress bar control we added to the main dialog.

1. Add the member variable m_MainDialog to the class CMyActiveXCtrl. Select Class View, right click onCMyActiveXCtrl, and select Add, Add Variable. Enter CMainDialog for Variable type and m_MainDialog forVariable name, and then press the Finish button.
2. Similar to the above, add a member variable m_ProgressBar to the class CMainDialog. Enter CPictureEx forVariable type, m_ProgressBar for Variable name, and enable the Control variable checkbox, and make sureIDC_PROGRESSBAR is entered for Control ID. Before clicking on the Finish button, make sure that Variable typeis set to CPictureEx and not changed to CStatic.

Figure 4. Add Member Variable Wizard – m_ProgressBar

Adding Support Code

Now, we get our hands dirty with adding some code to support drawing the main dialog and the progress bar control.

1. Select the class CMyActiveXCtrl. In the Properties sheet, select the Messages icon, then WM_CREATE. Select the listbox to the right of WM_CREATE, then <Add> OnCreate to add a method for the WM_CREATE message. The wizard will add the OnCreate method to the CMyActiveXCtrl class.
2. Edit MyActiveXCtrl.cpp, and add the following code to the OnCreate method to create the main dialog: Collapse | Copy Code

   欢迎分享，转载请注明来源：内存溢出

   原文地址: http://outofmemory.cn/zaji/2086223.html