How to operate controls in an HTML file, using C++

• Download source files - 21.5 Kb

Introduction

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>
</select>

In this code segment, ‘select’, ‘option’ are tag names. ‘name’, ’value’ are name of attributes. “select1”, “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:

<INPUT
ACCESSKEY=key
CLASS=classname
DISABLED
ID=value
MAXLENGTH=n
READONLY
STYLE=css1-properties
TYPE=BUTTON | CHECKBOX | FILE | HIDDEN | IMAGE | 
     PASSWORD | RADIO | RESET | SUBMIT | TEXT
VALUE=value
VOICEFILE=url
GRAMMAR=url | strings
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
event = script
>

From this definition, we find that input tag includes the BUTTON, CHECKBOX, FILE, HIDDEN, IMAGE, PASSWORD, RADIO, RESET, SUBMIT and TEXT types. From the command window UI’s view, BUTTON, SUBMIT, IMAGE, and RESET are buttons. FILE, HIDDEN, PASSWORD, and TEXT are edit controls. CHECKBOX and 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:

1. Extract all controls from an existing HTML file.
2. Determine the control type of the current HTML element.
3. Set a new dictionary to an existing selection (ComboBox).
4. Clear all options from selection.
5. Find out a set of tags of HTML with custom attributes “mydate” or “mytime” for specified time/date control.
6. Find out a set of radio button in a group by defining a ruler with same name in name attribute.

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>strong</option>
   <ption>mid</option>
   <option selected>weak</option>
</select>

The 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:

1. Empty all options in a select object.
2. Get the dictionary with given name from dictionary list.
3. Get number of dictionary items from the dictionary got from dictionary list.
4. Construct a new OPTION for each item in the dictionary.
5. 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 CreateElement of 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 IHTMLDocument or IHTMLElement or IHTMLElementCollection. It must be got from IHTMLWindow2! Where is the IHTMLWindow2? He he, you shall use get_Script of 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:

    ..................
CComQIPtr<IHTMLWindow2> pWindow;
CComPtr<IDispatch> pMyDisp;
if ( FAILED(m_pDoc->get_Script (&pMyDisp)))
{
    m_strErr = EHT_CANT_GET_SCRIPT;
    dictNode->Release();
    return FALSE;
}
pWindow = pMyDisp;


IHTMLOptionElementFactory *pOptionFactory= NULL;
if ( FAILED(pWindow->get_Option (&pOptionFactory)))
{
    m_strErr = EHT_CANT_GET_OPTION_FACTORY;
    dictNode->Release ();
    return FALSE;
}

// Add each items to selection
for (long l = 0 ; l < lNumItem ; l++ )
{
    CString strItem ;
    long code = 0;

    // Get current item in the dictionary
    if ( !pDict->GetDictItem (dictNode,l,code,strItem))
    {
        dictNode->Release ();
        m_strErr.Format(EHT_DICT_ITEM, dictName,l);
        return FALSE;
    }

    IHTMLOptionElement *pOption=NULL;
    VARIANT_BOOL vt_b =VARIANT_FALSE;
    if (ldefCode == code || strDef == strItem )
        vt_b = VARIANT_TRUE;
    pOptionFactory->create (CComVariant(strItem), CComVariant(code),
                         CComVariant(vt_b),CComVariant(vt_b),&pOption);

    // Add to selection tag
    if ( FAILED ( pSel->add ((IHTMLElement*)pOption,CComVariant(l))))
    {
        dictNode->Release ();
        m_strErr = EHT_ADD_OPTION_ITEM;
        return FALSE;
    }

How to use this class

To use this class is very simple.

Step 1: Create a variable of ChtmlDocment.

ChtmlDocument doc;

Step2 : Set the current IHTMLDocument2 interface pointer to document.

doc.SetDocument(m_spDoc);

Step3: Call the method provided by the class CDhtmlDocument.

………………………
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.