rozdział 1: WSTĘP DO PROGRAMOWANIA WIZUALNEGO

Transkrypt

1 rozdział 1: WSTĘP DO PROGRAMOWANIA WIZUALNEGO ostatnia modyfikacja:

2 Co to jest programowanie wizualne?

3 to ogół technik tworzenia programów pracujących w środowisku GUI (Graphical User Interface)

4 Skąd się wzięło GUI? przez wiele lat jedyne sposoby komunikacji z użytkownikiem opierały środkach udostępnianych przez terminale tekstowe (czyli tak naprawdę elektroniczne dalekopisy)

5 MENU ==== A) B) C) D) Z) dodaj towar do magazynu usuń towar z magazynu zmień stan towaru w magazynie pokaż towary w magazynie wróć do poprzedniego menu Podaj opcję ====> _

6 Klasyk: IBM3270

7

8

9 Skąd się wzięło GUI? pierwsze użyteczne GUI zostało skonstruowane w latach '80 XX wieku w laboratoriach firmy Xerox (tak, tak!) wypracowane tam koncepcje wyciekły następnie do firm produkujących komputery i systemy operacyjne (np. Apple) mysz jeszcze nie istniała, więc używano piór świetlnych i tzw. trackballi

10 Trackball:

11 Pióro świetlne:

12 GUI znaki szczególne: pracujący program uzewnętrznia swoje działanie poprzez wykreowanie swojego okna (ang. window) bądź okien

13 GUI znaki szczególne: zwykle okna wyposażone są w dekoracje (ang. decorations) dekorowaniem okien zajmuje się (najczęściej) system operacyjny i ich wygląd oraz zachowanie są znakiem szczególnym konkretnego systemu niektóre systemy wykluczają wpływ użytkownika na sposób dekorowania okien, inne wręcz przeciwnie istnieją również systemy, w których okno pracującego programu zawsze pokrywa cały ekran i nie ma żadnych albo prawie żadnych dekoracji (np. Android)

14 GUI znaki szczególne: użytkownik oddziaływuje na zachowanie programu poprzez interakcje kursora myszy (kliknięcia), dotykanie wyznaczonych elementów GUI (pacnięcia) bądź naciskanie wskazanych klawiszy widoczne na ekranie elementy, będące adresatami takich akcji, nazywa się kontrolkami lub widżetami (ang. controls, widgets)

15 GUI dygresja: warto pamiętać, że cała koncepcja GUI została zainspirowana pulpitami sterowniczymi urządzeń elektrycznych i elektronicznych ślady tej inspiracji widać co krok (nawet w nazewnictwie)

16 GUI znaki szczególne: w obrębie okna zawsze dokładnie jeden z widżetów posiada tzw. skupienie (ang. focus), co oznacza, że właśnie on jest typowany jako domyślny adresat niektórych akcji użytkownika np. naciśnięcie klawisza <Spacja> może uruchomić różne czynności w zależności od tego, jaki element okna ma w danym momencie skupienie

17 Anatomia okna: Okno Okno

18 Anatomia okna: Dekoracja Dekoracja (przycisk (przyciskzamykania) zamykania)

19 Anatomia okna: Dekoracja Dekoracja (ramka (ramkazzbelką belkątytułową) tytułową)

20 Anatomia okna: Dekoracja Dekoracja (tytuł (tytuł title) title)

21 Anatomia okna: Widżet Widżet (ikona (ikona icon) icon)

22 Anatomia okna: Widżet Widżet (etykieta (etykieta label) label)

23 Anatomia okna: Widżet Widżet (przycisk (przycisk button) button) co cowięcej, więcej,jest jesttotoprzycisk przyciskze zeskupieniem! skupieniem! skąd skądtotowiemy? wiemy?co cototopowoduje? powoduje?

24 Anatomia okna: Widżet Widżet (przycisk (przycisk button) button) ten tenprzycisk przycisknie niema maskupienia! skupienia!co cozrobić zrobićaby abyjejemiał? miał?

25 Krótki przewodnik po świecie widżetów

26 Ikona Ikonaiitytuł tytułokna okna (zwykle (zwyklepod podkontrolą kontroląsystemu systemuoperacyjnego) operacyjnego)

27 Kontrolki Kontrolkiokna okna (zwykle (zwyklepod podkontrolą kontroląsystemu systemuoperacyjnego) operacyjnego)

28 Kontrolka Kontrolkazmiany zmianyrozmiaru rozmiaruokna okna

29 Pasek Pasekstatusu statusu

30 Pasek Pasekmenu menu

31 Check CheckBox Box (każdy (każdymoże możebyć byćzaznaczony zaznaczonybądź bądźnie) nie)

32 Radio RadioButton Button (zwykle (zwyklewystępują występująwwgrupach grupach dokładnie dokładniejeden jedenwwgrupie grupiemoże możebyć być wybrany) wybrany)

33 Pole Poletekstowe/edycyjne tekstowe/edycyjne (do (dowprowadzenia/edycji wprowadzenia/edycjijednego jednegowiersza wierszatekstu) tekstu)

34 Wielowierszowe Wielowierszowepole poletekstowe/edycyjne tekstowe/edycyjne (do (dowprowadzenia/edycji wprowadzenia/edycjiwielu wieluwierszy wierszytekstu) tekstu)

35 Etykieta Etykieta ( sztywny ( sztywny - -co conie nieoznacza, oznacza,że żeniezmienny niezmienny tekst tekstwwobrębie obrębieokna) okna)

36 Ikona Ikona ( sztywny ( sztywny - -co conie nieoznacza, oznacza,że żeniezmienny niezmienny obrazek obrazekwwobrębie obrębieokna) okna)

37 Pasek Pasekpostępu postępu (ilustruje (ilustrujezaawansowanie zaawansowaniejakiegoś jakiegośprocesu) procesu)

38 Przycisk Przycisk (jeśli (jeślizostanie zostaniekliknięty, kliknięty,wywoła wywołajakąś jakąśczynność) czynność)

39 Pionowy Pionowypasek pasekprzewijania przewijania( winda, ( winda, suwak ) suwak ) (ilustruje (ilustrujepołożenie położeniei iwymiar wymiarwwkierunku kierunkupionowym) pionowym)

40 Poziomy Poziomypasek pasekprzewijania przewijania (ilustruje (ilustrujepołożenie położeniei iwymiar wymiarwwkierunku kierunkupoziomym) poziomym)

41 Co z tego wszystkiego wynika?

42 tradycyjny model programowania, w którym programista sprawdza po kolei wszystkie możliwe akcje użytkownika, jest kompletnie nieprzydatny przy programowaniu zachowania GUI! liczba różnych możliwych posunięć użytkownika jest tak pokaźna, że ciągłe sprawdzanie stanu okna i wszystkich widżetów staje się niesłychanie uciążliwe co gorsza, jedne widżety mogą wpływać na inne, co dodatkowo komplikuje całe zagadnienie spróbujmy to sobie wyobrazić...

43 poczekaj_na_akcję_użytkownika() if nacisnął_przycisk_1():... elif kliknął_checkbox_1():... elif kliknął_radiobutton_1():... elif przesunął_mysz_nad_ikonę_1():... elif przeciągnął_pasek_przewijania_1():...

44 efektywne programowanie GUI wymaga zupełnie innego stylu programowania i zupełnie innego myślenia o programowaniu jest to tzw. programowanie zdarzeniowe (ang. event programming)

45 programowanie zdarzeniowe: wykrywanie i rejestrowanie akcji użytkownika pozostaje poza kontrolą programisty i pozostaje w totalnej gestii tzw. kontrolera/zarządcy zdarzeń programista obowiązany jest powiadomić kontroler jak życzy sobie reagować (bądź nie) na konkretne zdarzenia odbywa się to drogą pisania funkcji, które są wywoływane przez kontroler w chwili zajścia pewnego zdarzenia taka funkcja to tzw. event handler (nieprzetłumaczalne, niestety, uznajmy, że jest to obsługiwacz zdarzenia )

46 zasadnicza różnica: załóżmy, że mamy funkcję o nazwie ZróbCoś(), która... coś robi chcemy, aby to coś zostało zrobione, kiedy użytkownik kliknie przycisk o nazwie No to do roboty! w podejściu klasycznym: to my sami musimy wykryć fakt kliknięcia przycisku to my musimy własnoręcznie wywołać funkcję ZróbCoś() mamy pełną kontrolę nad biegiem zdarzeń i ponosimy za to pełną odpowiedzialność w podejściu zdarzeniowym: kontroler zdarzeń sam wykrywa fakt kliknięcia przycisku kontroler zdarzeń sam wywołuje naszą funkcję ZróbCoś() wszystko to odbywa się za naszymi plecami (na szczęście!) - nie mamy kontroli nad tym jak i kiedy to się stanie, a pełną odpowiedzialność za bieg zdarzeń ponosi kontroler

47 co może być zdarzeniem? kliknięcie przycisku myszki przemieszczenie myszki naciśnięcie/puszczenie klawisza pacnięcie palcem przeciągnięcie palcem/palcami upływ czasu...

48 programowanie zdarzeniowe: niestety, praktycznie każdy system operacyjny dostarcza własny zestaw usług od obsługi GUI, a niektóre (np. Linux) mogą mogą definiować wiele różnych kompletnie odmiennych standardów definiowania mechanizmów GUI (dwa najważniejsze to GTK i Qt) oznacza to, że aby móc programować przenośne (ang. portable) programy GUI potrzebny jest jakiś pośrednik, który dopasuje jednolity standard programistyczny do zmiennnych wymagań i usług różnych systemów operacyjnych taki pośrednik (adapter) nosi nazwę widget toolkit, GUI toolkit lub UX library ) UX User experience

49 Tk: wolny i otwarty GUI toolkit rozwijany od 1991 roku wieloplatformowy (dostępny pod MS Windows, Unix/Linux, MacOS) definiuje i obsługuje ponad 30 różnych uniwersalnych widżetów dostępny w wielu różnych językach programowania (oczywiście, również w Pythonie)

50 Tkinter: uniwersalny interfejs programistyczny pomiędzy programem napisanym w Pythonie, a toolkitem Tk Tkinter Tk interface nie jest jedynym GUI toolkitem dostępnym w Pythone - inne to np. PyQt (interfejs do toolkitu Qt), PyGTK (interfejs do toolkitu GTK) wolny i otwarty przykładem aplikacji napisanej z użyciem Tkinter jest IDLE (tak, tak!)