Ćwiczenie 1

Komputerowe wspomaganie projektowania – ED6, IPEE PL, rok. akad. 2009/2010
Strona 1
Ćwiczenie 7. Tworzenie projektu interfejsu graficznego w środowisku Delphi
Zadanie 1. Tworzenie i zapisywanie aplikacji. Właściwości komponentów. Oprogramowywanie zdarzeń.
1) Rozpocznij tworzenie aplikacji graficznej (File/New/Application) w środowisku Delphi,
2) Zapisz powstałe pliki projektu i modułu aplikacji (File/Save Project As) w nowo założonym folderze o nazwie
Zadanie1.
3) W edytorze kodu źródłowego (klawisze Ctrl+F12) obejrzyj zawartość projektu Project1, a następnie modułu Unit1.
Zwróć uwagę na strukturę typu TForm1 oraz istnienie zmiennej Form1 reprezentującej formularz główny. Powróć
do wyświetlania formularza (klawisz F12) oraz Inspektora Obiektów (klawisz F11). Włącz (klawiszami Alt+F12)
wyświetlanie tekstowego opisu pól obiektu Form1 i zaobserwuj wartości wybranych pól. Powróć do wyświetlania
formatki (Alt+F12).
4) Umieść na formatce Form1 komponenty: etykietę Label1 i przycisk Button1.
Zaobserwuj właściwości tych komponentów w Inspektorze obiektów.
5) W edytorze kodu źródłowego (Ctrl+F12 → Unit1) zaobserwuj pojawienie się
nowych pól w obiekcie typu TForm1, a następnie sprawdź to samo w opisie
tekstowym obiektów (Alt+F12).
6) Za pomocą Inspektora Obiektów (F11) określić właściwości dla następujących
komponentów: a) właściwość Caption: Form1→Formatka 1, Label1→
Etykieta 1, Button1→ Przycisk 1;
b) właściwość Color: Form1→clSkyBlue, Label1→clMoneyGreen,
c) właściwość Font: kliknąć na przycisku „trzy kropki”, ustawić czcionkę:
Times New Roman, styl pogrubiony, rozmiar 14, kolor granatowy;
d) właściwość Hint (podpowiedź w „chmurce”): Form1→Obszar formularza,
Label1→Obszar etykiety, Button1→Obszar przycisku, właściwość ShowHint→ True dla wszystkich
komponentów;dla etykiety Label1 ustaw właściwości: Align→alTop, Layout→Center, Alignment→taCenter;
7) Zmień rozmiary i położenie wszystkich trzech komponentów, obserwując zmiany wartości parametrów:
High i Width (rozmiary) oraz Left i Top (położenie).
8) Przejdź na kartę zdarzeń (Events) w Inspektorze Obiektów i znajdź zdarzenia jednakowe dla przycisku i etykiety.
Podwójnym kliknięciem przycisku Button1 przejdź do edycji procedury-zdarzenia OnClick i wpisz pomiędzy
słowami begin i end jej treść: Button1.Caption:=Label1.Name+'- Przycisk1';
9) Pamiętaj o kompilowaniu programu (Ctrl+F9) po każdej zmianie kodu źródłowego modułu aplikacji oraz jego
częstym zapisywaniu (klawiszami Ctrl+S). W przypadku błędów kompilacji należy przeanalizować komunikaty typu
[Error] i poprawić program we wskazanych przez kompilator liniach.
10) W opisie tekstowym obiektów (F12, następnie Alt+F12) sprawdź pojawienie się pola metody: OnClick = Button1Click.
11) Skompiluj program (klawisze Ctrl+F9) a następnie go uruchom (F9). Klikając przycisk zaobserwuj działanie
procedury-zdarzenia. Zmień rozmiary przycisku, jeśli nowy napis nie mieści się na nim i ponownie uruchom projekt.
12) Po podwójnym kliknięciu przejdź do edycji procedury-zdarzenia OnClick dla etykiety Label1 i wpisz treść:
Label1.Caption:='Kliknales '+Label1.Name+'-'+Label1.Caption+Chr(13)+'Następna linia etykiety';
Skompiluj program (Ctrl+F9) i uruchom go (F9).
13) Umieść na formatce nowy przycisk Button2, nadaj mu właściwość Caption=’Komunikat’ oraz przypisz mu
podpowiedź „w chmurce” (Hint) „Przycisk komunikatu”. Po podwójnym kliknięciu tego przycisku przejdź do edycji
procedury-zdarzenia OnClick i wpisz treść procedury: ShowMessage('To jest okno komunikatu');
14) Umieść na formularzu i sformatuj następny przycisk Button3, któremu przypisz napis Zamknij i procedurę-zdarzenie
OnClick o treści: Close. Uruchom aplikację (F9) i sprawdź działanie przycisków.
15) Umieść na formularzu i sformatuj kolejne 2 przyciski: Button4 (napis „Pokaż etykietę 1”) i Button5 (napis „Ukryj
etykietę 1”). Oprogramuj zdarzenie OnClick dla przycisków, wpisując dla przycisku Button4 kod:
Label1.Visible:=True, dla przycisku Button5: Label1.Visible:=False.
Po rozpoczęciu wpisywania kodu instrukcji skorzystaj z podpowiedzi edytora kodu, naciskając klawisze Ctrl-Spacja.
16) Umieść na formularzu i sformatuj następne 2 przyciski: Button6 (napis „Etykieta czerwona”) i Button7 („Etykieta
niebieska”). Oprogramuj zdarzenie OnClick dla przycisków, wpisując kod: dla przycisku Button6:
Label1.Color:=clRed; dla przycisku Button7: Label1.Color:=clBlue; lub stosując makro Rgb(Red,Green,Blue), gdzie
podstawowe składowe koloru mają stopień intensywności od 0 do 255, np. Label1.Color:=Rgb(255,0,0);
17) Umieść na formularzu etykietę Label2 (napis „Skacząca etykieta”), ustaw jej kolor tła na clAqua, a czcionke na czerwony clRed.
Przejdź na zakładkę Events dla tej etykiety. Kliknięciem w polu zdarzenia OnMouseDown przejdź do edycji procedury i wpisz
treść: Label1.Font.Size:=10; Następnie kliknięciem w polu zdarzenia OnMouseUp przejdź do edycji procedury i wpisz treść:
Label1.Font.Size:=14.
18) Umieść na formularzu przycisk Button8 i oprogramuj kliknięcie na niego tak, aby etykieta Label2 skakała losowo po formularzu:
Randomize;
Label2.Top:= Random(Form1.Height);
Label2.Left:=Random(Form1.Width)
19) Umieść na formularzu i sformatuj przycisk: Button9 (napis „Rozmiar formularza”). Oprogramuj zdarzenie OnClick wpisując kod:
Label1.Caption:='Szerokosc: '+IntToStr(Form1.Width)+Chr(13)+'Wysokosc: '+IntToStr(Form1.Height); który po kliknięciu wyświetla na
etykiecie Label1 aktualne rozmiary formularza Form1.
20) Przeanalizuj kod źródłowy modułu Unit1.pas oraz opis tekstowy obiektów formularza Unit1.dfm.
P. Surdacki, IPEE PL
Komputerowe wspomaganie projektowania – ED6, IPEE PL, rok. akad. 2009/2010
Strona 2
Zadanie 2. Wczytywanie ceny towaru przez pole Edit1 i wyświetlanie wartości VAT na panelu Panel2.
1) Rozpocznij tworzenie aplikacji graficznej i zapisz powstałe pliki w folderze
Label2
o nazwie Zadanie2. Pamiętaj w trakcie tworzenia aplikacji o częstym jej Form1
Label1
zapisywaniu (Ctrl+S) oraz kompilowaniu (Ctrl+F9).
2) Na formatce Form1 (własciwość Caption: Edit i Panel) umieść panel
Panel1 i sformatuj go następująco: BevelOuter bvLowered, BorderStyle
bsSingle. Na panelu umieść pole Edit1, przycisk Button1 z napisem
Edit1
Panel2
„Wyświetl VAT” oraz drugi panel Panel2 (właściwości BevelOuter
bvLowered, BorderStyle bsSingle) do wyświetlania na nim wyników
Panel1
obliczeń, a także dwie etykiety: Label1 („Podaj cenę) i Label2 („Stawka
Button1
VAT”). Oprogramuj zdarzenie OnClick dla przycisku wpisując treść
procedury:
Cena:=StrToCurr(Edit1.Text);
Panel2.Caption:=CurrToStr(0.22*Cena);
oraz deklarację nowej zmiennej (po nagłówku procedury w części implementation): var Cena:Currency;
3) Wyświetl napis odczytany z pola Edit1 na pasku tytułowym formularza oprogramowując zdarzenie OnDoubleClick
dla komponentu Edit1 następująco:
Form1.Caption:='Cena: '+Edit1.Text +' VAT: '+Panel2.Caption.
4) Umieść następne dwie etykiety Label3 („Rozmiary formularza”) i Label4. Klikając na formularz Form1,
zaprogramuj dla niego zdarzenie OnResize (zmiana rozmiaru) tak, aby aktualny rozmiar formularza był widoczny na
etykiecie Label4:
Label4.Caption:='Szerokosc: '+IntToStr(Form1.Width)+Chr(13)+'Wysokosc: '+IntToStr(Form1.Height).
5) Dodaj na formularzu następny przycisk Button2 (z napisem Zamknij) i przypisz dla -zdarzenia OnClick procedurę o
treści: Close. Skompiluj aplikację (Ctrl+F9) i uruchom ją (F9).Sprawdź działanie wszystkich procedur.
Zadanie 3. Stosowanie komponentu RadioButton do budowy przycisków opcji.
1) Rozpocznij tworzenie aplikacji graficznej i zapisz powstałe pliki w folderze o nazwie Zadanie3
2) Na formularzu umieść komponenty Panel i GroupBox z karty Standard. Dodaj trzy przyciski typu RadioButton,
umieszczając je wewnątrz komponentu GroupBox. Ustaw właściwości Caption przycisków RadioButton
odpowiednio na: Czerwony, Zielony, Niebieski.
3) Dla zdarzenia OnClick przycisku z napisem Czerwony przypisz procedurę:
if RadioButton1.Checked then
begin
Panel1.Color:=clRed;
Panel1.Caption:='Czerwony'
end
4) Podobnie postępuj w przypadku pozostałych przycisków, zmieniając stałe kolorów.
5) Dla przycisku z napisem Czerwony ustaw właściwość Checked na True.
6) Aby od początku działania aplikacji zsynchronizować ustawienie przycisków z kolorem panelu, wpisz dla zdarzenia
OnActivate na formularzu treść procedury:
Panel1.Color:=clRed; Panel1.Caption:='Czerwony'
7) Sprawdź działanie aplikacji.
Zadanie 4. Stosowanie komponentu RadioGroup do budowy przycisków opcji.
1) Utwórz nową aplikację w folderze o nazwie Zadanie4.
2) Na formularzu umieść etykietę oraz komponenty: RadioGroup (karta Standard),
RichEdit (karta Win32) i Label1 (karta Standard).
3) Zaznacz komponent RadioGroup i ustaw jego właściwości:
Caption→Kolor czcionki (tytuł grupy opcji), Columns→2 (liczba kolumn z przyciskami w
oknie RadioGroup), ItemIndex→0 (numer zaznaczonego przycisku przy wejściu do formularza), Items→ przez podwójne
kliknięcie w polu właściwości Items wejdź do edytora StringList Editor i w kolejnych wierszach wpisz napisy
pokazujące się przy przyciskach: Czerwony, Zielony, Niebieski, Żółty.
4) Dla zdarzenia OnClick komponentu RadioGroup wpisz procedurę TForm1.RadioGroup1Click:
case RadioGroup1.ItemIndex of
0: RichEdit1.Font.Color:=clRed;
1: RichEdit1.Font.Color:=clGreen;
2: RichEdit1.Font.Color:=clBlue;
3: RichEdit1.Font.Color:=clYellow
end; Label1.Caption:=RadioGroup1.Items[RadioGroup1.ItemIndex]; Label1.Font.Color:=RichEdit1.Font.Color
5)
Aby od początku działania aplikacji zsynchronizować ustawienie przycisków z kolorem wyświetlanej czcionki, wpisz dla zdarzenia
OnActivate na formularzu Form1 treść procedury:
RichEdit1.Font.Color:=clRed;
Label1.Caption:=RadioGroup1.Items[RadioGroup1.ItemIndex]
6) Kliknij na właściwość Lines komponentu RichEdit1, w String List Editor wpisz początkową zawartość pola edycji RichEdit1, np.
słowo ‘edycja’.
6) Uruchom aplikację. Wpisując tekst w oknie RichEdit1, sprawdź kolory czcionki dla wybranej opcji.
P. Surdacki, IPEE PL