Creating Dialog Based Apps

8/12/2019 Creating Dialog Based Apps

1/17

Creating Dialog Based Applications with MFC 7By Jason Pursell, University of Washington, Bothell (2000-2003)[email protected] (Used by perission obtained 3!"#!0$ and adapted by %i&'i *llan)

Introduction

Windows programming involves using a graphical user interface with buttons, text areas,

radio buttons, etc. Thus, instead of having your input come from a file and your output go toa file or to the screen, you can have various kinds of graphical input and output. In a Windowsprogram, the control is very different. Instead of having a main program which controls the

actions, the control is given to the user. Thus, whenever a button is pressed or a value

entered, the program is expected to respond appropriately. This style of control is termedevent driven, and can be very different to manage.

Visual !! helps us to arrange the graphical resources "buttons, text areas, etc.# on the screen

and also aids us in mapping user actions "pressing a button, changing a text area# into

functions that the program performs. Thus, if we wanted to create a button which caused aspecific action, we would define a method "associated with the button# such as $n%utton&ress

in which we would specify what to do when the button was pressed. 'ssume this actioncauses something to be printed in a text area. In addition, we would need to know what weshould do to change the value that the program displays in the text area. This is done by

associating the text area with a variable of some type. Then, we change the variable and ask

that the system update the associated text area on the string.

In Windows programming, we are dealing with old style , so some of the data types arelimited. In this tutorial, we are also letting Visual !! control everything. We even add

global variables using button clicks. This is not necessary, but is an interesting way to

program. (ote how the integrated environment tries to save you work.

+his tutorial deonstrates ho to &reate a simpledialog based appli&ation ith ./ #and %isual tudio 1+

Note: +his tutorial is based on another one fro /odeProe&t&o, A Beginners Guide to Dialog Based Applications Part One, by 4r *sad *ltieey

The Visual Studio .NT ID

While the e5a&t vie of the 64 ay vary a bit, the parts are all the sae The !ost"rustrating thing "or !e was not to ha#e the options or #iews indicated in the

handout. The wa$s o" !anipulating the #iew are shown in %old.

This section gi#es an o#er#iew o" the #arious windows. The actual instructions"or %uilding a pro&ect are in the ne't section.
mailto:[email protected]://www.codeproject.com/dialog/dialogapptute.asphttp://www.codeproject.com/dialog/dialogapptute.aspmailto:[email protected]://www.codeproject.com/dialog/dialogapptute.asphttp://www.codeproject.com/dialog/dialogapptute.asp


2/17


3/17

. Class View

7 4isplays a prograati& vie of sybols in your &ode,for e5aple, naespa&es, &lasses, ethods, and

fun&tions Variables you have added are visible at the

bottom of this view under CProjectNameDlg

/. )esource View

74isplays the resour&e files in&luded in your proe&ts andallows $ou to get %ac0 to the Dialog ditor %$

dou%le clic0ing on IDD1ProjectName1DIA234under the Dialog la%el.

5. 6roperties indow

8 Use this indo to vie and &hange the design-tie

properties and events of sele&ted obe&ts that are lo&atedin editors and designers

Ta%le (. 64 &oponents

+he lo&ation of the ea&h of the vies (or indos) is totally dependent upon the profile

you are using +he profile &an be set fro the Start Pageunder My Profile +he StartPageusually shos hen you start %isual tudio 1+ 6 li'e the profile :tudent Windo

;ayout3,$,?@ are displayed in the saespa&e Switching %etween the #iews is done %$ clic0ing on the ta%s %elow the!

+as shown in the picture,. I" the )esource View 9/ is not present in the ta%s;$ou can also get these #iews to appear %$ clic0ing on icons that are part o" $our

ID. To see which #iews are associated with each icon; hold the !ouse o#ereach icon until the tool tips displa$. The diagra! %elow shows the icons

associated with each #iew.

+he properties indo is shon in (Figure *) +he first to on the left ust deterine

ho the ites are displayed in the list +he ne5t three deterine hat is displayedAProperties, Control Events, Messages, or Overrides(in that order) Control Events,

Messages, and Overrides are only available hen &ertain things are sele&ted .ore5aple, Figure *is hat is available hen /4ialog"4lg is sele&ted in the Class View

(as in the pi&ture of the Class Viewat the top of the page) hoever, the Overridesi&onis only shon hen a &lass is sele&ted


4/17

Figure *. Buttons of the properties indo

Creating a New 6ro&ect +and Solution,

+o &reate a ne proe&t, &hoose FileNew6ro&ect on the ain enu +he NewProjectdialog ill open ele&t Visual C


5/17

Figure . .iles &reated inside the 4ialog" solution folder hen the Create directory for Solution &he&'bo5 issele&ted

+here is also a file =eadet5t hi&h is &reated in your dire&tory 6t e5plains all of the

files that are &reated by %isual /EE

Cn the enu, &hoose Application T$pe(&ir&led in red in Figure /)

Figure /. Page one of the i9ard

Figure 5. *ppli&ation +ype page of the i9ard

/hoose the options that are &ir&led in redin Figure 5/li&' the Finishbutton

*se the lassView tab to see the actual files that have been created. The file +ialog+lg.cpp

references the 'bout+lg, +ialog'pp and the +ialog+lg class declarations.


6/17

The visual elements of a pro-ect are called resources. or example, icons, dialog boxes,

buttons, and menus are resources. The wi/ard has created folders of resources. lick on the0esource tab to see the folders.

Designing the Dialog

Note: I" the Dialog ditor is not showing; open the )esource View and e'pandthe Dialogs "older and dou%le>clic0 IDD_DIALOG1_DIALOG.

In this example, we are going to create a window like that shown in igure 1 which will help

us input names.

Figure 7. +he 4ialog ditor in a&tion

/li&' on the te5t TOO! Place dialog controls "ere, then press Delete

1e5t, as in Figure 7above, sele&t the dialog by &li&'ing on the edge of the title bar +he

dialog ill no have si9ing handles on its sides and &orners +hese are used to resi9e thedialog +he idth and height of the dialog is indi&ated at the botto-right of the 64 and

is &ir&led in bluein the diagra above +hese si9e and idths also sho the si9e of

&ontrols you ill add later

in&e e donFt need the Cancelbutton in our appli&ation, sele&t it by left-&li&'ing it on&e

+he button is sele&ted hen si9ing handles surround it Press Delete

1e5t e need to &hange soe of the properties of the 3?button

ele&t the 3?button by left-&li&'ing it on&e Figure @shos ho the Properties indorefle&ts the properties of the button hen it is sele&ted

2.

ele&tion andle+his &an be draggedto &hange the si9e ofthe dialog +heidth and height areindi&ated in arebelo &ir&led in blue

1.

/li&' the title bar tosele&t the 4ialog itself

HINT:

6nvestigate the blueline after the tutorial+ry to figure out hatit is used for 6t &anbe useful


7/17

Note:4epending on your &hoi&e of 64 setup, the properties indo ight be on the left

or right 6f it is not shoing, then &hoose View6roperties indow or press Fonthe 'eyboard

Figure @. Properties of the CD button

/hange the Captionof the button by typing Closein the value field of the /aptionproperty (as shon in Figure )

Figure . /hanging the /aption property of the button

Type in here!


8/17

1o the button on the dialog reads :/lose


9/17

Figure (. 5aple layout of the 4ialog" dialog

ere is an e5aple of the properties of the &obo-bo5 &ontrol that e added +he

properties e ill &hange are highlighted in red

Figure ((. +he properties of the 64/I+6+; &obo bo5 &ontrol

1e5t, e need to spe&ify the length of the &obo-bo5 drop don list Position the ouse

over the drop-don arro of the &obo-bo5 and left-&li&' on&e Use the blue resi9ing

handle to adust the length, siilar to Figure (* /li&' the drop don arro on the&obo-bo5 again to toggle ba&' to the noral &ontrol resi9ing ode

(otice, these values are not visible inthe dialog editor, but only show up

when you execute.


10/17

If you need a multi4line edit box, you need to make sure that you re5uest that your edit box betreated as multi4line. 0esi/e the edit box to be considerably larger. *nder the &roperties

window select 6ultiline, 3ori/ontal )croll, 'uto 3)croll, Vertical scroll, 'uto V)croll, and

Want return. When you write to this edit box, instead of -ust using \nyou must use \r\n. If

you only use \nor forget to specify the edit box as multi4line, you will get a strange symbol

instead of a newline on your screen.

Figure (*. pe&ifying the length of the open /obo-bo5 list

Assigning Me!%er Varia%les to Controls

;etFs add soe variables to tie the GU6 to the data a'e sure that the 4ialog ditor is

open and a&tive 6n order to a&&ess the#dd Mem$er Varia$le %i&ard, &hoose6ro&ectAdd Varia%lefro the ain enu ou &an also right &li&' anyhere in the4ialog ditor and &hoose Add Varia%lefro the pop-up enu +his is fine for regularold variables, but for variables that represent &ontrols, you should right-&li&' on the

&ontrol +his ay the#dd Mem$er Varia$le %i&ardill start, but it ill load up ith thefields already filled ith the default settings for that &ontrol

2 *dusts length of sele&ted drop bo5

" ;eft-&li&' to toggle the

si9ing ode


11/17

Figure (-. =ight-&li&' enu

We ill or' ith the First Na!e dit &ontrol first

6n the 4ialog ditor, right-&li&' the First Na!edit &ontrol .ro the pop-up enu,

&hoose#dd Varia$le.

*s in Figure (, a'e sure the folloing settings are present before pressing theFinishbuttonA Control varia$lechecked, Control 'to IDC1FI)STNAM,#ccessto

pri#ate, Category to Value;Varia$letype to CString, Control typeto DIT, and

Varia$le nameto !1strFirstNa!e. * ord of e5planation on &ategoryAValue means

that it will handle data values, while ontrol means that you can control some feature ofthe component itself like disabling it or setting the si/e.


12/17

Figure (. +he *dd eber %ariable Wi9ard for the .irst 1ae edit &ontrol

Use ta%le -as a guide to enter the other variables 6f the syste onFt let you enterthe values you ant, try &hanging another field first

)e!e!%erA =ight-&li&' on the &ontrol to add a variable +here are other ays, but

this is the easiest for you, be&ause it :pre-fills< soe of the fields

NoteA 64/I1*;6+ ill have to variables asso&iated ith it Cne is a /tring and

the other is a /;istbo5 * ;istBo5 is ust a &olle&tion of ites that the user &an

sele&t fro (using the ouse)

Control ID Access Varia%let$pe

Varia%le Na!e Categor$ Controlt$pe

Control#aria%le

64/I;*+1* private /tring Istr;ast1ae %alue 46+ yes

64/I+6+; private /tring Istr+itle %alue /CBCBCK yes

64/I1*;6+ private /tring Istr.ull1ae %alue ;6+BCK es

64/I1*;6+ Private /;istbo5 I1ae;ist /ontrol ;6+BCK yes

Ta%le -. +he reaining variables that need to be added via the *dd %ariable Wi9ard

's you add various controls, you may find yourself inside the code view, rather than at the

+ialog 7ditor view. To get back to the +ialog 7ditor view, sele&t the tab labeled 4ialog"r&(as &ir&led belo)

hange thisone first


13/17

If you create the variables incorrectly, one way to fix them is to -ust modify the code that thesystem created for you. "In other words, in +ialog+lg.cpp and +ialog+lg.h, find the

declarations8uses and change them.#

)tring is an old style string. 2ou can convert between strings and )trings easily. 2ou can

-ust assign a string to a )tring via assignment, but to create a )tring from a string, you

must use the converstion method c9str"#. Thus, if s is a string and cs is a )tring, cs :s.c9str"# is legal.

Adding Message andlers "or the Controls*n event handler is a ay to asso&iate a fun&tion &all ith an event su&h as &li&'ing on abutton +here is ore than one ay to add an event handler 6 ill sho a &ouple of

ays here a&h has pros and &ons

Note: =ead over %othethods first and then de&ide hi&h one you ant to use

Method 3ne=ight-&li&' on the &ontrol that you are interested in (the *dd button in this &ase), then

&hoose#dd Event (andlerfro the pop-up enu (see Figure (/) +his ill bring up theEvent (andler %i&ard +here you &an fill in the inforation

/li&' the Add and ditbutton hen done +his ill ta'e you to the nely added ethod

here you &an begin adding your on &ode


14/17

Figure (/. *&&essing the vent andler Wi9ard fro right-&li&'ing on &ontrols

Method Two+he se&ond ethod is done through the Propertiesindo and is Huite &onvenient

.irst, left-&li&' on a &ontrol to sele&t it +he Propertiesindo ill &hange to represent

the &ontrol /li&' the ControlEventsbutton (using the lightning i&on at the top) 1e5t,

&li&' on the BN1C2IC?D&ontrol event 6f you &li&' the don arro, you ill seeFigure (5 We ant to use our on nae, so instead, ust type in the field as in Figure(7

*s soon as you press nter, the ain indo ill &hange to &ode vie and the &ursorill be positioned in the nely &reated ethod aiting for you to add soe of your on

&ode

+he &ode that you ill add is on the ne5t page


15/17

Figure (5. +he default event handler fun&tion nae provided by ./

Figure (7. *&&essing the *dd vent andler through the Properties indo

1o that youFve read through both ethods, follo one to add an event handler for theAddbutton

*dd the folloing &ode to the On#ddfun&tionA

voidCDialog1Dlg::OnAdd(){ // TODO: Add your control notification handler code here

CString strTitle; int nIndex;

UpdateData(); // DDX -Transfer data from the controls to variables

//get the currently selected text nIndex !etDlgIte"Text(IDC#TIT$%& strTitle); "#str'lla"e strTitle * + + * "#str'irsta"e * + + * "#str$asta"e; "#a"e$ist,AddString("#str'lla"e);

UpdateData('A$S%); // DDX - Transfer data from variables to controls-

4onFt &hoose thisunless you ant the

fun&tion to have the

default nae

We ant to use our

on nae, so ustleft-&li&' on&e in hereand typeA On#dd

+hen press nter.


16/17

Building and )unning the 6rogra!

+o run, ust press CT)2


17/17

Co!%ining with other classes

2ou can also add additional classes for the program to use. To do this, create a .h and a .cpp

file as you normally would and add them to the pro-ect. $ne additional step is to add the line;

Creating Dialog Based Apps

Documents

Transcript of Creating Dialog Based Apps