Programowanie wizualne

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

1 Programowanie wizualne
PW – LAB1 Wojciech Pieprzyca

2 1. Wstęp Borland Builder C++ jest zintegrowanym środowiskiem programowania klasy RAD (Rapid Application Development), Kompilator zawarty w BCB w pełni wspiera obiektowość realizowaną przez język C++, BCB posiada bogatą bibliotekę komponentów wizualnych, dzięki temu znacznie ułatwiony został proces budowy interfejsu użytkownika, Każdy komponent w BCB jest obiektem, posiada swoje właściwości oraz metody wykonujące określone zadania. Pisanie programu w dużym stopniu opiera się na obsłudze zdarzeń komponentów np. zdarzeniem może być kliknięcie na przycisk.

3 2. Środowisko IDE (1) Po uruchomieniu projektu aplikacji widoczne będą najważniejsze elementy IDE takie jak: - paleta komponentów, formularz, edytor kodu oraz inspektor obiektów.

4 Środowisko IDE (2) Paleta komponentów – zawiera komponenty zgrupowane logicznie w grupy na poszczególnych zakładkach (np. Standard, Additional, itd.) Formularz – jest pomocny w budowie interfejsu użytkownika, Edytor kodu – w nim będziemy wpisywać kod obsługujący zdarzenia komponentów, Inspektor obiektów – służy do określania właściwości wybranego komponentu (zakładka Properties), można za jego pomocą zorientować się również jakie zdarzenia obsługuje dany komponent (zakładka Events).

5 3. Komponenty – zakładka Standard (1)
Frames – dołączenie do formularza wcześniej utworzonej ramki z komponentami, MainMenu – służy do projektowania głównego menu, PopupMenu – w tym przypadku możemy stworzyć menu podręczne, widoczne po naciśnięciu prawego klawisza myszki, Label – etykieta do wyświetlania napisu tekstowego, Edit – jednoliniowe pole tekstowe, z możliwością wprowadzania danych, Memo – wieloliniowe pole tekstowe, również z możliwością wprowadzania danych, Button – przycisk, CheckBox – pole wyboru z dwiema możliwościami włączone/wyłączone,

6 Komponenty – zakładka Standard (2)
RadioButton – pole wyboru z wieloma opcjami, ale umożliwiające wybór tylko jednej z nich, ListBox – lista elementów do wyboru, ComboBox – rozwijalna lista elementów do wyboru, ScrollBar – pasek przewijania, GroupBox – grupuje na swoim obszarze inne obiekty, RadioGroup – grupuje komponenty RadioButton, Panel – podobnie jak GroupBox służy do grupowania komponentów, ActionList – zestaw akcji, które mogą być uruchamiane w reakcji na określone zdarzenia.

7 4. Właściwości formularza BorderStyle (1)
BorderStyle – wygląd zewnętrzny oraz zachowanie okna programu, 6 dostępnych opcji: bsDialog – okno nierozszerzalne, bez przycisków minimalizacji/ maksymalizacji okna , bsNone – okno nierozszerzalne, bez obramowania i paska tytułowego,

8 Właściwości formularza BorderStyle (2)
bsSinge – okno nierozszerzalne, standardowe obramowanie, bsSizeable – standardowe rozszerzalne okno (domyślny styl),

9 Właściwości formularza BorderStyle (3)
bsSizeToolWin – okno rozszerzalne z mniejszym paskiem tytułowym i przyciskiem zamknięcia, bsToolWindows – okno nierozszerzalne z mniejszym paskiem tytułowym i przyciskiem zamknięcia.

10 5. Właściwości formularza (I)
Caption – tekst wyświetlany w pasku tytułowym programu, ClientHeight – wysokość formularza, ClientWidth – szerokość formularza, Color – kolor obszaru formularza, Cursor – styl kursora wyświetlanego po uruchomieniu programu, Font – rodzaj czcionki dla elementów wyświetlanych na formularzu, FormStyle – styl formularza, Dwa ze styli dotyczą koncepcji MDI, która w uproszczeniu polega na tym, iż w oknie głównym (nazywanym Parent - rodzicem) tworzy się dowolną liczbę okien potomnych (nazywanych Child – dziećmi). fsNormal – domyślny styl, standardowy formularz, fsStayOnTop – formularz pozostaje zawsze na wierzchu, fsMDIForm – dla MDI, formularz główny – rodzic, fsMDIChild – dla MDI, formularz potomny – dziecko.

11 Właściwości formularza (II)
HelpFile – określa nazwę pliku pomocy związanego z programem, HelpContext – określa numer tematu związanego z formularzem, Hint – określa podpowiedź pojawiającą się po zatrzymaniu kursora myszki nad komponentem, w tym przypadku nad formularzem, ShowHint – możliwość włączania/wyłączania podpowiedzi określonych we właściwości Hint (domyślnie ustawione na false, czyli aby wyświetlać podpowiedzi, trzeba zmienić tę opcję na true), Icon – określa plik z ikoną wyświetlaną na pasku tytułowym, Top – pozycja okna programu w pikselach względem górnej krawędzi ekranu, Left - pozycja okna programu w pikselach względem lewej krawędzi ekranu, Position – inny sposób określania pozycji okna programu, m.in. ScreenCenter – środek ekranu,

12 Właściwości formularza (III)
Menu – określa obiekt typu MainMenu dla formularza, PopupMenu – określa obiekt typu PopupMenu dla formularza, Name – nazwa formularza, Visible – właściwość dwustanowa (true/false) określająca czy formularz jest widoczny, WindowState – określa stan okna po uruchomieniu programu: wsMaximized - okno zmaksymalizowane, wsMinimized - okno zminimalizowane, wsNormal – postać okna taka jak w procesie projektowania formularza.

13 Ustawienia kompilatora (1)
Domyślne ustawienia kompilatora nie zapewniają, że program będzie uruchamiał się na dowolnym komputerze bez środowiska BCB. Aby tak się stało, musimy dokonać zmian niektórych opcji. Zmian tych dokonujemy wybierając z menu Projects opcję Options. Następnie wybieramy zakładkę Compiler i klikamy na przycisk Release. Spowoduje to zmianę niektórych opcji.

14 Ustawienia kompilatora (2)
W następnym kroku należy przejść do zakładki Packages i odznaczyć opcję „Build with runtime packages”. Ostatniej zmiany dokonujemy w zakładce Linker, gdzie odznaczamy opcję „Use dynamic RTL”.

15 Przykładowy program (1)
Na pustym formularzu spróbujemy stworzyć pierwszy program, jednym jego zadaniem będzie zmiana kolorów formularza. Kolejne kroki przedstawiają się następująco: ustalamy właściwość formularza: Caption – opis formularza pojawiający się w pasku tytułowym okna programu np. Kolory. Name – nazwa formularza poprzez którą będziemy odwoływali się do formularza w kodzie programu – mainForm. BorderStyle - bsDialog (takie okno nie posiada przycisków minimalizacji i maksymalizacji oraz jest nierozszerzalne). ClientHeight – wysokość formularza 300 px. ClientWidth – szerokość formularza 300 px. Position – poScreenCenter – wyśrodkowanie okna programu. przeciągamy z palety komponentów 4 przyciski (Button),

16 Przykładowy program (2)
dla kolejnych przycisków zmieniamy w inspektorze obiektów właściwość Caption na : Domyslny, Czarny, Bialy, Czerwony oraz właściwość Name na: defaultButton, blackButton, whiteButton, redButton. dwukrotnie klikamy na przycisku z napisem Domyslny, spowoduje to otwarcie edytora kodu i wyświetlenie funkcji odpowiedzialnej za reakcję na zdarzenie naciśnięcia tego przycisku, w funkcji tej należy dodać treść: mainForm->Color = clBtnFace; pomiędzy formularzem a edytorem kodu możemy przełączać się klawiszem F12, podobnie w przypadku pozostałych przycisków należy wpisać: dla czarnego: mainForm->Color = clBlack; dla białego: mainForm->Color = clWhite; dla czerwonego: mainForm->Color = clRed; Naciskamy F9 w celu uruchomienia programu, i podziwiamy efekty ;-)

17 Przykładowy program (3)
Uwagi do programu: zmianę właściwości z poziomu kodu można spowodować poprzez wyrażenie : nazwaKomponentu->nazwaWlasciwosci = wartosc; przykładem była zmiana koloru formularza poprzez instrukcję mainForm->Color = clRed; niektóre kolory w BCB są predefiniowane tzn. mają swoje wbudowane nazwy poprzez które można się do nich odwoływać np. clRed, clBlue, itd., aby wyrównać komponenty w poziomie lub pionie oraz odstępy między nimi, należy najpierw zaznaczyć wszystkie komponenty, których ma dotyczyć ta operacja (np. klikając w nie z przytrzymanym klawiszem Shift), a następnie kliknąć prawym przyciskiem myszy na jednym z przycisków. Spowoduje to wyświetlenie menu podręcznego z którego wybieramy Position i dalej Align, a następnie wybrany rodzaj wyrównywania.

18 Tworzenie menu Menu jest typowym elementem interfejsu prawie każdego programu. Tworzenie menu w BCB jest bardzo intuicyjne. Wystarczy bowiem i wybrać komponent MainMenu z palety standardowych komponentów, umieścić ten komponent na formularzu, kliknąć na nim prawym klawiszem i wybrać opcję Menu Designer. Spowoduje to wyświetlenie projektu menu. Dodawanie kolejnych elementów menu odbywa się albo poprzez naciśnięcie klawisza Insert albo naciśnięcie prawego klawisza myszy i wybranie opcji Insert. Podobnie można usuwać elementy naciskając Delete na wybranym elemencie lub klikając go prawym klawiszem myszy i wybierając opcję Delete. Tekst skojarzony z danym elementem Menu wpisujemy w Inspektorze Obiektów, we właściwości Caption. Klikając dwa razy na danym elemencie Menu przechodzimy do edytora kodu związanego z reakcją na naciśnięcie określonego elementu

19 Przykładowe menu Przykładowe menu składa się z dwóch elementów głównych Plik i Edycja, oraz odpowiednich opcji podmenu. Podkreślenie umożliwiające skróty klawiaturowe (np. Alt+P, aby dostać się do menu Plik) uzyskano dzięki wstawieniu znaku & przed literą, która ma umożliwiać skrót z klawiszem Alt (np. &Plik).

20 Ćwiczenia Ćw.1Proszę zbudować interfejs i napisać kod przykładowego programu (zmieniający kolory formularza) zgodnie z instrukcjami podanym na slajdach 15-17, Ćw.2 Proszę na podstawie informacji zawartych na slajdach 1-12 stworzyć interfejs użytkownika wyglądający tak jak na załączonym rysunku. Proszę uwzględnić dodatkowe informacje: Nazwa formularza – mainForm, Opis formularza – Dane personalne, BorderStyle – okno nierozszerzalne ze standardowym obramowaniem, Okno programu po uruchomieniu ma być zmaksymalizowane (znaleźć odpowiednią wartość dla odpowiedniej właściwości), Proszę utworzyć menu zgodnie ze wskazówkami na slajdzie 18 i opcjami jak na slajdzie 19.

21 Ćwiczenia Wszystkie komponenty powinny mieć nazwy (Name) w konwencji nazwapolaTypkomponentu np. imieTextBox, stanowiskoComboBox, itd. Pola imie, nazwisko i wiek są typu Edit i przechowują swoją wartość we właściwości Text, domyślnie pola te powinny być puste, Pola dotyczące płci są typu RadioButton, opis pola przechowywany jest we właściwości Caption, Pole stanowisko jest typu ComboBox i wartości do wyboru przechowuje we właściwości Items, do wybory powinny być następujące stanowiska: kierownik, analityk, programista, webmaster. Proszę usunąć wartość ComboBox1 z właściwości Text tego komponentu. Pole stawka jest typu ListBox i wartości do wyboru przechowuje we właściwości Items, do wyboru powinny być następujące stawki: 30-60, 60-80, , Pola dotyczące premii są typu CheckBox i swój opis przechowują we właściwości Caption. Proszę nie zapomnieć nadać tym komponentom odpowiednich nazw (właściwość Name). Pole zyciorys jest typu Memo i przechowuje tekst we właściwości Lines. Domyślnie pole to powinno być puste.

22 Ćwiczenia W kodzie programu proszę stworzyć metodę int sprawdz(), która będzie sprawdzała czy formularz został poprawnie wypełniony i zwracała wartość -1 jeśli wystąpił błąd lub 1 jeśli wszystko zostało poprawnie wypełnione. Metoda sprawdz() powinna być wywoływana na początku metod obsługujących wyświetlanie Danych podstawowych i Danych dodatkowych (zdarzenia klinięcia przycisków o takich nazwach). pola imie,nazwisko,wiek muszą być wypełnione //przykład pokazujący sprawdzenie czy jest wypełnione pole //imie znajdujące się na formularzu mainForm if (mainForm->imieEdit->Text==””) { //okno z komunikatem ShowMessage(”Pole imie musi byc wypelnione”); return -1; //wyjscie z funkcji sprawdz }

23 Ćwiczenia pole wiek dodatkowo musi być z zakresu 15-80,
Ponieważ wiek wpisywany jest w polu Edit, który zawsze przechowuje wartość typu tekstowego (String), to konieczna jest konwersja tej wartości na typ całkowity (Integer). Służy do tego metoda StrToInt(wartosc) czyli w naszym przypadku: int wiek = StrToInt(mainForm->wiekEdit->Text); Dopiero teraz można za pomocą odpowiedniej instrukcji if sprawdzić czy wartość mieści się w podanych granicach. pola plec, stanowisko i stawka muszą mieć wybraną jakąś wartość. Pola dotyczące płci są typu RadioButton. Pole jest zaznaczone jeśli właściwość Checked jest true mainForm->kobietaRadioButton->Checked

24 Ćwiczenia Pole stanowisko jest typu ComboBox. To czy wybrana jest jakaś opcja można określić sprawdzając właściwość ItemIndex. Jeżeli wybrana jest pierwsza opcja z listy to przyjmuje on wartość 0, druga 1,itd. Jeżeli żadna wartość nie jest wybrana to ItemIndex jest równy -1. mainForm->stanowiskoComboBox->ItemIndex Pole stawka jest typu ListBox. Sprawdzenie w identyczny sposób jak dla ComboBox z użyciem właściwości ItemIndex. mainForm->stawkaListBox->ItemIndex Po naciśnięciu przycisku Dane podstawowe, najpierw powinna zostać wywołana funkcja sprawdz(). Jeżeli metoda sprawdź zwróciła wartość 1 (tzn. formularz został poprawnie wypełniony) to w nowym oknie (uzyskanym za pomocą metody ShowMessage) powinny pojawić się informacje o imieniu, nazwisku i wieku osoby. Składowe typu String można łączyć ze sobą za pomocą operatora + np. ShowMessage(”Imie:”+mainForm->imieEdit->Text+ ” Nazwisko:” +mainForm->nazwiskoEdit->Text);

25 Ćwiczenia Po naciśnięciu przycisku Dane dodatkowe, najpierw powinna zostać wywołana funkcja sprawdz(). Jeżeli metoda sprawdź zwróciła wartość 1 (tzn. formularz został poprawnie wypełniony) to w nowym oknie (uzyskanym za pomocą metody ShowMessage) powinny pojawić się informacje o plci, stanowisku, stawce i uzyskanych premiach. Pola dotyczące plci są typu RadioButton. Zaznaczone są jeśli właściwość Checked jest true. Aby zapisać czy mamy do czynienia z kobietą czy mężczyzną możemy utworzyć pomocniczą zmienną plec typu String (typ tekstowy). String plec; if (mainForm->kobietaRadioButton->Checked) plec = ”kobieta”; else plec = ”mezczyzna”;

26 Ćwiczenia Pole stanowisko jest typu ComboBox. Wybraną wartość możemy poznać odczytując właściwość ItemIndex, a następnie odwołując się do tablicy Items->Strings (przechowującej teksty wszystkich opcji) pod wskazany index. int index = mainForm->stanowiskoComboBox->ItemIndex; String stanowisko = mainForm->stanowiskoComboBox->Items->Strings[index]; Pole stawka jest typu ListBox. Wybraną wartość możemy poznać odczytując właściwość ItemIndex, a następnie odwołując się do tablicy Items->Strings (przechowującej teksty wszystkich opcji) pod wskazany index, identycznie jak to zrobiono powyżej dla pola typu ComboBox. Pola dotyczące premii są typu CheckBox. Pole jest zaznaczone jeśli jego właściwość Checked jest true. Można to sprawdzić np. tak: String premie; if (mainForm->premiaPodstawowaCheckBox->Checked) premie = premie+”premia podstawowa ”;