Projektowanie Graficznych Interfejsów Użytkownika. Robert Szmurło

Podobne dokumenty
Projektowanie Graficznych Interfejsów Użytkownika Robert Szmurło

Programowanie obiektowe

Kompleksowe tworzenie aplikacji klasy Desktop z wykorzystaniem SWT i

Wprowadzenie do programowania aplikacji mobilnych

Projektowanie Graficznych Interfejsów Użytkownika Robert Szmurło

Forum Client - Spring in Swing

ASP.NET MVC. Podstawy. Zaawansowane programowanie internetowe Instrukcja nr 3

Wzorce architektoniczne

Omówienie wzorców wykorzystywanych w Prism 5.0. Dominika Różycka

Programowanie obiektowe

Tworzenie aplikacji Web Alicja Zwiewka. Page 1

Projektowanie Graficznych Interfejsów Użytkownika Robert Szmurło

Projektowanie obiektowe oprogramowania Wykład 7 wzorce czynnościowe (2) Wiktor Zychla 2018

Temat: Ułatwienia wynikające z zastosowania Frameworku CakePHP podczas budowania stron internetowych

Programowanie obiektowe i zdarzeniowe wykład 4 Kompozycja, kolekcje, wiązanie danych

ASP.NET MVC. Grzegorz Caban 20 stycznia 2009

Warstwa integracji. wg. D.Alur, J.Crupi, D. Malks, Core J2EE. Wzorce projektowe.

Usługi analityczne budowa kostki analitycznej Część pierwsza.

Analiza i projektowanie aplikacji Java

Wzorce projektowe cz. II. Wzorce projektowe cz. II 1/35

Wprowadzenie do projektu QualitySpy

Wstęp - Prosta aplikacja internetowa w technologii Java EE 5. Programowanie komponentowe 1

Budowa aplikacji ASP.NET z wykorzystaniem wzorca MVC

Wzorce prezentacji internetowych

Technologie dla aplikacji klasy enterprise. Wprowadzenie. Marek Wojciechowski

Programowanie komponentowe 5

Projektowanie oprogramowania. Warstwa integracji z bazą danych oparta na technologii ORM Platforma Java EE Autor: Zofia Kruczkiewicz

Warstwa prezentacji. wg. D.Alur, J.Crupi, D. Malks, Core J2EE. Wzorce projektowe.

Architektura interfejsu użytkownika

1 Wprowadzenie do J2EE

Poznaj ASP.NET MVC. Kamil Cieślak Microsoft Student Partner

Aplikacja webowa w Javie szybkie programowanie biznesowych aplikacji Spring Boot + Vaadin

Dokumentacja projektu Makao karciana gra sieciowa

Budowanie aplikacji biznesowych przy użyciu. Presentation Foundation i wzorca MVVM

Leszek Stasiak Zastosowanie technologii LINQ w

Web frameworks do budowy aplikacji zgodnych z J2EE

Projektowanie Zorientowane na Dziedzinę. ang. Domain Driven Design

Serwery aplikacji. dr Radosław Matusik. radmat

- Narzędzie Windows Forms. - Przykładowe aplikacje. Wyższa Metody Szkoła programowania Techniczno Ekonomiczna 1 w Świdnicy

Dokumentacja techniczna. Młodzieżowe Pośrednictwo Pracy

1 LINQ. Zaawansowane programowanie internetowe Instrukcja nr 1

Wzorce logiki dziedziny

Web frameworks do budowy aplikacji zgodnych z J2EE. Jacek Panachida

Wykład 1 Inżynieria Oprogramowania

Projektowanie obiektowe. Roman Simiński Wzorce projektowe Wybrane wzorce strukturalne

Wzorce Strukturalne. Adapter: opis. Tomasz Borzyszkowski

Zdarzenia Klasa Application Powiadomienia Toast AlertDialog

problem w określonym kontekście siły istotę jego rozwiązania

Szkolenie wycofane z oferty

Programowanie zorientowane obiektowo. Mateusz Kołecki

Dzisiejszy wykład. Wzorce projektowe. Visitor Client-Server Factory Singleton

Wskazówki projektowe. Programowanie Obiektowe Mateusz Cicheński

Programowanie obiektowe

Szczególne problemy projektowania aplikacji internetowych. Jarosław Kuchta Projektowanie Aplikacji Internetowych

Wstęp [2/2] Wbrew częstemu przekonaniu, nie są one gotowymi rozwiązaniami, to tylko półprodukty rozwiązania.

Szkolenie. IBM Lotus - Podstawy projektowania aplikacji w Domino Designer 8.5. Strona szkolenia Terminy szkolenia Rejestracja na szkolenie Promocje

UML a kod w C++ i Javie. Przypadki użycia. Diagramy klas. Klasy użytkowników i wykorzystywane funkcje. Związki pomiędzy przypadkami.

WYKŁAD 1 ANGULARJS CZĘŚĆ 1

DLIBRA & DRUPAL DWA SYSTEMY, JEDNA WITRYNA

Architektura nowoczesnych aplikacji internetowych

AUREA BPM Oracle. TECNA Sp. z o.o. Strona 1 z 7

Wypożyczalnia VIDEO. Technologie obiektowe

Dokument Detaliczny Projektu

Grzegorz Ruciński. Warszawska Wyższa Szkoła Informatyki Promotor dr inż. Paweł Figat

Przygotowanie do nowoczesnego programowania po stronie przeglądarki. (HTML5, CSS3, JS, wzorce, architektura, narzędzia)

Zagadnienia (1/3) Data-flow diagramy przepływów danych ERD diagramy związków encji Diagramy obiektowe w UML (ang. Unified Modeling Language)

Dariusz Brzeziński. Politechnika Poznańska, Instytut Informatyki

Full Stack JavaScript z Angular i Nest. Dni: 5. Opis: Adresaci szkolenia

Instrukcja laboratoryjna

Projekt architektury systemów informatycznych Uniwersytetu Warszawskiego w oparciu o metodykę TOGAF. Tomasz Turski

Programowanie MorphX Ax

Dokument Detaliczny Projektu Temat: Księgarnia On-line Bukstor

Informacje wstępne Autor Zofia Kruczkiewicz Wzorce oprogramowania 4

LK1: Wprowadzenie do MS Access Zakładanie bazy danych i tworzenie interfejsu użytkownika

Komunikator internetowy w C#

PROJEKTOWANIE APLIKACJI INTERNETOWYCH

Materiały oryginalne: ZAWWW-2st1.2-l11.tresc-1.0kolor.pdf. Materiały poprawione

Międzyplatformowy interfejs systemu FOLANessus wykonany przy użyciu biblioteki Qt4

Programowanie Zespołowe

Podstawy programowania III WYKŁAD 4

OBC01/TOPMOB Projektowanie w języku Objective-C

I. Raport wykonywalności projektu

16) Wprowadzenie do raportowania Rave

Podstawy Programowania 2

Java JMX. Marcin Werla. Monitorowanie i zarządzanie usługami sieciowymi w Javie. mwerla@man.poznan.pl PCSS/Poznań JUG

Języki i paradygmaty programowania doc. dr inż. Tadeusz Jeleniewski

Plan. Aplikacja. Architektura aplikacji. Architektura aplikacji Tworzenie aplikacji Application Builder podstawy

Czym jest Java? Rozumiana jako środowisko do uruchamiania programów Platforma software owa

Projektowanie Graficznych Interfejsów Użytkownika Robert Szmurło

Zaawansowane programowanie w C++ (PCP)

Spring Framework - wprowadzenie i zagadnienia zaawansowane

Technologie obiektowe

Wybrane działy Informatyki Stosowanej

Backend Administratora

Produktywne tworzenie aplikacji webowych z wykorzystaniem Groovy i

Przykładowa implementacja

Diagramy maszyn stanowych, wzorce projektowe Wykład 5 część 1

Transkrypt:

Projektowanie Graficznych Interfejsów Użytkownika Robert Szmurło 1

Wzorce Projektowe Nie ma złotego środka spełniającego wszystkie wymagania. skala projektu liczba deweloperów stopień skomplikowania Wzorzec projektowy w inżynierii oprogramowania, uniwersalne, sprawdzone w praktyce rozwiązanie często pojawiających się, powtarzalnych problemów projektowych. (za wikipedią :-) Po co mówimy o wzorcach? chcemy np. zrozumieć różne style architektoniczne chcemy w zespole architektów i programistów posługiwać się wspólną terminologią przecież nie chce nam się za każdym razem tłumaczyć jak odseparować prezentację :-) chcemy szybko orientować się w strukturze istniejącego projektu 2

Wzorce projektowe - przykłady Przykłady: Wzorzec singleton Wzorzec fabryki i wiele innych... Wzorzec (?) MVC Model View Controller przetrwał próbę czasu (ponad 35 lat, lata 70) sprawdza się w separacji Logiki Biznesowej od Logiki Prezentacji. stosuje się go zazwyczaj do rozwiązań bazodanowych, a nie do specjalistycznych aplikacji opartych na technologii bogaty klient ( rich client ) 3

Wzorce projektowe - GUI Wzorce projektowe w GUI: Model Widok Kontroler (MVC) (osobny wzorzec projektowy czy raczej ich zbiór?) Model Widok (np. Java oraz Qt w kontekście kontrolek) Zawiadomienie (Notification) Kontroler zarządzający (Supervising controller) Pasywny widok (Passive View) Model prezentacji (Presentation Model) Sumator zdarzeń (scalacz) (Event aggregator) Sterownik okna (Window Driver) Synchronizacja przepływu (Flow Synchronization) Synchronizacja obserwatora (Observer Synchronization) Selektor prezentacji (Presentation Chooser) Oddzielona prezentacja (Separated Presentation) Głównym źródłem niniejszego opracowania wzorców jest praca: Martin Fowler, Development of Further Patterns of Enterprise Application Architecture http://www.martinfowler.com/eaadev/ (Link: 20.03.2007) 4

Synchronizacja stanów Najczęściej dane wyświetlane na ekranie pochodzą z jakiejś bazy danych (SQL). Dane te występują w trzech zasadniczych kopiach (stanach): 1. w rzeczywistej bazie na serwerze (lub lokalnym pliku), kopię tę możemy nazwać stanem rekordu. 2. w pamięci operacyjnej związanej z naszą aplikacją w postaci jakiegoś zbioru danych (RecordSet), którą nazwiemy stanem sesji. 3. na ekranie w komponentach GUI, którą określimy stanem ekranowym. Jednym z kluczowych elementów architektury GUI jest synchronizacja danych pomiędzy stanami ekranowym i sesji. W naszym pierwszym wzorcu wykorzystuje się do tego wbudowany w niektóre kontrolki mechanizm: DataBinding. Stan ekranowy Stan Sesji Stan rekordu Stan ekranowy Stan Sesji 5

Wzorzec 1: Formularze i Kontrolki Architektura promowana w latach 90-tych dla aplikacji klient-serwer głównie w narzędziach takich jak Visual Basic, Delphi czy PowerBuilder. Bardzo praktyczna podczas prototypowania, ze względu na natychmiastowe efekty. Program przykładowy: (na podstawie Martin Fowler, Development of Further Patterns of Enterprise Application Architecture ) Zbiór stacji pomiarowych pewnej wartości, raportujemy dla każdej stacji: wartość zmierzoną wartość progową różnicę 6

Zadania formularza Formularz (widok) jest specyficzny dla naszej aplikacji, ale używa pewnych ogólnych kontrolek. Formularz jest odpowiedzialny za: układ kontrolek na ekranie, logikę formularza (widoku), która nie może być w łatwy sposób zrealizowana wewnątrz kontrolek. 7

Databinding szczegóły Podstawowa idea data binding zapewnia synchronizację między tym co znajduje się na ekranie a tym co znajduje się w recordset'ie. Kontrolka jest podpięta do kolumny w tabeli lub kwerendzie zazwyczaj za pomocą pola atrybutu (property). Data binding może być rozbudowany o synchronizację z bazą danych (stan rekordu). Każda zmiana na ekranie automatycznie propaguje się do recordsetu i odwrotnie. Problem zapętlających się uaktualnień. Koncepcja ładowania z sesji (RecordSet) do kontrolek tylko podczas pierwszego pokazywania. Koncepcja obserwatorów. Stan ekran. (kontrolka 1) Większa część funkcjonalności związanej z Data Binding jest zaimplementowana w bibliotece, którą wykorzystujemy. Stan Sesji (recordset) Stan rekordu (baza danych) Stan ekran. (kontrolka 2) 8

RecordSet (ADOQuery) Demo w Delphi Mechanizm Data Binding (TDataSource) W rzeczywistości w Delphi komponent ten jest interfejsem między standardowymi kontrolkami bazodanowymi a różnymi komponentami przechowującymi zbiory danych (TDataSet). Połączenie do bazy danych (ADOConnection) Zsynchronizowane za pomocą TDataSource uniwersalne kontrolki bazodanowe: TDBGrid i TDBEdit 9

Specyficzne wymagania aplikacji Niestety bardzo często standardowe kontrolki nie udostępniają jakiejś funkcjonalności, która jest związana z logiką naszej konkretnej aplikacji. W naszym przypadku jest to logika związana z kolorem w jakim ma być wyświetlona różnica między wartościami zmierzonymi i zadanymi. W przypadku znacznych odchyłek ma być to kolor czerwony. Są dwa zasadnicze rozwiązania: 1. za każdym razem gdy zmieni się wartość kontrolki różnicy, możemy informować o tym formularz (klasę widoku), który następnie pobierze aktualną wartość z kontrolki i na tej podstawie podejmie odpowiednią decyzję o kolorze. (Wzorzec GUI: Formularz i Kontrolka) Kontrolki udostępniają mechanizm zdarzeń (events), do których podpina się formularz. Takie rozwiązanie wykorzystuje wzorzec obserwatora. 2. tworzymy naszą własną kontrolkę, która rozszerza funkcjonalność kontrolki standardowej o dodatkową opcję koloru (np. Qt). 10

Analiza procesu edycji z wykorzystaniem Form Diagram klas Diagram sekwencji dla przypadku gdy użytkownik wprowadza nową wartość. 11

Podsumowanie Formularz i Kontrolka Podsumujmy pierwszy wzorzec oparty na formularzu i kontrolkach: Programiści tworzą formularze (widoki) specjalizowane dla naszej aplikacji, ale wykorzystują do tego uniwersalne kontrolki. Formularz definiuje układ kontrolek na ekranie. Problemy: Proste edycje danych na ekranie są obsługiwane przez mechanizm Data Binding. Bardziej złożone modyfikacje są realizowane w metodach obsługi zdarzeń w formularzu. W tym celu formularz obserwuje kontrolki za pośrednictwem metod, które są połączone ze zdarzeniami generowanymi przez kontrolki. niska kontrola nad wydajnością ostatecznej wersji systemu (databinding), problematyczne transakcje, wzajemne blokowanie (zakleszczenia), Walidacja gdzie ją zrealizować?, dla klikaczy... :-) 12

Motywacja- czyli potrzeby rynku Interfejs użytkownika ale i nie tylko interfejs zmienia się bardzo często. (nowe strony, zmiana kolejności, zmiana organizacji elementów na ekranie, nowe kolumny w bazie, nowe tabele,... ) W niektórych sytuacjach system wyświetla tą samą informację, ale w innej formie (widoki). Projekt efektywnego (też efektownego?) interfejsu w HTML wymaga specjalnych kwalifikacji? Rzadko spotyka się osoby, które potrafią projektować strony internetowe i jednocześnie logikę biznesową. Interfejs składa się zasadniczo z dwóch elementów: wyświetlania i uaktualniania. Kod interfejsu użytkownika zależy od specyfiki sprzętowej (np. PDA, WebForms, WindowForms) Tworzenie automatycznych testów interfejsu użytkownika jest pracochłonne i trudniejsze od testów logiki biznesowej. 13

Odseparowana Prezentacja (ang. Separated Presentation) Koncepcja której podstawą jest odseparowanie obiektów dziedziny dla której stworzona jest aplikacja, czyli obiektów użytkownika, od widoków prezentacji realizowanych za pomocą elementów GUI. Obiekty dziedziny (użytkownika) w koncepcji tej powinny być całkowicie niezależne i nie powinny odwoływać się do prezentacji. Więcej, powinny w naturalny sposób obsługiwać wiele interfejsów jednocześnie. GUI 2 WEB GUI 1 Linia Komend Model 14

Wzorzec MVC cd Struktura Modelu MVC Kontroler cd MVC Obserwator Model Kontroler «realize» Model «interface» Obserwator + uaktualnij() : void Widok «realize» Widok Wiele odmian 15

Model. (obiekty dziedziny) Widok. Potrafi poinformować o swoim stanie. Potrafi uaktualnić swój stan. MVC Moduły Tu już operujemy na obiektach a nie na RecordSet'ie Zarządza zachowaniem się danych w dziedzinie dla której została stworzona aplikacja. Zajmuje się tylko wyświetlaniem informacji. Ma wiedzę co trzeba wyświetlić i jak w danym momencie. Kontroler. Interpretuje zainicjowane akcje oraz wprowadzone przez użytkownika dane. Ma wiedzę potrzebną aby kontrolować sekwencje widoków. Uwaga! W aplikacji jest wiele par widok, kontroler. 16

Model Widok - Kontroler Koncepcja klasyczna model jest elementem niezależnym występuje dwustronna zależność między kontrolerem a widokiem Koncepcja: Martin Fowler model nadal niezależny programista zazwyczaj nie używa bezpośrednio zależności między kontrolerem a widokiem, komunikację automatyzują różne narzędzia i wzorce, które informują widok o zmianach modelu cd Struktura Modelu MVC Kontroler Model Widok 17

MVC kontra Architektura Warstwowa Porównanie architektury warstwowej z MVC mylona przez wielu autorów z MVC, nowa w stosunku do MVC: koncepcja trzech warstw pochodzi z lat 90: html prezentacja application server database bardziej można ją porównać z wzorcem model aplikacji lub z wzorcem model prezentacji 18

Model wywodzi się ze Smalltalka. Tradycyjny model MVC Zakładamy, że mamy kontrolki dedykowane do naszej aplikacji. Bardzo podobne do Data Binding, ale bez zdarzeń (events), oraz tym razem widok obserwuje model, a nie formularz obserwuje kontrolki. (czyli też wzorzec Obserwator) 19

MVC ze specyficznymi kontrolkami W specjalistycznych kontrolkach umieszczamy dodatkową funkcjonalność: Sposób prezentacji graficznej (kolor) przedstawiamy w postaci logicznej (kategoria) Dla tablicy kategorii przyporządkowujemy np. tablicę kolorów fontu, w ten sposób model musi udostępniać dodatkową informację o nowym wskaźniku 20

Poziom implementacji MVC MVC może być zrealizowane na różnych poziomach: Na poziomie kontrolek (każda kontrolka ma własny kontroler) Na poziomie okien (każde okno ma własny kontroler - Page Controler) Na poziomie całej aplikacji (kontroler i elementy widoku są odseparowane np. w postaci osobnych komponentów) Często wykorzystywane w aplikacjach internetowych z uwagi na odseparowanie jsp i html w postaci jakichś szablonów stron itp. 21

Pośredni model prezentacji (intermediate presentation model) Tworzymy model dla widoku, czyli pewien obiekt tłumaczący wartości z dziedziny aplikacji na dziedzinę interfejsu użytkownika. Model prezentacji przechowuje i udostępnia konkretne informacje związane bezpośrednio z interfejsem użytkownika: czyli np. kolor. Centralizacja logiki. 22

Powiadomienie (Notification) Obiekt zbierający informacje o błędach lub innych wiadomościach związanych z dziedziną aplikacji, który następnie jest przekazywany do warstwy (modułu) prezentacji. Moduł prezentacji następnie może wyświetlić odpowiednie komunikaty zawarte w obiekcie Notification. W najprostszej postaci Notification jest zbiorem napisów. Kiedy używać? Np. w przypadku gdy walidacja wykonywana jest warstwie, która nie ma dostępu do prezentacji. 23

Kontroler nadzorujący (supervising controller) Wzorzec wykorzystuje kontroler do obsługi komunikatów pochodzących od użytkownika (koncepcja klasyczna), oraz do obsługi złożonej logiki prezentacji (w naszym przypadku do określenia koloru). Niezmiernie ważny w testach automatycznych. 1 2 24

Widok pasywny (passive view) Cała funkcjonalność: reakcja na komunikaty użytkownika i zarządzanie prezentacją włącznie z logiką aplikacji specyficzną dla dziedziny jest realizowana przez kontroler. Najczęściej stosowany w aplikacjach typu rich client ze względu na możliwość stworzenia automatycznych testów. 1 3 2 25

Model prezentacji (presentation model) 1 Umożliwia reprezentację stanu i zachowania prezentacji niezależnie od kontrolek GUI używanych na ekranie. Oznacza, to że stan ekranu nie znajduje się w kontrolkach lecz w modelu. Model prezentacji może odwoływać się do wielu obiektów dziedziny aplikacji. Nie jest zatem fasadą obiektów dziedziny Model prezentacji można uznać za pewną 'abstrakcję' niezależną od platformy GUI (GUI framework) 2 26

Synchronizacja przepływu (flow synchronization) Używany w sytuacjach gdy w kilku widokach pokazujemy dane pochodzące z tego samego źródła. Jeżeli na jednym ekranie użytkownik zmieni wartość jakiegoś pola wówczas formularz uaktualnia kopię sesji (czyli np. Recordset), a następnie samodzielnie wymusza na pozostałych oknach, które pokazują tą samą informację aby się odświeżyły. Rozwiązanie stosuje się dla małych aplikacji. Typowym przykładem jest program z głównym oknem, oraz szeregiem okien modalnych dostępnych z głównego. Problem z wzorcem tym polega na tym, że wprowadzamy zbyt duże zależności pomiędzy widokami. 27

Synchronizacja obserwująca (observer synchronization) Synchronizacja wielu okien. Każde okno obserwuje pewien współdzielony zbiór danych z obszaru dziedziny. Jeden z głównych wzorców składowych MVC. Źródło: http://www.martinfowler.com/eaadev/mediatedsynchronization.html 28

Synchronizacja obserwatora (kod w C#) Dziedzina aplikacji Prezentacja 1) class DomainObject { 2) public void SignalChanged() 3) { 4) if (Changed!= null) Changed(this, null); 5) } 6) public event DomainChangeHandler Changed; 7) 8) public delegate void DomainChangeHandler( DomainObject source, EventArgs e); 9) } 10) 11) class Album : DomainObject { 12) //... 13) public string Title 14) { 15) get { return _title; } 16) set 17) { 18) _title = value; 19) SignalChanged(); 20) } 1 21) } 22) string _title; 23) } 2 1) class FrmAlbum { 2) //... 3) public FrmAlbum(Album album) 4) { 5) InitializeComponent(); 6) this._album = album; 7) observedomain(); 8) load(); 3 9) } 10) private Album _album; 11) private void observedomain() 12) { 13) _album.changed += 14) new DomainChangeHandler(Subject_Changed); 15) foreach (Performer p in _album.performers) 16) p.changed += 17) new DomainChangeHandler(Subject_Changed); 18) } 19) private void Subject_Changed( 20) DomainObject source, EventArgs e) 21) { 22) load(); 23) } 24) } 6 4 5 29

Selektor prezentacji (presentation chooser) Wybiera ekran (formularz) odpowiedni dla konkretnego obiektu z dziedziny aplikacji. Stosowany w sytuacji, gdy w danym momencie musimy wyświetlić różne formularze dla różnych aktualnie wybranych obiektów. Edycja jest różna dla pozycji muzyki klasycznej a inna dla muzyki popularnej. 30

Selektor prezentacji (presentation chooser) Tworzymy osobną klasę, która na podstawie obiektu dziedziny decyduje w którym oknie trzeba go wyświetlić. Rozwiązanie związane z wzorcem Fabryka. class Presentation Chooser class Presentation Chooser Dziedzina ObjDziedzina_1 ObjDziedzina ObjDziedzina_2 ObjDziedzina_3 Formularz 1 - object: ObjDziedzina_ 1 PresentationChooser Formularz 2 - object: ObjDziedzina_ 2 Formularz 3 - object: ObjDziedzina_ 3 FormularzGłówny pyta się w jakim oknie wyświetlić dany obiekt. Formularz FormularzGlowny - listobjects: list<objdziedzina> 31

Interakcja Dziękuję za uwagę. Chcemy być coraz lepsi! Jeżeli coś cię zainteresowało napisz e-maila: robert@iem.pw.edu.pl Jeżeli coś cię bardzo znudziło napisz e-maila: robert@iem.pw.edu.pl Jeżeli zauważyłeś błąd napisz e-maila: robert@iem.pw.edu.pl 32