Customizable Alert Window

Introduction

While working on a recent project, I needed to display a notification to the user just like the one you get from Outlook when you receive a new email. Unfortunately, I couldn't find something very nice working with VS2003 or VS2005. Of course, if you're using VS2008 you get this for free from MFC, because the feature pack release (integrated in VS2008 SP1) delivers a set of classes for that. But, if you're not using VS2008, you might have a problem, just like I had. So, I decided to do something about it and the result was a set of classes that can be used to create various styles of alert windows.

Below are some samples of customized alert windows created with this small framework.

Simple mail notification Office 2003-like mail notification
Firefox 3 download completed notification Winamp new track notification

Framework Description

The classes that form this small framework are grouped in three categories:

  • The alert dialog: The base class for all alert dialogs you want to display and can be customized for the look with styles.

    Classes CMailAlert, CFirefoxAlert, and CWinampAlert from the above class diagram are not part of the framework but are sample alert dialogs from the demo application provided for this article.

  • Alert styles: A hierarchy of classes that handle the background and non-client painting for an alert dialog.

  • Alert controls: Various custom controls (label, hyperlink, picture control, push button) to be used with alert dialogs.

CAlertDialog

This is a CDialog-derived class and the base class for any alert window you want to display. It has the following features:

  • Shows a dialog on top of the task bar with blending animation for showing and hiding
  • Uses custom animation and visibility time and transparency level
  • Stays active for an indefinite period of time when the mouse is over (in which case, whenever the mouse hovers the window the visibility elapsed time is reset)
  • Moves the window with the mouse in the screen bounds (regardless of the number of monitors)
  • Can be parameterized with an alert style for painting the background and the non-client area

This class has only three public methods:

  • Show(): Shows the dialog with blending animation; you can specify the appearance time, the visibility time, the maximum opacity for the window (255 means fully opaque, 0 fully transparent), and whether the window should remain visible (fully opaque) for as long as the mouse is over it.
  • Hide(): Hides the dialog immediately, aborting any animation, if the case.
  • SetAlertStyle(): Sets the style object used for handling the background and non-client painting.

OnNcPaint() calls HandleNcPaint() on its style object, and OnEraseBkgnd() calls HandleEraseBkgnd(). When one of these methods returns FALSE, the handling for the event is delegated to the base class (CDialog).

CAlertStyle

This is a base class for all alert styles used to customize an alert window. It has the following virtual methods:

  • HandleNcPaint(): Handles the non-client painting for a window.
  • HandleEraseBkgnd(): Handles the background painting for a window.
  • OnInitialize(): Called for performing any initialization, if necessary, when creating the window.

CAlertStyleDefault

A simple style implementation that does not handle the background erasing and draws a simple edge around the alert window.

CAlertStyleOffice2003

This is an Office 2003-like alert style. It displays a blue gradient background, a black rectangle around the window, and has a small dark blue bar on top of the window.

CAlertStyleFirefox

Creates a window look similar to the Firefox download notification window, with a blue rectangle and a background in the system color COLOR_BTNFACE.

CAlertStyleWinamp

Creates a window look similar to the Winamp new track notification window, with a round black border and a grayscale gradient on the background.

CAlertLabel

This is a static control that has a transparent background. You can set a custom color for the text. By default, this color is black. It uses a cached bitmap to paint the background. When the background behind the control changes, this cache must be invalidated by calling InvalidateCachedBitmap.

CAlertHyperlink

The alert hyperlink is derived from CAlertLabel and provides the following additional features.

  • Can have different colors for displaying the text when the mouse is on the control and when it's not.
  • Can underline the text.
  • Can have a different cursor when the mouse is over the control.
  • Notifies its parent when it is clicked.

CAlertPictureCtrl

The alert picture control (derived from CAlertLabel) displays an image that can be transparent. It has the following features:

  • Can display either an icon or a bitmap.
  • Can use a transparent color to draw the image.

CAlertButton

The alert button is a push button that has the following features:

  • Is always flat.
  • Can have a bitmap or icon, which is always displayed in the middle of the client area.
  • Can specify a transparent color for drawing the image.
  • Can specify a highlighting color for drawing the background when mouse is over the control.
  • Notifies its parent when it is clicked.

CAlertButtonClose

The close alert button is an alert button that displays an X sign for closing (and does not require are icon or bitmap resource for that).

Customizable Alert Window

How to Use the Framework

The following image shows what controls were used to create the email alert window.

[alert_details.png]

You have to do the following:

  • Create a dialog template (no border) and add static controls (for labels or hyperlinks), buttons, or picture controls, appropriate to your needs.
  • Add a class (derived from CDialog) from the dialog templace.
  • Include "AlertDialog.h" in your class header, and change the base class from CDialog to CAlertDialog.
  • For each customized control (alert control) that you want on your alert dialog, add a variable with the DDX mechanism. For instance, for a label that you want to display a title, do the following:
    • Include "AlertLabel.h" in your dialog class header
    • Add a variable of type CAlertLabel to the class
    • CAlertLabel m_ctrlTitle;
    • associate the variable with the control in DoDataExchange:
    • void CDemoAlert::DoDataExchange(CDataExchange* pDX)
      {
         CAlertDialog::DoDataExchange(pDX);
      
         DDX_Control(pDX, IDC_STATIC_TITLE, m_ctrlTitle);
      }
      
  • If the background of your alert window changes, you must override OnInvalidate and call InvalidateCachedBitmap() for all labels, hyperlinks, picture controls, and buttons.
  • void CDemoAlert::OnInvalidate()
    {
       m_ctrlTitle.InvalidateCachedBitmap();
    }
    
  • If you want to be notified when a hyperlinked or button was clicked, handle the appropriate message defined in "AlertMessages.h".
    • In your class, add handlers for the messages:
    •    afx_msg LRESULT OnHyperlinkedClicked(WPARAM wParam,
                                              LPARAM lParam);
         afx_msg LRESULT OnButtonClicked(WPARAM wParam,
                                         LPARAM lParam);
      
    • Add the appropriate handlers to the message map:
    • BEGIN_MESSAGE_MAP(CDemoAlert, CAlertDialog)
         ON_MESSAGE(WMA_HYPERLINKCLICKED,
                    &CDemoAlert::OnHyperlinkedClicked)
         ON_MESSAGE(WMA_BUTTONCLICKED,
                    &CDemoAlert::OnButtonClicked)
      END_MESSAGE_MAP()    
      
    • Implement the handlers; usually, you might want to send a message to the parent window notifying that a certain button or control was clicked. The following code hides only the alert window.
    • LRESULT CDemoAlert::OnHyperlinkedClicked(WPARAM wParam,
                                               LPARAM lParam)
      {
         Hide();
      
         return 0;
      }
      
      LRESULT CDemoAlert::OnButtonClicked(WPARAM wParam,
                                          LPARAM lParam)
      {
         Hide();
      
         return 0;
      }
      
  • By default, CAlertDialog handles WM_LBUTTONDOWN and WM_LBUTTONUP to allow you to move the window with the mouse. If you don't want this behaviour (perhaps you want to close the window when the user clicks on it), handle these messages in your derived dialog class and take the appropriate action. You can see an example in the demo application in CWinampAlert.

You can see more examples on how to use these classes in the demo application.

Demo Application

This article is accompanied by a demo application that creates three different alert windows: an email notification, a Firefox-like alert, and a Winamp-like alert (you can see screen shots at the beginning of the article).

[demoapp.png]

From this demo application, you can customize:

  • The animation time (for showing and normal hiding) in milliseconds.
  • The visibility time (interval between showing animation ends and hiding animation starts).
  • Maximum opacity when the showing animation ends, in percentage (0 - 100). 100 means the window is fully opaque.
  • Whether the window should become fully opaque (if not already) when the mouse is over it and keep it visible until the mouse leaves it; in this case, when the mouse leaves the window, the visibility timer is restarted.

Notes

You can use the code provided with this article, modify it, or extend it in any kind of application (free or commercial) as long as you keep the copyright notice. If you create new controls or features and are willing to make them available to others, feel free to contact me to integrate them with the present code.

Special Thanks

Parts of the code were taken from or inspired by the following articles and posts:



About the Author

Marius Bancila

Marius Bancila is a Microsoft MVP for VC++. He works as a software developer for a Norwegian-based company. He is mainly focused on building desktop applications with MFC and VC#. He keeps a blog at www.mariusbancila.ro/blog, focused on Windows programming. He is the co-founder of codexpert.ro, a community for Romanian C++/VC++ programmers.

Downloads

Comments

  • There are no comments yet. Be the first to comment!

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

Top White Papers and Webcasts

  • Best-in-Class organizations execute on a strategy that supports the multi-channel nature of customer requests. These leading organizations do not just open up their service infrastructures to accommodate new channels, but also empower their teams to deliver an effective and consistent experience regardless of the channel selected by the customer. This document will highlight the key business capabilities that support a Best-in-Class customer engagement strategy.

  • As mobile devices have pushed their way into the enterprise, they have brought cloud apps along with them. This app explosion means account passwords are multiplying, which exposes corporate data and leads to help desk calls from frustrated users. This paper will discover how IT can improve user productivity, gain visibility and control over SaaS and mobile apps, and stop password sprawl. Download this white paper to learn: How you can leverage your existing AD to manage app access. Key capabilities to …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds