All Topics, MFC / C++
>> COM/DCOM/COM+
>> General

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

A class can
operate on HTML in reusing Web browser.

C++ (VC7, VC6)
Windows (Win2K,
WinXP, Win95, Win98, WinME)
Win32, VS (VS6,
VS.NET2002), MFC, COM
Dev

Posted 27 Dec 2002

Articles
by this author

26,541
views

Search:

Articles Authors

Help!

Articles

Message
Boards

StoreFront

Lounge

Toolbox

VS.NET 2003 for
$899

MSDN Univ. from
$1950

Print version

Send
to a friend

Sign in / Sign
up

Email

Password

Remember me

Lost your Password?

Broken
links?

8 members have rated this
article. Result:

Popularity:
2.15. Rating: 2.38 out of
5.

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:

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 OPTIONs into a
select, you shall operate HTML as in the following
steps:

Empty all options 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;
}

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

About Johnson Zhou

I'm write program from 1990. My
research field is CAG,CAD and Image processing. I select C/C++, ASP,
Java, XML as my usaully developing tools. Occasional , write code in
Delphi and VB. I'm using Visual C++ from 1996. If you have anything
unclear, e-mail to :[email-masked] Software Engineering and CAD
is my mainly research program.

Click here
to view Johnson Zhou's online profile.

Other popular COM/DCOM/COM+ articles:

Automating
Windows Applications
A Windows
application that does not export any program interface, may be
converted to automation server with COM object(s) injected into
the application process.

DCOM
D-Mystified: A DCOM Tutorial, Step 6
We build our new server and install it on the
server machine.

Embeddable
script editor for MFC applications
A
library that allows you to embed scripting functionality to your
C++ MFC application.

Introduction
to COM Part II - Behind the Scenes of a COM Server
A tutorial for programmers new to COM that
explains the internals of COM servers, and how to write your own
interfaces in C++

[Top]

Sign
in to vote for this article:
PoorExcellent

Premium
Sponsor

FAQ

Noise level
Very High High
Medium Low Very
low

Search comments

View Normal
(slow) Preview (slow)
Message View Topic View Thread
View Expanded (Supporters
only)

Per page 10 25
50 (must logon)

New thread

Msgs 1 to 11 of 11 (Total: 11) (Refresh)

First Prev
Next Last

Subject

Author

Date

Simulate Click on Specific
Option

neeleshd

0:24 25 Nov
'03

How can
one simulate a click on a specific Option in
Select Option using ITHMLDocument2,
IHTMLSelectElement, IHTMLOptionElement or what
ever. (The related events like onchange should
get fired)

[Reply][Email][View
Thread][Get
Link]

[Modify|Delete]

how to use Resource's Gif file in html
file?

samfromcn

4:53 22 Jan
'03

I have
a CDHtmlDialog useing file a.htm.
There is "
<img src="imgaes/abc.gif" width="220"
height="58"> " in a.htm.
I import the
abc.gif file into my resource and want the
Dialog to use my resource, what can I
do?

thanks every one who help me !

[Reply][Email][View
Thread][Get
Link]

[Modify|Delete]

Re: how to use Resource's Gif file in html
file?

Johnson
Zhou

20:30 22 Jan
'03

hi,
Try this in your
program.
Suppose your your gif file in
resource is "gif\IDR_GIF1". You will find
IDR_GIF1 is 138 or something other number. You
can write this img tag like this:
<img
src="res://testhtmldialog.exe/gif/#138">
For
more information of this reason is in MSDN
document of Visual
Studio.NET:
ms-help://MS.VSCC/MS.MSDNVS.2052/PlugProt/workshop/networking/predefined/res.htm

Regards
Johnson

[Reply][Email][View
Thread][Get
Link]

[Modify|Delete]
Score:
4.0 (1 vote).

Does it hurt to make a whole
project

Zhefu
Zhang

13:47 27 Dec
'02

Would
you please give us a whole project and/or a demo
exe, so that everyone can evaluate the effect
immediately after dling.
Thanks

[Reply][Email][View
Thread][Get
Link]

[Modify|Delete]

Re: Does it hurt to make a whole
project

Neville
Franks

15:56 27 Dec
'02

Yes
please provide dsw/dsp and .exe. And a screen
shot would be nice. Also the article formatting
requires horizontal scrolling.

Otherwise
this looks quite interesting - thanks.

Neville Franks, Author of ED for
Windows. http://www.getsoft.com/
Make
money with our new Affilate
program

[Reply][Email][View
Thread][Get
Link]

[Modify|Delete]

Re: Does it hurt to make a whole
project

Zhefu
Zhang

17:16 27 Dec
'02

Hi, Franks:
You still owe me
the answer in "High Performance Ini Class" in
CodeGuru. Are you fine?
Happy New
Year!

[Reply][Email][View
Thread][Get
Link]

[Modify|Delete]

Re: Does it hurt to make a whole
project

Neville
Franks

17:29 27 Dec
'02

Hi
Zhefu,
FYI Franks is my
surname.

Zhefu Zhang
wrote:
You still owe me the
answer in "High Performance Ini Class" in
CodeGuru.

I don't remember this, and
I've just tried to find the article on CodeGuru
without success. Can you give me a
URL.

Zhefu Zhang
wrote:
Happy New
Year!

And to you and everyone at CP.

Neville Franks, Author of ED for
Windows. http://www.getsoft.com/
Make
money with our new Affilate
program

[Reply][Email][View
Thread][Get
Link]

[Modify|Delete]

Re: Does it hurt to make a whole
project

Zhefu
Zhang

17:39 27 Dec
'02

Well, I
think it is
http://www.codeguru.com/data-misc/HighPerformanceIni.html

[Reply][Email][View
Thread][Get
Link]

[Modify|Delete]

Re: Does it hurt to make a whole
project

Neville
Franks

18:07 27 Dec
'02

I
didn't know that you had replied to my post. I
guess CodeGuru doesn't email you like
CodeProject does. I'm just about to write a
reply.

Neville Franks, Author of ED for
Windows. http://www.getsoft.com/
Make
money with our new Affilate
program

[Reply][Email][View
Thread][Get
Link]

[Modify|Delete]

Re: Does it hurt to make a whole
project

Johnson
Zhou

20:48 27 Dec
'02

Hi,
Yes ,you are
right.
All these artical are a serials of
classes can compelete a project. I'll write an
artical and provide demo later. This class will
be appear in next artical , also no demo . But it is the usage of this
class.
By the way , do you like
drop me a mail for with your brief
introduce?
Johnson .

Johnson
Zhou

[Reply][Email][View
Thread][Get
Link]

[Modify|Delete]

Re: Does it hurt to make a whole
project

Neville
Franks

16:35 28 Dec
'02

Hi
Johnson,
I look forward to seeing the article
that ties these classes together and I
especially look forward to seeing the demo app.
Any idea when this will be available?

I
find it a bit difficult to comment on the
individual articles as I don't yet have a clear
picture on how they work or exactly what they
do. The demo app should help a lot in this
respect.

Using HTML/MSHTML for
application UI is a very interesting area which
I think has a lot of potential for certain
applications.

Neville Franks, Author of
ED for Windows. http://www.getsoft.com/
Make
money with our new Affilate
program

[Reply][Email][View
Thread][Get
Link]

[Modify|Delete]
Score:
2.0 (1 vote).

Last Visit: 4:42 Wednesday 15th
September, 2004

First Prev
Next Last

All Topics, MFC / C++ >> COM/DCOM/COM+ >> General
Updated: 27
Dec 2002

Article content
copyright Johnson Zhou, 2002
everything else Copyright © CodeProject, 1999-2004.

Advertise on The
Code Project | Privacy

MSDN Communities |
ASPAlliance • Developer Fusion • DevGuru • Programmers Heaven • Planet Source Code • Resource Index • Tek-Tips Forums • What is XML? • VisualBuilder • ZVON • Search Us!