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