iTunes like Find Edit Control

• Download demo project - 74 Kb
• Download source - 4 Kb

Introduction

CEditWithButton is a simple edit control class derived from CEdit (MFC) that looks like the iTunes Find Edit Control. The edit control can show an icon and a button. This class can be used when ever an edit control and a button go together. Example: Browsing a file, folder; Finding etc.

This is my first article at CodeProject. For years I have only used great code from CodeProject. I thank you all for sharing excellent code. Thank you very much. I hope to write more articles in the near future. Please do not hesitate to comment on my code. I wish to learn and improve.

Thanks to Johan Rosengren for his article An edit box with an icon. He revealed the affect of WM_SETFONT message on an edit control in this article.

Using the code

1. Defining the class

Create an edit control in your dialog box and add a variable of type CEditWithButton. If you have already added a variable which is of type CEdit, then you can just rename CEdit to CEditWithButton and #include "EditWithButton.h" at the top of the dialog header file.

#include "editwithbutton.h"

// CFindEditDlg dialog
class CFindEditDlg : public CDialog
{
.
.
protected:

CEditWithButton m_editFind;
.
.

};

2. Using the class

The class accepts 2 bitmaps. The first bitmap is drawn as a background of the edit control when it is empty. The second bitmap is drawn as a background when the edit control contains some text in it. The first bitmap is a background without the button. The second bitmap is the background with the button.

m_editFind.SetBitmaps(IDB_BITMAP_EDITBACKGROUND_EMPTY
,IDB_BITMAP_EDITBACKGROUND_FILLED);

Next, we need to set the edit area and the button area. We need to do this because only part of the edit control is editable. The left and right area are covered by the icon (magnifying glass in our case) and the button (x button in our case).

//edit area is rectangle without the icon and the button
//the white space where the user will type
CRect rcEditArea(20,4,125,17);
m_editFind.SetEditArea(rcEditArea);

//button area used to determine the mouse button click
CRect rcButtonArea(128,3,143,18);
m_editFind.SetButtonArea(rcButtonArea);

Next, when the user clicks on the button, this message is sent to the the owner in order to let it handle the button click event.

//owner window to which the button click notification will be sent
m_editFind.SetOwner(this);

//message that will be sent to the owner window
m_editFind.SetButtonClickedMessageId(WM_USER_EDITWITHBUTTON_CLICKED);

If the button exists always (even if the edit control does not have any text) then you need to set this flag to TRUE using the SetButtonExistsAlways method. This enables the class to send the button click even even when there is no text in the edit control.

In our case, we have set to FALSE because we are using it as a find edit control where in the button is hidden when the edit control is empty.

m_editFind.SetButtonExistsAlways(FALSE);

Points of Interest (Must Read)

1. In order to set the edit area for an edit control, we use the CEdit::SetRect method internally. This method succeeds only if the edit control has the multi-line style set (ES_MULTILINE). If you are inserting the edit control in a dialog, make sure the multi-line property is set to True using the resource editor. Also make sure that ES_WANTRETURN is set to False.
   
   
2. If you are creating the edit control dynamically you must set the edit control's font explicitly in order to make it work perfectly. See the following example code:

   //Get the font from the parent (typically a dialog) and set it to the
   //edit control
   m_editFind.SetFont(GetFont())

History

• 3rd August 2006: Updated the code so that the edit control can be created dynamically.
• 2nd August 2006: First public release