Uniwersytet Jagielloński Interfejsy graficzne Wykład 3 Architektura interfejsu użytkownika Barbara Strug 2011
Hall of shame
Hall of Shame
Hall of Fame
O czym dzisiaj Model Widok- Kontroler Hierarchia widoków Obserwator
Wzorzec MVC Rozdziela problemy interfejsu od problemów z sama aplikacją. Rozdziela wejście od wyjścia Umożliwia wiele sposobów patrzenia/wizualizacji tych samych danych Pozwala na wykorzystanie widoków i kontrolerów dla innych modeli Przykład : pole tekstowe Model: tekst wielolinijkowy Widok: prostokąt w wyświetlonym tekstem Kontroler: obsługujący wejście z klawiatury
Diagram MVC
Model Odpowiedzialny za dane Przechowuje stan aplikacji (dane) Implementuje operacje zmiany stanu Informuje zależne od niego widoki i kontrolery o zajściu zmiany (obserwator) Problemy projektowe Jak szczegółowe maja być opisy zmian? tekst uległ zmianie czy wstawiono znaki pomiędzy 7 i 8. Jak szczegółowe są obserwatory : cały ciąg czy tylko część wyświetlona przez widok
Widok Odpowiedzialny za wyjście Zajmuje ekran (położenie, rozmiar) Rysuje po ekranie Nasłuchuje zmian w modelu Pobiera informacje z modelu, aby go narysować/wyświetlić Widok ma tylko jeden model Model może mieć wiele widoków
Kontroler Odpowiedzialny za wejście Nasłuchuje zdarzeń z klawiatury i zdarzeń myszy Przekazuje modelowi i widokowi informacje o zmianie u przykład: znak został wstawiony do tekstu Kontroler jest związany z jednym modelem i jednym widokiem
Kontroler potrzebuje dostępu do wyjścia. Menu jest powiązane z kontrolerem np. kliknięcie prawym klawiszem na polu tekstowym otwiera menu kontekstowe Menu musi być narysowane!! Menu jest zależne od modelu i powiązane z kontrolerem i widokiem,
Kontroler potrzebuje dostępu do wyjścia.
Kto zarządza wyborem. Musi być wyświetlone przez widok Jako migający kursor i/lub podświetlony fragment Musi być aktualizowane i używane przez kontroler Kliknięcie i/lub klawisze strzałek zmieniają stan wyboru/zaznaczenia Polecenia zmieniają część modelu, która jest zaznaczona/wybrana Czy zaznaczenie powinno być częścią modelu? zazwyczaj nie!! Widoki mogą mieć różne zaznaczenie dla tych samych danych (Emacs) Różne widoki musza synchronizować zaznaczenie (wykres/tabela)
Manipulacja bezpośrednia Manipulacja bezpośrednia ; użytkownik wskazuje obiekt i manipuluje nim bezpośrednio Widok musi udostępnić manipulację (elementy suwaka, uchwyty ) dla kontrolera Widok musi przekazać informacje na temat stanu kontrolera (wciśnięty przycisk)
Silne powiązania widok-kontroler - rzeczywistość Wzorzec MVC jest w rzeczywistości zastąpiony podejściem MV Widok zarządza zarówno wejściem jak i wyjściem Nazywany także komponentem lub widget Biblioteki kontrolerów są znacznie rzadsze Akcje w Java Swing: obiekty związane z elementami menu, paskami narzędzi, przyciskami, skrótami itp. Przykład :. cut, copy, paste, delete
Hierarchia widoków Widoki maja organizacje hierarchiczną Kontenery Okna, panele, komponenty tekstowe Komponenty Płótno. Przycisk, etykieta, pole tekstowe Kontenery także mogą być komponentami Każdy interfejs ma hierarchie widoków i używa jej na różne sposoby Wyjście Wejście Rozkład (layout)
Hierarchia widoków: wyjście Rysowanie Polecenia rysowania są przekazywane z góry do dołu hierarchii (do potomków danego elementu) Obcinanie Kontener przodka uniemożliwia narysowanie potomnych komponentów poza swoim obszarem (czy zawsze?) Z-bufor Potomne elementy są zazwyczaj rysowane na wierzchu przodków Porządek dzieci reguluje kolejność rysowania elementów na tym samym poziomie hierarchii Układ współrzędnych Każdy kontener ma własny układ współrzędnych (z początkiem w górnym, lewym rogu) Położenie potomka podane jest względem przodka
Hierarchia widoków: wejście Przesyłanie zdarzeń Podstawowe zdarzenia wejściowe (wciśnięcie klawisza, kliknięcie myszką) są przekazywane do komponentów najniżej w hierarchii Zdarzenia są przesyłane dalej w górę hierarchii aż dotrą do komponentu, który obsługuje dane zdarzenie Klawiatura należy do jednego komponentu (keyboard focus) Przodkowie tego komponentu także maja dostęp do klawiatury
Hierarchia widoków: układ Domyślnie komponenty potomne są umieszczane wewnątrz przodków, a ich położenie i rozmiar jest ustalany w układzie współrzędnych przodka Pozwala na zmianę rozmiaru elementów (okien) Dobrze radzi sobie z dopasowaniem do języka i różnych platform (czcionki, rodzaje komponentów) Zwalnia programistę z koniczności zajmowania się położeniem i rozmiarem
Wzorzec obserwator Wzorzec obserwator rozdziela model od widoku!
Interakcja interface Model { void register(observer) void unregister(observer) Object get() void modify() } interface Observer { void update(event) }
Spójność modelu przed aktualizacją
Rejestracja zmian w trakcie aktualizacji aukcja
Aktualizacja wywołuje modyfikację
Problemy z aktualizacją Kolejkowanie zdarzeń Rezygnacja z wysłania zdarzenia X do B Obserwator może zignorować dwie modyfikacje X, Y i pobrać aktualne dane z modelu
Kolejny wykład Percepcja Model Human Processor (MHD)