CzęŚĆ II
Okna dialogowe i
kontrolki


Rozdział 3
Projektowanie i tworzenie okien dialogowych
Modyfikacja istniejących okien dialogowych i tworzenie szablonów
Ustalanie sposobów wyświetlania okien dialogowych i przycisków
kontrolnych_______________________________
Praca z edytorem zasobów; pozycjonowanie przycisków kontrolnych
Przypisywanie funkcji elementom okna dialogowego
Okna dialogowe są jednym z najintensywniej wykorzystywanych elementów konstrukcyjnych w
aplikacjach dla Windows, ponieważ dostarczają wielu możliwości kontrolowania pracy programu. Mogą
one ograniczać się jedynie do przekazywania użytkownikowi pewnych treści, jak mogliśmy się
przekonać na przykładzie funkcji MessageBox (), wywodzącej się z biblioteki MFC. Jednakże najczęściej
przydzielanym zadaniem oknom dialogowym jest pobieranie od użytkownika informacji dla rodzimej
aplikacji. Zwykle użytkownik może zaaprobować lub dezaprobować wprowadzone przez siebie dane.
Dezaprobata wywołuje zamknięcie okna, tak jakby w ogóle nie zostało otwarte. Zatwierdzenie danych z
kolei, powoduje określone działanie aplikacji przy wykorzystaniu dostarczonych przez użytkownika
danych oraz najczęściej, chociaż nie zawsze, zamknięcie okna dialogowego.
Tworzenie okien dialogowych używanych przez aplikacje powstające w Visual C++ odbywa się w
dwóch etapach. Pierwszym z nich jest etap projektowania okna. Wykorzystywany jest do tego szablon
okna, do którego włączane są konieczne kontrolki. Drugim etapem natomiast jest etap programowania,
podczas którego dochodzi do programowego połączenia okna dialogowego i jego elementów z klasami i
funkcjami w kodzie C++. Pierwszy z powyższych etapów (projektowy) może przebiegać bez
konieczności wpisywania choćby jednej linii kodu i jest tematem właśnie niniejszego rozdziału.


58 Poznaj Visual C++ 6
Tworzenie szablonu okna dialogowego
Jakkolwiek możliwe jest zaprojektowanie i utworzenie w Developer Studio okna dia-
logowego bez uprzedniego tworzenia projektu, to jednak bardziej naturalne jest umieszczanie
nowych okien lub ich edycja w istniejącym projekcie. Użyjemy teraz narzędzia AppWizard,
by utworzyć projekt nowej aplikacji opartej o okno dialogowe. Podczas procesu prześledzimy
pewne opcje dostępne w tym narzędziu.
AppWizard jako punkt startowy dla nowej aplikacji
AppWizard jest potężnym narzędziem używanym do tworzenia nowej, działającej aplikacji.
Pozwala określać wiele szczegółów dotyczących projektu, zapisując je następnie w plikach
źródłowych, które sam tworzy. Aplikacje uzyskane w wyniku działania AppWizard są w
pełni funkcjonalne i mogą zostać uruchomione bez dodawania choćby najmniejszej porcji
kodu.
Tworzenie projektu nowej aplikacji z interfejsem okna dialogowego
1. Kliknij menu File, a z niego wybierz pozycję New.
2. Wskaż kartę Projects i z listy typów projektów wybierz MFC AppWizard (exe).
3. Kliknij w oknie Project Name i wpisz nazwę projektu: Person. Okno New widoczne na
ekranie powinno wyglądać tak jak na rysunku 3.1.


M
l
9

Filet Projectt Workspaces j Other Documenti |


^ATLCOMAppWeard ^|Win32 Static Library Pt0|ect name:


3ciuste[ResourceTypeWizaid [Person
3 Gustom AppWizard ii...,! ;� i.:,:::; ;-:^- �i::":!!;!; :
igm"t"h,�P,npr-l


�.DevS>udioAdd-inWi2ad ,: C: Program Files\Micr�BoftVisua J ^'ElltendedStoiedPfocWizaid
''i,:'':, i:' filSAPIEntensionWizałd ^ .'l'" :-!";::; '^: E-IMakefile (T Craate new worisspace
8gMFCActiveXControlWizard r -;;j3 �.-;"!i .::�!,p^.; :: ż|MFCAppWi2ard(dll) 1" !:';:,.:-ns��,; . ..f
^airaft^fflJffl "-".- ...""", ...^,


jS: N ew D atabase Wisard � y j Utiiity PtojecI
3Wi"32Application , ";, .":.::l,i,:1;!1:.-:^ ,"":1::!, 'i;:.:' '.,:;:" ",,� ; ^]Win3-.r,nTOlpApplirafcn
^EI^W^a^liiailsfi&^Jiffliaaa^ s


�Ł]Win32Dynamic-Link.Library fdWin32 - -









^iSs.1^ 1 ii
.ali'.:: :.: . .. 1 1 ' OK 1 | Cancel
,3;:":;:- / , '-iiiiiiul i

Rysunek 3.1. Tworzenie nowego projektu


Projektowanie i tworzenie okien dialogowych 59
4. Kliknij OK. Powinieneś ujrzeć okno dialogowe MFC AppWizard - Step l.
5. Zaznacz przełącznik opcji Dialog Based.
6. Kliknij Next, a przeniesiesz się do kolejnego okna dialogowego, MFC AppWizard -Step
2.
W ostatnio otwartym oknie, reprezentującym drugi krok procedury tworzenia nowego
projektu, możemy modyfikować i dopasowywać do naszych potrzeb elementy aplikacji,
zanim jeszcze zostanie utworzona. Na ilustracjach w lewej części okna możemy
obserwować skutki czynionych przez nas wyborów poszczególnych elementów wizu-
alnych interfejsu. Możliwa jest również zmiana tytułu głównego okna dialogowego naszej
aplikacji. Pozostałe opcje służą bardziej zaawansowanym ustaleniom. Upewnijmy się, że
ustawienia opcji w naszym programie są jednakowe z widocznymi na rysunku 3.2.







What featutes would you like to include?
V' AboulboK P Conte!What other suppott would you like to include?
P Automation f? Active>i; Eontrols
Would you like to include WOSA support? r"
Windows Sockets
-lsi pjeasa enter a title for youi dialog;
Person
Next > Einish Cancel





Rysunek 3.2. Wybór opcji dotyczących funkcjonalności okna
7. Kliknij Next. Otwarte zostanie okno dialogowe MFC AppWizard - Step 3.
W ramach trzeciego kroku AppWizard zapyta nas, czy ma umieścić wewnątrz kodu swoje
komentarze. Ułatwiają one późniejszą orientację, w którym miejscu powinniśmy dopisać
własną część kodu. Wskazane jest udzielenie odpowiedzi Yes, Please.
AppWizard tworzy program wykorzystując bibliotekę MFC w postaci plików DLL
(Dynamie Link Library). Sprawia to, że powstałe na bazie projektu utworzonego w ten
sposób pliki wykonywalne mogą mieć mniejszą objętość, ponieważ odczytują z dysku
wszelkie potrzebne do działania funkcje MFC na bieżąco.
8. Kliknij Next, by przejść do kroku czwartego - MFC AppWizard - Step 4.


60 Poznaj Visual C++ 6
MFC AppWiZdłd - Step 4 ol 4







AppWizatd createt l.he (ollowing dasses for
you:
'KiSSSiy^ttSSSSIUHIUSSSttUS^^
CPeisonDlg
CIass narne: Headet (ile:





. Rysunek 3.3. Wykaz utworzonych klas i plików
W czwartym, ostatnim kroku dokonuje się zatwierdzenia klas i plików, które AppWi-zard
utworzy w ramach projektu. Jeśli zdecydujemy się zmienić nazwy wyświetlonych
elementów, możemy to uczynić korzystając z pól edycyjnych, umieszczonych u dołu okna
dialogowego.
9. Kliknij Finish.
10. Kliknij OK w oknie dialogowym New Project Infonnation, a AppWizard utworzy
automatycznie nowy projekt wraz ze stosownymi plikami.
Mamy już gotowy projekt, możemy zatem przystąpić do edycji jego zasobów. Aby
przejść do tego zadania, musimy wybrać kartę ResourceYiew, widoczną w oknie roboczym,
w lewej części ekranu, a następnie rozwinąć listę zasobów, klikając znak + po lewej stronie
katalogu Person Resources. Gdy rozwiniemy kolejną gałąź, czyli Dialog, zobaczymy
utworzone dwa szablony okien dialogowych. Pierwszy, IDD_PERSON_DIALOG, jest szablonem
głównego okna dialogowego aplikacji, które otrzymaliśmy w wyniku wybrania projektu
opartego o takie właśnie okno. Drugim szablonem jest IDD_ABOUTBOX, stanowiący model
okna dialogowego dostępnego z aplikacji po kliknięciu menu Hełp About. Okno to dostarcza
podstawowych informacji w postaci numeru wersji aplikacji i przypisanej jej ikonie.
Pierwszą czynnością, jaką wykonamy, będzie nieskomplikowana edycja głównego okna
dialogowego. Nauczymy się również, jak umieszczać w aplikacji kolejne okna dialogowe oraz
kilku innych, bardziej zaawansowanych funkcji dostępnych w edytorze zasobów.


Projektowanie i tworzenie okien dialogowych 61
Umieszczanie komentarzy wewnątrz kodu
Można spowodować, aby AppWizard umieszczał wewnątrz plików źródłowych komentarze, które
mogą być pomocne w zrozumieniu kodu, a ponadto wskazują miejsca, w których użytkownik
powinien umieścić niezbędne wpisy.
Edycja szablonu głównego okna dialogowego aplikacji
1. Kliknij dwukrotnie widoczną na panelu ResoureeYiew pozycję IDD PERSON DIALOG. Szablon
głównego okna dialogowego umieszczony zostanie w oknie edytora zasobów.
2. Kliknij widoczny pośrodku szablonu tekst TODO: Place Your Controls Herę, a następnie naciśnij
klawisz Delete. Powyższy tekst zostanie usunięty z szablonu.
3. Teraz kliknij przycisk Cancel i ponownie klawisz Delete. Jak poprzednio, spowoduje to usunięcie z
szablonu wskazanego elementu.
4. Naciśnij OK.
5. Wywołaj menu skrótów, klikając prawym klawiszem myszy.
6. Z wyświetlonego menu skrótów wybierz pozycję Properties. Otwarte zostanie okno dialogowe Push
Button Properties.
7. Spośród widocznych wybierz kartę Generał, a w polu Caption wprowadź Exit, zastępując OK.
W ten sposób zmieniliśmy oznaczenie przycisku kontrolnego, nie zmieniając jednocześnie jego roli i
działania w programie. Programy identyfikują zasoby na podstawie ich identyfikatorów - ID. W
obecnym przykładzie występuje identyfikator i DOK, który dodany do kodu będzie powodował
odpowiednią reakcję na komunikat pochodzący od określonego przycisku kontrolnego. l DOK jest
predefiniowanym w MFC identyfikatorem, który powoduje wywołanie funkcji CDialog:OnOK(),
zawierającej kod niezbędny do zamknięcia okna dialogowego.
Plik nagłówkowy resource.h
Identyfikatory zasobów wykorzystywanych w projekcie umieszczone są w pliku nagłówkowym
resource.h. Plik ten może być edytowany po wybraniu opcji Resource Symbols z menu View.
8. Zamknij okno dialogowe Push Button Properties. Okno to powinno w tej chwili wyglądać jak na
rysunku 3.4.


62 Poznaj Visual C++ 6
Push Bulion Piopeities
-l-l '? Generał | Sfyies | ExtendedS>yle$ {D: JIDOK3
Caption: pfidT


llt?P' Visible Jgr
Disabled
r"
Group
17 Tabstop
r HelpID






Rysunek 3.4. Edycja właściwości istniejącego przycisku kontrolnego
Wprowadziliśmy zatem pewne, niewielkie modyfikacje w oknie dialogowym utworzonym przez
AppWizard, ale jak postąpić, gdy chcemy otrzymać zupełnie nowe okno?
Tworzenie nowego okna dialogowego
1. Otwórz panel ResourceView w oknie roboczym projektu.
2. Kliknij prawym klawiszem myszy katalog Dialog, by otworzyć menu skrótów.
3. Wybierz z niego pozycję Insert Dialog. Wywoła to otwarcie w edytorze zasobów szablonu.nowego
okna dialogowego. Szablon ten standardowo wyposażony jest w przyciski OK oraz Cancel.
PATRZ TAKŻE
� Więcej informacji o panelu ResourceView znajduje się w rozdziale 2.
Przydzielanie identyfikatora oknu dialogowemu
Po umieszczeniu w projekcie nowego okna dialogowego, program automatycznie nadaje temu oknu
odrębny identyfikator ID. Będzie on miał postać IDD_DIALOG, z dołączoną na końcu cyfrą. Ów
identyfikator odnaleźć można następnie w katalogu Dialog, w panelu ResourceView. Pierwszą rzeczą,
jaką być może będziemy chcieli zrobić, jest zmiana automatycznie przydzielonego identyfikatora na
inny, mówiący o tym, czego dotyczy. Przykładowo, jeśli nasze nowe okno dialogowe służyć będzie do
wprowadzania informacji na temat sprzedaży książek, jego identyfikator mógłby mieć postać
IDD_BOOK_SALES, będąc w ten sposób bardziej rozpoznawalnym, niż na przykład IDD_DIALOG9.
Konwencja stosowana przy nadawaniu identyfikatorów oknom dialogowym
Normalną praktyką programistyczną jest stosowanie w identyfikatorach okien dialogowych prefiksu
IDD_ dla odróżnienia ich od innych typów zasobów.


Projektowanie i tworzenie okien dialogowych 63
Zmiana identyfikatora nowego okna dialogowego
1. Kliknij prawym klawiszem myszy w obszarze szablonu okna dialogowego, z dala od
przycisków sterujących. Możesz kliknąć również pasek tytułowy okna. Otworzysz w ten
sposób menu skrótów.
Kliknięcie musi odbyć się w pewnej odległości od przycisków sterujących, aby mieć
pewność, że otwarte zostanie menu skrótów dla okna dialogowego, a nie zawartych w nim
elementów kontrolnych.
2. Z menu skrótów wybierz pozycję Properties. Zobaczysz okno dialogowe, widoczne tutaj
na rysunku 3.5.
Dialog Piopeities
-W f Generał Stylet j MnieStyles | Extended S(ytes


~gl
ID; jliaa^iMiBHIiH^Capfon: JDialog
Font ramę: MS SansSerif
Menu;
Font tize: B
Fan).., j X Pos: (O^ Pos: (O





Rysunek 3.5. Nadawanie identyfikatora oknu dialogowemu
3. Wybierz kartę Generał.
4. W polu ID zastąp bieżący wpis, IDD_DIALOGI, nowym: IDD_PERSONALITY.
Korzystanie z karty Dialog Generał Properties
Modyfikowanie właściwości elementów projektu jest jedną z najprostszych czynności
wykonywanych podczas projektowania okna dialogowego. Korzystanie z okna dialogowego
Dialog Properties może nam ułatwić możliwość "przypięcia" go za pomocą pinezki, której
wizerunek widnieje w lewym górnym rogu tego okna. Zostało to pokazane na rysunku 3.6.
Taka czynność powoduje, iż okno Dialog Properties pozostaje otwarte, a informacje zawarte
w nim podlegają zmianom i odnoszą się do aktualnie wskazanego elementu. Developer Studio
daje taką możliwość również w stosunku do innych okien dialogowych.
Dialog Piopeities
~|� T Generał | S tyłeś | Mnie S tyłeś | Entended Stytes
ID: |lDD_PERSONALITY^C*'^ |Pe'sonaBy Dialog
Fontname: M S S ans Serif ,,
Menu;
Font size: 8
Font... | X Pos: |o^ Pos: |5
Rysunek 3.6. Przypinanie okna dialogowego


64 __ ___ ______ __ Poznaj Visual C++ 6
O Pinezka została użyta w celu utrzymania okna w stanie otwartym.
W ten sposób możemy dokonywać modyfikacji szablonu okna dialogowego, jak też
wszelkich umieszczonych na nim elementów, bez konieczności ciągłego zamykania i otwie-
rania nowych okien właściwości. Rodzaj wybranego zasobu determinuje zawartość tego okna,
od niego też zależy, jakie karty zostaną udostępnione.
Drugą czynnością, którą wykonamy w nowo utworzonym oknie dialogowym, będzie
zmiana jego tytułu. Jest to napis widoczny na pasku tytułowym.
Zmiany tej dokonamy poprzez zastąpienie bieżącego wpisu w polu Caption, wpisując
zamiast niego Personality Dialog. Zmiana ta powinna być natychmiast widoczna - na pasku
tytułowym szablonu okna dialogowego pojawi się tytuł, który przed momentem
wprowadziliśmy.
Na karcie Generał mamy do dyspozycji jeszcze inne opcje. Jedną z nich jest wielkość
czcionki używanej do wyświetlania napisów wewnątrz okna dialogowego. Jeśli dokonamy
zmiany bieżącej wielkości na większą od 8, cały szablon okna dialogowego również ulegnie
powiększeniu. Dzieje się tak, ponieważ rozmiary całego okna obliczane są na podstawie
wysokości oraz szerokości przypisanej mu czcionki. W naszym przykładzie, czcionką bieżącą
jest MS Sans Serif o rozmiarze 8, co jest wielkością zwykle stosowaną w oknach dialogowych.
Parametry X Pos oraz Y Pos określają położenie okna dialogowego na ekranie, po jego
pierwszym wywołaniu. Współrzędne te odnoszą się do okna głównego aplikacji.
Jednostka miary okien dialogowych
Jednostka miary stosowana w projektowaniu okna dialogowego oparta jest o rozmiar
wykorzystywanej w tym oknie czcionki. Można spotkać się z terminem DLU, co oznacza
Dialog Unit (dosł. jednostka dialogowa).
Wskazanie tych współrzędnych jako 0,0 powoduje umieszczenie okna dialogowego
pośrodku okna-rodzica.
Nadawanie stylu oknu dialogowemu
W oknie Dialog Properties znajdujemy trzy karty odnoszące się do stylu okna dialo-
gowego. Kliknijmy zatem pierwszą z nich, czyli Styles (rysunek 3.7).


Projektowanie i tworzenie okien dialogowych 65
Dialog Propertie* �' " '-�- :'-: �/:-,, 1,:,/!,1::,;^:111 ^ ,1 ^



l�

t

Genet
a'



S tyłeś
i

Mole S tyłeś

Extended Styles





Style:

F F

lilie bar
System
meny

r r

CliĘ siblings
ClipAildten


Popu
p



d





::::1^

iorderi' y'"

p-
r

Minimize
box
Manimize
bon

r r

Horizontal sctoll
Yeltical tcroll


Dial
og

Fiame

.I
J





Rysunek 3.7. Wybór stylu okna dialogowego
Ostrożnie ze stylami!
Pewne ustawienia stylu mogą powodować, że inne przestaną obowiązywać. Jest również możliwym
zaordynowanie takich ustawień, które spowodują całkowitą bezuży-teczność okna dialogowego.
Musimy być świadomi, iż zmiany stylu dotyczące pewnych elementów okna dialogowego mogą
wywierać wpływ również na inne jego elementy. Przykładowo, jeśli usuniemy znacznik dla pozycji Title
Bar, spowoduje to nie tylko usunięcie z szablonu paska tytułowego, ale jednocześnie brak dostępu do
menu systemowego oraz zatarcie tytułu nadanego oknu. Jeżeli ponownie zaznaczymy Title Bar,
będziemy musieli na nowo wprowadzić tytuł okna. Podobne problemy mogą pojawić się również w
przypadku zmian dokonywanych na ramce okna.
Należy także zdać sobie sprawę, że bardzo łatwo jest uczynić okno całkowicie nieużytecznym lub
wręcz niewidocznym, dokonując nieprzemyślanych zmian jego stylu. Może to stanowić później problem
ciężki do rozwiązania. Jeśli mamy podejrzenie, że popełniliśmy taki błąd, najprostszą metodą
sprawdzenia tego jest porównanie ustawień przez nas poczynionych z ustawieniami odnoszącymi się do
okna w pełni funkcjonalnego. Generalnie, w większości przypadków zaleca się stosowanie bieżących
ustawień stylu.
Dodawanie i pozycjonowanie kontrolek
Okna dialogowe nie przedstawiałyby żadnej wartości, gdyby nie zawarte w nich kon-trolki. Gdy w
oknie edytora otwarty jest szablon okna dialogowego, pasek menu Develo-per Studio zawiera
dodatkowe menu, Layout. Powinniśmy widzieć również dodatkowe paski narzędziowe. Jeden z nich,
Dialog (rysunek 3.8), służy edycji okna, natomiast drugi, czyli Controls (rysunek 3.9), dodawaniu
kontrolek.


13
11





|ci�- -a| oa + +
|o+- -łoi t+ o a
M X i^ ffl
l &-14






26 10
4 8 12 Rysunek 3.8. Pasek
narzędziowy Dialog wspomaga pozycjonowanie kontrolek





1. Test
2. Wyrównanie do lewej
3. Wyrównanie do prawej
4. Wyrównanie od góry
5. Wyrównanie od dołu
6. Środkowanie pionowe
7. Środkowanie poziome
8. Spacja w poziomie
9. Spacja w pionie
10. Ujednolicenie szerokości
11. Ujednolicenie wysokości
12. Ujednolicenie wymiarów
13. Włączenie / wyłączenie siatki
14. Włączenie / wyłączenie prowadnic






l

[33
1^

KU

14

2



abl-



3

Aa
Q

a-

15 16

4

K,

(-



5

l"
l H
m

Eż-

17
1 0

6

133

B
tg -

19



Jk

EE]
-



8

ir

E^-

21

9



[L=-



10

^j



22

11

Q
�rA



23 24

12



CT

^"r
25

J-Arf
13

f?



^^J
.." ^ff,





Iffl



Rysunek 3.9. Pasek narzędziowy Controls umożliwia dodawanie kontrolek


Projektowanie i tworzenie okien dialogowych 67
1. Wybór 14. Ilustracja
2. Statyczne pole tekstowe 15. Pole edycji
3. Grupa obiektów 16. Przycisk
4. Pole wyboru 17. Przełącznik opcji
5. Lista rozwijana (kombinowana) 18. Pole listy
6. Pasek przewijania poziomego 19. Pasek przewijania pionowego
7. Przewijanie pionowe listy 20. Wskaźnik postępu
8. Suwak 21. "Gorący" klawisz
9. Okno listy szczegółowej 22. Drzewo
10. Karty 23. Element animowany
11. Pole wprowadzania tekstu formatowanego 24. Próbnik daty i godziny
12. Kalendarz 25. Pole adresu IP
13. Kontrolka użytkownika 26. Rozszerzone okno listy rozwijanej
Jeśli paski narzędziowe Dialog i Controls nie są widoczne, należy wykonać poniższe instrukcje, by
zmienić ten stan.
Wyświetlenie paska narzędziowego Dialog
1. Z menu Tools wybierz pozycję Customize. Otwarte zostanie okno dialogowe Cu-stomize.
2. Wybierz kartę Toolbars.
3. Na liście Toolbars zaznacz pozycję Dialog.
4. Kliknij Close.
Wyświetlenie paska narzędziowego Controls
1. Z menu Tools wybierz pozycję Customize. Otwarte zostanie okno dialogowe Customize.
2. Wybierz kartę Toolbars.
3. Na liście Toolbars zaznacz pozycję Controls.
4. Kliknij Close.
Rozszerzone okno listy rozwijanej
Rozszerzone okno listy rozwijanej może zawierać oprócz pozycji tekstowych również ilustracje.
,


68 Poznaj Visual C++ 6
Każdy element graficzny umieszczony na pasku narzędziowym reprezentuje pewien
rodzaj kontrolki. Po umieszczeniu wskaźnika myszy ponad którymś z nich, wyświetlony
zostanie "dymek" określający znaczenie danego obiektu. Obiekt, który chcemy umieścić na
naszym szablonie, wybieramy poprzez kliknięcie jego wizerunku na pasku narzędziowym. W
następstwie tego wybrany element jest gotowy do umieszczenia w obrębie szablonu.
Kliknięcie wizerunku strzałki w lewym górnym rogu paska narzędziowego przywraca
normalne działanie wskaźnika myszy. Umieszczenie nowej kontrolki na szablonie odbywa się
zatem poprzez kliknięcie odpowiedniej pozycji na pasku narzędziowym, a następnie
wskazanie miejsca jego umieszczenia na szablonie za pomocą wskaźnika myszy, który
przybiera postać krzyżyka. Kliknięcie w odpowiednim miejscu szablonu kończy proces
umieszczania nowego elementu.
Aby móc umieścić nowy element na szablonie, musimy dysponować wystarczającą ilością
wolnej przestrzeni. Może to wymagać zwiększenia rozmiarów szablonu okna dialogowego.
Dokonamy tego, wykonując poniższe instrukcje.


Powiększanie okna dialogowego
Kliknij krawędź szablonu okna dialogowego. Pojawi się wokół niego ramka formatująca,
posiadająca uchwyty umożliwiające jej rozciąganie. Widać to na rysunku 3.10.
l.

Rysunek 3.10. Powiększanie wymiarów okna dialogowego
2. Kliknij uchwyt położony w prawym dolny rogu ramki, przytrzymując lewy klawisz myszy.
Możesz teraz zmienić oba wymiary okna dialogowego, poprzez przesunięcie uchwytu w żądane
miejsce i zwolnienie klawisza myszy. Jeśli jednak chcesz zmienić jedynie


Projektowanie i tworzenie okien dialogowych 69
szerokość okna, postępuj tak samo chwytając jednak uchwyt widoczny pośrodku prawej
krawędzi ramki formatującej. Znacznik myszy zmienia się w zależności od tego, w której
płaszczyźnie dokonujesz zmiany wymiarów.
3. Przesuń mysz, przytrzymując jej lewy klawisz. Nowy rozmiar okna widoczny jest podczas
przeciągania ramki.
4. Zwolnij klawisz myszy, gdy wymiary są zgodne z twoimi oczekiwaniami. Okno dialogowe
zostanie odświeżone z nowymi wymiarami.
Możemy już przystąpić do umieszczania nowych kontrolek. Poniższe instrukcje pokazują
całą procedurę.
Dodanie obiektów do szablonu
1. Wybierz z paska narzędziowego Static Text.
2. Obiekt tego rodzaju może posłużyć do wyświetlenia informacji. Jednakże jego naj-
powszechniejszym zastosowaniem jest określanie innych kontrolek.
3. Kliknij w lewym górnym rogu szablonu. Umieścisz w ten sposób obiekt Static Text,
zawierający tymczasowo napis Static.
4. Napisz First name. Napis w polu Static powinien zmienić się automatycznie.
5. Z paska narzędziowego Controls wybierz pole edycji (15).
6. Kliknij szablon okna, umieszczając pole edycji po prawej stronie pola First name
(położenie nie ma chwilowo żadnego znaczenia).
7. Ponownie z paska Controls wybierz Static Text.
8. Umieść nowy obiekt poniżej First name.
9. Napisz Surname. Napis Static powinien zostać zastąpiony.
10. Wybierz ponownie pole edycji.
11. Umieść je po prawej stronie Sumame. Również w tym wypadku nie musisz przywiązywać
wagi do dokładnego pozycjonowania.
Bieżący przycisk sterujący
Okno dialogowe może posiadać przycisk bieżący, reagujący na użycie klawisza Enter. Wyróżnia go
zewnętrzne cieniowanie. Najczęściej przyciskiem tym jest OK. Wyboru przycisku bieżącego dokonuje
się na karcie Styles w oknie Push Button Properties.
Nasze okno powinno teraz wyglądać podobnie do okna z rysunku 3.11.


70 Poznaj Visual C++ 6

Rysunek 3.11. Elementy dodane do szablonu okna dialogowego
PATRZ TAKŻE
� Więcej szczegółów na temat przycisków kontrolnych znajdziemy w rozdziale 4.
4 By dowiedzieć się więcej o stosowaniu statycznych pól tekstowych, zajrzyj do rozdziału 5.
� Więcej wiadomości o polach edycji znajdziesz w rozdziale 5.
4 O rozszerzonych listach rozwijalnych, możesz przeczytać więcej w rozdziale 11.
Zmiana rozmiarów kontrolek
Zmiana rozmiarów kontrolek odbywać się może na kilka sposobów. Przede wszystkim, gdy
wpisujemy tekst do obiektu statycznego, jego wymiary ulegają automatycznie powiększeniu w celu
zmieszczenia całego wprowadzonego napisu. Funkcja ta zwana jest Sizing to content (wymiarowanie
według zawartości) i dostępna jest dla wszystkich obiektów zawierających napisy.
Wymiarowanie typu Sizing to content
1. Kliknij kontrolkę. Wokół niego widoczna będzie ramka.
2. Kliknij prawym klawiszem myszy, aby otworzyć menu skrótów.
3. Wybierz pozycję Size to Content.
Możemy zmieniać wymiary kontrolek, używając również uchwytów znajdujących się na ramkach
formatujących, widocznych wokół wybranego obiektu. W naszym przykładzie postąpimy tak w stosunku
do pól edycji. Najpierw rozciągniemy nieco pierwsze z nich, a później nauczymy się, jak nadać drugiemu
identyczne rozmiary.


Projektowanie i tworzenie okien dialogowych 71
W celu zmiany wymiarów pola edycji leżącego po prawej stronie napisu First name wykonamy
instrukcje podane poniżej.
Zmiana wymiarów pola edycji
1. Kliknij pole edycji umieszczone poprzednio po prawej stronie napisu First name. Wokół
zaznaczonego pola pojawi się ramka formatująca, posiadająca uchwyty do przeciągania.
2. Przesuń wskaźnik myszy nad uchwyt leżący na prawej krawędzi ramki formatującej. Gdy wskaźnik
znajdzie się we właściwym położeniu, zmieni postać na poziomą strzałkę z dwoma grotami, po
lewej i po prawej stronie.
3. Kliknij i przytrzymaj lewy klawisz myszy.
4. Przesuń znacznik w prawo, przytrzymując klawisz myszy. Ramka formatująca powiększa się wraz z
przesuwaniem znacznika.
5. Zwolnij klawisz myszy, gdy ramka formatująca osiągnie żądany wymiar. Pole edycji zostanie
powiększone.
Nasze okno dialogowe powinno teraz wyglądać jak na rysunku 3.12.

Rysunek 3.12. Skalowanie pojedynczej kontrolki
Jednoczesne zaznaczanie kilku obiektów
Aby uzyskać klarowny obraz okna dialogowego, należy wyrównać kontrolki względem siebie oraz
nadać im jednakowe rozmiary. Możemy tego dokonać zaznaczając najpierw elementy, które chcemy
przeskalować, przesunąć lub wyrównać, a następnie wybierając odpowiednią opcję z menu Layout lub
paska narzędziowego Dialog.


72 Poznaj Visual C++ 6
Należy mieć na uwadze fakt, że obiekt, który klikniemy jako ostatni (uchwyty leżące na ramce
wokół niego wypełnione będą niebieskim kolorem), będzie punktem odniesienia dla zmian następujących
w pozostałych zaznaczonych obiektach. Zmiany, które wprowadzimy w tym obiekcie, zostaną
wprowadzone również w pozostałych.
Teraz dokonamy ujednolicenia wymiarów obu pól edycji, obierając pierwsze z nich jako punkt
odniesienia.
Używanie techniki "gumowej taśmy" do jednoczesnego zaznaczania kilku obiektów
Do jednoczesnego zaznaczenia kilku obiektów można posłużyć się techniką "gumowej taśmy". Polega
to na obrysowaniu wszystkich żądanych elementów wskaźnikiem myszy, z przytrzymaniem jej lewego
klawisza. Po zaznaczeniu obszaru pojawia się prostokątna ramka, rysowana kropkowaną linią.
Wszystkie obiekty wewnątrz tej ramki ulegają wyselekcjonowaniu.
Modyfikacja drugiego pola edycji
1. KUknij pole edycji umieszczone po prawej stronie napisu Sumame. Pojawi się wokół niego ramka
formatująca.
2. Naciśnij i przytrzymaj klawisz Ctrl, a następnie kliknij pole edycji powyżej.
Wokół tego pola również pojawia się ramka. Pole zaznaczone jako pierwsze jest wciąż otoczone
ramką, lecz jej uchwyty nie są wypełnione. Wypełnienie występuje w uchwytach ramki wokół
obiektu, który zaznaczony został jako drugi.
3. Z menu Layout wybierz menu rozwijane Mąkę Same Size, a z niego Same Width. Drugie pole
edycji powinno teraz mieć wymiary identyczne z pierwszym (First name).
Jednoczesna zmiana położenia kilku obiektów
Gdy zaznaczonych jest kilka obiektów, przesunięcie jednego z nich powoduje równoczesne
przesunięcie pozostałych.
Wyrównywanie pozycji obiektów
Poza możliwościami skalowania kontrolek, w menu Layout, jak też na pasku narzędziowym
Dialog, znajdziemy opcje wyrównywania pozycji obiektów na szablonie. Aby wyrównać obiekty, należy
zaznaczyć je w sposób omówiony w punkcie "Jednoczesne zaznaczanie kilku obiektów" niniejszego
rozdziału. Gdy już zaznaczyliśmy wybrane elementy, możemy dokonać kilku operacji wyrównywania
ich. Sprawdzimy to na przykładzie naszego okna dialogowego.


Projektowanie i tworzenie okien dialogowych 73
Dokonamy wyrównania pól tekstowych względem odpowiadających im pól edycji.
Wyrównywanie pól edycyjnych
1. Zaznacz pole tekstowe First name, a następnie pole edycyjne leżące po prawej stronie. Oba
obiekty powinny zostać otoczone ramkami, z tym że uchwyty będą miały wypełnienie
tylko na ramce wokół pola edycji.
Jeśli nie pamiętasz jak zaznaczać kilka obiektów jednocześnie, wróć do punktu
"Jednoczesne zaznaczanie kilku obiektów".
2. Z menu Layout wybierz pozycję Align, a z rozwiniętego menu Bottom. Spowoduje to
wyrównanie dolnej krawędzi pola First name, do tej samej krawędzi pola edycji.
3. Wykonaj te same czynności dla pozostałej pary obiektów.
4. Zaznacz pola First name oraz Surname.
5. Z menu Layout wybierz menu rozwijane Align, w nim natomiast Right. Spowoduje to
wyrównanie prawych krawędzi obu zaznaczonych pól.
Nasze okno dialogowe powinno obecnie wyglądać jak na rysunku 3.13.

Rysunek 3.13. Wyrównanie krawędzi kontrolek przy użyciu prowadnic
Użycie prowadnic
Aby ułatwić sobie przeprowadzanie wyrównywania, możemy użyć w szablonie tzw.
prowadnic - Guidelines. Kropkowane niebieskie linie, widoczne wzdłuż krawędzi sza-


74 Poznaj Visual C++ 6 >
blonu okna, to właśnie prowadnice. Są one dobrze widoczne na rysunku 3.13. Gdy krawędź kontrolki
pokryje się z prowadnicą, przesunięcie prowadnicy powoduje jednoczesne przesuwanie całego obiektu.
Efekty takiego działania prowadnic możemy zaobserwować zwiększając szerokość okna dialogowego.
Przyciski OK oraz Cancel ulegają przesunięciu wewnątrz szablonu, ponieważ ich pozycja jest powiązana z
marginesem wyznaczonym przez prowadnice.
Nie jesteśmy jednak ograniczeni tylko do prowadnic stanowiących margines szablonu. Możemy
umieszczać na nim dodatkowe prowadnice, klikając linijki widoczne u góry i po lewej stronie szablonu.
Gdy zatem klikniemy linijkę górną, możemy dodać prowadnicę pionową, poziomą zaś klikając linijkę po
lewej. Pojawienie się strzałki na linijce po jej kliknięciu sygnalizuje dodanie nowej prowadnicy.
Umieszczenie jej w pobliżu krawędzi jednej z kontrolek spowoduje przyciągnięcie prowadnicy do obiektu.
Ppdobnie dodanie obiektu i umieszczenie go w okolicach prowadnicy wyrówna do niej położenie nowego
elementu.
Obiekty stykające się z prowadnicami są przesuwane automatycznie
Gdy krawędź kontrolki pokrywa się z prowadnicą, jej przesunięcie powoduje zmianę pozycji obiektu.
Prowadnice wyświetlane są tylko podczas edycji okna dialogowego i nie są widoczne podczas
testowania okna lub działania aplikacji.
Organizacja kontrolek w oknie dialogowym
Poza kwestiami związanymi z umieszczaniem i pozycjonowaniem kontrolek, istnieją również inne,
które powinniśmy rozważyć podczas projektowania okna dialogowego. Na przykład, zgrupowanie
pewnych obiektów może nam pomóc w utrzymaniu przejrzystej formy okna. Jeszcze inną kwestią jest
ustalenie porządku, w jakim użytkownik będzie mógł przechodzić pomiędzy obiektami, używając klawisza
Tab. Możemy również ustalić skróty klawiaturowe.
Grupowanie obiektów
Jedną z metod uzyskiwania przejrzystego wyglądu okna dialogowego jest grupowanie występujących
w nim kontrolek. Grupom obiektów możemy nadawać nazwy, a także obejmować je wspólną ramką.
Jak zwykle, najlepszą metodą zrozumienia danego zagadnienia jest sprawdzenie go w praktyce.
Dodajmy więc kilka nowych kontrolek do naszego okna dialogowego.


Projektowanie i tworzenie okien dialogowych 75
Grupowanie obiektów służy nie tylko ładnemu wyglądowi okna
Grupowanie obiektów ma znaczenie nie tylko dla wyglądu okna dialogowego. Gdy
zawartością grupy są kontrolki typu pole wyboru lub przełącznik opcji, pozostają one w
ścisłym związku ze sobą. Stan poszczególnych obiektów wpływa na inne.
Dodanie grupy obiektów oraz zawarcie w niej kilku pól wyboru
1. Wybierz grupę obiektów z paska narzędziowego Controls.
2. Umieść ją na szablonie, poniżej obecnych już obiektów.
3. Zmień rozmiar grupy, używając uchwytu w prawym dolnym rogu ramki formatującej, by
uzyskać efekt widoczny na rysunku 3.14.

Rysunek 3.14. Grupowanie kontrolek nadaje oknu dialogowemu schludny wygląd
4. Zmień nazwę okna grupy na Anałysis.
5. Z paska narzędziowego wybierz pole wyboru.
6. Dodaj do szablonu cztery kolejne pola wyboru. Ustal ich pozycje wewnątrz okna
grupującego, jak widać na rysunku 3.15.


76 Poznaj Visual C++ 6
iloa

Fifst name


Sumame
Edit
, �Anałytis �-��-���-: r"
Talkatiye
l r" Likes Animals l
r" WatchetheNews
r" Plays Sport






Rysunek 3.15. Pozycjonowanie kontrolek wewnątrz okna grupy
7. Wprowadź nazwy dla kolejnych pól wyboru (w przykładzie powyższym są to określenia cech
charakteru).
8. Użyj metod opisanych w niniejszym rozdziale, aby uporządkować i wyrównać nowe elementy okna
Anałysis.
PATRZ TAKŻE
� Więcej informacji o grupowaniu obiektów znajdziesz w rozdziale 4.
Dodawanie kilku obiektów tego samego typu
Nie istnieje możliwość umieszczania na szablonie kilku obiektów za jednym razem. Po umieszczeniu
jednego, aby umieścić następny, należy wybrać go z paska narzędziowego Controls i powtórzyć
procedurę.
Ustalenie porządku dostępu do okien przy użyciu klawisza Tab
Poszczególne kontrolki okna dialogowego mogą być udostępniane kolejno, według pewnej
sekwencji. Użytkownik przemieszcza się pomiędzy obiektami, według tej sekwencji, używając klawisza
Tab. Jednoczesne użycie klawiszy Shift+Tab powoduje ruch wsteczny. Obiekt, na którym użytkownik
zatrzymał sekwencję, staje się obiektem bieżącym. Jeśli przykładowo obiektem tym jest przycisk
sterujący, widoczny będzie na nim prostokąt narysowany przerywaną linią. Oznacza to, że przycisk ten
jest aktywny.
Kontrolka może zostać wyłączona z sekwencji poprzez usunięcie znacznika w polu wyboru, na
karcie Generał w oknie dialogowym właściwości danego obiektu.


Projektowanie i tworzenie okien dialogowych 77
Ustalanie sekwencji dostępu do kontrolek
l. Wybierz pozycję Tab Order z menu Layout. Na szablonie przy każdej z kontrolek pokazane zostaną
liczby, odwzorowujące sekwencję, w jakiej kolejne obiekty są udostępniane (rysunek 3.16).

Wałysis �Młalkatrró
ikrlikesAnimals :V'"A'atehes
the Ne^ Płlays Sport
Rysunek 3.16. Modyfikowanie sekwencji dostępu
2. Kliknij obiekt, który ma być aktywny w momencie otwierania okna dialogowego. Obiekt ten otrzyma
numer l.
3. Klikaj kolejne obiekty w takim porządku, w jakim mają być udostępniane klawiszem Tab. Obiekty
otrzymają kolejne numery.
4. By sprawdzić prawidłowość dokonanych ustaleń sekwencji, użyj Test z menu Layout lub skrótu
klawiaturowego Ctri+T. Następnie naciskając klawisz Tab, prześledź ustaloną sekwencję.
Przemieszczanie się pomiędzy kontrolkami okna dialogowego
Porządek tabulatora jest sekwencją, wedle której kolejne kontrolki umieszczone w oknie dialogowym
stają się dostępne, gdy użytkownik przyciska klawisz Tab. Tylko jedna kontrolka może być dostępna
w danym momencie,
W trybie testowym nasze okno wygląda dokładnie tak, jak w gotowej działającej aplikacji, co
pozwala sprawdzić funkcjonalność i prawidłowość działania poszczególnych elementów. Wyjście z
trybu testowego następuje po naciśnięciu klawisza Escape.


78______________________________________Poznaj Visual C++ 6
Ustalanie skrótów klawiaturowych
Skrót klawiaturowy zostaje przypisany do kontrolki poprzez umieszczenie znaku & przed
literą stanowiącą mnemonikę skrótu, w nazwie obiektu. Przykładowo, gdy przycisk sterujący
posiada nazwę E&xit, napis na przycisku będzie wyglądał tak: Exit. Efekt jednakowy z
kuknięciem tego przycisku da naciśnięcie kombinacji klawiszy Alt+X lub AIt+x.
Jeśli w naszym oknie dialogowym znajdzie się kilka obiektów o takich samych
mnemonikach, to użycie skrótu klawiaturowego odnosić się będzie do obiektu występującego
najwcześniej w sekwencji dostępu. By zapobiec zaskoczeniu, edytor zasobów pozwala nam
sprawdzić, czy taka sytuacja występuje. Aby z tej możliwości skorzystać, z menu skrótów
edytora zasobów wybierzmy pozycję Check Mnemonics. Jeśli nie występują duplikaty
mnemonik, otrzymamy komunikat "No duplicate mnemonics found". Gdyby jednak
duplikaty^takie występowały, zostaniemy zapytani o zaznaczenie obiektów posługujących się
tymi duplikatami, co ma na celu usunięcie konfliktów.
Skróty używające mnemonik
Mnemonika jest podkreśloną literą, występującą w nazwie obiektu kontrolnego, służącą do
wywoływania za pomocą klawiatury efektu tożsamego z wybraniem danego obiektu za
pomocą myszy. Skrót jest aktywowany kombinacją klawisza Alt i litery wskazanej jako
mnemonika. Mnemonikę można określić wstawiając w nazwie obiektu znak & przed
wybraną literą. ^ , .,: :: :,
PATRZ TAKŻE
� Więcej informacji o określaniu skrótów klawiaturowych znajdziesz w rozdziale 5.