A quick way of implementing a Pocket Outlook - type letter strip

• Download source files - 2.73 KB

Introduction

This article presents a very quick implementation of the "Letter Strip" control found in Pocket Outlook. It is a very simple control that allows the user to select or find the information on a list, by clicking on one of the nine letter areas. The behavior that Pocket Outlook implements is to find all the records that start with the given letter. To choose another letter in the same group, the user clicks the same area, and the control loops in a circular fashion through all three letters.

Implementation

This is a "quick and dirty" implementation of the control in MFC. It is so quick and dirty that the image of the strip is a bitmap that was acquired through Remote Zoomin. I hope this means no copyright infringement...

As for the "control" itself, it is a CWnd-derived class that paints itself with the bitmap. As you will see, this means that the control is not self-contained, because it depends on an externally provided bitmap resource ID (it is very easy to go around this).

Using the CLetterStrip class

In order to use the CLetterStrip class, you only need to include the header file, and create the window, using:

BOOL Create(DWORD dwStyle, CPoint pt, CWnd *pParentWnd, UINT nID);

For instance:

dwStyle = WS_CHILD | WS_VISIBLE;
m_wndStrip.Create(dwStyle, CPoint(0, 0), pParentWnd, ID_LETTERSTRIP);

When the user clicks the strip, it will calculate the appropriate letter, and will report to its parent window, an ON_COMMAND message. The handling is typically:

ON_COMMAND(ID_LETTERSTRIP, OnLetterStrip)

When handling the command, you query the selected letter like:

TCHAR szLetter[2] = {0, 0};

szLetter[0] = m_wndStrip.GetOption();

Limitations and future enhancements

Well, this is a very simple implementation of the control. As I said before, it is not self-contained and this may well be a nuisance. Reporting the selected letter is made through an MFC call. In future versions, the window will support a message to return the selected letter. The control provides no positive feedback (just like the one in Pocket Outlook). A sound message can be included, but a really nice feature would be to provide immediate visual feedback. This would be done by drawing the selected letter in a different color. Well, that would mean dropping the bitmap nonsense as well and drawing the whole thing (and then it would also be self-contained, as well). Finally, this has NOT been tested with dialogs.

Nevertheless, I'm publishing this measly piece of code because it is already working for me. So why shouldn't it work for you as well? (You can always wait for the next version...)