HTML List control

When a site reader suggested that I created a grid control, I despaired for a brief moment. They require lots and lots of confusing GDI calls and layout code. In addition, they are a nightmare to maintain. Moreover, there are several nice free MFC grid controls on source sharing sites such as codeproject.com.

I work as a java programmer in the real life and I hardly do any C++ development there. On the other hand, I get to do a lot of DHTML and web stuff, so I immediately thought of the recent Microsoft apps that use DHTML as user interface. Like the Windows Explorer, SQL Server 7, MS Outlook Express and even the little Add/Remove Programs control-panel applet in Windows 2000.

I like the Add/Remove Programs applet. Now there's two simple list controls that look neat - and they are written in DHTML using MS IE as layout engine. With a list control like that, you can tweak out any cool layout, mouse-over effect, fade, slide-out effect, font effect etc. etc. You have more choices and better control than any grid control I know of.
So here is my first HTML control for WTL.

HTML List

At first sight, the HTML List control behaves like an ordinary ListBox control. It has a similar API. The main difference is that it is really a web browser window presenting the list items. Clicks and mouse events are generated by Internet Explorer and some DHTML scripting. Events are then sent back to the C++ class and back to the application code as WM_NOTIFY messages. The application can manipulate the list items, but must use the MS IE HTML interfaces, such as the IHTMLElement interface, or have DHTML scripts on the HTML page execute the changes.

This is not a lightweight control! Of course you will carry the burden of loading MS Internet Explorer into your application. It's a horrible waste of resources just to get a list control running... but the result looks nice.

How to use it

To use it, place a Web Browser control (ActiveX) on your dialog. You do this in the resource editor of Visual C++ v6 by right-clicking on the form and choose "Insert ActiveX control...". Then find the Microsoft Web Browser item.
Add a member variable to your dialog implementation file...

CHTMLList m_list

In the OnInitDialog() event handler, add the following line:

LRESULT OnInitDialog(UINT /*uMsg*/, 
                     WPARAM /*wParam*/, 
                     LPARAM /*lParam*/, 
                     BOOL& /*bHandled*/)
{
  ...
  m_list.SubclassWindow(GetDlgItem(IDC_LIST1), IDR_HTML);
  ...
}

The IDR_HTML is the HTML resource identifier, which contains the HTML code the control is build from (explained below).

Add items to the control using

  m_list.AddString("<b>my item text</b>");

Notice how the item text can contain HTML. It may even contain scripting code.

The list is build from pure HTML. You can add script code and style sheets as you wish - but you must provide a basic framework for the control to work with.
At least this snippet of HTML is required:

<HTML>
<HEAD>
<STYLE>
  BODY { background-color: threedface }
</STYLE>
</HEAD>
<SCRIPT FOR=document EVENT=onreadystatechange>
if(document.readyState=="complete") 
  window.external.OnInitialize();
</SCRIPT>
<BODY SCROLL=no>
<DIV ID=outer>
  <DIV ID=inner></DIV>
</DIV>
</BODY>
</HTML>

Make sure to add it under the HTML resource type in the resource list. That is... right click on the root of the resource list and choose "Insert" and then choose "HTML".

The control sends a few notifications back to the owner window. It sends information about the HTML elements affected in the WM_NOTIFY notification structure: NMHTMLLIST. The list of notifications currently include:

HLN_INITIALIZE
HLN_SELCHANGING
HLN_SELCHANGED
HLN_MOUSEOVER
HLN_MOUSEOUT
HLN_INSERTITEM
HLN_DELETEITEM
NM_HOVER
NM_CLICK

The HLN_INITIALIZE notification is generated when the control is ready to accept input. Do your data initialisation there.

The HTML can include script code that calls methods inside the C++ control. This is done using my ATL Dynamic Dispatch classes. The script code uses window.external.Method() syntax to communicate with the C++ code.
The sample you can download below contains the simulations of the two list controls in the Add/Remove Programs applet. They demonstrate how to set up the control, use notification messages and how to call methods back inside the script code.

Notes

The original Add/Remove Programs applet can be inspected in the system file appwiz.cpl. It is a so called "HTML application" (HTA).

Source Code Dependencies

Internet Explorer 4 or better
Microsoft Visual C++ 6.0
Microsoft WTL 3.1 Library
Microsoft ATL Library

Download Files

Source Code and sample (60 Kb)

Written by Bjarke Viksoe.
Article submitted 6/12/2001.

To the top