| Tenouk C++ & C | MFC Home | Using ActiveX Controls 3 | IE 4 Common Controls 2 | Download | Site Index |

---

 

 

 

 

 

Module 19:

Internet Explorer 4 Common Controls 1

 

 

 

 

 

Program examples compiled using Visual C++ 6.0 (MFC 6.0) compiler on Windows XP Pro machine with Service Pack 2. Topics and sub topics for this Tutorial are listed below:

1. Internet Explorer 4 Common Controls

2. The Common Control Description

3. The Date and Time Picker

4. CTime vs. COleDateTime Class

5. The Month Calendar

6. The Internet Protocol (IP) Address Control

7. The Extended Combo Box

8. The MYMFC25A Example

 

 

Internet Explorer 4 Common Controls

 

When Microsoft developers released Internet Explorer 4 (IE4), they included a new and improved version of the COMCTL32.DLL, which houses Microsoft Windows Common Controls. Since this update to the common controls was not part of an operating system release, Microsoft calls the update Internet Explorer 4 Common Controls. IE4 Common Controls updates all of the existing controls and adds a variety of advanced new controls. Microsoft Visual C++ 6.0 and Microsoft Foundation Class (MFC) 6.0 have added a great deal of support for these new controls. In this module, we'll look at the new controls and show examples of how to use each one. If you haven't worked with Windows controls or Windows Common Controls, be sure you read Module 5 before proceeding with IE4 Common Controls. While Microsoft Windows 95 and Microsoft Windows NT 4.0 do not include the new COMCTL32.DLL, future versions of Windows will. To be safe, you will need to redistribute the COMCTL32.DLL for these existing operating systems as part of your installation. Currently you must ship a "developer's edition" of Internet Explorer to be able to redistribute these controls. However, this might change once a version of Windows ships with the updated controls. Currently we have IE 6 and IE 7 in beta mode.

 

The Common Control Description

 

Example MYMFC25A uses each of the IE4 common controls. Figure 1 shows the dialog from that example. Refer to it when you read the control descriptions that follow.

 

 

Figure 1: The Internet Explorer 4 Common Controls dialog.

 

The Date and Time Picker   A common field on a dialog is a place for the user to enter a date and time. Before IE4 controls provided the date and time picker, developers had to either use a third-party control or subclass an MFC edit control to do significant data validation to ensure that the entered date was valid. Fortunately, the new date and time picker control is provided as an advanced control that prompts the user for a date or time while offering the developer a wide variety of styles and options. For example, dates can be displayed in short formats (8/14/68) or long formats (August 14, 1968). A time mode lets the user enter a time using a familiar hours/minutes/seconds AM/PM format. The control also lets you decide if you want the user to select the date via in-place editing, a pull-down calendar, or a spin button. Several selection options are available including single and multiple select (for a range of dates) and the ability to turn on and off the "circling" in red ink of the current date. The control even has a mode that lets the user select "no date" via a check box. In Figure 1, the first four controls on the left illustrate the variety of configurations available with the date and time picker control. The new MFC 6.0 class CDateTimeCtrl provides the MFC interface to the IE4 date and time picker common control. This class provides a variety of notifications that enhance the programmability of the control. CDateTimeCtrl provides member functions for dealing with either CTime or COleDateTime time structures. You set the date and time in a CDateTimeCtrl using the SetTime() member function. You can retrieve the date and time via the GetTime() function. You can create custom formats using the SetFormat() member function and change a variety of other configurations using the CDateTimeCtrl interface.   CTime vs. COleDateTime Class   Most "longtime" MFC developers are accustomed to using the CTime class. However, since CTime's valid dates are limited to dates between January 1, 1970, and January 18, 2038, many developers are looking for an alternative. One popular alternative is COleDateTime, which is provided for OLE automation support and handles dates from 1 January 100 through 31 December 9999. Both classes have various pros and cons. For example, CTime handles all the issues of daylight savings time, while COleDateTime does not. Many developers choose COleDateTime because of its much larger range. Any application that uses CTime will need to be reworked in approximately 40 years, since the maximum value is the year 2038. To see this limitation in action, select a date outside the CTime range in MYMFC25A. The class you decide to use will depend on your particular needs and the potential longevity of your application.   The Month Calendar   The large display at the bottom left of Figure 1 is a Month Calendar. Like the date and time picker control, the month calendar control lets the user choose a date. However, the month calendar control can also be used to implement a small Personal Information Manager (PIM) in your applications. You can show as many months as room provides, from one month to a year's worth of months, if you want. MYMFC25A uses the month calendar control to show only two months. The month calendar control supports single or multiple selection and allows you to display a variety of different options such as numbered months and a circled "today's date." Notifications for the control let the developer specify which dates are in boldface. It is entirely up to the developer to decide what boldface dates might represent. For example, you could use the bold feature to indicate holidays, appointments, or unusable dates. The MFC 6.0 class CMonthCalCtrl implements this control. To initialize the CMonthCalCtrl class, you can call the SetToday() member function. CMonthCalCtrl provides members that deal with both CTime and COleDateTime, including SetToday().

 

The Internet Protocol (IP) Address Control

 

If you write an application that uses any form of Internet or TCP/IP functionality, you might need to prompt the user for an Internet Protocol (IP) Address. The IE4 common controls include an IP address edit control as shown in the top right of Figure 1. In addition to letting the user enter a 4-byte IP address, this control performs an automatic validation of the entered IP address. CIPAddressCtrl provides MFC support for the IP address control. An IP address consists of four "fields" as shown in Figure 2. The fields are numbered from left to right.

 

 

Figure 2: The fields of an Internet Protocol (IP) address control.

 

To initialize an IP address control, you call the SetAddress() member function in your OnInitDialog() function. SetAddress() takes a DWORD, with each BYTE in the DWORD representing one of the fields. In your message handlers, you can call the GetAddress() member function to retrieve a DWORD or a series of BYTES to retrieve the various values of the four IP address fields.

 

The Extended Combo Box

 

The "old-fashioned" combo box was developed in the early days of Windows. Its age and inflexible design have been the source of a great deal of developer confusion. With the IE4 controls, Microsoft has decided to release a much more flexible version of the combo box called the extended combo box. The extended combo box gives the developer much easier access to and control over the edit-control portion of the combo box. In addition, the extended combo box lets you attach an image list to the items in the combo box. You can display graphics in the extended combo box easily, especially when compared with the old days of using owner-drawn combo boxes. Each item in the extended combo box can be associated with three images: a selected image, an unselected image, and an overlay image. These three images can be used to provide a variety of graphical displays in the combo box, as we'll see in the MYMFC25A sample. The bottom two combo boxes in Figure 1 are both extended combo boxes. The MFC CComboBoxEx class provides comprehensive extended combo box support.

Like the list control introduced in Module 6, CComboBoxEx can be attached to a CImageList that will automatically display graphics next to the text in the extended combo box. If you are already familiar with CComboBox, CComboBoxEx might cause some confusion: instead of containing strings, the extended combo box contains items of type COMBOBOXEXITEM, a structure that consists of the following fields:

• UINT mask: A set of bit flags that specify which operations are to be performed using the structure. For example, set the CBEIF_IMAGE flag if the image field is to be set or retrieved in an operation.

• int iItem: The extended combo box item number. Like the older style of combo box, the extended combo box uses zero-based indexing.

• LPSTR pszText: The text of the item.

• int cchTextMax: The length of the buffer available in pszText.

• int iImage: Zero-based index into an associated image list.

• int iSelectedImage: Index of the image in the image list to be used to represent the "selected" state.

• int iOverlay: Index of the image in the image list to be used to overlay the current image.

• int iIndent: Number of 10-pixel indentation spaces.

• LPARAM lParam: 32-bit parameter for the item.

You will see first-hand how to use this structure in the MYMFC25A example.

 

The MYMFC25A Project Example

 

To illustrate how to take advantage of the Internet Explorer 4 Common Controls, we'll build a dialog that demonstrates how to create and program each control type. The steps required to create the dialog are shown below.

 

Run AppWizard to generate the MYMFC25A project. Choose New from the Visual C++ File menu, and then select Microsoft AppWizard (exe) from the Projects page. Accept all the defaults but one: choose Single Document Interface (SDI). The options and the default class names are shown here.

 

 

 

 

 

 

-----------------------------------------------------------------------------------

 

Figure 3: MYMFC25A IE4 common controls project summary.

 

Create a new dialog resource with ID IDD_DIALOG1. Place the controls as shown in Figure 1.

You can drag the controls from the control palette. Remember that IE4 Common Controls are at the bottom part of the palette. The following table lists the control types and their IDs.

 

 

The following figure shows each control and its appropriate tab order.

 

 

Figure 4: MYMFC25A controls and their tab order.

 

Until we set some properties, your dialog will not look exactly like the one in Figure 1.

 

Use ClassWizard to create a new class, CDialog1, derived from CDialog. ClassWizard will automatically prompt you to create this class because it knows that the IDD_DIALOG1 resource exists without an associated C++ class and just go ahead.

 

 

Figure 5: A new class creation dialog prompt for IDD_DIALOG1.

 

 

Then, create a message handler for the WM_INITDIALOG message.

 

 

Figure 7: Creating a message handler for the WM_INITDIALOG message.

 

Set the properties for the dialog's controls. To demonstrate the full range of controls, we will need to set a variety of properties on each of the IE4 common controls in the example. Here is a brief overview of each property you will need to set:

• The Short Date and Time Picker. To set up the first date and time picker control to use the short format, select the properties for IDC_DATETIMEPICKER1, as shown in the following figure.

 

Figure 8: Modifying Date Time Picker control properties.

• The Long Date and Time Picker. Now configure the second date and time picker control (IDC_DATETIMEPICKER2) to use the long format as shown below.

 

 

Figure 9: Modifying Date Time Picker control properties.

• The Short and NULL Date and Time Picker. This is the third date and time picker control, IDC_DATETIMEPICKER3. Configure this third date and time picker to use the short format and the styles shown here.

 

 

Figure 10: Modifying Date Time Picker control properties.

• The Time Picker. The fourth date and time picker control, IDC_DATETIMEPICKER4, is configured to let the user choose time. To configure this control, select Time from the Format combo box on the Styles tab as shown.

 

 

 

 

 

 

 

 

Figure 11: Modifying Date Time Picker control properties.

• The Month View. To configure the month view, you will need to set a variety of styles. First, from the Styles tab, choose Day States, as shown here.

 

 

Figure 12: Modifying Month Calendar control properties.

 

If we leave the default styles, the month view does not look like a control on the dialog. There are no borders drawn at all. To make the control fit in with the other controls on the dialog, select Client Edge and Static Edge from the Extended Styles tab, as shown below.

 

 

Figure 13: Modifying Month Calendar control properties.

• The IP Address. This control (IDC_IPADDRESS1) does not require any special properties.

• The First Extended Combo Box. Make sure that you enter some items, as shown here, and also make sure the list is tall enough to display several items. Use Ctrl + Enter to go to new line.

 

Figure 14: Modifying Extended Combo Box control properties.

• The Second Extended Combo Box. Enter three items: Doremon, Tweety, Mack, Pink Panther, Ultraman Ace and Jaws. Later in the example, we will use these items to show one of the ways to draw graphics in an extended combo box.

 

Figure 15: Modifying Extended Combo Box control properties.

 

 

Continue on next module...part 2.

 

 

 

 

 

 

 

Further reading and digging:

1. MSDN MFC 7.0 class library online documentation.

2. MSDN What's New (MFC Feature Pack) - feature pack.

3. Porting & Migrating your older programs.

4. MSDN Library

5. DCOM at MSDN.

6. COM+ at MSDN.

7. COM at MSDN.

8. Windows data type.

9. Win32 programming Tutorial.

10. The best of C/C++, MFC, Windows and other related books.

11. Unicode and Multi-byte character set: Story and program examples.

 

 

---

| Tenouk C++ & C | MFC Home | Using ActiveX Controls 3 | IE 4 Common Controls 2 | Download | Site Index |