Programowanie wizualne

Prezentacja na temat: "Programowanie wizualne"— Zapis prezentacji:

1 Programowanie wizualne
PW – LAB4 Wojciech Pieprzyca

2 Komponent StringGrid Komponent StringGrid umożliwia przedstawienie danych w postaci tabelarycznej podobnie jak w arkuszu Excel. Dane umieszczone w komponencie znajdują się we właściwości Cells, dostęp do określonej komórki odbywa się poprzez podanie dwóch indeksów określających numer kolumny i numer wiersza (pierwszy indeks – numer kolumny, drugi – numer wiersza, odwrotnie niż w zwykłej tablicy). np. StringGrid1->Cells[1][3] – druga kolumna, czwarty wiersz Proszę zwrócić uwagę na to, że pierwszy wiersz i pierwsza kolumna traktowane są jako wiersz i kolumna nagłówkowa (szare tło).

3 Komponent StringGrid Najważniejsze właściwości komponentu StringGrid:
RowCount – liczba wierszy ColCount – liczba kolumn DefaultColWidth – domyślna szerokość komórki DefaultColHeight – domyślna wysokość komórki Row – aktualnie zaznaczona komórka (numer wiersza), Column – aktualnie zaznaczona komórka (numer kolumny).

4 Komponent StringGrid Właściwości określone w grupie Options:
goVertLine – widoczna siatka pionowa, goHorzLine – widoczna siatka pozioma, goRangeSelect – możliwość zaznaczenia komórek, goRowSizing – możliwość zmiany rozmiaru komórek (wiersza), goColSizing – możliwość zmiany rozmiaru komórek (kolumny), goRowSelect – zaznaczanie tylko całych wierszy, goEditing – możliwość edycji, goAlwaysShowEditor – siatka zawsze w trybie edycji.

5 Komponent TreeView Komponent TreeView umożliwia przedstawienie danych w postaci drzewa. Posiada on dwie metody do dodawania elementów drzewa: //dla głównych węzłów drzewa TreeView->Items->Add(NULL,”tekst”); //dla węzłów potomnych TreeView->Items->AddChild(rodzic,”tekst”); Obie metody zwracają wskaźnik do utworzonego obiektu (węzła drzewa), który później można wykorzystać przy tworzeniu węzłów potomnych (podając go jako argument rodzic) np. mainNode = TreeView->Items->Add(NULL,"1"); childNode = TreeView->Items->AddChild(mainNode,"1.1");

6 Komponent TreeView TTreeNode *mainNode;
Przykład tworzenia struktury drzewiastej takiej jak przedstawiono na rysunku: TTreeNode *mainNode; TTreeNode *childNode; mainNode = TreeView1->Items->Add(NULL,"1"); childNode = TreeView1->Items->AddChild(mainNode,"1.1"); childNode = TreeView1->Items->AddChild(mainNode,"1.2"); childNode = TreeView1->Items->AddChild(mainNode,"1.3"); TreeView1->Items->AddChild(childNode,"1.3.1"); Aktualnie wybrany element drzewa można odczytać za pomocą właściwości TreeView->Selected->Text.

7 Płótno Canvas W Borland Builder C++ rysowanie podstawowych elementów graficznych (tzw. prymitywów) realizowane jest w oparciu o idee płótna (ang. Canvas). Płótno jest obiektem klasy TCanvas, jednak nigdy nie używa się go samodzielnie. Canvas jest zawsze obiektem występującym w ramach innego obiektu np. Form, Bitmap, Image, PaintBox, Printer, itp. Canvas posiada swoje własne metody i właściwości służące do rysowania na określonej powierzchni, przy czym początek układu współrzędnych znajduje się w lewym górnym rogu. Oś X biegnie od lewej do prawej krawędzi, a oś Y z góry do dołu. Ćwiczenia będziemy wykonywać na Image1->Canvas (Win32)

8 Pen i Brush Pen i Brush są właściwościami obiektów klasy TCanvas,
Pen określa właściwości pióra rysującego krawędzie tworzonych obiektów graficznych np. Canvas->Pen->Color (kolor krawędzi), Canvas->Pen->Style (styl krawędzi, np. psDash - linia przerywana), Canvas->Pen->Width (grubość linii), Brush określa właściwości wypełnienia kreślonego obszaru np. - Canvas->Brush->Color (kolor wypełnienia), - Canvas->Brush->Style (styl wypełnienia np. bsCross - wypełnienie w kratkę), - Canvas->Brush->Bitmap (użycie jako wypełnienia rysunku z pliku graficznego).

9 Kreślenie linii Do rysowania linii wykorzystujemy metody MoveTo i LineTo: - MoveTo(int X, int Y), - LineTo(int X, int Y). Metoda MoveTo przesuwa pióro rysujące do podanego punktu X,Y, Metoda LineTo kreśli linię od bieżącej lokalizacji do podanego punktu X,Y, A zatem, aby narysować linię znając jej początek (X1,Y1) i koniec (X2,Y2) wystarczy użyć dwóch instrukcji: MoveTo(X1,Y1); LineTo(X2,Y2); Dla linii o początku (100,100) i końcu (150,150) wygląda to tak: MoveTo(100,100); LineTo(150,150);

10 Prostokąt - Rectangle Rysowanie prostokąta wymaga podania jego dwóch współrzędnych – lewego górnego rogu (X1,Y1) oraz prawego dolnego rogu prostokąta (X2,Y2). Rectangle(int X1, int Y1, int X2, int Y2); Przykładowo dla prostokąta mającego lewy górny róg w punkcie (100,100) i prawy dolny róg w punkcie (300,300) instrukcja będzie następująca: Rectangle(100, 100, 200, 300); Istnieje także możliwość narysowania prostokąta o zaokrąglonych rogach za pomocą instrukcji RoundRect, wymaga to dodatkowego podania 2 parametrów określających stopień zaokrąglenia, np. RoundRect(250, 250, 350, 350,10,25);

11 Elipsa i wielobok Metoda Ellipse pozwala na narysowanie dowolnej elipsy, w szczególności więc także okręgu. Składnia wywołania metody: Ellipse(int X1, int Y1, int X2, int Y2); Przykład: Ellipse(100, 100, 200, 300); Dowolny wielobok możemy narysować (za pomocą metody Polygon) poprzez podanie jego punktów składowych. Polygon(Point[]); Przykład: Canvas->Polygon(OPENARRAY (TPoint, ( Point(150, 20), Point(260, 100), Point(220, 220), Point(80, 220), Point(40, 100))));

12 Łuki – Arc, Cord Łuk jest wycinkiem okręgu lub koła (jeżeli wycinek jest wypełniony). Do rysowania łuku służą metody Arc i Cord (wycinek wypełniony kolorem). Składnia metod: Arc(int X1,int Y1,int X2,int Y2,int X3,int Y3,int X4,int Y4); Cord(int X1,int Y1,int X2,int Y2,int X3,int Y3,int X4,int Y4); Przykłady: Arc(100, 100, 40, 40, 140, 140, 100, 100); Cord(100, 100, 40, 40, 140, 140, 100, 100);

13 Tekst w trybie graficznym
Na płótnie Canvas można także pisać tekst, wcześniej określając jego parametry takie jak czcionka, kolor, rozmiar, itp. Składnia: TextOut(int X1,int Y1,AnsiString Text), gdzie (X1,Y1) to współrzędne, gdzie ma być rozpoczęte pisanie tekstu, Przykład: TextOut(100,150,”Przykładowy tekst”); Dodatkowe parametry tekstu: Font->Name = ”Arial”; Font->Size = 12; Font->Color = clBlue;

14 Ćwiczenia Z wykorzystaniem komponentu StringGrid zbudować aplikację przechowującą w postaci arkusza informacje o danych personalnych. Przechowywane pola to imie, nazwisko, miasto, wiek. Z poziomu inspektora obiektów skonfigurować komponent StringGrid, tak aby: Widoczna była pionowa i pozioma siatka, Możliwe było zaznaczanie komórek, Możliwa była zmiana rozmiaru komórek, Możliwa była edycja komórek. Umieścić pod komponentem StringGrid 3 przyciski z następującymi opisami: Wgraj dane, Dodaj wiersz, Usuń wiersz.

15 Ćwiczenia Obsługa problemu „Wgraj dane”
Początkowe dane to informacje o 5 osobach: Marek, Nowak, Krakow, 33 Adam, Kowalski, Warszawa, 55 Ewa, Halama, Wroclaw, 23 Marek, Kania, Poznan, 22 Wincenty, Maos, Wisla, 44 Dane początkowe powinny być przechowywane w tablicy dwuwymiarowej. Deklaracja tablicy dwuwymiarowej: tab[liczba_wierszy][liczba_kolumn] Tablicę taką można automatycznie zainicjalizować początkowymi wartościami np. tab[2][2] = { {”Lech”,”Ka”} , {”Jarek”,”Ka”}}; Jest to równoważne 4 przypisaniom: tab[0][0] = ”Lech”; tab[0][1] = ”Ka”; tab[1][0] = ”Jarek”; tab[1][1] = ”Ka”;

16 Ćwiczenia W kolejnym kroku obsługi należy ustalić liczbę wierszy i kolumn komponentu na odpowiednie wartości Wpisać do komórek pierwszego wiersza opis kolumn tzn. Imie, Nazwisko, Miasto, Wiek. Stworzyć dwie pętle for, które będą przechodzić po wszystkich wierszach i kolumnach komponentu StringGrid i wpisywać odpowiednie wartości z wcześniej stworzonej dwuwymiarowej tablicy. Obsługa problemu „Dodaj wiersz” W tym przypadku obsługa sprowadza się do zwiększenia o 1 wartości liczby wierszy komponentu StringGrid. Obsługa problemu „Usuń wiersz” Ponieważ nie istnieje w komponencie StringGrid metoda usuwająca wiersz o podanym numerze należy to zakodować ręcznie tzn. Jeżeli w komponencie StringGrid są tylko 2 wiersze (tzn. wiersz nagłówkowy o numerze 0 i wiersz z danymi o numerze 1) to: Wyczyść wszystkie kolumny wiersza z danymi (pętla for) Wyjdź z metody obsługi – polecenie return. Jeżeli w komponencie StringGrid są więcej niż 2 wiersze to: Przejdź pętlą for od bieżącego wiersza do ostatniego i przenieś zawartość wszystkich kolumn (kolejna pętla for) o 1 wiersz w górę (czyli do wiersza i wpisujemy wiersz i+1) Zmniejsz liczbę wierszy o jeden.

17 Ćwiczenia Stworzyć strukturę drzewiastą o wyglądzie przedstawionym na poniższym rysunku, która pojawi się wraz z wyświetleniem formularza (zdarzenie onShow formularza). Naciśnięcie przycisku Wybrany powinno skutkować wyświetleniem aktualnie wybranego elementu.

18 Ćwiczenia Narysuj na Canvas rysunek podobny do przedstawionego poniżej: