A while back I had to develop a design tool to edit form based style pages.
After completing the project, Visual Studio .NET came into BETA, my initial
thoughts after being presented with the "Start Page" was WOW, I wanted
this feature in my application, after all products like Outlook and
InstallShield had been doing this kind of UI for years (slight exaggeration)
. Previously I had spent a while writing a wrapper class
that implemented sinks from the IE browser control so I could get feed back from
actions such as mouse click, button click etc. The problem with the class I designed was
that the class was rigid and could only be used to implement start pages. Since the release of Visual C++ 7.0
I discovered a new class which allow DHTML interaction with MFC. This class is
calledCDHTMLDialog, this class had implemented a generic framework to sinks
IE Events back into MFC, but this class was limited to dialog boxes and I was surprised
that Microsoft hadn't provided a CView based
version. What I needed was a CDHTMLViewclass. With that in mind I developed a class to do just
After poking around the source code that shipped with Visual C++ .NET I found
the code that implemented IHTMLElement sinks. I then
had the basis of designing the view. Here the class diagram.
As you can see from the class schema, CDHTMLView inherits from CView
CDHTMLEventSink is a new class that ships with Visual C++
Decide which view is going to be your DHTML View
Include DHTMLView.h & DHTMLView.cpp in your project
Edit your Views header file and add the follow code snippets in BOLD
#include "DHTMLView.h"class CStartPrjView : public CDHTMLView
// Class body...protected:
Now add the event map to your for view's .cpp file
Once the class has been declared its time to insert some functionality. The
first thing we need to do now is to insert some Html into the view, this can be
done design your HTML and using the resource editor import a HTML file.
Any images must be imported as resource type "2110" and name
your images as strings e.g. "StartGif".
Open the HTML in the Resource Design mode and select your image.
And name set your image as a resource type:
Now we need to tie up HTML element with events, this is done by editing
the BEGIN_DHTML_EVENT_MAPand inserting message handlers as you would
with normal MFC message handlers. One thing to note here is the IDs I gave
each element in my document an ID. This allows me to map to the create
The CDHTMLView class provides a stable framework for hooking
HTML elements into your code, one thing I should add there is a whole raft of
data exchange macros to exchange data with MFC and HTML eg. DDX_DHtml_ElementInnerText.
This macros are all defined in the DHTMLView.h file.