Microsoft has provide the mshtml.dll with the COM interface. We can use it to manipulate all information in an HTML file as far as we wish. That’s a series of excellent interfaces. In Visual Studio .NET, there is a class named
CDhtmlDialog, which facilitates us to use HTML as dialog interface. In this class, there are a lot of basic operations for HTML files. In one of my applications, all dialogs are using HTML dialog. I’ve found we shall need more tools to operate the elements in an HTML file. So I wrote this class, and submit it here.
Information of HTML
In MSDN, there is detailed information on how to operate each kind of HTML element in the file. One of its classes is
IHTMLDocument2. Using this interface, we can collect all information of the HTML, adding, deleting of modifying information of HTML file dynamically according to our demand. Especially, using HTML as an interface, it is also very important to retrieve all information of controls located in the file. This wrapper class is mainly on getting or collecting information of these controls.
The elements of HTML are composed of these parts: tag names, inner text, attributes etc. For example:
<select name=”select1” value=”200”>
<Option value =”4” name=”text1”>text</Option>
<Option value =”5” name=”text12”></Option>
In this code segment, ‘
option’ are tag names. ‘
value’ are name of attributes. “
200” are values of attributes. To operate on HTML is to operate these values.
In HTML, lots of controls are using
INPUT tag with different types. The following is from MSDN:
TYPE=BUTTON | CHECKBOX | FILE | HIDDEN | IMAGE |
PASSWORD | RADIO | RESET | SUBMIT | TEXT
GRAMMAR=url | strings
event = script
From this definition, we find that
input tag includes the
TEXT types. From the command window UI’s view,
RESET are buttons.
TEXT are edit controls.
RADIO are compared to their same named controls in Windows. There are no combo boxes and list boxes in the list! These controls are represented as
SELECT in HTML.
In standard Windows UI, there is a control to deal with calendar or time. But in HTML, there is no Time or Calendar control. We need to deal with these data types by combining several controls together to complete the task. In HTML, we can assign a custom attribute name for specified HTML tags to indicate a group of controls are representing date/time or calendar.
What does this class do?
In this class, we implement the following features:
- Extract all controls from an existing HTML file.
- Determine the control type of the current HTML element.
- Set a new dictionary to an existing selection (ComboBox).
- Clear all options from selection.
- Find out a set of tags of HTML with custom attributes “
mydate” or “
mytime” for specified time/date control.
- Find out a set of radio button in a group by defining a ruler with same name in
How to insert a set of options to a select (Combobox)
In HTML, Combobox and Listbox have the same tag name -----
Select. The difference between them is that Listbox has a none-zero “
size” attribute. The items list in the list box is a set of
OPTION tags in HTML. For example:
<select id="i_now_rule_hastwo" name="i_now_rule_hastwo" class="bot_border">
OPTION tag is the selection in the list control. In the sample code, there are 3 items: strong, mid, and weak are listed in the ComboBox. To add new items to the
select element, you must create
IHTMLOptionElement and add to the given
select. According to MSDN, “Before you can add an element to a collection, you must create it first by using the
IHTMLDocument2::createElement method”. Actually, it does not work.
In order to insert a series of
OPTIONs into a
select, you shall operate HTML as in the following steps:
- Empty all
options in a
- Get the dictionary with given name from dictionary list.
- Get number of dictionary items from the dictionary got from dictionary list.
- Construct a new
OPTION for each item in the dictionary.
- Add the items into combobox.
As per previous comment, we cannot use add method of
IHTMLSelectElement, then how can I create the elements?
You can not use
IHTMLDocument to create
IHTMLOptionElement to replace the
SELECT options. This object can be created using special interface,
IHTMLOptionElementFactory. The sad thing is that there is no direct way to go to the interface from
IHTMLElementCollection. It must be got from
IHTMLWindow2! Where is the
IHTMLWindow2? He he, you shall use
IHTMLDocument2. Damn document! (See the document: Knowledge Base Articles Q249232 HOWTO: Get IHTMLDocument2 from a HWND.)
For the complete code, see source files. The main part of it looks like this:
if ( FAILED(m_pDoc->get_Script (&pMyDisp)))
m_strErr = EHT_CANT_GET_SCRIPT;
pWindow = pMyDisp;
IHTMLOptionElementFactory *pOptionFactory= NULL;
if ( FAILED(pWindow->get_Option (&pOptionFactory)))
m_strErr = EHT_CANT_GET_OPTION_FACTORY;
for (long l = 0 ; l < lNumItem ; l++ )
CString strItem ;
long code = 0;
if ( !pDict->GetDictItem (dictNode,l,code,strItem))
VARIANT_BOOL vt_b =VARIANT_FALSE;
if (ldefCode == code || strDef == strItem )
vt_b = VARIANT_TRUE;
pOptionFactory->create (CComVariant(strItem), CComVariant(code),
if ( FAILED ( pSel->add ((IHTMLElement*)pOption,CComVariant(l))))
m_strErr = EHT_ADD_OPTION_ITEM;
How to use this class
To use this class is very simple.
Step 1: Create a variable of
Step2 : Set the current
IHTMLDocument2 interface pointer to document.
Step3: Call the method provided by the class
doc.AddDictElement( pElement ,_T(“MyDict”),m_pDict);
This class will be using
CXMLFile I wrote before. And next, I will publish a
CDhtmlControlGroup as the last article for a standard Windows UI manager
CControlGroup. This is a part of the detail. The next article will come soon.