Class for Displaying Modal HTML Dialogs

I always wanted to make application's about box more graphical with images, animations and music. But it required lots of extra efforts and so I never ventured into that. Fortunately, with the advent of Internet Explorer 4.0 and the new technologies it has introduced I can do all these and a lots more without writing huge amounts of code. One way was to use the web browser control but it is not always the best solution especially for handling modal dialog boxes. There is another technique using modal HTML dialogs - a technology introduced with IE4. Modal dialog boxes host only mshtml.dll the HTML rendering and parsing engine. So some of features such as the ability to click on a link and load the link in the same window, favourite and history management are not available in modal dialogs (see Reusing the WebBrowser and MSHTML in Internet Client SDK). This is good enough for almost all the places where we want only modal dialogs.

How to Use Modal HTML Dialogs

The function SHOWHTMLDIALOGFN in mshtml.dll is the means to display a HTML dialog. But it requires the usual COM stuff - conversions of strings and all those things. In order to simplify all of this, I developed a class (CHtmlDialog). All the COM stuff is hidden and thus, the class is easy to incorporate into almost any application.

A Simple Case of Using CHtmlDialog

As a simple case suppose you want to use it as an about box. All you have to do is to write an HTML file and include it in the resource file say as IDR_ABOUT_HTM. Your OnAppAbout function would look like.


void CHDDemoApp::OnAppAbout() 
{
 CHtmlDialog	dlg(IDR_ABOUT_HTM, AfxGetMainWnd());
 dlg.DoModal();
}

The constructor also allows you to pass string resource IDs or URLs to display. See the Demo program for details. Just by using this code and including graphics and sound in the HTML resource you can have sophisticated displays and graphics in your about box without any coding on your part. But there all lots more you can do.

Passing Parameters to the Dialog Box

Just displaying an HTML resource is good but sometimes you may want to do more like you may want to pass some parameters from the application (like product id, licensing etc.) to be displayed in the about box. You can pass a string type or a variant type data to the dialog box. As an example I want to pass product id, user name, company name and the application version to be displayed.

In my C++ program I would add the following code.


void CHDDemoApp::OnDemoParam1()
{
 CHtmlDialog dlg(IDR_ABOUT1_HTM, AfxGetMainWnd());
 CString str =  m_strProductID	//product ID  
  + ";"+ m_strUserName //User Licensed + ";"
  + m_strCompanyName //Company Name 
  + ";" + m_strAppVersion;
 dlg.SetParam(str);
 dlg.DoModal();
}

The C++ side is over. In the actual HTML page we are displaying we have to include some javascript/vbscript functions. If you are not familiar with IE4 DHTML you can skip this. Whatever parameter that is passed to the CHtmlDialog become the dialogArguments property of the window object in the HTML that is being displayed. So the javascript function would look something like this :

	
function getParameters()
{
 var args = new Array();
 args = window.dialogArguments.split(";");
	
 //Now display in the document
 Productid.innerText = args[0];
 UserName.innerText = args[1];
 CompanyName.innerText = args[2];
 AppVersion.innerText = args[3];
}

Note that Productid, UserName, CompanyName and AppVersion are IE4 DOM elements.

Getting Return Values From the Dialog Box

We have seen that by using both Javascript and C++ we can get something more. How about passing parameters let the user do something in the dialog as result of which we get some return values and pass it back to C++ program? As an example I let the user modify the Username an the company name in the demo program. Again we have to do something with Javascript and  with C++ as described below.

When the HTML window is being closed in the handler of onunload, we place the following code.

	
function window_onclose()
{
 window.returnValue = UserName.value + ";" + CompanyName.value;
}	
Just by setting the return Value property the value is conveyed back to C++ code. The return Value can be any variant. In our C++ code we handle return values by calling function GetReturnString or GetReturnVariant.
	
 dlg.DoModal(); //Display the dialog

 CString str = dlg.GetReturnString();
 //Now handle the return value in whatever way

Setting the Dialog Size

Upto this point the question never occured how we can set the size. In the above samples the size was set by using the following tag in the HTML

<HTML style="width: 25em; height: 30em>

CHtmlDialog provides a simple method for setting the size without specifying in the HTML tags. Just call the function SetDialogSize(int nWidth, int nHeight);  There is another function which can be used to set the size and that is SetOptions(LPCTSTR lpszOptions);. The option string is of the format "dialogWidth: xxx; dialogHeight: xxx". Refer to description of showmodalDialog function in Internet client SDK for more details.

Demo Program

The demo program illustrates all these clearly. Run the demo program. You will find a menu Demo. Select the demo which you want to see. In the Demo program I have only one HTML resource page and I adjust the contents depending on the parameters being send to the program. (A bit of Javascript). The explanation of the Demo is found in a scrolling marquee on the top of the HTML dialog you open. Just try it and see it. Feel free to consult me for any doubts.

Conclusion

My class hides all the internal details of the implementations and thus can be used without any knowledge of the functions of Internet Client SDK used. The demo program covers almost all the cases. If you don't have any idea of Jvascript or IE4 DOM it is useful to through Internet Client SDK. Together with HTML and C++ you can provide very rich GUI.

Notes

This project requires

  • 1. Internet Explorer 4.0 (or greater). (IE4.0 SP1 is recommended)
  • 2. VC++ 6.0 (or greater) or VC++ 5.0 (with Internet Client SDK)
Download demo project and source- 82 KB


Comments

  • Freeze loading several times "No Parameters" HTML Demo...

    Posted by Legacy on 10/21/2003 12:00am

    Originally posted by: Arthur

    Hi,


    I have had the same problem...
    Execute your HDDemo and select

    Demo -> No Parameters

    On Win98, after about 65 times, your HTML sample will freezes.

    On WinXP or Win2K, after about 538 times, your HTML sample will freezes.

    Is there a solution for this???

    thanks a Lot...

    Reply
  • Passing Arguments

    Posted by Legacy on 05/12/2003 12:00am

    Originally posted by: Sri Ram Kanth

    I have two user controls in the same page. i wish to pass the parameters selected in one user control to the other for displaying data. How can this be achieved.
    
    i am programming in ASP.NET

    Reply
  • How do i make it modeless browser

    Posted by Legacy on 04/29/2003 12:00am

    Originally posted by: Rajesh

    I want to use this control over the dialog box as a control so what all changes i need to make.

    Reply
  • How to display a mht file.

    Posted by Legacy on 07/26/2002 12:00am

    Originally posted by: away

    ShowHtmlDlg or CHtmlDlg can only display hta / html file.
    how to display a mht file?

    Reply
  • Changing the ICON

    Posted by Legacy on 06/08/2002 12:00am

    Originally posted by: Sukhpal Singh

    There is a way to change the icon of the HTML dialog but this involves editing the MSHTML.DLL and redistributing the DLL with your application. There are certain restrictions:
    1. You can't put the edited version of the MSHTML.DLL in you application directory you will have to place the DLL in windows\system directory, which means you have to replace the original one.
    2. Because MSHTML.DLL is used by many other applications such as internet explorer, once you have cahnged the icon in MSHTML.DLL it will change the icon in many other programs as well. This is not something the users of your application will want.

    IF you want to do it here are the steps:

    1. Download Resource Hacker at http://www.users.on.net/johnson/resourcehacker/

    2. Unzip it and run the program.

    3. Load the MSHTML.DLL by opening it from the File -> Open menu.

    4. Expand the Icon tree.

    5. Find the ie icon. Replace it by click on Action -> Replace Icon menu.

    6. Choose your icon and click replace. Click Save As from the menu. NOTE: dont' click save.

    Voila there you have it. Run your application and see it for yourself.

    PLEASE: this is not the proper way of doing it if there is a better way please let me know.

    Reply
  • Class for Displaying Modal HTML Dialogs

    Posted by Legacy on 04/10/2002 12:00am

    Originally posted by: Alia D

    Can you implement this code in Java instead?

    Reply
  • good one

    Posted by Legacy on 02/28/2002 12:00am

    Originally posted by: AMIT

    hello all;
    
    i copied this code and could easily use it for displaying an html file.
    but i wanna display the html file for a certain time say 2 minutes and then i wanna return to my dialog by calling the html resource in the on inintdialog function.

    can u tell me how to do it?.
    i also wanna know about flash programming.
    how can i use an swf file in my project.?

    also can i also use html for programming the animations?.

    thanks and regards
    amit

    Reply
  • Customize MSTML editor using VB

    Posted by Legacy on 02/18/2002 12:00am

    Originally posted by: Giri Rajan

    Hai,

    I would like to know how to set and edit properties of HTML elements Through Visual Basic. For eg i want to cahnge the size of the Text box or change Font style in text.
    i would like to have properties as we have in Visual Inter Dev or Front Page.

    Reply
  • Can't get to compile!

    Posted by Legacy on 02/07/2002 12:00am

    Originally posted by: Sibilant

    Compiling...
    StdAfx.cpp
    Compiling...
    ChildFrm.cpp
    DLGHTML.cpp
    C:\WAREZ\C++\Current sound Project\c to HTML\DLGHTML.cpp(80) : error C2664: 'long (struct HWND__ *,struct IMoniker *,struct tagVARIANT *,unsigned short *,struct tagVARIANT *)' : cannot convert parameter 4 from 'char *' to 'unsigned short *'
    Types pointed to are unrelated; conversion requires reinterpret_cast, C-style cast or function-style cast
    HDDemo.cpp
    HDDemoDoc.cpp
    HDDemoView.cpp
    MainFrm.cpp
    Generating Code...
    Error executing cl.exe.

    HDDemo.exe - 1 error(s), 0 warning(s)

    Any suggestions would be greatly appreciated.

    Sibilant

    Reply
  • My HTML is in memory, not a resource or a file

    Posted by Legacy on 12/18/2001 12:00am

    Originally posted by: Rajiv Bhagwat

    How to use this to show the HTML which has been loaded (and possibly changed) in the memory?

    Reply
  • Loading, Please Wait ...

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: August 14, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Data protection has long been considered "overhead" by many organizations in the past, many chalking it up to an insurance policy or an extended warranty you may never use. The realities of today make data protection a must-have, as we live in a data driven society. The digital assets we create, share, and collaborate with others on must be managed and protected for many purposes. Check out this upcoming eSeminar and join eVault Chief Technology …

  • Protecting business operations means shifting the priorities around availability from disaster recovery to business continuity. Enterprises are shifting their focus from recovery from a disaster to preventing the disaster in the first place. With this change in mindset, disaster recovery is no longer the first line of defense; the organizations with a smarter business continuity practice are less impacted when disasters strike. This SmartSelect will provide insight to help guide your enterprise toward better …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds