Programowanie wizualne

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

1 Programowanie wizualne
PW – LAB3 Wojciech Pieprzyca

2 Pasek narzędziowy (1) Pasek narzędziowy możemy łatwo stworzyć poprzez komponent ToolBar umieszczony na palecie komponentów na zakładce Win32. Na pasku narzędziowym klikając prawym klawiszem myszy możemy dodać jeden z dwóch elementów: New Button – nowy przycisk na pasku z możliwością dodania do niego ikony, New Separator – odstęp między poszczególnymi przyciskami. Zanim będziemy mogli użyć wybranych ikon konieczne jest dodania do formularza nowego komponentu o nazwie ImageList (Win32). Klikając dwukrotnie na tym komponencie przechodzimy do Image Editor, gdzie możemy dowolnie dodawać/usuwać ikony, które są nam potrzebne w ramach opracowywanego programu.

3 Pasek narzędziowy (2) Związanie zestawu ikon z paskiem narzędziowym odbywa się poprzez wybranie jedej z list ikon (ImageList) jako właściwości Images paska. Aby przyporządkować konkretną ikonę do konkretnego przycisku na pasku narzędziowym używamy właściwości ImageIndex przycisku na pasku. Podobnie w przypadku menu głównego możemy po stworzeniu listy ikon przyporządkować ją do komponentu MainMenu (właściwość Images), a następnie wybrać konkretne ikony dla poszczególnych pozycji menu (właściwość ImageIndex).

4 Pasek stanu Pasek stanu pełni zwykle funkcję informacyjną np. w edytorze kodu Borland Builder C++ podaje się na nim aktualnie edytowany wiersz i kolumnę oraz stan klawisza Insert. Pasek dzieli się na części (tzw. panele). Dodanie nowego panelu do paska odbywa się poprzez naciśnięcie prawego klawisza myszy na panelu, wybraniu opcji Panels Editor i dodaniu nowych paneli (opcja Add New). Dodatkowo można ustalić szerokość danego panelu (właściwość Width). Zapis tekstu do panelu odbywa się z poziomu kodu za pomocą instrukcji: StatusBar1->Panels->Items[nr]->Text = jakisText;

5 Komponent RichEdit Komponent RichEdit służy edycji wieloliniowego pola tekstowego. Posiada on funkcjonalność komponentu Memo, a do tego potrafi wczytać duże pliki, ustawić marginesy i wyrównywać tekst. RichEdit znajduje się na zakładce Win32. Ważniejsze właściwości i metody RichEdit to: Align – wyrównanie, opcja alClient ustala rozmiar okna edycyjnego na cały pozostały obszar programu (dlatego warto ten komponent dodawać na samym końcu). RichEdit1->Lines>Count – aktualna liczba wierszy zapisanego tekstu, RichEdit1->Clear() – czyści obszar edycyjny, RichEdit1->Lines->LoadFromFile(nazwaPliku) – ładuje zawartość pliku o podanej nazwie do obszaru edycyjnego, RichEdit1->Lines->SaveToFile(nazwaPliku) – zapisuje zawartość obszaru edycyjnego do pliku o podanej nazwie RichEdit1->Modified – określa czy tekst był modyfikowany od czasu ostatniego zapisu do pliku.

6 OpenDialog Komponent OpenDialog będzie nam służył do wyboru nazwy pliku do otwarcia. Jego użycie wiąże się z umieszczeniem na formularzu niewidocznego komponentu OpenDialog a później wywołaniu metody OpenDialog1->Execute(). Metoda ta zwraca wartość 0 jeżeli użytkownik nie wybrał pliku, i wartości różne od 0, gdy użytkownik wybrał plik. Można zatem to sprawdzać za pomocą instrukcji warunkowej if: if (OpenDialog1->Execute()) { //mamy do dyspozycji nazwę otwieranego pliku //poprzez OpenDialog1->FileName } Dodatkowo właściwość Filter pozwala nam ustalić rozszerzenia plików jakie będą wyświetlane przy wyborze pliku.

7 SaveDialog Komponent SaveDialog będzie nam służył do wyboru nazwy pliku do zapisu. Jego użycie wiąże się z umieszczeniem na formularzu niewidocznego komponentu SaveDialog a później wywołaniu metody SaveDialog1->Execute(). Metoda ta zwraca wartość 0 jeżeli użytkownik nie wybrał pliku, i wartości różne od 0, gdy użytkownik wybrał plik. Można zatem to sprawdzać za pomocą instrukcji warunkowej if: if (SaveDialog1->Execute()) { //mamy do dyspozycji nazwę otwieranego pliku //poprzez SaveDialog1>FileName } Dodatkowo właściwość Filter pozwala nam ustalić rozszerzenia plików jakie będą wyświetlane przy wyborze pliku.

8 FontDialog Komponent FontDialog służy do wyboru parametrów używanej czcionki. W wyniku wywołania metody Execute, parametry wybranej czcionki zapisywane są we właściwości Font komponentu FontDialog. Właściwość ta to obiekt typu TFont. if (FontDialog1->Execute()) { //mamy do dyspozycji wybraną czcionkę //poprzez FontDialog1->Font }

9 ColorDialog Komponent ColorDialog służy do wyboru koloru.
W wyniku wywołania metody Execute, wybrany kolor zapisywany jest we właściwości Color komponentu ColorDialog. Właściwość ta to obiekt typu TColor. if (ColorDialog1->Execute()) { //mamy do dyspozycji wybrany kolor //poprzez ColorDialog1->Color }

10 Okna z komunikatami Application->MessageBox(”komunikat”,”tytuł okna”, przyciski|ikona); Przykład: int result = Application->MessageBox(”Plik został zmieniony. Czy zapisać?”, ”Uwaga”, MB_YESNOCANCEL|MB_ICONWARNING); W zmiennej result znajdzie się numer wybranej opcji. Można sprawdzać jaka opcja została wybrana poprzez porównanie zmiennej result z predefiniowanymi wartościami np. if (result == IDYES) if (result==IDCANCEL) itp. Rodzaje przycisków Rodzaje ikon

11 Komponent TTimer Komponent Timer pozwala uruchamiać określony kod co jakiś okres czasu (Timer umieszczony jest na zakładce System). Posiada ona właściwość Interval, która określa w milisekundach odstępy czasu pomiędzy kolejnymi wywoływaniami kodu. Wywoływany kod umieszcza się w metodzie obsługi zdarzenia onTimer. Komponent Timer posiada także właściwość Enabled, która pozwala włącząć/wyłączać odliczanie czasu (wartości true/false).

12 Ćwiczenia (1) menu pasek narzędziowy obszar edycyjny pasek stanu
Naszym zadaniem będzie napisanie prostego edytora tekstu. Komponent edycyjny to RichEdit, należy ustalić jego właściwość Align na alClient co spowoduje, że będzie on rozszerzony na całe okno programu. Pasek stanu proszę podzielić na dwa panele (szerokość 150px i 150 px). W menu Plik dostępne są opcje Nowy, Otwórz, Zapisz i Zamknij. W menu Edycja proszę umieścić opcje Kopiuj, Wklej, Wytnij. Do poszczególnych przycisków i opcji menu proszę przyporządkować ikony (wojtek.wsi.edu.pl/ikony). menu pasek narzędziowy obszar edycyjny pasek stanu

13 Ćwiczenia (2) Proszę napisać kod dla tworzenia nowego pliku. Powinno to polegać na wyczyszczeniu obszaru edycyjnego oraz paneli na pasku statusu. Uwaga: kod powinien być związany z odpowiednią opcją w menu, spowoduje to utworzenie odpowiednich metod obsługi zdarzenia wyboru opcji menu. Proszę napisać kod otwarcia nowego pliku. Koncepcja: jeżeli użytkownik wybrał plik (użyć OpenDialog){ wyczyść obszar edycyjny wczytaj plik zapisz do pierwszego panelu paska stanu liczbę wierszy zapisz do drugiego panelu paska stanu ścieżkę do pliku } Proszę ustawić właściwość FilterName (nacisnąć obok tej właściwości przycisk z trzema kropkami) dla komponentu OpenDialog1 na *.txt (zarówno Filter jak i Filter Name).

14 Ćwiczenia (3) Ponieważ liczba linii może zmieniać się w trakcie edycji tekstu to należy to na bieżąco monitorować. W tym celu wystarczy użyć zdarzenia onChange komponentu RichEdit, które wywoływane jest zawsze, gdy zmienia się tekst w komponencie. Obsługa tego zdarzenia powinna polegać na przypisaniu do pierwszego panelu paska stanu aktualnej liczby linii. Proszę napisać kod zapisu nowego pliku. Koncepcja: jeżeli użytkownik wybrał plik (użyć SaveDialog){ zapisz plik (ścieżka to SaveDialog1->FileName+”.txt”) zapisz do drugiego panelu paska stanu nową ścieżkę do pliku } Proszę ustawić właściwość FilterName (nacisnąć obok tej właściwości przycisk z trzema kropkami) dla komponentu SaveDialog1 na *.txt (zarówno Filter jak i Filter Name).

15 Ćwiczenia (4) Proszę napisać kod obsługi dla opcji Kopiuj, Wklej, Wytnij. Odpowiednie metody dla komponentu RichEdit do wywołania to: CopyToClipboard() - kopiowanie do schowka PasteFromClipboard() - wklejanie ze schowka CutToClipboard() - wycinanie do schowka Proszę napisać kod zamknięcia programu. Application->Terminate() Naciśnięcie ikony na pasku narzędziowym powinno powodować wywołanie odpowiedniej metody wcześniej napisanej dla menu (np. Nowy1Click). Nie należy zatem pisać po raz drugi tego samego kodu, ale wybrać w inspektorze obiektów dla danego przycisku z ikoną na pasku narzędziowym dla zdarzenia onClick odpowiednią metodą wcześniej już napisaną dla menu.

16 Ćwiczenia (5) Rozszerzyć kod tworzenia nowego pliku oraz kod otwarcia pliku: jeżeli komponent edycyjny był modyfikowany (Modified) wyświetl komunikat z zapytaniem czy zapisać plik jeżeli użytkownik wybrał opcję tak wywołaj metodę zapisu Zapisz1Click(this) jeżeli użytkownik wybrał opcję anuluj wyjdź z metody - return dotychczasowy kod Dodać do kodu zapisu pliku instrukcję: RichEdit1->Modified = false; Spowoduje to, że po zapisie komponent edycyjny będzie uznawany za niezmieniony.

17 Ćwiczenia (6) Dodać do menu Edycja opcję Czcionka.
Wykorzystać komponent FontDialog. Zmianie powinna ulegać czcionka wykorzystywana przez komponent edycyjny RichEdit. Dodać do menu Edycja opcję Kolor tla. Wykorzystać komponent ColorDialog. Zmianie powinno ulegać tło komponentu edycyjnego RichEdit (właściwość Color). Stworzyć program wykorzystujący komponent TTimer, który co 2 sekundy będzie wywoływał kod zmieniający kolor formularza na losowo wygenerowany. Dodatkowo na formularzu umieścić przycisk, który będzie włączał/wyłączał odliczanie czasu dla tego komponentu. Losowanie kolorów zrealizować według poniższego kodu: randomize() //uruchomienie generatora liczb losowych int r = rand()%255; //(wartości losowe od 0 do 255 dla składowej r) int g = rand()%255; //(wartości losowe od 0 do 255 dla składowej g) int b = rand()%255; //(wartości losowe od 0 do 255 dla składowej b) Form1->Color = TColor(RGB(r,g,b));