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:
- 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
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 OPTION
s into a select
, you shall operate HTML as in the following steps:
- Empty all
option
s in a select
object.
- 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 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;
}
for (long l = 0 ; l < lNumItem ; l++ )
{
CString strItem ;
long code = 0;
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);
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.