Click here to Skip to main content
11,640,599 members (57,678 online)
Click here to Skip to main content

Integrating DHTML into MFC Views

, 30 Jan 2002 313K 5.4K 104
Rate this:
Please Sign up or sign in to vote.
Demonstrates integrating DHTML into MFC Views, and using HTML in views to get feedback from the browser via connection points

Prerequisites: This article is targeted for Visual C++ .NET  and the author assumes the reader has a good understanding of C++, MFC, OLE, HTML. 

What this article does: Uses  HTML in views to get feed back from the browser via connection points. It does not open or save documents, that's for the developer to implement.

Motive

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 called CDHTMLDialog, 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 CDHTMLView class. With that in mind I developed a class to do just that!

Design

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 and CDHTMLEventSink.

CDHTMLEventSink is a new class that ships with Visual C++ .NET, 

Implementation

  • 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:
	DECLARE_MESSAGE_MAP()
	DECLARE_DHTML_EVENT_MAP()
public:
	virtual void OnInitialUpdate();
}
  •    Now add the event map to your for view's .cpp file
BEGIN_DHTML_EVENT_MAP(CStartPrjView)
END_DHTML_EVENT_MAP()
<!------------------------------- That's it! --------------------------->
  • 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_MAP and 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 event.
BEGIN_DHTML_EVENT_MAP(CStartPrjView)
	DHTML_EVENT_ONCLICK(_T("MRU1"), OnClickMRU1)	
	DHTML_EVENT_ONCLICK(_T("MRU2"), OnClickMRU1)
	DHTML_EVENT_ONCLICK(_T("MRU3"), OnClickMRU1)
	DHTML_EVENT_ONCLICK(_T("MRU4"), OnClickMRU1)
	 
	DHTML_EVENT_ONCLICK(_T("NewFile"), OnNewFile)
	DHTML_EVENT_ONCLICK(_T("OpenFile"), OnOpenFile)
END_DHTML_EVENT_MAP()
  • Now we have to wire the handlers in the header and implementation file
	 	
	HRESULT OnClickMRU1(IHTMLElement *phtmlElement);
	HRESULT OnClickMRU1(IHTMLElement *phtmlElement);
	HRESULT OnClickMRU1(IHTMLElement *phtmlElement);
	HRESULT OnClickMRU1(IHTMLElement *phtmlElement);
	HRESULT OnNewFile(IHTMLElement *phtmlElement);
	HRESULT OnOpenFile(IHTMLElement *phtmlElement);
  • and implementation file
HRESULT CStartPrjView::OnClickMRU1(IHTMLElement *phtmlElement)
{
	CComBSTR bstr;
	phtmlElement->get_innerText(&bstr);
	if (bstr)
	{
		GetDocument()->SetTitle(CString(bstr) );
		CString s;
		s.Format("File %s selected", CString(bstr));
		AfxMessageBox(s, MB_ICONINFORMATION);
 
	}
	return S_FALSE;
}
HRESULT CStartPrjView::OnClickMRU2(IHTMLElement *phtmlElement)
{
	CComBSTR bstr;
	phtmlElement->get_innerText(&bstr);
	if (bstr)
	{
		GetDocument()->SetTitle(CString(bstr) );
		CString s;
		s.Format("File %s selected", CString(bstr));
	AfxMessageBox(s, MB_ICONINFORMATION);
	}
	return S_FALSE;
}
HRESULT CStartPrjView::OnClickMRU3(IHTMLElement *phtmlElement)
{
	CComBSTR bstr;
	phtmlElement->get_innerText(&bstr);
	if (bstr)
	{
		GetDocument()->SetTitle(CString(bstr) );
		CString s;
		s.Format("File %s selected", CString(bstr));
		AfxMessageBox(s, MB_ICONINFORMATION);
	}
	return S_FALSE;
}
HRESULT CStartPrjView::OnClickMRU4(IHTMLElement *phtmlElement)
{
	CComBSTR bstr;
	phtmlElement->get_innerText(&bstr);
	if (bstr)
	{
		GetDocument()->SetTitle(CString(bstr) );
		CString s;
		s.Format("File %s selected", CString(bstr));
		AfxMessageBox(s, MB_ICONINFORMATION);
	}
	return S_FALSE;
}
 
HRESULT CStartPrjView::OnNewFile(IHTMLElement *phtmlElement)
{
	AfxMessageBox("New file Pressed" , MB_ICONINFORMATION);
	return S_FALSE;
}
HRESULT CStartPrjView::OnOpenFile(IHTMLElement *phtmlElement)
{
	AfxMessageBox("Open file Pressed" , MB_ICONINFORMATION);
	return S_FALSE;
}

Conclusion

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

NormDroid
Software Developer (Senior) Software Kinetics
United Kingdom United Kingdom



Software Kinetics
are experts in developing customised and bespoke applications and have expertise in the development of desktop, mobile and internet applications on Windows.

We specialise in:

  • User Interface Design
  • Desktop Development
  • Windows Phone Development
  • Windows Presentation Framework
  • Windows Forms
  • Windows Communication Framework
  • Windows Services
  • Network Applications
  • Database Applications
  • Web Development
  • Web Services
  • Silverlight
  • ASP.net

Visit Software Kinetics

You may also be interested in...

Comments and Discussions

 
QuestionWhich license is applied to "DHTMLView_src"? Pin
Takeoji31212-Jun-13 16:34
memberTakeoji31212-Jun-13 16:34 
QuestionRefresh Problem Pin
pqr12348-Jul-11 21:35
memberpqr12348-Jul-11 21:35 
Questionhow can I integrate it in a vc6.0 IDE? Pin
ori kovacsi17-Dec-07 22:27
memberori kovacsi17-Dec-07 22:27 
GeneralNot working with IE 7 Beta 3 Pin
Buzz18-Oct-06 18:24
memberBuzz18-Oct-06 18:24 
GeneralRe: Not working with IE 7 Beta 3 Pin
norm .net18-Oct-06 20:48
membernorm .net18-Oct-06 20:48 
GeneralRe: Not working with IE 7 Beta 3 Pin
Buzz18-Oct-06 21:11
memberBuzz18-Oct-06 21:11 
QuestionHow to Place ActiveX control on HTMLview Pin
Abhishek Narula13-Sep-06 0:29
memberAbhishek Narula13-Sep-06 0:29 
Is there a way to place an ActiveX control in HTMLView ?

For example, I want to place a List Control on my page.
Further, how would I populate the data and receive events like on-sel-change etc ?

Thanks,

Abhishek
GeneralIE7 and DHTMLView Pin
JMBezeau2-May-06 3:57
memberJMBezeau2-May-06 3:57 
Generaldoes not make dll or static library Pin
Youngho Kim1-Apr-06 18:32
memberYoungho Kim1-Apr-06 18:32 
GeneralDHTMLView with Framesets Pin
Yomok9-Mar-06 19:36
memberYomok9-Mar-06 19:36 
QuestionHow to iterate over all html elements Pin
Dan Baker9-Mar-06 8:05
memberDan Baker9-Mar-06 8:05 
AnswerRe: How to iterate over all html elements Pin
JMBezeau2-May-06 4:05
memberJMBezeau2-May-06 4:05 
QuestionUpdating tag attributes Pin
geregam2-Jan-06 8:25
membergeregam2-Jan-06 8:25 
Generalupdate of views Pin
rajukvrk7819-Oct-05 4:47
memberrajukvrk7819-Oct-05 4:47 
GeneralCatch windows messages or special keys. Pin
arkebuzy10-Jul-05 20:29
memberarkebuzy10-Jul-05 20:29 
GeneralRe: Catch windows messages or special keys. Pin
Nimstad28-Aug-05 23:28
memberNimstad28-Aug-05 23:28 
GeneralShowContextMenu() Pin
Abhishek Narula6-Jul-05 22:52
memberAbhishek Narula6-Jul-05 22:52 
GeneralRe: ShowContextMenu() Pin
mcbain3-Nov-05 17:21
membermcbain3-Nov-05 17:21 
GeneralRe: ShowContextMenu() Pin
luowei8815-Dec-07 23:18
memberluowei8815-Dec-07 23:18 
GeneralGreat Work Pin
Jonathan Schmidt27-Nov-04 13:29
sussJonathan Schmidt27-Nov-04 13:29 
Generalflickering and redraw Pin
Daniele Piazza4-Aug-04 5:05
sussDaniele Piazza4-Aug-04 5:05 
GeneralRe: flickering and redraw Pin
Nimstad8-Aug-04 23:25
memberNimstad8-Aug-04 23:25 
GeneralRe: flickering and redraw Pin
norm.net9-Aug-04 3:34
membernorm.net9-Aug-04 3:34 
GeneralRe: flickering and redraw Pin
UTCNathan18-Oct-05 15:25
memberUTCNathan18-Oct-05 15:25 
QuestionWhy a View!? Pin
Loz27-Jan-04 8:44
memberLoz27-Jan-04 8:44 
AnswerRe: Why a View!? Pin
Nimstad31-Jan-04 11:05
memberNimstad31-Jan-04 11:05 
GeneralRe: Why a View!? Pin
Loz3-Feb-04 9:47
memberLoz3-Feb-04 9:47 
GeneralLoading DHTML from memory Pin
mpasqual14-Dec-03 12:00
sussmpasqual14-Dec-03 12:00 
GeneralRe: Loading DHTML from memory Pin
Nimstad15-Dec-03 3:49
memberNimstad15-Dec-03 3:49 
GeneralRe: Loading DHTML from memory Pin
mpasqual18-Dec-03 21:22
sussmpasqual18-Dec-03 21:22 
GeneralRe: Loading DHTML from memory Pin
Nimstad18-Dec-03 22:01
memberNimstad18-Dec-03 22:01 
GeneralRe: Loading DHTML from memory Pin
Loz27-Jan-04 10:03
memberLoz27-Jan-04 10:03 
GeneralShowContextMenu Pin
MistER-j20-Oct-03 4:54
memberMistER-j20-Oct-03 4:54 
GeneralRe: ShowContextMenu Pin
WolfSupernova28-Oct-03 7:28
memberWolfSupernova28-Oct-03 7:28 
GeneralRe: ShowContextMenu Pin
WolfSupernova28-Oct-03 13:32
memberWolfSupernova28-Oct-03 13:32 
GeneralRe: ShowContextMenu Pin
MistER-j28-Oct-03 22:53
memberMistER-j28-Oct-03 22:53 
GeneralGetting element text question Pin
Matt Gates8-Sep-03 7:15
memberMatt Gates8-Sep-03 7:15 
GeneralRe: Getting element text question Pin
idealistt24-Sep-03 16:21
memberidealistt24-Sep-03 16:21 
GeneralRe: Getting element text question Pin
Matt Gates25-Sep-03 8:31
memberMatt Gates25-Sep-03 8:31 
QuestionAnyone used other controls? Pin
miggedy1-Aug-03 7:48
membermiggedy1-Aug-03 7:48 
AnswerRe: Anyone used other controls? Pin
Anonymous24-Sep-03 16:12
sussAnonymous24-Sep-03 16:12 
GeneralProblem with LoadFromResource() and GetElement() Pin
mschlestein19-Jun-03 6:11
membermschlestein19-Jun-03 6:11 
GeneralRe: Problem with LoadFromResource() and GetElement() Pin
Thomas Nimstad30-Jul-03 22:12
memberThomas Nimstad30-Jul-03 22:12 
GeneralDHTMLView: XML data used in HTML document Pin
wk@ld27-May-03 9:06
memberwk@ld27-May-03 9:06 
QuestionPrinting fails? Pin
FloSoft22-May-03 21:54
memberFloSoft22-May-03 21:54 
AnswerRe: Printing fails? Pin
FloSoft22-May-03 22:09
memberFloSoft22-May-03 22:09 
AnswerRe: Printing fails? Pin
Jiang Sheng30-Jun-03 17:37
memberJiang Sheng30-Jun-03 17:37 
Questionabout onkeydown event? Pin
idealistt14-May-03 23:19
memberidealistt14-May-03 23:19 
AnswerRe: about onkeydown event? Pin
Thomas Nimstad23-Jul-03 6:17
sussThomas Nimstad23-Jul-03 6:17 
GeneralRe: about onkeydown event? Pin
idealistt24-Sep-03 21:44
memberidealistt24-Sep-03 21:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150731.1 | Last Updated 31 Jan 2002
Article Copyright 2002 by NormDroid
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid