XHTMLTipOfTheDay - HTML Tip of the Day Dialog

• Download demo project - 68.7 Kb

Introduction

My Product Manager recently told me that he wanted to improve the friendliness of our products. He went on to explain that he liked the idea of displaying a tip of the day when the application starts, like what WinZip does:

Which is OK, he said, but boring - just plain text with no formatting and no hyperlinks. So I tell him, no problem! - because I see that I can use my XHTMLStatic control to display the HTML. Throw in my XGlyphButton for some nice forward and back buttons, and the dialog will look really nice.

Implementation Notes

Dialog Design

I have to admit, I didn't start from scratch. I started with the Tip of the Day component from the Visual C++ Component Gallery. This dialog looks like this:

I changed the dialog so that there are four areas, each defined as a STATIC control in the dialog resource: the side panel, the lightbulb, the header, and the tip. The side panel and the lightbulb STATICs are used as placeholders for retrieving the RECT. They are hidden by XHTMLTipOfTheDay. The side panel is painted with COLOR_BTNSHADOW. The header and tip STATIC controls are subclassed as CXHTMLStatic. This is my new dialog with the four STATICs outlined in red:

Tip File Structure

The Tip of the Day component adds code to your project that will read and display tips from a flat text file. Each line of the file is one tip. Blank lines and comment lines are skipped. Here is part of the tips file for XHTMLTipOfTheDayTest:

; Copyright (C) 2004 BozoSoft, Inc.
; All Rights Reserved.

Welcome to the BozoSoft Primo App.  This is the first tip in the 
tips file.  This is the welcome tip, and will only be shown once.
<br><br><b><font size="+6" color="blue">m_nTipNo = 0</font></b>
<br><br><font size="+2" color="#ff9900"><b><u>
<a href="app:WM_APP_COMMAND">Click here to see who wrote 
this</a></u></b></font>

This is the second tip in the tips file.
<br><br><b><font size="+6" color="blue">m_nTipNo = 1</font></b>
<br><br><br><br><font color="navy"><u><a href="app:WM_APP_COMMAND">
More information</a></u></font>

Each tip in the file must be a single line with no line breaks. The blank lines are included only for readability.

XHTMLTipOfTheDay uses the same file format as the VC++ component. In the file, the first tip is the welcome tip. It is shown only once. After that, only the second through the last tips are displayed, with wrapping when the last tip, or the second tip, is reached.

Tip Header

The welcome tip has its own Welcome header, as shown above. Subsequent tips are displayed with the header Did you know..., like in the following:

Hyperlinks

Each of the tips in the demo app shows an APP: hyperlink, which allows the parent of the CXHTMLTipOfTheDayDlg dialog to process user clicks - to show more information, open a help file topic, etc. Regular HREF hyperlinks may also be used to link to a web site or send email.

Tips File Custom Resource

In the demo app, the text for the tip file is included as a custom TIPS resource:

////////////////////////////////////////////////////////////////
//
// TIPS
//

IDR_TIPFILE  TIPS  MOVEABLE PURE  "XHTMLTipOfTheDayDlgTest.tip"

This resource is extracted and written to the file Tips.tip with CreateFileFromResource():

DWORD CreateFileFromResource(
         UINT nID,                          // resource id
         LPCTSTR lpszResourceType,          // resource type
         LPCTSTR lpszFile,                  // output file name
         LPCTSTR lpszDirectory /*= NULL*/,  // directory path
         BOOL bOverWrite /*= FALSE*/)       // TRUE = overwrite existing file

Of course, you do not have to use this technique for generating the tips file - you can just have your installation package place the tips file in the app directory.

Demo App

The Test Again button will display the Tip of the Day dialog at the next tip.

The Test Again - Force Display button will display the Tip of the Day dialog after you have unchecked the Show tips at startup checkbox. You may want to do this if you have added Tip of the Day to the help menu of your app.

The Test Again - Start at Welcome tip button opens the Tip of the Day dialog at the first tip in the tips file, which is the welcome tip.

How To Use

To integrate XHTMLTipOfTheDay into your app, you first need to add the following files to your project:

• XHTMLTipOfTheDayDlg.cpp
• XHTMLTipOfTheDayDlg.h
• XHTMLTipOfTheDay.rc
• XHTMLTipOfTheDayRes.h
• XHTMLStatic.cpp
• XHTMLStatic.h
• XNamedColors.cpp
• XNamedColors.h
• XGlyphButton.cpp
• XGlyphButton.h
• lightbulb.bmp

If you want to use CreateFileFromResource(), you should also add CreateFileFromResource.cpp and CreateFileFromResource.h.

You also need to add XHTMLTipOfTheDay.rc to your project .rc file - go to View | Resource Includes... and in the bottom listbox, scroll down to the end. Insert #include "XHTMLTipOfTheDay.rc" right before the #endif:

Then add XHTMLTipOfTheDayDlg.h to your source file, and you can display the XHTMLTipOfTheDay dialog like this:

    CXHTMLTipOfTheDayDlg dlg(_T("Tips.tip"));
    dlg.SetAppCommands(AppCommands, 
            sizeof(AppCommands)/sizeof(AppCommands[0]));
    dlg.DoModal();

Note that XHTMLTipOfTheDay expects to find the tips file in the application directory.

Revision History

Version 1.0 - 2004 June 15

• Initial public release.

Usage

This software is released into the public domain. You are free to use it in any way you like, except that you may not sell this source code. If you modify it or extend it, please to consider posting new code here for everyone to share. This software is provided "as is" with no expressed or implied warranty. I accept no liability for any damage or loss of business that this software may cause.