W porównaniu do tekstowego interfejsu użytkownika

Transkrypt

1 Literatura Graficzne Interfejsy Użytkownika dr inż. Piotr Zielniewicz Instytut Informatyki Politechnika Poznańska J. Tidwell, Designing Interfaces: Patterns for Effective Interaction Design,, O'Reilly Media, 2005 W. O. Galitz, The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques, Wiley Computer Publishing, 2007 V. Piroumian, Java GUI Development: The Authoritative Solution,, Sams, 1999 E. N. McKay, Developing User Interfaces for Microsoft Windows,, Microsoft Press, 1999 I. Griffiths, M. Adams,.NET Windows Forms in a Nutshell, O'Reilly Media, 2003 A. Nathan, Windows Presentation Foundation Unleashed, Sams, 2006 Graficzne Interfejsy Użytkownika 2 Wprowadzenie Interfejs użytkownika UI (User Interface) ) pojmowany jest najczęściej jako część oprogramowania zajmującą się obsługą urządzeń wejściowo-wyjściowych wyjściowych służących do interakcji z użytkownikiem Graficzny interfejs użytkownika GUI (Graphical User Interface) ) umożliwia komunikację człowieka z komputerem wykorzystując w tym celu wyświetlacz graficzny, na którym prezentowane są różne elementy graficzne (okienka, piktogramy, symbole, ) oraz urządzenie wskazujące (myszka, touchpad, tablet, ekran dotykowy, ) Podstawowym celem wprowadzenia graficznego interfejsu użytkownika było dążenie do ułatwienia obsługi komputera przez typowego użytkownika Wprowadzenie Dobrze zaprojektowany graficzny interfejs użytkownika powszechnie wykorzystuje metafory i skojarzenia zestawy symboli graficznych znane użytkownikowi, wygodne w stosowaniu, nawiązujące do wcześniej nabytych nawyków i doświadczeń z życia codziennego W porównaniu do tekstowego interfejsu użytkownika opartego na wierszu poleceń CLI (Command Line Interface) graficzny interfejs użytkownika najczęściej spowalnia szybkość pracy z programem komputerowym Graficzne Interfejsy Użytkownika 3 Graficzne Interfejsy Użytkownika 4

2 Krótka historia rozwoju: początek Krótka historia rozwoju: lata 60-te W 1945 roku wizjoner Vannevar Bush publikuje ideę tzw. memex-u elektromechanicznego komputera do obsługi biblioteki, który wykorzystuje koncepcję hipertekstu do wyświetlania powiązanych ze sobą książek i filmów W 1962 roku Douglas Engelbart opracowuje x-y position indicator pierwszą myszkę służącą do przemieszczania kursora na ekranie Graficzne Interfejsy Użytkownika 5 Graficzne Interfejsy Użytkownika 6 Krótka historia rozwoju: lata 60-te Krótka historia rozwoju: lata 60-te W 1962 roku Steve Russell opracowuje na MIT pierwszą graficzną grę wideo SpaceWar, do obsługi której wykorzystuje pierwszy komputerowy joystick W 1963 roku na MIT Ivan Sutherland opracowuje program Sketchpad, który pozwala na rysowanie na ekranie przedmiotów, a następnie ich przemieszczanie, kopiowanie oraz usuwanie za pomocą pióra świetlnego Graficzne Interfejsy Użytkownika 7 Graficzne Interfejsy Użytkownika 8

3 Krótka historia rozwoju: lata 60-te Krótka historia rozwoju: lata 60-te Zainspirowany wizją Busha jeszcze w 1962 roku Engelbart publikuje pionierską pracę Augmenting Human Intellect: A conceptual framework, w której prezentuje wizję graficznego interfejsu użytkownika Pragnąc urzeczywistnić w praktyce swoje idee, Engelbart wraz ze współpracownikami z Augmentation Research Center w Stanford Research Institute tworzy w 1968 roku NLS (online System) rewolucyjny system komputerowy przeznaczony do pracy grupowej System NLS wykorzystywał koncepcję okien, pozwalał na dwuwymiarową edycję na ekranie, na prowadzanie wideokonferencji i był pierwszym systemem, w którym wdrożono ideę hipertekstu oraz wspólnej pracy nad dokumentami System NLS działający na maszynie Scientific Data Systems SDS 940 mógł pracować jednocześnie na 16 terminalach wyposażonych w 3-klawiszowe myszki, klawiatury alfanumeryczne i akordowe oraz rastrowe monitory CRT Graficzne Interfejsy Użytkownika 9 Graficzne Interfejsy Użytkownika 10 Krótka historia rozwoju: lata 70-te Krótka historia rozwoju: lata 70-te Ukazanie przez Engelbarta nowych możliwości związanych z wykorzystaniem komputerów stało się inspiracją dla poszukiwania w latach 70-tych nowych rozwiązań ułatwiających komunikację człowieka z komputerem Wiodącym ośrodkiem badawczym w tej dziedzinie stało się laboratorium Xerox-a PARC ( (Palo Alto Research Center) Pierwszy graficzny interfejs użytkownika został opracowany w PARC m. in. przez Alana Kaya i Larry Keslera Wykorzystywał on takie elementy graficzne jak okna (Windows), ikony (Icons)) i menu (Menu)) oraz urządzenie wskazujące (Pointing device) myszkę Akronim WIMP na długie lata stał się synonimem stylu interakcji człowieka z komputerem opartego o te elementy Pierwszym komputerem osobistym (choć nie komercyjnym) wyposażonym w graficzny interfejs użytkownika był opracowany w 1973 roku Xerox Alto Alto wykorzystywał monitor umożliwiający prezentowanie grafiki bitmapowej oraz myszkę jako urządzenie wskazujące Jego GUI nie było zintegrowane z systemem operacyjnym zamiast tego wyposażono go w zestaw aplikacji z interfejsem graficznym opartym na metaforze biurka Interfejs użytkownika wykorzystywał wiele czcionek i styli pisania, rozwijane menu, ikony do reprezentowania plików i programów; operacje wycinania, kopiowania i wstawiania mogły być realizowane myszką, po raz pierwszy wcielono w życie ideę WYSIWYG (What You See Is What You Get) Graficzne Interfejsy Użytkownika 11 Graficzne Interfejsy Użytkownika 12

4 Krótka historia rozwoju: lata 70-te Krótka historia rozwoju: lata 70-te Istotny wkład w rozwój GUI przyniosło opracowanie w 1974 roku środowiska programowania dla języka SmallTalk, opartego na wzorcu MVC i zawierającego: przyciski wyboru (checkboxes) przyciski radiowe (radiobuttons) okna z paskami przesuwu (scrollbars scrollbars) hierarchiczne menu zachodzące na siebie okna (overlapped windows) Graficzne Interfejsy Użytkownika 13 Graficzne Interfejsy Użytkownika 14 Krótka historia rozwoju: lata 80-te Krótka historia rozwoju: lata 80-te Pierwszym komputerem wyposażonym w zintegrowany graficzny desktop był Xerox Star (8010 Information System) opracowany w 1981 roku Interfejs użytkownika opierał się na koncepcji WIMP znanej z Xerox Alto i środowiska SmallTalk, rozszerzonej o okna z belkami tytułowymi i zachodzące na siebie okna dialogowe Wprowadzono ponadto możliwość zmiany rozmiaru okien za pomocą myszy, lecz zrezygnowano z możliwości nakładania na siebie głównych okien aplikacji, zastępując ją opcją układania okien sąsiadująco (tiled windows) Wbudowane programy umożliwiały obsługę wielu języków i oferowały złożone widoki obejmujące listy, tabele, diagramy oraz osadzone (embedded)) obrazy Graficzne Interfejsy Użytkownika 15 Graficzne Interfejsy Użytkownika 16

5 Krótka historia rozwoju: lata 80-te Nowy etap rozwoju graficznych interfejsów użytkownika rozpoczyna się na początku lat 80-tych i jest ściśle związany z rozwojem komputerów osobistych W 1983 roku firma Apple Computer wypuszcza na rynek komputer osobisty Lisa (Local Integrated Software Architecture) ) wyposażony w wielozadaniowy system operacyjny z graficznym interfejsem użytkownika Desktop Lisy zawierał ikony reprezentujące nie tylko pliki i programy, ale także elementy systemowe (zegar, schowek, kosz na śmieci, kalkulator, preferencje) Zawartość każdego katalogu była prezentowana w osobnym oknie, po raz pierwszy do manipulowania zaznaczonymi ikonami wykorzystano mechanizm drag&dropdrop Krótka historia rozwoju: lata 80-te System operacyjny Lisy oferował zestaw siedmiu podstawowych aplikacji przeznaczonych głównie dla użytkownika biznesowego (LisaWrite, LisaCalc, LisaDraw, LisaGraph, LisaProject, LisaList i LisaTerminal) Pracując nad rozwojem interfejsu Lisy Apple rozpoczął współpracę z artystami, psychologami oraz zwykłymi użytkownikami Graficzne Interfejsy Użytkownika 17 Graficzne Interfejsy Użytkownika 18 Krótka historia rozwoju: lata 80-te Krótka historia rozwoju: lata 80-te Pod koniec 1983 roku firma VisiCorp (będąca twórcą pierwszego arkusza kalkulacyjnego VisiCalc) kończy pracę nad VisiOn pierwszym systemem graficznym ( (Desktop GUI) ) przeznaczonym dla komputerów IBM PC Graficzne Interfejsy Użytkownika 19 Graficzne Interfejsy Użytkownika 20

6 Krótka historia rozwoju: lata 80-te W 1984 roku w sprzedaży pojawia się Apple Macintosh (Mac) pierwszy popularny z racji swojej ceny komputer osobisty z graficznym interfejsem użytkownika Był on wyposażony w pierwszą wersję systemu Mac OS, która umożliwiała: zamykanie okien przez kliknięcie ikony w lewym górnym rogu okna, zmianę nazwy pliku przez kliknięcie ikony i bezpośrednią edycję nazwy na pulpicie, przenoszenie plików bezpośrednio na pulpit lub na ikony symbolizujące dyski i foldery, sortowanie wyświetlanych plików na podstawie nazwy, typu, rozmiaru lub daty Okienkowy panel kontrolny pozwalał na ustawienie czasu, zmianę głośności, szybkości przemieszczania myszy, częstotliwości migotania kursora, tła pulpitu, itp. Krótka historia rozwoju: lata 80-te Za zarządzanie praktycznie wszystkimi zasobami komputera odpowiadał program Finder będący w istocie graficzną powłoką systemową odpowiedzialną za wygląd całego interfejsu użytkownika Program do rysowania (MacPaint)) umożliwiał zaznaczanie i przenoszenie figur za pomocą myszy, zaś edytor tekstu (MacWrite)) był pierwszym komercyjnie dostępnym edytorem działającym w trybie WYSIWYG W przeciwieństwie do wcześniej oferowanych produktów Apple zdecydował się na udostępnienie interfejsu programowego (Mac Toolbox), który pozwalał programistom spoza firmy na tworzenie oprogramowania na Mac-a Graficzne Interfejsy Użytkownika 21 Graficzne Interfejsy Użytkownika 22 Krótka historia rozwoju: lata 80-te Krótka historia rozwoju: lata 80-te W 1985 roku na rynek trafia Microsoft Windows 1.0, którego interfejs jest dużo bardziej prymitywny od produktów konkurencji (brakuje ikon i mechanizmu drag&drop, dostępne są tylko proste menu i sąsiadujące ze sobą okna) Graficzne Interfejsy Użytkownika 23 Graficzne Interfejsy Użytkownika 24

7 Krótka historia rozwoju: lata 80-te Z pośród wielu produktów połowy lat 80-tych na szczególną uwagę zasługuje Commodore Amiga (1985) będący pierwszym komputerem domowym z wielozadaniowym systemem operacyjnym wykorzystującym wyłącznie graficzny interfejs użytkownika (Intuition) Amiga była ukierunkowana na obsługę multimediów, jej interfejs graficzny oferował kolorową grafikę o wysokiej rozdzielczości i cechował się dużą szybkością działania Środowisko graficzne Amigi ( (Workbench Workbench) ) pozwalało na wyświetlanie wielu ekranów o różnej rozdzielczości i liczbie kolorów, katalogi były prezentowane w postaci ikon szuflad, po raz pierwszy pojawiła się obsługa prawego klawisza myszy Krótka historia rozwoju: lata 80-te Bardzo dużą dbałość przykładano do ujednolicenia wyglądu różnych aplikacji udostępniono standardowe okna dialogowe (służące m.in. do wyboru plików i czcionek), biblioteki do budowy interfejsów oraz program instalacyjny (Installer), opracowano standard hipertekstowej pomocy (AmigaGuide), w podręczniku Amiga User Interface Style Guide wyłożono zasady budowy interfejsu użytkownika Graficzne Interfejsy Użytkownika 25 Graficzne Interfejsy Użytkownika 26 Krótka historia rozwoju: lata 80-te Krótka historia rozwoju: lata 80-te W 1989 roku Steve Jobs przedstawia NeXT stację roboczą przeznaczoną dla uniwersytetów i ośrodków badawczych Jej bardzo nowoczesny i intuicyjny interfejs użytkownika cechował się doskonałej jakości grafiką z dużymi, czytelnymi ikonami, wyglądem 3D i dokowalnym paskiem narzędzi System operacyjny (NeXTSTEP)) bazował na jądrze systemu UNIX i wykorzystywał Objective-C jako natywny język programowania oraz Interface Builder narzędzie do wizualnego projektowania interfejsu użytkownika Interfejs użytkownika został oparty na architekturze obiektowej wykorzystującej opracowaną wspólnie z firmą Adobe technologię Display Postscript Graficzne Interfejsy Użytkownika 27 Graficzne Interfejsy Użytkownika 28

8 Krótka historia rozwoju: lata 80-te Krótka historia rozwoju: lata 80-te Pod koniec lat 80-tych pojawiają się pierwsze interfejsy graficzne dla systemów Unixowych: Open Look i Motif, bazujące na sieciowej architekturze X Window System Graficzne Interfejsy Użytkownika 29 Graficzne Interfejsy Użytkownika 30 Krótka historia rozwoju: lata 90-te Dużym sukcesem firmy Microsoft był Windows 3.0 z 1990 roku oferujący duże ikony, skalowalne czcionki, kontrolki z widokiem 3D, drag&dropdrop i hipertekstowy system pomocy Krótka historia rozwoju: lata 90-te W 1995 roku Microsoft wypuszcza Windows 95 z interfejsem posiadającym charakterystyczny przycisk Start,, pasek zadań i ikonę Mój Komputer Graficzne Interfejsy Użytkownika 31 Graficzne Interfejsy Użytkownika 32

9 Krótka historia rozwoju: lata 90-te W tym samym roku ukazuje się Microsoft BOB pulpit dla początkujących użytkowników systemów Windows, którego interfejs oparto na metaforze pokoju Krótka historia rozwoju: czasy współczesne KDE (K Desktop Environment) Graficzne Interfejsy Użytkownika 33 Graficzne Interfejsy Użytkownika 34 Krótka historia rozwoju: czasy współczesne Mac OS X Snow Leopard Krótka historia rozwoju: czasy współczesne Microsoft Windows 7 Graficzne Interfejsy Użytkownika 35 Graficzne Interfejsy Użytkownika 36

10 Krótka historia rozwoju: podsumowanie Większość koncepcji interfejsów graficznych opiera się na tych samych metaforach (zwłaszcza metaforze pulpitu), co powoduje, że są one zewnętrznie znacznie do siebie podobne (i abstrahując od szybkości i jakości grafiki, bardzo podobne do swojego pierwowzoru interfejsu Lisy) Tym co istotnie rozróżnia poszczególne koncepcje interfejsów graficznych, to technologie ich programowania Aktualne trendy rozwoju interfejsów użytkownika obejmują: zastosowanie ekranów dotykowych zastosowanie wirtualne pulpity z interfejsem 3D rozpoznawanie gestów rozpoznawanie głosu korzystanie z obrazów holograficznych i technik VR Projektowanie interfejsu użytkownika Projektowanie interfejsu użytkownika wymaga wiedzy oraz sporego doświadczenia nie tylko z zakresu technologii programistycznych, ale także z zakresu psychologii i ergonomii Podstawowe czynniki psychologiczne, które należy brać pod uwagę na etapie projektowania interfejsu użytkownika: ludzie mają rożne możliwości psychofizyczne ludzie różnią się między sobą wiedzą i doświadczeniem w pracy z komputerem, preferencjami w sposobie interakcji z komputerem ludzka pamięć krótkotrwała ma ograniczenia uniemożliwiające przyswajanie lub przetwarzanie dużej ilości informacji w krótkim czasie (zasada Millera: 7±2) ludzie opierają się na nabytych doświadczeniach z pracy z komputerem ( przyzwyczajenie jest drugą naturą człowieka ) Graficzne Interfejsy Użytkownika 37 Graficzne Interfejsy Użytkownika 38 Projektowanie interfejsu użytkownika Obecnie, w okresie dominacji środowisk graficznych dobrze zaprojektowany interfejs użytkownika programu jest warunkiem koniecznym do odniesienia sukcesu Błędy popełnione na etapie tworzenia interfejsu użytkownika prowadzą najczęściej do: wielu pomyłek użytkownika niezrozumienia zasad funkcjonowania programu zniechęcenia użytkowników do korzystania z takiego programu niezależnie od jego funkcjonalności (w skrajnym przypadkach nawet odmowy z jego korzystania) błędów, zakłóceń i awarii w funkcjonowaniu programu (lub nawet całego systemu) zachwiania lub utraty zaufania dla producenta (programisty) Projektowanie interfejsu użytkownika Kardynalną cechą dobrze zaprojektowanego interfejsu użytkownika jest zapewnienie tego, aby program zachowywał się dokładnie tak, jak oczekuje tego użytkownik Zasada ta jest spełniona wówczas, gdy model programu (faktyczne zasady działania programu) jest zgodny z modelem użytkownika (wyobrażeniem użytkownika o tym, jak działa program) Wzajemne dostosowanie obu tych modeli jest w praktyce dosyć trudne, ponieważ model programu bywa skomplikowany i najczęściej nie odpowiada modelowi użytkownika, który spośród wielu możliwych scenariuszy wybiera na ogół model najprostszy Graficzne Interfejsy Użytkownika 39 Graficzne Interfejsy Użytkownika 40

11 Projektowanie interfejsu użytkownika Jeżeli model użytkownika jest niepełny lub niekompletny, projektant powinien skorzystać ułatwień w postaci metafor i skojarzeń, aby przybliżyć użytkownikowi model programu Projektując interfejs użytkownika musimy odpowiedzieć na dwa zasadnicze pytania: w jaki sposób użytkownik ma dostarczać informację do programu? w jaki sposób program ma prezentować wyniki swojego działania? Podstawowymi celami, do których powinno się dążyć podczas projektowania interfejsu użytkownika są: Intuicyjność Prostota Kompletność Elegancja Projektowanie interfejsu użytkownika Interfejs użytkownika uważamy za intuicyjny, jeżeli: zachowuje się on zgodnie z oczekiwaniami użytkownika jego wygląd pozwala nawet niedoświadczonym użytkownikom na natychmiastowe posługiwanie się programem nie wymaga od użytkownika zdobywania dodatkowej wiedzy (np. czytania dokumentacji) opiera się na znanych rozwiązaniach i powszechnie przyjętych konwencjach np. klawisze: F1 pomoc, CTRL+C kopiowanie, układ menu: Plik, Edycja, Widok, Pomoc pasek narzędziowy (toolbar)) u góry podpowiedzi (tooltip)) po najechaniu kursora standardowe okna dialogowe do otwierania/zapisu pliku, integracja ze środowiskiem: schowek, drag&dropdrop Graficzne Interfejsy Użytkownika 41 Graficzne Interfejsy Użytkownika 42 Projektowanie interfejsu użytkownika Opracowanie intuicyjnego interfejsu nie jest rzeczą łatwą Użytkownik, który okazjonalnie będzie korzystał z programu, duży nacisk będzie kładł na prostotę wykonywania czynności, na czytelne i dobrze opisane etykiety, duże klawisze i ikony z dobrze dobranymi metaforami, standardowe elementy kontrolne i pliki pomocy, czynności złożone będzie starał się wykonywać stosując kreatory Użytkownik często korzystający z programu będzie starał się minimalizować swój nakład pracy niezbędny do wykonania zadania: nie będzie czytał typowych komunikatów, będzie starał się jak najmniej pisać i jak najmniej klikać myszką, dużą rolę będzie przywiązywał do możliwości stosowania skrótów klawiaturowych Graficzne Interfejsy Użytkownika 43 Projektowanie interfejsu użytkownika Zapewnienie prostoty interfejsu użytkownika sprowadza się do ograniczania ilości prezentowanej w danym momencie informacji tak, aby jej nadmiar nie utrudniał obsługi programu lub nie odwracał zbytnio uwagi Projektując interfejs należy dążyć do zachowania jego maksymalnej czytelności: prezentować tylko te elementy kontrolne, które są niezbędne do przeprowadzenia określonej operacji prezentować tylko te okna (opcje), które są w danym momencie niezbędne dla prawidłowej interakcji ukrywać niepotrzebne w danym momencie elementy GUI grupować opcje w kategorie, jeśli jest ich dużo Należy pamiętać o tym, prostota interfejsu nie oznacza zmniejszenia jego funkcjonalności Graficzne Interfejsy Użytkownika 44

12 Projektowanie interfejsu użytkownika Interfejs użytkownika jest kompletny, jeżeli w żaden sposób nie ogranicza funkcjonalności programu (użytkownik jest w stanie wykonać każdą czynność jaka została opisana w specyfikacji programu) Elegancki interfejs użytkownika łączy w sobie prostotę z dużym zakresem możliwości Podstawowym sposobem polepszania jakości interfejsu użytkownika jest testowanie programu przez użytkowników o różnym doświadczeniu W trakcie testowania należy obserwować jak użytkownicy starają się wykonać poszczególne czynności, jeśli wykonanie jakieś operacji sprawia im trudność, to należy im pomóc, odnotowując jednak konieczność usprawnienia interfejsu Projektowanie interfejsu użytkownika Testowanie interfejsu użytkownika przeprowadza się na stosunkowo niewielkiej grupie użytkowników (typowo 5-10) W trakcie oceny interfejsu użytkownika testuje się jego użyteczność (usability testing) ) oraz sprawdza się, czy spełnia on wymagania użytkownika Testując użyteczność interfejsu zwraca się uwagę na: Łatwość uczenia się interfejsu Poprawność funkcjonalną Jakość i solidność wykonania Szybkość działania Odporność na błędy użytkownika Zdolność do adaptacji Możliwość cofnięcia operacji Graficzne Interfejsy Użytkownika 45 Graficzne Interfejsy Użytkownika 46 Projektowanie interfejsu użytkownika Sposoby oceny użyteczności interfejsu: obserwowanie użytkowników w trakcie pracy z programem kwestionariusze z pytaniami kod gromadzący informacje w trakcie pracy z programem Testy użyteczności nie są do końca wiarygodne (bywają źle przygotowane, użytkownicy je przeprowadzający działają w nieznanym środowisku i wiedzą, że są obserwowani) Łatwość poznania (nauczenia się) interfejsu jest szczególnie istotna dla użytkowników niedoświadczonych oraz dla tych, którzy będą z niego korzystać sporadycznie Wnioski z testowania interfejsu produktu końcowego nie są najczęściej wykorzystywane do poprawienia jego funkcjonalności Projektowanie interfejsu użytkownika Proces projektowania interfejsu użytkownika analiza działań użytkownika projektowanie papierowego prototypu interfejsu ocena interfejsu wspólnie z użytkownikiem opracowanie działającego prototypu interfejsu ocena interfejsu wspólnie z użytkownikiem implementacja docelowego interfejsu użytkownika Graficzne Interfejsy Użytkownika 47 Graficzne Interfejsy Użytkownika 48

13 Projektowanie interfejsu użytkownika Prototypowanie interfejsu użytkownika Projektowanie interfejsu użytkownika Nawet poprawnie zaprojektowany interfejs użytkownika, który działa dobrze w normalnych warunkach, może się nie sprawdzić w warunkach ekstremalnych, ponieważ: użytkownicy mają różną sprawność fizyczną (problemy z wielkością elementów graficznych, rozróżnianiem kolorów, obsługą myszy) użytkownicy nie czytają komunikatów związanych z obsługą programu (czytają je tylko raz lub nie czytają ich w całości) użytkownicy nie czytają instrukcji użytkownika (albo w ogóle niczego nie czytają) użytkownicy mają słabą pamięć (nie pamiętają np. trybu pracy programu, nazwy pliku lub katalogu, w którym zapamiętano dane) Interfejs zaprojektowany z uwzględnieniem warunków ekstremalnych będzie możliwy do użytku w trudnej sytuacji i będzie wygodniejszy w użyciu w warunkach normalnych Graficzne Interfejsy Użytkownika 49 Graficzne Interfejsy Użytkownika 50 Zasady projektowania interfejsu użytkownika Użytkownicy nie chcą być zaskakiwani nieoczekiwanym zachowaniem się programu, więc w każdej sytuacji powinien się on zachowywać zgodnie z przewidywaniami Pojęcia wykorzystywane przez interfejs użytkownika powinny pochodzić od osób z największym doświadczeniem w korzystaniu z programu Interfejs powinien być spójny podobne operacje realizowane w różnych miejscach programu powinny być wykonywane tak samo Interfejs powinien korzystać z mechanizmów pozwalających na wycofanie przeprowadzonej operacji Użytkownik powinien mieć możliwość anulowania wybranego działania Zasady projektowania interfejsu użytkownika Program zawsze powinien żądać od użytkownika potwierdzenia wykonania ważnych czynności Interfejs powinien umożliwiać przerwanie wykonywania operacji długotrwałej, a także informować użytkownika o stopniu jej zaawansowania lub prognozowanym czasie zakończenia Program powinien zawsze wyświetlać takie informacje, aby użytkownik wiedział, w jakim stanie znajduje się program Często używane polecenia z menu powinny być powielone na pasku narzędzi, a także być możliwe do aktywowania stosownym skrótem z klawiatury Interfejs powinien oferować udogodnienia dla użytkowników posiadających różne role i uprawnienia Graficzne Interfejsy Użytkownika 51 Graficzne Interfejsy Użytkownika 52

14 Zasady projektowania interfejsu użytkownika Program zawsze powinien udostępniać informacje zwrotne, zwłaszcza gdy dochodzi do błędu Pomoc dostępna dla użytkownika powinna zależeć od kontekstu i stopnia zaawansowania użytkownika Komunikaty prezentowane przez program powinny być proste, krótkie, pozytywne i uprzejme (przekazujące tylko to, co jest naprawdę w danym momencie ważne) W miarę możliwości należy zapewnić użytkownikowi obsługę programu także za pomocą klawiatury W interfejsie należy stosować kolory systemowe (ewentualnie łagodne kombinacje kolorów), zmiany kolorów wykorzystywać do sygnalizowania zmiany stanu programu lub do zwrócenia uwagi użytkownika Zasady projektowania interfejsu użytkownika Wszelkie operacje długotrwałe powinny być realizowane w odrębnych wątkach W miarę możliwości korzystanie z programu powinno być możliwe w najmniejszej rozdzielczości graficznej Rozplanowanie elementów w oknach dialogowych powinno być definiowane w jednostkach DLU (dialog units), które są zależne od wielkości czcionki systemowej Należy unikać trudnych, długich oraz slangowych tekstów Metafory stosowane w interfejsie powinny być czytelne, jednoznaczne i spójne w obrębie całego systemu W przypadku lokalizacji interfejsu należy zadbać o poprawne tłumaczenie (najlepiej o długości zbliżonej do oryginału) i o zachowanie spójności w obrębie pakietów i dokumentacji Graficzne Interfejsy Użytkownika 53 Graficzne Interfejsy Użytkownika 54 Zasady projektowania interfejsu użytkownika Przybliżone wartości liczbowe i trendy warto prezentować graficznie (wykresy), dokładne wartości numeryczne powinny być wyświetlane z ustaloną dokładnością Wbudowany system pomocy powinien obejmować łatwo dostępne informacje objaśniające (np. tooltipy) ) oraz informację kontekstową dostępną na żądanie Dokumentacja użytkownika powinna zawierać przewodnik dla początkujących, podręczniki dla użytkowników plus ewentualne wytyczne dla administratora Błędy w projekcie interfejsu użytkownika Niezbyt czytelnie dobrane metafory Zawsze należy pamiętać o tym, że proces projektowania interfejsu użytkownika musi koncentrować się na użytkowniku w myśl zasady: użytkownik ma zawsze rację Graficzne Interfejsy Użytkownika 55 Graficzne Interfejsy Użytkownika 56

15 Błędy w projekcie interfejsu użytkownika Niepotrzebne okna dialogowe Błędy w projekcie interfejsu użytkownika Nadmiarowa (niepotrzebna) informacja w komunikatach Graficzne Interfejsy Użytkownika 57 Graficzne Interfejsy Użytkownika 58 Błędy w projekcie interfejsu użytkownika Nadmierny stopień komplikacji interfejsu (zbyt dużo kart) Błędy w projekcie interfejsu użytkownika Nadmierny stopień komplikacji interfejsu (zbyt dużo opcji) Graficzne Interfejsy Użytkownika 59 Graficzne Interfejsy Użytkownika 60

16 Błędy w projekcie interfejsu użytkownika Niepotrzebne lub zbyt częste odwracanie uwagi użytkownika Graficzny interfejs użytkownika w Javie Nadrzędnym celem leżącym u podstaw opracowania graficznego interfejsu użytkownika w Javie była konieczność zapewnienia obsługi wielu platform sprzętowych i systemów operacyjnych Podstawowym zadaniem z jakimi musieli zmierzyć się projektanci biblioteki graficznej dla Javy było stworzenie spójnego i obiektowego modelu programowania, który zapewniałby dużą elastyczność i umożliwiał programiście stworzenie ładnego i szybkiego interfejsu użytkownika Przegląd technologii GUI w Javie: AWT Swing SWT Graficzne Interfejsy Użytkownika 61 Graficzne Interfejsy Użytkownika 62 AWT: Wprowadzenie AWT (Abstract Window Toolkit) ) była historycznie pierwszą (1995) standardową biblioteką Javy, która umożliwiała tworzenie graficznego interfejsu użytkownika w oparciu o natywne elementy GUI systemu operacyjnego Odwołania w kodzie Javy do elementów GUI są tłumaczone na wywołania natywnych funkcji systemowych platformy docelowej Wersje AWT: AWT z Java 1.0 wiele ograniczeń: tylko cztery czcionki i podstawowe elementy GUI, niewygodny i niezorientowany obiektowo model programowania AWT z Java 1.1 wprowadzenie modelu zdarzeniowego i komponentowego modelu programowania: JavaBeans AWT z Java 2 część Java Foundation Classes (JFC) AWT: Wprowadzenie Biblioteka AWT stanowi zbiór klas, z których większość znajduje się w pakiecie java.awt i w jego podpakietach Podstawową klasą biblioteki AWT jest java.awt.component, z której wywodzą się wszystkie komponenty graficzne służące do budowy interfejsu użytkownika Komponenty AWT można w ogólności podzielić na dwa zasadnicze rodzaje: komponenty terminalne komponenty nie zawierające innych komponentów (Button, Canvas, Checkbox, Choice, Label, List, ScrollBar, TextComponent, TextArea, TextField) kontenery komponenty wywodzące się z klasy java.awt.container, które służą do umieszczania w nich innych komponentów (Panel, Window, Frame, Dialog) Graficzne Interfejsy Użytkownika 63 Graficzne Interfejsy Użytkownika 64

17 AWT: Wprowadzenie Z każdym kontenerem powiązany jest tzw. menadżer rozkładu (layout manager), który jest odpowiedzialny za określanie pozycji i rozmiaru wyświetlanych wewnątrz kontenera komponentów Budowa interfejsu graficznego w AWT polega na zaprojektowaniu drzewiastego (hierarchicznego) układu komponentów, którego węzłami są kontenery zawierające określone komponenty terminalne, o układzie których decyduje skojarzony z kontenerem menadżer rozkładu Zastosowanie różnych typów menadżerów rozkładu pozwala projektantowi GUI na stworzenie praktycznie dowolnego układu komponentów graficznych w oknie bez konieczności absolutnego definiowania ich położenia i rozmiaru AWT: Wprowadzenie Interakcja użytkownika z GUI oparta jest na zdarzeniowym modelu sterowania, w którym zajście zdarzeń związanych z obsługą myszy, klawiatury oraz interakcji z komponentami interfejsu użytkownika, powoduje wywołanie określonej funkcji zdefiniowanej przez programistę (callback) Zastosowany w AWT delegacyjny model obsługi zdarzeń pozwala na przekierowanie obsługi zdarzenia pochodzącego od obiektu-źródła do jednego lub więcej obiektów-słuchaczy (listeners), które implementują określony przez typ zdarzenia interfejs Słuchacz, który chce otrzymywać zawiadomienia o zdarzeniach musi się na nie zarejestrować u źródła Obsługa zdarzeń zawarta jest w pakiecie java.awt.event Graficzne Interfejsy Użytkownika 65 Graficzne Interfejsy Użytkownika 66 AWT: Wprowadzenie AWT: Wprowadzenie Przykładowa aplikacja w AWT Struktura interfejsu graficznego Frame Panel Panel Panel TextArea Button Button Choice import java.awt.*; import java.awt.event.*; public class AWTExample extends Panel { public void init() { setlayout(new BorderLayout()); Panel p1 = new Panel(); p1.add(new TextArea()); Choice c = new Choice(); c.additem("one"); c.additem("two"); Panel p2 = new Panel(); p2.add(new Button("One")); p2.add(new Button("Two")); p2.add(c); add("center ", p1); add("south", p2); public static void main(string [] args) { Frame f = new Frame("AWTExample"); AWTExample ex = new AWTExample(); ex.init(); f.add("center", ex); f.pack(); f.setvisible(true); f.addwindowlistener(new WindowAdapter() { public void windowclosing(windowevent e) { System.exit(0); ); Graficzne Interfejsy Użytkownika 67 Graficzne Interfejsy Użytkownika 68

18 AWT: Podsumowanie Zalety: dobrze przemyślany, obiektowy model programowania zdejmujący z programisty ciężar zajmowania się zagadnieniami niskopoziomowymi (obsługa klawiatury, myszy, wyświetlanie grafiki) dostępność we wszystkich wersjach Javy Wady: niewielkie i mocno zależne od platformy możliwości graficzne oraz interakcyjne komponentów GUI brak bardziej złożonych komponentów typowych dla współczesnych interfejsów użytkownika np. tabel, drzew, paski stanu, podpowiedzi brak wsparcia dla tworzenia aplikacji wielojęzykowych ograniczone możliwości tworzenia grafiki 2D (np. brak anty-aliasingu aliasingu, przeźroczystości, krzywych sklejanych) problemy z kompatybilnością operacji drag&drop na różnych platformach Graficzne Interfejsy Użytkownika 69 Swing: Wprowadzenie Swing został opublikowany w 1997 roku jako element składowy Java Foundation Classes (wraz z AWT i Java2D) Podstawowym założeniem opracowania Swinga było maksymalne uniezależnienie się od platformy docelowej W tym celu Swing oferuje własne komponenty, które są kreślone za pomocą kodu Javy zawartego w bibliotece Java2D Własne procedury kreślenia komponentów pozwalają na: uniezależnienie wyglądu komponentów od platformy tworzenie bardziej wyrafinowanych wizualnie komponentów graficznych (przeźroczystość, dowolny kształt) dynamiczną zmianę wyglądu interfejsu użytkownika, w zależności od jego oczekiwań (pluggable look and feel) Graficzne Interfejsy Użytkownika 70 Swing: Wprowadzenie Przykład: MetalLookAndFeel Swing: Wprowadzenie Przykład: WindowsLookAndFeel Graficzne Interfejsy Użytkownika 71 Graficzne Interfejsy Użytkownika 72

19 Swing: Wprowadzenie Swing: Wprowadzenie Bibliotekę Swing stanowi w większości zbiór klas zawartych w pakiecie javax.swing i w jego podpakietach Swing stanowi nadbudowę nad AWT, co umożliwia budowę interfejsu użytkownika zarówno z komponentów AWT (komponentów ciężkich) jak i z komponentów Swingu (komponentów lekkich), choć nie jest to zalecane Wszystkie lekkie komponenty Swingu wywodzą się z klasy javax.swing.jcomponent (pośrednio z java.awt.component) Biblioteka Swing oferuje dużo większy niż AWT zbiór komponentów GUI, od prostych komponentów mających swoje odpowiedni w AWT, po komponenty dużo bardziej złożone, jak np. drzewa, tabele, listy, karty (zakładki), chmurki podpowiedzi, standardowe okna dialogowe Elementy Swinga draw Look&Feel Layout Managers draw layout components Listeners Components contain Containers receive are contain generate Events Windows are Frames Graficzne Interfejsy Użytkownika 73 Graficzne Interfejsy Użytkownika 74 Swing: Wprowadzenie Przykładowa struktura interfejsu użytkownika w Swingu Hierarchia komponentów Swing: Wprowadzenie Obiektowa architektura biblioteki Swing została w znacznym stopniu oparta na wzorcu MVC (Model-View-Controller) zapewniającym separację źródeł danych od sposobu ich prezentacji Model zajmuje się przechowywaniem danych, udostępnia metody służące do ich modyfikacji oraz informuje wszystkich zainteresowanych o zmianie swego stanu Zadaniem widoku jest prezentacja danych składowanych w modelu, zaś kontrolera przekształcanie żądań użytkownika na polecenia zrozumiałe dla modelu W zastosowanej w Swingu adaptacji wzorca MVC widok i kontroler są najczęściej połączone i stanowią pojedynczy komponent GUI (architektura Model-Delegate) Graficzne Interfejsy Użytkownika 75 Graficzne Interfejsy Użytkownika 76

20 Swing: Wprowadzenie Architektura MVC w Swingu Swing: Wprowadzenie Przykładowa aplikacja w Swingu JFrame JPanel + BorderLayout JLabel JButton Podobnie jak w AWT tworząc interfejs użytkownika należy odpowiedzieć na następujące pytania: jakich komponentów potrzebujemy? jak będzie wyglądała hierarchia komponentów? którzy manadżerowie układu zostaną powiązani z kontenerami? jak dodać obsługę zdarzeń? Graficzne Interfejsy Użytkownika 77 Graficzne Interfejsy Użytkownika 78 Swing: Wprowadzenie Swing: Wprowadzenie import javax.swing.*; import java.awt.*; import java.awt.event.*; public class SwingExample extends JPanel implements ActionListener { private int clicks; private JLabel label; public SwingExample() { setlayout(new BorderLayout()); label = new JLabel("Click on the button"); label.sethorizontalalignment(swingconstants.center); JButton button = new JButton("<html><u>Click</u><br>me</html>"); button.setmnemonic(keyevent.vk_t); button.addactionlistener(this); add(label, BorderLayout.CENTER); add(button, BorderLayout.SOUTH); public void actionperformed(actionevent e) { clicks++; label.settext("you clicked: " + clicks + " time" + (clicks > 1? "s" : "")); private static void createandshowgui() { JFrame frame = new JFrame("SwingExample"); frame.setdefaultcloseoperation(jframe.exit_on_close); frame.setcontentpane(new SwingExample()); frame.pack(); frame.setvisible(true); public static void main(string [] args) { SwingUtilities.invokeLater(new Runnable() { public void run() { createandshowgui(); ); Graficzne Interfejsy Użytkownika 79 Graficzne Interfejsy Użytkownika 80

21 Swing: Struktura biblioteki Swing: Przegląd wybranych komponentów JButton JToggleButton JCheckBox JRadioButton JSlider JList JComboBox JTextField JPasswordField JSpinner JSeparator JMenu JMenuBar JPopupMenu Graficzne Interfejsy Użytkownika 81 Graficzne Interfejsy Użytkownika 82 Swing: Przegląd wybranych komponentów Swing: Przegląd wybranych komponentów JLabel JProgressBar JPanel JScrollPane JTabbedPane JToolTip JTextArea JTextPane JEditorPane JToolBar JSplitPane JOptionPane JTree JTable Graficzne Interfejsy Użytkownika 83 Graficzne Interfejsy Użytkownika 84

22 Swing: Przegląd wybranych komponentów Swing: Przegląd wybranych komponentów JFrame JColorChooser JApplet JDialog JFileChooser Komponenty Swinga (także te, które mają swoje odpowiedniki w bibliotece AWT) cechują znaczne możliwości i niezależne od platformy zachowanie Przykładowo: przyciski pozwalają na umieszczanie w nich tekstu i/lub ikon z dowolnym pozycjonowaniem; wyświetlane ikony mogą być uzależnione od stanu przycisku; możliwe jest programistyczne symulowanie kliknięcia na klawisze większość komponentów wyświetlających tekst pozwala na jego proste formatowanie (tekst+informacja formatująca w HTML) większość komponentów posiada znaczne możliwości konfiguracyjne (np. listy pozwalają na wyświetlanie wewnątrz nich dowolnych komponentów, w tabelach kolumny mogą mieć różny wygląd, ich wiersze można dowolnie sortować, wyświetlać oraz zaznaczać, zaś w komórkach można umieszczać dowolne komponenty) Graficzne Interfejsy Użytkownika 85 Graficzne Interfejsy Użytkownika 86 Swing: Struktura interfejsu użytkownika Projektowany w Swingu interfejsu użytkownika ma strukturę drzewiastą, którego korzeniem jest kontener najwyższego poziomu (JFrame, JApplet, JDialog), węzłami kontenery (najczęściej JPanel), a liśćmi komponenty GUI Każdy kontener najwyższego poziomu zawiera: contentpane specjalny kontener określający zawartość okna (do niego dodawane są kolejne komponenty tworzące hierarchiczne GUI) menubar kontener zawierający komponenty menu glasspane kontener przeznaczony do przechwytywania komunikatów na najwyższym poziomie lub do kreślenia na innych komponentach zawartych w kontenerze layeredpane kontener przeznaczony do umieszczania w nim komponentów na różnej głębokości (Z-order), co pozwala na częściowe lub całkowite nakładanie się komponentów Swing: Struktura interfejsu użytkownika Kontenery są również komponentami dzięki ich zagnieżdżaniu można budować złożoną strukturę interfejsu użytkownika Komponenty Swingu nie mają najczęściej określonych rozmiarów ani lokalizacji wewnątrz kontenera Z każdym kontenerem związany jest menadżer rozkładu, który jest odpowiedzialny za ustalenie rozkładu komponentów w kontenerze i ich zachowanie w trakcie zmiany rozmiaru kontenera Menadżerowie rozkładu układają komponenty wewnątrz kontenera zgodnie ze swoją logiką biorąc przy tym pod uwagę minimalne, maksymalne lub preferowane rozmiary komponentów (zależnie od typu menadżera rozkładu) Graficzne Interfejsy Użytkownika 87 Graficzne Interfejsy Użytkownika 88

23 Swing: Przegląd menadżerów rozkładu Rozkład FlowLayout FlowLayout komponenty są układane po kolei w wierszu o wielkości komponentów decyduje ich preferowany rozmiar o wyrównaniu komponentów w kontenerze decyduje parametr alignment o odstępach między komponentami i brzegiem kontenera decydują parametry hgap i vgap) przy zmianie rozmiaru kontenera rozmiary komponentów nie ulegają zmianie jeśli szerokość kontenera jest zbyt mała, to następne komponenty umieszczane są w kolejnym wierszu jest to domyślny rozkład dla kontenera JPanel Swing: Przegląd menadżerów rozkładu przykład: JPanel panel = new JPanel(); panel.setlayout(new FlowLayout(FlowLayout.LEFT)); panel.add(new JButton("Button 1")); panel.add(new JButton("Button 2")); panel.add(new JButton("Button 3")); panel.add(new JButton("Long-Named Button 4")); panel.add(new JButton("5")); Graficzne Interfejsy Użytkownika 89 Graficzne Interfejsy Użytkownika 90 Swing: Przegląd menadżerów rozkładu Rozkład BorderLayout kontener podzielony jest na pięć obszarów oznaczanych geograficznie: północny (North), południowy (South), zachodni (West West), wschodni ( (East East) ) i centralny ( (Center Center) komponenty dodawane są do jednego z ww. obszarów (nie ma konieczności wypełniania wszystkich obszarów) komponenty zajmujące obszar północny i/lub południowy mają preferowaną wysokość oraz szerokość równą szerokości kontenera komponenty zajmujące obszar zachodni i/lub wschodni mają preferowaną szerokość, zaś ich wysokość jest różnicą wysokości kontenera i komponentów umieszczonych w obszarze północnym i południowym obszar centralny wypełnia całą pozostałą przestrzeń wewnątrz kontenera i ulega zmianie wraz ze zmianą rozmiaru kontenera jest to domyślny rozkład dla kontenera contentpane okien Swinga Swing: Przegląd menadżerów rozkładu przykład: JPanel panel = new JPanel(); panel.setlayout(new BorderLayout()); panel.add(new JButton("Button 1 (NORTH)"), BorderLayout.NORTH); panel.add(new JButton("Button 2 (CENTER)"), BorderLayout.CENTER); panel.add(new JButton("Button 3 (WEST)"), BorderLayout.WEST); panel.add(new JButton("Long-Named Button 4 (SOUTH)"), BorderLayout.SOUTH); panel.add(new JButton("5 (EAST)"), BorderLayout.EAST); Graficzne Interfejsy Użytkownika 91 Graficzne Interfejsy Użytkownika 92

24 Swing: Przegląd menadżerów rozkładu Swing: Przegląd menadżerów rozkładu Rozkład BoxLayout komponenty są układane w jednym wierszu lub w jednej kolumnie (w zależności od parametru orient) o wielkości komponentów decydują preferowane i maksymalne rozmiary komponentów wewnątrz kontenera można poza dodatkowo umieszczać niewidzialne wypełniacze : klej (glue) rozszerzalna przestrzeń (w poziomie lub w pionie) całkowicie wypełniająca miejsce między komponentami, z którymi sąsiaduje obszar sztywny ( (rigid area) przestrzeń o zadanym rozmiarze służąca najczęściej jako przerwa rozdzielająca komponenty wypełniacz (box.filler) rozszerzalna przestrzeń z ustalonym rozmiarem minimalnym, preferowanym i maksymalnym jest to domyślny rozkład dla kontenera menubar okien Swinga przykład: JPanel panel = new JPanel(); panel.setlayout(new BoxLayout(panel, BoxLayout.Y_AXIS)); panel.add(createbutton("button 1")); panel.add(createbutton("button 2")); panel.add(createbutton("button 3")); panel.add(box.createverticalglue()); panel.add(createbutton("long-named Button 4")); panel.add(createbutton("5")); private JButton createbutton(string text) { JButton button = new JButton(text); button.setalignmentx(component.center_alignment); return button; Graficzne Interfejsy Użytkownika 93 Graficzne Interfejsy Użytkownika 94 Swing: Przegląd menadżerów rozkładu Swing: Przegląd menadżerów rozkładu Rozkład CardLayout układane komponenty zajmują dokładnie to samo miejsce, zaś menadżer CardLayout zarządza ich widocznością w taki sposób, aby w danej chwili był widoczny tylko jeden z nich najczęściej komponentami zarządzanymi przez ten menadżer rozkładu są kontenery grupujące komponenty GUI na zasadzie kart za pomocą parametrów hgap i vgap można definiować odstęp komponentów od krawędzi kontenera zastosowanie tego rozkładu jest szczególnie użyteczne wtedy, gdy chcemy umieścić w kontenerze dużo komponentów, które nie muszą być wyświetlane równocześnie, a zarazem zależy nam na oszczędności miejsca (podobną funkcjonalność oferuje JTabbedPane) aktualnie wyświetlaną kartę komponentów można zmienić posługując się jej nazwą (metoda show()), ), bądź korzystając z poleceń nawigacyjnych : next(), previous(), first() lub last() przykład: JPanel card1 = new JPanel(); card1.add(new JButton("Button 1")); card1.add(new JButton("Button 2")); card1.add(new JButton("Button 3")); JPanel card2 = new JPanel(); card2.add(new JTextField("TextField", 20)); JPanel panel = new JPanel(); panel.setlayout(new CardLayout()); panel.add(card1, "Card with JButtons"); panel.add(card2, "Card with JTextField"); JComboBox control = new JComboBox(comboBoxItems); control.seteditable(false); control.additemlistener(new ItemListener() { public void itemstatechanged(itemevent e) { CardLayout cl = (CardLayout) panel.getlayout(); cl.show(panel, (String) e.getitem()); ); Graficzne Interfejsy Użytkownika 95 Graficzne Interfejsy Użytkownika 96

25 Swing: Przegląd menadżerów rozkładu Rozkład GridLayout komponenty są umieszczane na siatce o wymiarach n x m (n wierszy i m kolumn) rozmiary wszystkich komponentów są takie same (równe rozmiarowi pojedynczej komórki siatki) i zmieniają się proporcjonalnie wraz ze zmianą wielkości kontenera podczas tworzenia kontenera pod uwagę brany jest preferowany rozmiar komponentów (rozmiar komórki siatki wyznaczany jest jako maksimum po preferowanych szerokościach i wysokościach wszystkich komponentów) komponenty są umieszczane na siatce (w kolejności ich dodawania do kontenera) w kolejnych wierszach począwszy od góry, od lewej do prawej strony wiersza wymiary siatki zależą od liczby umieszczonych w kontenerze komponentów (niezależnie od początkowej deklaracji) Swing: Przegląd menadżerów rozkładu przykład: JPanel panel = new JPanel(); panel.setlayout(new GridLayout(3, 3)); panel.add(new JButton("Button 1")); panel.add(new JButton("Button 2")); panel.add(new JButton("Button 3")); panel.add(new JButton("Long-Named Button 4")); panel.add(new JButton("5")); Graficzne Interfejsy Użytkownika 97 Graficzne Interfejsy Użytkownika 98 Swing: Przegląd menadżerów rozkładu Rozkład GridBagLayout jednym z najbardziej elastycznych lecz jednocześnie dość trudny w użyciu menadżer rozkładu komponenty podobnie jak w rozkładzie GridLayout są umieszczane na siatce, jednak jej wiersze i kolumny mogą mieć różne rozmiary orientacja siatki zależy od ustawienia ComponentOrientation kontenera współrzędna (0, 0) siatki odpowiada lewemu górnemu narożnikowi kontenera dla orientacji LEFT_TO_RIGHT oraz prawemu górnemu narożnikowi dla orientacji RIGHT_TO_LEFT w trakcie układania pod uwagę brane są preferowane oraz minimalne rozmiary komponentów dodatkowe parametry (ograniczenia) związane ze sposobem umieszczenia komponentu na siatce definiuje skojarzony z komponentem obiekt klasy GridBagContraints Swing: Przegląd menadżerów rozkładu parametry definiowane przez obiekt GridBagContraints: gridx, gridy pozycja komponentu na siatce (domyślnie GridBagConstraints.RELATIVE oznaczający autoinkrementację) gridwidth, gridheight liczba kolumn i wierszy zajmowana przez komponent (domyśnie 1) Użycie stałej GridBagConstraints.REMAINDER spowoduje, że komponent będzie ostatnim w wierszu lub w kolumnie, zaś stałej GridBagConstraints.RELATIVE sprawi, że komponent będzie przedostatnim w swoim wierszu lub kolumnie) weightx, weighty współczynniki wagowe określające proporcję podziału miejsca między kolumnami i między wierszami, która jest zachowywana w trakcie zmiany rozmiaru kontenera Współczynniki te są najczęściej z przedziału (domyślnie 0) Komponenty posiadające takie same wagi zajmują tyle samo miejsca (mają taką samą szerokość lub wysokość) Graficzne Interfejsy Użytkownika 99 Graficzne Interfejsy Użytkownika 100

26 Swing: Przegląd menadżerów rozkładu fill sposób modyfikacji rozmiaru komponentu w sytuacji, kiedy jego rozmiar jest mniejszy od obszaru jego wyświetlania: GridBagConstraints.NONE (wartość domyślna) oznacza, że rozmiar komponentu ma pozostać niezmieniony GridBagConstraints.HORIZONTAL nakazuje powiększenie szerokości komponentu tak, aby była równa szerokości obszaru wyświetlania GridBagConstraints.VERTICAL nakazuje powiększenie wysokości komponentu tak, aby była równa wysokości obszaru wyświetlania GridBagConstraints.BOTHBOTH nakazuje powiększenie komponentu tak, aby wypełnił on cały obszar wyświetlania insets zewnętrzne odstępy komponentu (minimalna przestrzeń pomiędzy komponentem, a krawędziami jego obszaru wypełnienia) określane niezależnie dla każdej krawędzi komponentu (domyślnie wszystkie 0) Swing: Przegląd menadżerów rozkładu ipadx, ipady wewnętrzne marginesy komponentu (domyślnie 0) Rozmiar komponentu będzie wynosił przynajmniej tyle, ile jego minimalny rozmiar powiększony o podwojone marginesy anchor sposób zakotwiczenia komponentu wewnątrz jego obszaru wyświetlania w sytuacji, kiedy jest on od tego obszaru mniejszy (domyślnie CENTER): FIRST_LINE_START (NORTHWEST) LINE_START (WEST) LAST_LINE_START (SOUTHWEST) PAGE_START (NORTH) CENTER PAGE_END (SOUTH) FIRST_LINE_END (NORTHEAST) LINE_END (EAST) LAST_LINE_END (SOUTHEAST) Graficzne Interfejsy Użytkownika 101 Graficzne Interfejsy Użytkownika 102 Swing: Przegląd menadżerów rozkładu Swing: Przegląd menadżerów rozkładu przykład: JPanel panel = new JPanel(); panel.setlayout(new GridBagLayout()); GridBagConstraints c = new GridBagConstraints(); c.weightx = 2.0; c.fill = GridBagConstraints.BOTH; panel.add(new JButton("Button 1"), c); panel.add(new JButton("Button 2"), c); c.weightx = 4.0; c.gridwidth = GridBagConstraints.REMAINDER; panel.add(new JButton("Button 3"), c); c.ipady = 40; panel.add(new JButton("Button 4"), c); c.fill = GridBagConstraints.HORIZONTAL; c.ipady = 0; c.weighty = 1.0; c.anchor = GridBagConstraints.SOUTH; c.insets = new Insets(10, 0, 0, 0); c.gridx = 1; c.gridy = 2; c.gridwidth = 2; panel.add(new JButton("5"), c) Rozkład FormLayout ( bardzo prosty, wygodny i szybki w użyciu menadżer rozkładu, którego zalety widać zwłaszcza podczas tworzenia okien (dialogów) zawierających wiele komponentów, których ułożenie da się opisać na bazie siatki korzystanie z tego rozkładu wymaga określenia kolumn i wierszy oraz opcjonalnie grup kolumn i/lub grup wierszy specyfikacje wierszy i kolumn są zdefiniowane w postaci łańcuchów znaków, w których opisy poszczególnych kolumn (wierszy) zawierają informacje o ich wielkości, domyślnym wyrównaniu oraz zachowaniu podczas zmiany rozmiaru kontenera wielkości kolumn (wierszy) mogą być podane w pikselach, punktach, calach, milimetrach, centymetrach lub w jednostkach dialogowych albo wyznaczone na podstawie minimalnego, preferowanego lub domyślnego rozmiaru umieszczonych w nich komponentów Graficzne Interfejsy Użytkownika 103 Graficzne Interfejsy Użytkownika 104

27 Swing: Przegląd menadżerów rozkładu Swing: Przegląd menadżerów rozkładu Specyfikacja opisu wierszy (kolumn): przykład: columnspec ::= [columnalignment:] size [:resizebehavior] rowspec ::= [rowalignment :] size [:resizebehavior] columnalignment ::= LEFT CENTER RIGHT FILL L C R F rowalignment ::= TOP CENTER BOTTOM FILL T C B F size ::= constantsize componentsize boundedsize componentsize ::= MIN PREF DEFAULT M P D constantsize ::= <integer>integerunit <double>doubleunit integerunit ::= PX PT DLU doubleunit ::= IN MM CM boundedsize ::= MIN(constantSize;componentSize) MAX(constantSize;componentSize) resizebehavior ::= NONE GROW GROW(<double>) G(<double>) "10px", "4dlu", "min", "pref", "default", "left:6px", "right:6dlu", "left:pref:grow", "pref:grow(0.5)", "l:m:g(0.8)", "left:max(50dlu;pref)" FormLayout layout = new FormLayout( "pref, 4dlu, max(80px;pref):grow, 4dlu, min", "pref, 2dlu, pref, 2dlu:grow, pref"); layout.setrowgroups(new int[][] {{ 1, 3, 5 ); CellConstraints cc = new CellConstraints(); JPanel panel = new JPanel(layout); panel.add(new JLabel("Label 1"), cc.xy(1, 1)); panel.add(new TextField(), cc.xyw(3, 1, 3)); panel.add(new JLabel("Label 2"), cc.xy(1, 3)); panel.add(new TextField(), cc.xy(3, 3)); panel.add(new JLabel("Label 3"), cc.xy(1, 5)); panel.add(new TextField(), cc.xy(3, 5)); panel.add(new JButton(""), cc.xy(5, 5)); Graficzne Interfejsy Użytkownika 105 Graficzne Interfejsy Użytkownika 106 Swing: Przegląd menadżerów rozkładu Chociaż stosowanie menadżerów rozkładu powiązanych z kontenerami jest preferowanym sposobem konstrukcji interfejsu użytkownika, Swing dopuszcza możliwość samodzielnego pozycjonowania i skalowania komponentów W tym celu należy wyłączyć domyślny menadżer rozkładu w kontenerze (ustawić go na null), a następnie skorzystać z metod komponentu: setsize() (), setlocation() lub setbounds() panel.setlayout(null); JButton button1 = new JButton("Button 1"); button1.setbounds(20, 5, 100, 24); panel.add(button1); JButton button2 = new JButton("Button 2"); button2.setbounds(60, 80, 160, 32); panel.add(button2); Swing: Komponent JOptionPane Biblioteka Swing udostępnia komponent JOptionPane, którego użycie stanowi alternatywę dla samodzielnie tworzonych modalnych okien dialogowych wtedy, gdy: zachodzi potrzeba wyświetlania prostych okienek informacyjnych trzeba dokonać wyboru opcji trzeba wyświetlić okno do wprowadzania tekstu Komponent JOptionPane jest przykładem komponentu, który dzięki znacznym możliwością konfiguracyjnym nadaje się do tworzenia bardziej skomplikowanych okien dialogowych Dostosowanie wyglądu komponentu JOptionPane obejmuje możliwość zmiany tytułu okna, wyświetlanych ikon, tekstów klawiszy oraz postaci wiadomości (parametr message może być dowolnym komponentem lub tablicą komponentów) Graficzne Interfejsy Użytkownika 107 Graficzne Interfejsy Użytkownika 108