Hybrid Edit Control that Combines Prompt Text and Edit Control


This article was contributed by Tom Archer.

Initialized dialog (before user has input any data). Notice prompts inside edit controls that relieve dialog designer of having to place static controls on dialog (or view).

Introduction

If you've ever used Intuit's Quicken or Peachtree's Accounting for Windows, you may have noticed something called a "grey edit control" on some of the dialogs and views. As you can see in the figure above, a grey edit control is one in which the text is grey and italicized until the control has focus or until data has been entered into the control. Where this little control becomes useful is in situations where there is simply no room on the dialog (or view) for a static control telling the user what information is required. An example might be the address portion of a form where the controls are "nestled" so closely together that any attempt at placing static controls near the edit controls would look awful. Another great example of where this control is useful is when you want your dialog (or view) to (as closely as possible) represent an actual paper document such as an invoice or purchase order.

Rules for Display

Rules are set so that the user can tell a prompt from "real" data:
  • If the field has a value, then display that value
  • If field has focus and no value, then display a blank
  • If field does not have focus and has no value, show prompt (in italics) so that user knows what is needed.
Using the grey edit control, the programmer can have the control's prompt be displayed in the edit control itself. As you can see above, the rules that are used for displaying the data are very simple. The grey and italicized font lets the user know that what they are looking at is a prompt and not the data itself. After the control receives focus, the grey text disappears so that the user is not distracted. When the control loses focus, whether or not the grey text returns depends on whether the user typed any information into the control.

Using the CGreyEdit Control

To use the CGreyEdit control, all you need to do is instantiate it and call its Init method function.
BOOL CGreyEdit::Init(UINT uiControlId, 
                     CWnd *pParent,
                     const char*lpszDefaultText,
                     COLORREF lBackgroundColor,
                     UINT uiAlignment)
where
  • uiControlId - Resource ID of the edit control you want to subclass
  • pParent - Parent window of the control
  • lpszDefaultText - Default, or prompt text, to be displayed until control has focus or user has entered data into the control
  • lBackgroundColor - This value defaults to COLOR_WINDOWTEXT and represents the controls background color
  • uiAlignment - Valid values include TA_CENTER, TA_LEFT or TA_RIGHT. Defaults to TA_LEFT

To use the control, smply create a member variable of type CGreyEdit in your dialog or view class. Then call the object's Init function. Here's an example of doing this:
BOOL CGreyEditTestDlg::OnInitDialog()
{
 //...
 m_editName.Init(IDC_EDT_NAME, 
                 this, 
                 _T("Last Name, First Name"),
                 RGB(255,0,0));
 //...
}

Downloads

Download demo project - 15 Kb
Download source - 3 Kb


About the Author

Tom Archer - MSFT

I am a Program Manager and Content Strategist for the Microsoft MSDN Online team managing the Windows Vista and Visual C++ developer centers. Before being employed at Microsoft, I was awarded MVP status for the Visual C++ product. A 20+ year veteran of programming with various languages - C++, C, Assembler, RPG III/400, PL/I, etc. - I've also written many technical books (Inside C#, Extending MFC Applications with the .NET Framework, Visual C++.NET Bible, etc.) and 100+ online articles.

Comments

  • Exactly what I needed, but...

    Posted by Legacy on 07/17/2002 12:00am

    Originally posted by: Uwe

    Hi Tom,

    this code is really great, thank you!!!

    But the background and text colors don't change (only on WinNT???). The text is always black, the background is always white. The OnCtlColor doesn't get called to change the colors. How can I fix this problem?


    Regards
    Uwe

    Reply
  • ExEditors Library

    Posted by Legacy on 03/19/2002 12:00am

    Originally posted by: Mike Philips

    A complete collection of editors in a single file:
    
    

    http://www.exontrol.com/sg.jsp?content=products/exeditors

    Regards,
    Mike

    Reply
  • More controls like this if people are interested...

    Posted by Legacy on 05/21/2000 12:00am

    Originally posted by: Tom Archer

    I have lots of little controls like this and will post more if I think people would get any use from them. For example, I have a CUnderLineEdit that basically looks like the underline you might see on a form for a signature and date. I also have a CPageCtrl that looks like a 3D sheet of paper drawn on a dialog (used to present form-like UIs such as Invoice and Purchase Orders).

    Anyway, like I said, I have lots more little UI gadgets that I can post if people are interested in me posting them.

    Tom Archer
    Web Master - CodeGuru

    Reply
  • Nice!

    Posted by Legacy on 05/18/2000 12:00am

    Originally posted by: Abu W.

    Nice way to save space!

    Reply
  • Great work!!

    Posted by Legacy on 05/17/2000 12:00am

    Originally posted by: Richard

    This is one of those controls you don't realize you need until you see it!! Thanks and great work!!

    Richard

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

Top White Papers and Webcasts

  • On-demand Event Event Date: September 10, 2014 Modern mobile applications connect systems-of-engagement (mobile apps) with systems-of-record (traditional IT) to deliver new and innovative business value. But the lifecycle for development of mobile apps is also new and different. Emerging trends in mobile development call for faster delivery of incremental features, coupled with feedback from the users of the app "in the wild." This loop of continuous delivery and continuous feedback is how the best mobile …

  • Not all enterprise applications are created equal. Sophisticated applications need developer support but other more basic apps do not. With the right tools, everyone is a potential app developer with ideas and a perspective to share. Trends such as low-code development and model driven development are fundamentally changing how and who creates applications. Is your organization ready? Read this report and learn: The seven personas of enterprise app delivery How application ownership is spreading to the …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds