C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 1
______________________________________________________________________
PROGRAMOWANIE OBIEKTOWE
ĆWICZENIE 4
C++ BUILDER 6.0 PE
" Projektowanie prostego edytora grafiki
" Obiekt TPanel
" Obiekt TButton
" Obiekt TScrollBar
" Obiekt TColorDialog
" Obiekt TLabel
" Obiekt TImage
" Obiekt TSaveDialog
" Obiekt TOpenDialog
" Obiekt TShape
" Zdarzenia: OnMouseUp, OnMoseDown, OnMouseMove
" Metoda FormCreate
©2004 Jerzy Kluczewski
2 C++ Builder. Programowanie obiektowe. Ćwiczenie 4.
______________________________________________________________________
I. Wstęp
Wykonaj prostą aplikację, która będzie słu\
yła do edycji map bitowych
o rozdzielczości nie większej od 400 x 800 pikseli.
Aplikacja musi umo\
liwiać u\
ytkownikowi rysowanie, kasowanie rysunku,
wybór szerokości i koloru pędzla, odczyt i zapis rysunku do pliku dyskowego
o rozszerzeniu BMP oraz zakończenie pracy.
Nasz projekt będzie zawierał następujące obiekty:
" TPanel; - górny panel zawierający przyciski
" TButton; - przycisk  Kolor pędzla
" TScrollBar; - suwak  Szerokość pędzla
" TColorDialog; - okno dialogowe wyboru koloru
" TLabel; - napis  Szerokość pędzla
" TImage; - obszar rysowania
" TSaveDialog; - okno dialogowe zapisu rysunku do pliku
" TOpenDialog; - okno dialogowe odczytu rysunku z pliku
" TShape; - kółeczko pokazujące aktualny kolor
Nasz projekt plikacji zapiszemy w plikach rozpoczynajÄ…cych siÄ™ od nazwy Grafika4.
Utwórz projekt aplikacji za pomocą polecenia File New Application
Zapisz projekt aplikacji za pomocÄ… polecenia File Save All ...
Zapisz projekt do plików:
" formularza do Malarz4Unit1.cpp,
" głównego pliku projektu Malarz4.bpr
Zmień tytuł formularza Form1 na Malarz4.
Ustaw opcje projektu za pomocÄ… polecenia Project Options ...
a w oknie zmień następujące opcje:
Polecenie: Project Options Application Load Icon
W polu  Nazwa pliku ustaw Malarz4.ico.
Po zatwierdzeniu w panelu  Icon pojawi się właściwa ikona.
C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 3
______________________________________________________________________
Przejdz
do zakładki  Linker
Wyłącz opcję  Use dynamic RTL .
Przejdz
do zakładki  Packeges
Wyłącz opcję  Build with runtime packages .
Zatwierdz
opcje projektu Malarz4 za pomocÄ… przycisku  OK. i przejdz
do następnego
rozdziału.
II. Tworzenie panelu i obszaru rysowania
Projektowanie obiektu z klasy TPanel
Zaprojektujemy teraz górny panel zawierający kontrolki sterujące aplikacją.
Z zakładki Standard wybieramy obiekt klasy TPanel i przenosimy go na formularz.
Za pomocÄ… klawisza F11 przechodzimy do okna Object Inspector. Wybieramy
zakładkę Properties i wyszukujemy właściwość  Align . Wybieramy wartość aTop.
©2004 Jerzy Kluczewski
4 C++ Builder. Programowanie obiektowe. Ćwiczenie 4.
______________________________________________________________________
Projektowanie obiektu z klasy TImage
Zaprojektujemy obszar słu\
Ä…cy do rysowania.
Z zakładki Additional wybieramy obiekt klasy TImage i przenosimy go na formularz.
Za pomocÄ… klawisza F11 przechodzimy do okna Object Inspector. Wybieramy
zakładkę Properties i wyszukujemy właściwość  Align . Wybieramy wartość aClient.
Przygotowaliśmy szkielet naszej aplikacji.
C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 5
______________________________________________________________________
III. Tworzenie obiektów na panelu
Zaprojektujemy teraz kontrolki sterujące na górnym panelu.
Projektowanie obiektu z klasy TLabel
Z zakładki Standard wybieramy obiekt klasy TLabel i przenosimy go na panel Panel1.
Właściwość Caption ustawiamy na  Szerokosc pędzla .
Projektowanie obiektu z klasy TScrollBar
Z zakładki Standard wybieramy obiekt klasy TSrollBar i przenosimy go na panel
Panel1.
Projektowanie obiektu z klasy TShape
Z zakładki Additional wybieramy obiekt klasy TShape i przenosimy go na panel
Panel1.
Projektowanie obiektów z klasy TButton
Z zakładki Standard wybieramy obiekt klasy TButton i przenosimy go na formularz.
Za pomocÄ… klawisza F11 przechodzimy do okna Object Inspector. Wybieramy
zakładkę Properties i wyszukujemy właściwość  Caption .
Wstawiamy 5 przycisków i ustawiamy dla nich napisy:
©2004 Jerzy Kluczewski
6 C++ Builder. Programowanie obiektowe. Ćwiczenie 4.
______________________________________________________________________
Dla Button1 we właściwości Caption wpisujemy tekst  Wyczysc .
Dla Button2 we właściwości Caption wpisujemy tekst  Kolor .
Dla Button3 we właściwości Caption wpisujemy tekst  Otworz .
Dla Button4 we właściwości Caption wpisujemy tekst  Zapisz .
Dla Button5 we właściwości Caption wpisujemy tekst  Koniec .
Zmiana właściwości obiektu Shape1
Zaznaczamy obiekt Shape1.
Właściwość Shape ustawiamy na  stCircle .
Właściwość  Min ustawiamy na 5, a  Max na 40.
C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 7
______________________________________________________________________
Właściwość Brush->Color ustawiamy na  clBlack
Właściwość Brush->Style ustawiamy na  bsSolid
Teraz nasze obiekty (kontrolki) umieszczone na panelu wyglądają następująco:
IV. Tworzenie obiektów dialogowych
Zaprojektujemy teraz obiekty związane z przyciskami Kolor, Otwórz, Zapisz.
Projektowanie obiektu z klasy TColorDialog
Przejdz
do zakładki Dialogs.
Na obszar obiektu Image1 wstaw obiekt ColorDialog1.
Projektowanie obiektu z klasy TOpenDialog
Na obszar obiektu Image1 wstaw obiekt OpenDialog1.
©2004 Jerzy Kluczewski
8 C++ Builder. Programowanie obiektowe. Ćwiczenie 4.
______________________________________________________________________
Projektowanie obiektu z klasy TSaveDialog
Na obszar obiektu Image1 wstaw obiekt SaveDialog1.
Zmiana właściwości obiektu z klasy OpenDialog1
Zaznacz obiekt OpenDialog1. Przejdz
do okna  Object Inspector .
Zmień następujące właściwości:
"  DefaultExt na bmp,
C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 9
______________________________________________________________________
"  Filter na  Mapa bitowa - *.bmp (w oknie  Filter editor  jak na poni\
szym
rysuneku),
"  Title na  Otwórz rysunek z pliku ,
Zmiana właściwości obiektu z klasy SaveDialog1
Zaznacz obiekt SaveDialog1. Przejdz
do okna  Object Inspector .
©2004 Jerzy Kluczewski
10 C++ Builder. Programowanie obiektowe. Ćwiczenie 4.
______________________________________________________________________
Zmień następujące właściwości:
"  DefaultExt na bmp,
"  Filter na  Mapa bitowa - *.bmp (w oknie  Filter editor  jak na poni\
szym
rysuneku),
"  Title na  Otwórz rysunek z pliku ,
V. Tworzenie metod dla zdarzeń
Zaprojektujemy teraz metody dla zdarzeń występujących w naszym projekcie.
Zdarzeniami tymi będą:
" Przyciśnięcie przycisku myszy,
" Przesunięcie myszy (przy naciśniętym przycisku myszy),
" Zwolnienie przycisku myszy,
" Kliknięcie przycisku  Wyszysc ,
" Kliknięcie przycisku  Kolor ,
" Kliknięcie przycisku  Otworz ,
" Kliknięcie przycisku  Zapisz ,
" Kliknięcie przycisku  Koniec
" Kliknięcie lub przesunięcie paska przewijania  ScrollBar1 ,
" Przyciśnięcie przycisku myszy w obiekcie Image1,
" Przesunięcie myszy w obiekcie Image1 (przy naciśniętym przycisku myszy),
" Zwolnienie przycisku myszy w obiekcie Image1,
C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 11
______________________________________________________________________
UWAGA:
Z ćwiczeń 1,2,3 wynieśliśmy ju\
umiejętność znajdowania zdarzeń i wiązania z nimi
kodu w C++ - teraz tylko krótkie przypomnienie:
Wyszukanie zdarzenia:
Obiekt Form1 zaznaczamy w oknie  Object TreeView
W oknie (F11) Object Inspector wybieramy zakładkę  Events
Wybieramy zdarzenie  OnMouseDown (przyciśnięcie przycisku myszy)
Klikamy dwa razy i pojawia siÄ™ okno edycji kodu C++ metody zwiÄ…zanej z wybranym
zdarzeniem:
Wpisujemy kod metody (najlepiej dodawać na początku krótki komentarz opisujący co
dana metoda robi):
©2004 Jerzy Kluczewski
12 C++ Builder. Programowanie obiektowe. Ćwiczenie 4.
______________________________________________________________________
Po tym krótkim przypomnieniu przystępujemy do programowania metod.
Programowanie metody FormMouseDown
Po wybraniu zdarzenia OnMouseDown w oknie edycji kodu C++ metody zwiÄ…zanej
z wybranym zdarzeniem wpisujemy następujący kod:
Uwaga: prezentowany kod zawiera tak\
e nagłówek, który jest tworzony automatycznie
przez C++ Builder, wpisuj więc tylko ciało metody.
void __fastcall TForm1::FormMouseDown(TObject *Sender, TMouseButton
Button,
TShiftState Shift, int X, int Y)
{
//reakcja na przycisniecie przycisku myszy
rysuj = true;
Canvas->MoveTo(X,Y);
}
Programowanie metody FormMouseMove
Po wybraniu zdarzenia OnMouseMove w oknie edycji kodu C++ metody zwiÄ…zanej
z wybranym zdarzeniem wpisujemy następujący kod:
Uwaga: prezentowany kod zawiera tak\
e nagłówek, który jest tworzony automatycznie
przez C++ Builder, wpisuj więc tylko ciało metody.
void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y)
{
//reakcja na przesuniecie myszy
Canvas->Pen->Color = ColorDialog1->Color;
if (rysuj)
Canvas->LineTo(X,Y);
}
C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 13
______________________________________________________________________
Programowanie metody FormMouseUp
Po wybraniu zdarzenia OnMouseUp w oknie edycji kodu C++ metody zwiÄ…zanej
z wybranym zdarzeniem wpisujemy następujący kod:
Uwaga: prezentowany kod zawiera tak\
e nagłówek, który jest tworzony automatycznie
przez C++ Builder, wpisuj więc tylko ciało metody.
void __fastcall TForm1::FormMouseUp(TObject *Sender, TMouseButton Button,
TShiftState Shift, int X, int Y)
{
//reakcja na zwolnienie przycisku myszy
rysuj = false;
}
Programowanie metody Button1Click  przycisk  Wyczyść
Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody zwiÄ…zanej
z wybranym zdarzeniem wpisujemy następujący kod:
void __fastcall TForm1::Button1Click(TObject *Sender)
{
Image1->Canvas->Brush->Color = clWhite;
Image1->Canvas->Pen->Color = ColorDialog1->Color;
Image1->Canvas->Rectangle(0,0,Form1->Width,Form1->Height);
}
Programowanie metody Button2Click  przycisk  Kolor
Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody zwiÄ…zanej
z wybranym zdarzeniem wpisujemy następujący kod:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
if (ColorDialog1->Execute())
{
Shape1->Brush->Color=ColorDialog1->Color;
Image1->Canvas->Pen->Color = ColorDialog1->Color;
}
}
©2004 Jerzy Kluczewski
14 C++ Builder. Programowanie obiektowe. Ćwiczenie 4.
______________________________________________________________________
Programowanie metody Button3Click  przycisk  Otwórz
Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody zwiÄ…zanej
z wybranym zdarzeniem wpisujemy następujący kod:
void __fastcall TForm1::Button3Click(TObject *Sender)
{
if(OpenDialog1->Execute())
Image1->Picture->LoadFromFile(OpenDialog1->FileName);
}
Programowanie metody Button4Click  przycisk  Zapisz
Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody zwiÄ…zanej
z wybranym zdarzeniem wpisujemy następujący kod:
void __fastcall TForm1::Button4Click(TObject *Sender)
{
if(SaveDialog1->Execute())
Image1->Picture->SaveToFile(SaveDialog1->FileName);
}
Programowanie metody Button5Click  przycisk  Koniec
Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody zwiÄ…zanej
z wybranym zdarzeniem wpisujemy następujący kod:
void __fastcall TForm1::Button5Click(TObject *Sender)
{
Application->Terminate();
}
C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 15
______________________________________________________________________
Programowanie metody ScrollBar1Change  pasek  Szerokość pędzla
Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody zwiÄ…zanej
z wybranym zdarzeniem wpisujemy następujący kod:
void __fastcall TForm1::ScrollBar1Change(TObject *Sender)
{
Image1->Canvas->Pen->Width = ScrollBar1->Position;
Shape1->Width = ScrollBar1->Position;
Shape1->Height = ScrollBar1->Position;
}
Dodanie zmiennej globalnej  rysuj
Przejdz
do okna kodu C++ (klawisz F12) na zakładce wybierz  Open Source/Header
File
W oknie pliku nagłówkowego Malarz4Unit1.h wpisz deklarację:
W sekcji  private klasy TForm1 dopisujemy deklaracjÄ™:
private: // User declarations
bool rysuj;
Zmienna ta będzie wykorzystywana przez metody :
" FormMouseDown
" FormMouseMove
" FormMouseUp
©2004 Jerzy Kluczewski
16 C++ Builder. Programowanie obiektowe. Ćwiczenie 4.
______________________________________________________________________
Przystąpmy teraz do programowania właściwych metod słu\
Ä…cych do rysowania w
obszarze Image1:
Programowanie metody Image1MouseDown
Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody zwiÄ…zanej
z wybranym zdarzeniem wpisujemy następujący kod:
void __fastcall TForm1::Image1MouseDown(TObject *Sender,
TMouseButton Button, TShiftState Shift, int X, int Y)
{
rysuj = true;
Image1->Canvas->MoveTo(X,Y);
Image1->Cursor=crCross;
}
Programowanie metody Image1MouseMove
Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody zwiÄ…zanej
z wybranym zdarzeniem wpisujemy następujący kod:
//reakcja na przesunięcie myszy
if (rysuj)
Image1->Canvas->LineTo(X,Y);
Programowanie metody Image1MouseUp
Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody zwiÄ…zanej
z wybranym zdarzeniem wpisujemy następujący kod:
void __fastcall TForm1::Image1MouseUp(TObject *Sender, TMouseButton
Button,
TShiftState Shift, int X, int Y)
{
rysuj = false;
Image1->Cursor=crDefault;
}
C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 17
______________________________________________________________________
VI. Tworzenie metody startowej okna
Programowanie metody FormCreate
Zaprojektujemy teraz metodę, która będzie uruchamiana podczas pierwszego otwierania
formularza, czyli startu naszej aplikacji.
Przejdz
do formularza Form1 (klawisz F12).
Wybierz w oknie Object Inspector  Form1 i kliknij dwa razy na zdarzenie
 OnCreate
Po wybraniu zdarzenia OnCreate w oknie edycji kodu C++ metody zwiÄ…zanej
z wybranym zdarzeniem wpisujemy następujący kod:
void __fastcall TForm1::FormCreate(TObject *Sender)
{
Image1->Canvas->Brush->Color = clWhite;
Image1->Canvas->Pen->Color = clBlack;
Image1->Canvas->Rectangle(0,0,Form1->Width,Form1->Height);
Image1->Canvas->Pen->Width = ScrollBar1->Position;
Shape1->Width = ScrollBar1->Position;
Shape1->Height = ScrollBar1->Position;
}
©2004 Jerzy Kluczewski
18 C++ Builder. Programowanie obiektowe. Ćwiczenie 4.
______________________________________________________________________
VII. Podsumowanie
Nasz projekt zawiera następujące obiekty:
Przetestujemy teraz działanie aplikacji: