Introduction
to Computer Grapics


1999 Spring Quater


Adding controls to Dialog Boxes

The point of this assignment isn’t to learn MFC’s, it to learn the fundamentals of OpenGL. This tutorial will tell you everything you need to know about adding controls to the BrushDialog, or in other words learn as little about MFC's as you can.

 

All of our work will be done in the CBrushDialog class and IDD_BRUSH dialog window.

 

 

Note: To properly see these images, print this document out.

The first thing you need to do is open up the brush dialog. Do this by going to ResourceView in the workspace window, opening Dialog, and selecting IDD_BRUSH. This is illustrated in the above picture. You’ll now see the dialog box editor, and a palette of controls that you can add to your dialog box. By dragging a control from the palette to your dialog box, you can create new controls. Let’s do just that.

  

We’ll select the slider control and drag it onto our dialog. Voila, we have a slider. Now right click on it to bring up the Slider Properties window. This is a bunch of properties of the slider that let us control its identification and appearance. Right now we’re interested in the ID, which is the unique name of our object. It’s default name is IDC_SLIDER1, so let’s change that to something more memorable. Rename it IDC_LINE_WIDTH.

Clicking on the Styles tab will let you modify the style of the slider. You can turn on tick marks, change the shape of the slider, and a couple of other things. Look at the properties of the existing Size slider for inspiration.

If you turn on tick marks but they don’t seem to show up, then you simply need to enlarge the size of the control. It’s lame, but the default size of the slider is too short to show the tick marks.

Now let’s setup some text in the dialog box to tell the user what kind of slider this is.We’re now going to add two static text controls. The first will just be the name of the control, and the second will reflect the current value of the slider. To do that we’ll have to write some code in BrushDialog.cpp that will change the text whenever the slider moves, but we’ll worry about that later. Drag two static text controls onto the dialog box, and position them to the left and right of the slider.

 

Now we have to set them up (much like the slider). Once again, right click each control and open up its properties. This properties box contains a caption text box, which you want to make say Line Width. Next, change the ID to something like IDC_LINE_WIDTH_TEXT. We’re not going to interact with this text (it never does anything but sit there), so the ID doesn’t much matter. Do the same for the text on the right, giving it an ID such as IDC_LINE_WIDTH_VALUE. Don’t bother changing the caption, it’s going to change every time we move the slider, and we take care of that in BrushDialog.cpp.

Now we’ve got our new slider in place. The next step is to setup it’s attributes, such as max/min values and the number of tick marks to display. Open up BrushDialog.cpp and go to OnInitDialog. This function is called when the dialog is first created, and is the perfect place to setup our slider.

The last section of code in that function sets up the attributes for the length slider. We’re going to copy that code to setup the attributes for our slider. But first, we need to add some variables. Go to BrushDialog.h and add the following variables:

int m_nLineWidthMin;
int m_nLineWidthMax;
int m_nLineWidthTicFreq;
int m_nLineWidth;

Next, go to the constructor in BrushDialog.cpp and give these variables some initial values.

m_nLineWidthMin = 1;
m_nLineWidthMax = 10;
m_nLineWidthTicFreq = 1;
m_nLineWidth = 1;

Now go back to OnInitDialog and modify your code to look like this:

 

We’ve now setup our slider with the attributes we chose. The last two lines of code we added may seem a bit puzzling:

str.Format( "%d", m_nLineWidth );

Remeber how we want the text to the right of the slider to show its current value? These lines do that . Once we add code in OnHScroll to do this when the slider changes, that text will always reflect the current value of the slider.

 

Now we have a slider that will display itself properly, but doesn’t do anything. So how do we interact with it? The general method is to add a new message handler through the class wizard. Pressing Ctrl – W (or right clicking anwhere on the dialog box and selecting ClassWizard from the pop-up menu) will bring up the ClassWizard. You can look at it right now to get an idea of what it is, but we’re not going to use it for a while.

However we’re not going to do that. It turns out that we lucked out. When the author of this program made the first slider, he set up a message handler for the WM_HSCROLL message. The WM_HSCROLL message is triggered every time someone moves a slider, and that includes ours. It’s set up to call the function OnHScroll in BrushDialog.c, so we can just use that function to detect when our slider has moved.

Let’s look at it now.

The first line of this function figures out which slider just moved, and sets up a pointer to it. The rest does certain actions based on which slider we’re pointing to. We’re going to add a new case statement for the ID of our slider, and make it do what we want. Insert the following code:

case IDC_LINE_WIDTH:
m_nLineWidth = pSlide->GetPos();
str.Format( "%d", m_nLineWidth);
SetDlgItemText(IDC_LINE_WIDTH_VALUE, str);
TRACE("The new value of the line width is %d \n", m_nLineWidth);

break;

Here’s how it looks:

Whenever our slider is moved, our case statement will be executed. We then grab the value of the slider and store it in m_nLineWidth, as well as update the string at the end of our slider. Now the value of our slider is stored properly and displayed properly.

TRACE is a macro that will send text to the output window in Visual Studio when you’re debugging. You don’t have to put that in there; I just added it for kicks. It is a very useful macro to know.

Congratulations! BrushDialog now contains a fully functional slider. Now all you have to do is give other classes a way to access it. This was done for the length slider through functions like GetSize, so you can just copy those. This tutorial draws the line at telling you how to do that.

 

Adding a combo box

I’m not going to go into the details of setting up attributes for a combo box. Look at the existing one to figure out how to do it.

Adding a combo box is virtually identical to adding a slider. However this time you can’t use the message that somebody else already wrote. We’re going to have to go into the ClassWizard and add our own message handler.

This isn’t very hard at all. Start by adding a combo box to your dialog (mine is named IDC_MY_CBOX), then right click on it and select ClassWizard. Or press Ctr-W to bring up the ClassWizard.

 

There are several windows in the ClassWizard, but we’re only going to deal with two of them. Object ID’s is a list of all the objects in the program. This includes our combo box. Select it – it may already be selected, but if not just find IDC_MY_CBOX. The window labeled Messages is a list of all the events this type of control can respond to. We’re interested in CBN_SELCHANGE, which is a message that’s triggered every time a new object is selected from the combo box. Click on the CBN_SELCHANGE, which will enable the button AddFunction. AddFunction will make a new function that will be called every time this event is triggered. Press it, and choose a suitable name for the function.

 

Click OK, and the ClassWizard will add the function to your CBrushDialog class. Click on the Edit Code button, and you’ll jump directly to the new function.

 

Now modify the code to do what you want, and you’ve got a fully functional Combo Box.

 


Questions or comments, send e-mail to Kevin Audleman kforbes@cs.washington.edu