Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4 Wytłumaczyc temat: Ja: W bibliotekach.

Prezentacja na temat: "Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4 Wytłumaczyc temat: Ja: W bibliotekach."— Zapis prezentacji:

1 Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4 Wytłumaczyc temat: Ja: W bibliotekach służących do budowania aplikacji wykorzystujących interfejs uzytkownika , głównymi składowymi są widgety. Świetnie nadaja się do prezentacji danych. Ładnie wyglądają i są interaktywne (obsługują zdarzenia) tak więc idealnie nadają się struktury uporządkowanej i odpowiadającej właśnie za prezentacje jakimi są widoki. Filip: Celem tej pracy jest więc właśnie udostępnienie metodyki umieszczania obiektów udostępniających analogiczna funkcjonalność w widokach. Sprawienie by widoki obok samej prezentacji danych stały się bardziej interaktywne. Piotr Małek – promotor mgr inż. Waldemar Grabski Filip Piechocki – promotor mgr inż. Michał Nowacki

2 Przesłanki do powstania pracy
Wzrost znaczenia warstwy prezentacyjnej w współczesnych aplikacjach Powszechność użycia widoków Wygoda i uniwersalność architektury Model/Widok Tutaj do powiedzenia jest ze 1: Wzrost znaczenia objawia się tym ze jest wzrost mozliwosci sprzetowych 2: Widoki sa wszedzie, tu przyklady gg, firefox, explorator windows 3: Powiedziec ze o tym na nastepnym slajdzie będzie opisana pokrótce architekrura Model/Widok i dlatego się za to zabralismy bo cale Qt się nam podoba i Model widok tez jest spoko wiec fajnie by go o taka mega potrzebna funkcjonalnosc rozbudowac Filip: Skad pojawił się pomysł? Temat ten przewijał się na forach poświęconych Qt, takich jak np. qtcentre. Piotrek: Przemyśleliśmy temat i wyszło nam że takie rozwiązanie faktycznie jest potrzebne, bo popierwsze może kiedys kiedy procesory były slabe i kart graficznych to wogole nie było to ludzie się zadawalali byle czym. Teraz programisci rozpieszczaja nas interfejsem uzytkownika który staje się waznym kryterium konkurencyjnosci produktu finalnego. Dlatego też rozbudowa dostępnych metod prezentacji jest jak najbardziej wskazana. Trzeba ponadto zauwazyc ze widoki sa na dzien dzisiejszy uzywane praktycznie wszedzie. Czy to jest lista kontaktow gg, okno pobierania plikow w firefoxie czy chociazby wszechobecny eksploratow windows, wszedzie uzyte sa widoki lub twory bardzo je przypominajace. W bibliotece Qt ktorej dotyczy ta praca nie ma wygodnego uniwersalnego mechanizmu do umieszczania widgetow w widokach. Można umiescic w nich widget ale nie będzie on w żaden sposób powiazany z danymi modelu, a pozatym nie będzie dzialal bardzo szybko wiec nie będzie spelnial zalozen architektury model widok. A to wlasnie architektura model widok bardzo nam przypadla do gustu przy okazji poznawania Qt. [nastepny slajd]. Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

3 Architektura Model/Widok
Model – interfejs dla danych Widok – obiekt ekranowy do prezentacji danych uzyskanych z modelu Delegat – wykorzystywany przez widok do wyświetlania i edycji pojedynczego elementu Piotrek: spodobala nam się jej uniwersalność i podział funkcjonalności. Na architekture model widok składają się 3 elementy: Model – stanowiący interfejs dla danych. Nie musi zawierac ich w sobie, dane przez niego repreznetowana nie musza wogole istniec fizycznie a mogą być np. generowane bieżąco. Model porządkuje dane do których ma dostęp w wielopoziomowa hierarchie indeksów (reprezentowanych jako tablica tablic indeksów). Widok – Odpowiada za odrysowanie i uporządkowanie elementów dostarczonych mu przez mechanizm delegata (strzalka pomiedzy modelem a widokiem na diagramie oznacza tyle ze uzyty tam zostal domyslny delegat) Filip Delegat natomiast jest obiektem tworzącym grafiuczna reprezentacje pojedynczego indeksu. Odpowiada za zdarzenia edycji oraz za odrysowywanie elementow. Jako obiekt powiazany stricte z pojedynczym elementem swietnie się nadawal na kandydata do zrealizowania tu naszej funkcjonalności. Dlatgo się nadawal ze poneiwaz wiaże się z pojedynczym elementem tak jak widget tez reprezentuje pojedynczy element. Dlatego jest glownym obiektem zainteresowan tej pracy i go wlasnie modyfikujemy. Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

4 Wymagania projektowe Zgodność z koncepcją architektury Model/Widok
Uniwersalność (rozwiązanie musi działać dla dowolnych typów widżetów) Wydajność umożliwiająca wygodne działanie z ilością obiektów ekranowych rzędu kilkuset. Piotrek: Chodzi nam przedewszystkim o logiczne oddzielenie warstwy danych od sposobu ich prezentacji. Dlatego w modelu nie powinno być danych widgetów bo one sa do wyswietlania a pozatym modelu nie modyfikujemy. Filip Chodzi o to żeby nasze rozwiazanie dzialalo dla wszystkich klas pochodnych od Qwidget, również tych widżetów od podstaw swtorzonych przez uzytkownika przez użytkownika i nie przypomianjacych zadnych standardowych widżetów. W takim modelu może być trzymana duza ilosc danych, wiec może zdazyc się ze proba prezentacji w widoku za pomoca widzetow będzie wymagala utworzenia i odrysowania bardzo wielu elementow, dlatego przyjelismy ze rzad kilkuset spelnia nasze wymaganie (koncowka zdania mogla by być troche lepsza niż „spelnia nasze wymagania”) Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

5 Próby rozwiązania Ręczna kontrola położenia widżetów w widoku
Odrysowywanie widżetów Pseudo-widżety System meta-obiektów Rozwiązanie finalne Filip: Na poczatku nie mielismy nic poza tematem pracy, wiec pierwszym naszym zadaniem było znalezienie wlasciwego sposobu rozwiazania problemu. Poświęciliśmy na to sporo czasu starając się odnaleźć takie rozwiązanie, które spełniałoby nasze wymagania. Każdy z pomysłów ma swoje wady i zalety. Kazda z tych prob zostanie pokrotce omowiona na kolejnych slajdach. Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

6 Ręczna kontrola położenia widżetów
Pomysł Widżety ustawiane „na” widoku Realizacja W miejscu przeznaczonym przez widok dla reprezentacji danego elementu ustawiamy widżet Reagujemy na zdarzenia przewijania widoku i w zależności od tego przemieszczamy widżety na właściwe miejsce Wady i zalety + Bardzo proste w implementacji + Gotowa, natywna dla widżetów, obsługa zdarzeń + Rozwiązanie uniwersalne - Widżety nie są związane z widokiem - Słaba wydajność Piotrek: Idea jest taka ze mamy widok, a w nim delegat który ma widget i pilnuje by ten widget był wyswietlany w odpowiednim miejscu. Generalnie podejscie mialo charakter rozgrzewkowy i jako takie srednio się nadaje bo mimo tego ze jest uniwersalne i ma wbudowana obsluge zdarzen to dziala wolno, plus wysokosc widoku musi być wielokrotnoscia wysokosci widgetu, inaczej widget „wystaje”. Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

7 Odrysowywanie widżetów
Pomysł Widżet nie wysyłający zdarzeń mniej obciąża aplikację Odrysowywanie widżetu, zamiast jego pozycjonowania Realizacja Ustawienie setVisible(false) Użycie metody render() widżetu Wady i zalety + Widżet jest integralną częścią widoku + Rozwiązanie uniwersalne - Brak obsługi zdarzeń Filip Koncepcyjnie i jeżeli chodzi o komplikacje podejscie podobne do poprzedniego. Zasadza się na odrysowywaniu obrazka widgetu w odpowiednim miejscu, poczas gdy sa widget jest niewidoczny (czyli nie emituje zdarzen i nie odbiera plus go nie widac). Problem z tym rozwiazaniem jest taki ze skoro nie obsluguje zdarzen (bo do niego nie dochodza) to nie do konca zachowuje się jak widget i trzeba by jakies a przynajmniej niektóre zdarzenia mu recznie przekazywac. Tutaj jakis przykład o przycisku. Dodac ze przypisanie w delegacie widgetu do kliknietego przycisky w jakims tam elemencie widoku nie jest takie do konca uber proste. Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

8 Pseudo-widżety Pomysł Realizacja Wady i zalety
Stworzyć dedykowane pseudo-widżety specjalnie na potrzeby projektu Realizacja Wykorzystanie klasy QStyle Wady i zalety + Wysoka wydajność - Brak obsługi zdarzeń - Trudne w implementacji - Obsługa tylko standardowych kontrolek Filip: Idea tego rozwiazania polega na tym ze skoro widgety sa takie wolne to może zrobic swoje wlasne pseudo – widgety – szybkie i fajne, okrojone o obsluge jakis tam niepotrzebnych zdarzen, (np. animacje). Uzasadnic to tym ze jak tamte tak wolno dzialaly to można z tych animacji od biedy zrezygnowac. Tutaj powiedziec ze jest klasa QStyle która ma moc rysowania standardowych kontrolek (wspomniec o jakis tam stylach ala mac, linux, xp). Tutaj wogole się pojawia glowny minus bo nie ma takiej opcji żeby zrobic do tego obsluge standardowych widgetow uzytkownika. Tutaj jest tez do wspomnienia ze animacje nie będą obslugiwane tu miedzy innymi dlatego ze stany np. paska postepu nie uwzgledniaja jego animacji. Tutaj porozwodzic sie jak by był czas to bysmy zrobili jakis plugin do designera żeby generowal QStyle z plikow .ui, ewentualnie jakis modul ladujący. Jednak ilość pracy jaką trzeba by włożyć w zaimplementowanie takiego rozwiazania i minus w postaci braku animacji oraz niestandardowych widgetow sprawil ze uznalismy ze nie ma sensu dalej zajmowac się tym zagadnieniem. Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

9 System meta-obiektów Pomysł Realizacja Wady i zalety
Ograniczenie liczby widżetów do minimum Realizacja Wykorzystanie render() Tylko jeden prawdziwy widżet-wzorzec Odrysowanie widżetu, po uprzednim zainicjowaniu go wartościami przechowywanymi w modelu pośredniczącym Wady i zalety + Rozwiązanie uniwersalne - Bardzo wolne Piotrek: Efekt myslenia ze jak tamto dzialalo wolno, bo duzo widgetow, to może niech widget będzie jeden i on będzie malowany jak w rozwiazaniu drugim. Tutaj wkracza system metaobiektow. Da się za jego pomocą zapamietac stan wszystkich właściwości (properties) i (teoretycznie) ustawic go w tym widzecie. W ten sposób chcielism mieć jeden widzet tylko modyfikowany odpowiednio do zapamietanych propertiesow przed odrysowaniem na ekranie w widoku. Zapamietywanie trwalo baaaardzo dlugo, bo nie wiedzielismy jakies dokladnie propertiesy bo nie wiem czy to tam użytkownik uzyl przycisku czy paska postepu na przykład wiec zapamietywalismy wszystko. Niektóre te właściwości sa tez tylko do odczytu co nie potrzebnie wydluza proces zapamietywania skoro i tak nie da się potem ich ustawic. Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

10 Rozwiązanie finalne Ponownie odrysowywanie widżetów
Qt::WA_DontShowOnScreen Model pośredniczący Zalety – dowolne widżety, animacje Wady – prawdziwe widżety, problemy z obsługą zdarzeń (P i F) Filip: Powrot w pewnym sensie do rozwiazania drugiego, ale to z pomoca przychodzi Qt::DontShowOnScreen, które to pojawilo sie w Qt 4.4. Powoduje to ze widzet ma setVisible(true) i zachowuje się jakby był widoczny (system operacyjny go odswieza np. migajace paski postepu), ale nie widac go na ekranie. Piotrek: Kilka slow o modelu posrednioczacym po co on tu. Dzieki temu przechwytuejmy wszystkie zdarzenia odrysowania takiego widzetu i rysujemy go w widoku za pomoca delegata. Niestety brak obslugi zdarzeń wiec sami musimy przekazywac odpowiednie zdarzenia do odpowiednich widzetow. Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

11 Projekt Diagram klas Zaprojektowalismy 4 klasy: 2 implementujace mechanizm i 2 definiujace interfejs komunikacji naszego mechanizmu z widzetem i modelem dostarczonymi przez uzytkownika naszego rozwiazania. Ze strony użytkownika do prawidłowego działania aplikacji wymagamy przeciążenia jedynie dwóch najmniejszych i najprostszych klas bo taki był pomysl żeby ten framework był wygodny w uzyciu i wogole fajowy. Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

12 Klasy część 1 WoivAbstractWidgetWrapper WoivAbstractWidgetFactory
Klasa opakowująca normalną kontrolkę Do zaimplementowania przez użytkownika Realizuje dwustronne połączenie danych modelu z odpowiadającymi im danymi odpowiednich kontrolek WoivAbstractWidgetFactory Fabryka widżetów, służących do reprezentacji danych modelu Zwraca obiekt pochodny do WoivAbstractWidgetWrapper Do samodzielnego zaimplementowania przez użytkownika WoivAbstracWidgetWrapper (fpiechocki) Zaistniała potrzeba stworzenia mechanizmu, który będzie wiązał dane modelu z wartosciami prezentowanymi przez kontrolki. Nie jesteśmy w stanie przewidzieć jakie wartości gdzie będą reprezentowane więc zrzucamy to na użytkownika bo nie ma takiej opcji żeby dalo się napisac jakies sensowne rozwiazanie uniwersalne zwazywszy na fakt ze chcemy tez obslugiwac widgety stworzone przez uzytkownika, czyli z totalnie nie przewidywalnym zachowaniem WoivAbstractWidgetFactory (pmalek) W finalnym rozwiązaniu wyszło że najlepszym rozwiazaniem jest przetwzymywaniem osobnego widgetu dla każdego z elementow danego widoku zaszła więc potrzeba stworzenie narzędzia które będzie wypełniało model pośredniczący nowymi widgetami. Stąd powstała koncepcja stworzenia wymagania by użytkownik dostarczył jakiś mechanizm umiejący generować klasy pochodne do WoivAbstractWidgetWrapper omowionego przez filipa. Idealny do tego celu jest wzorzec fabryki i tak tez zostało to zaimplementowane. Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

13 Klasy część 2 WoivAbstractProxyModel
Klasa przechowująca dane do prezentacji indeksów modelu Powiązana bardziej z widokiem niż z modelem Odwzorowuje strukturę modelu i przechowuje w niej widżety służące do prezentacji P: Klasa niewidoczna dla uzytkownika ale realizująca jedną z głównych funkcjonalności w bibliotece. Jest to klasa pochodna do modelu posredniczacego. Jego funkcjonalnośc sprowadza się do utrzymywaniu struktury analogicznej do tej trzymanej w modelu bazowym. Uzyta jest tu struktura mapping gdzie dla celow wydajnosciowych zaimplementowana jest masa hashmap, widget oraz pixmapa go reprezentujaca. Pixmapa jest odrysowywana gdy trzeba odrysowac widget, a zmieniana tylko w zmienionym fragmencie bo w paintEvencie leci tez region i wiadomo co tam trzeba pocisnac. Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

14 Klasy część 3 WoivController
Przekazywanie zdarzeń z widoku do odpowiedniego widżetu Odrysowywanie widżetów w widoku F: Główna klasa biblioteki. Łączy ze soba wszyskie klasy plus zajmuje się obsługą zdarzeń. Klasa ta dziedziczy z klasy QAbstractItemDelegate wiec jednoczsnie jest delegatem, czykli odrwsowuje wszystkie widzety. Wazne jeswt to ze normalnie to ustawia się delegata w widoku czyli to widok ma wskaznik na delegata ale my potrzebujemy komunikacji w obie strony (do obslugi zdarzen) i dlatego nazwalismy to Controller i u nas podaje się kontrolerowi wszystko co potrzebne czyli widok, model i widzet (w naszym opakowaniu). Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

15 Projekt Architektura P: Tu mysle ze trzeba ladnie opowiedziec jak to dziala: no ze to tu a to tam itp. :] opowiedziec o tym ze jak ruszamy sliderem to się rusza progresbar i do się dzieje tak ze jest setProperty() na wrapperze a potem jest sygnał widgetStateChanged() który lapiemy i ustawiamy wszystkie propertiesy z modelu do widoku i tak oto rusza się progres bar i slider w innych widokach. Plus dwa slowa o eventFilter() Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

16 Testowanie Napisanie prostej aplikacji wykorzystującej nasze rozwiązanie P: Aby przetestowac funkcjonalność utworzyliśmy bazowy model który podłączyliśmy do 3 różnych , standardowych widoków. W modelu przechowujemy jedna wartość liczbową określającą zapełnienie paska postępu (element odpowiedzialny za prezentacje) oraz suwaka (elementu odpowiedzialnego za prezentacje i edycje). Zmiana wartości suwaka powoduje zmianę wartości w modelu a ta z kolej propaguje się na pozostałe widoki i zmienia w odpowiednich elementach widoku wartość suwaka i pasku postępu. Aplikacja służyłą nam do debugowania błędów, przeklikania się przez funkcje oraz do uruchomiania jej w specjalnych programach do testowania, o czym mowa będzie na następnym slajdzie. Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

17 Testowanie Użycie narzędzi callgrind i KCacheGrind do znalezienia „wąskich gardeł” i sprawdzania zmian wydajności po wprowadzeniu poprawek Wykorzystanie QTestLib do testowania wydajności wprowadzanych poprawek, np.: ********* Start testing of ProxyModelTest ********* Config: Using QTest library 4.5.2, Qt 4.5.2 PASS : ProxyModelTest::initTestCase() RESULT : ProxyModelTest::indexTest():"One column 150": 0.027 msec per iteration (total: 28, iterations: 1024) RESULT : ProxyModelTest::indexTest():"Two columns 2x75": 0.029 msec per iteration (total: 30, iterations: 1024) RESULT : ProxyModelTest::indexTest():"One column 75+75": 0.042 msec per iteration (total: 22, iterations: 512) PASS : ProxyModelTest::indexTest() PASS : ProxyModelTest::cleanupTestCase() Totals: 3 passed, 0 failed, 0 skipped ********* Finished testing of ProxyModelTest ********* Filip: No wiec procz normalnego klikania i patrzenai jak dziala do testowania uzylismy 2 programow takich jak Grindajakiegos tam. Zrobilismy tak żeby przetestowac rozwiazanie obiektywnie a nie tylko subiektywanie oraz przetestowac aplikacje i aplikowane poprawki pod względem wydajnosciowym. Dobrym przykladem na pokazanie slusznosci takiego podejscia był przypadek metody createMapping która jest waskim gardle (czyli wyowolywana jest oporowo duzo razy). Jej optymalizacja (zamiana Qmap na Qhash) przyniosła znaczny i zauwazalnmy wzrost wydajnosci. Ponadto Za pomoca modulu Qtest biblioteki Qt stworzylismy zestaw testów mierzący czas wykonania metody index proxy modelu dzieki czemu po poprawce byliśmy w stanie dokladnie ocenic jej pozytywny lub negatywny wplyw na wydajnosc biblioteki. Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

18 Podsumowanie Udało się znaleźć rozwiązanie spełniające wszystkie wymagania Problem systemów Windows – limit uchwytów do okien na proces Dla niektórych zastosowań jednak lepsze może być inne podejście Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4

19 Dziękujemy za uwagę. Dziękujemy za uwagę! :/ Wykorzystanie mechanizmu delegata do emulacji struktury i zachowania widżetów w architekturze Model/Widok biblioteki Qt4