X-Git-Url: http://rtime.felk.cvut.cz/gitweb/edu/osp-wiki.git/blobdiff_plain/e11738f54597008882c6ab46c298a2fc3e41fd45..HEAD:/prednasky/gui/index.mdwn diff --git a/prednasky/gui/index.mdwn b/prednasky/gui/index.mdwn index fe4be4cb..aeb1e2eb 100644 --- a/prednasky/gui/index.mdwn +++ b/prednasky/gui/index.mdwn @@ -1,25 +1,132 @@ [[!meta title="Grafická uživatelská prostředí a knihovny"]] [[!toc levels=2]] +# Tvorba grafických aplikací -#Grafická uživatelská prostředí a knihovny +## Žijeme v přelomovém období -## X Window System +- vznikl obrovský trh z mobilními aplikacemi +- s mobilními aplikacemi přichází touch-screen, což má obrovský impakt na UI +- Windows Metro, Ubuntu Unity - snaha sjednotit UI mobilních a desktopových aplikací, za cenu kompromisů (např. absence hover akcí na touch screenu), zkuste se odhlásit ve Windows 10 +- dlouho jsme měli klávesnici, myš a nepsanou dohodu o tom, jak má vypadat widget-set + +## Potřebujeme vůbec GUI? + +### Výhody/nevýhody GUI aplikací + +- Uživatel může být hloupější a nemusí se tolik učit, existuje jisté latentní Know-How, aplikace se ovládají obdobně pomocí stejných typů widgetů. +- Stačí pasivní znalost UI. +- Větší vyjadřovací schopnost, obrázek má nespornou vyjadřovací schopnost. +- Lze maximálně využít display. +- Počítačová grafika +- Většinu aplikace tvoří GUI +- Lze je používat v režimu sváteční uživatel + +### Výhody/nevýhody CLI aplikací + +- Učící křivka je jednotkový skok +- Lze jednoduše skriptovat a automatizovat práci +- Většinu aplikace tvoří business logika +- Je třeba je používat pravidelně, jinak uživatel zapomene, jak se to vlastně psalo + +### CLI aplikace s GUI kabátkem + +- Na desktopu ideální stav +- Asi nejvíc práce + +## Tvorba aplikaci + +### Požadavky na aplikaci + +- **MULTIPLATFORMNOST** (MacOSX, Windows, Linux) (Android, iOS, Windows Mobile, Ubuntu Mobile, Sailfish OS - Jolla, ...) +- **Write once, deploy everywhere** - jako developer jistě chcete svou aplikaci napsat jednou a pak ji prodávat na všech platformách +- UI adaptability +- widgetset +- layout manager +- atd. ... + +### Některé platformy + +- desktop + - Linux + - OSX + - Windows +- web + - HTML5 + frameworky (Django, Ruby on rails, NodeJS, ...) +- mobile + - Android - Java + - Apple iOS - Object C + - Windows Mobile + - Ubuntu Phone - HTML5, Qt/QML + - Sailfish OS - HTML5, Qt/QML + +**Je pozoruhodné, kolik z těchto platforem je podporováno knihovnou Qt.** + +### Vývojové nástroje + +- IDE +- Build System (CMake, QMake, Ant, ...) +- Source Code Management (Git, Mercurial, Bazaar, Darts, SVN, CVS, ...) +- Issue Tracking System (Jira, BugZilla, GitLab, GitHub, Redmine, Track, ...) +- Code Review (GitHub, GitLab, Gerrit, ...) +- Continuous Integration CI (Jenkins, Travis, GitHub, ...) +- Testing Framework +- Documentation Wiki (Confluence, IkiWiki, GitLab, GitHub, DokuWiki, <1000 skipped>, MediaWiki) +- Process Planning, Agile, Scrum, Kanban, Waterfall, (Jira, Redmine) + + +[[!table class="borders" data=""" +Firma | Počet zaměstnanců | SCM | CI | Wiki | Issue tracking | Planning +Firma1 | 1 | Git | | DokuWiki | todo.txt | včera vám to uděláme +Firma2 | 10 000 | Git, SVN | Jenkins | Confulence | Jira | Scrum s lidskou tváří +Firma3 | 200 000 | Git | Jenkins | Confulence | Jira | Scrum s ďábelskou tváří +Firma4 | 200 | Git | Jenkins, Travis | GitLab | GitLab | káva po obědě +"""]] + +### Krátká odbočka do korporátního světa + +* Každý developer, který chce pracovat v IT firmě, musí umět GIT. +* Každý developer, který chce dělat něco užitečného v IT firmě, musí vědět, co je: + * Process + * Thread + synchronization + * Mutex + * Socket + * Virtuální paměť + * Znalost nějakého programovacího jazyka je velkou výhodou + * Kvalitní developer nemusí umět mnoho programovacích jazyků, stačí 5-6, ale pořádně + + +---------- + + +#Grafický subsystém např. v Unixu + +vždy je dobré znát protivníka + +## X Window System - Grafické prostředí pro operační systém UNIX - Začal vyvíjet institut MIT (Massachusetts Institute of Technology) v r. 1984. - Označení X11 (verze 11) od r. 1987 -- Další verze jsou označovány jako revize. +- Další verze jsou označovány jako revize. - Současná podoba systému oken X se principiálně nemění a nová vydání jsou rozšiřující především z pohledu způsobů implementace grafických režimů. - Klient-server architektura, klient (GUI aplikace) nemusí nutně běžet na stejném stroji, jako server. - Server se stará o klávesnici, myš a zobrazení grafického výstupu aplikací. -- Klient komunikuje se serverem pomocí socketu. Používá [X-protokol](#x-protocol). +- Klient komunikuje se serverem pomocí socketu. Používá [X-protokol](#x-protocol). - XFree86 v roce 1992 z X386, což byla implementace X serveru pro 386 architekturu. - X11R6.4 restriktivnější licence ve verzi 4.4 v únoru 2004. - Referenční implementací je X server vyvíjený X.Org Foundation. ![X architektura][1] +## Alternativy + +- Wayland display server - kompozice, zatím no network transparency +- Apple Quartz +- Android SurfaceFlinger +- MS Windows +- atd. + ## Správce oken (window manager) Samotný X Server má na starost pouze zobrazení na obrazovku, obsluhu hardware (grafická karta, myš, klávesnice, touchpad) a sám o sobě je těžko použitelný. Proto se používá spolu se správcem oken (anglicky window manager), který se stará o ovládání uživatelem (přesun a změna velikosti okna) a podobně (horní lišta oken, ohraničení oken, změna velikosti, překrývání atp.). Z hlediska X Serveru je ovšem správce oken jen další klient, a proto je snadno zaměnitelný. Pro Linux existuje několik desítek správců oken, přičemž mezi nejznámějším patří IceWM, FVWM, Sawfish, Window Maker, Kwm, Metacity nebo Fluxbox. @@ -28,34 +135,47 @@ Samotný X Server má na starost pouze zobrazení na obrazovku, obsluhu hardware ## X protokol ### -- Specifikuje způsob komunikace mezi X-Serverem a X-Klienty. +- Specifikuje způsob komunikace mezi X-Serverem a X-Klienty. - Nejslavnější implementací je Xlib. ![Xlib][3] Používat přímo xlib by bylo poněkud těžkopádné ([[příklad| xlib-example]]), proto vzniklo mnoho knihoven, které se snaží tvorbu GUI aplikací zjednodušit. Např. GTK+, Qt, FLTK, wxWindows, HTML + DOM + JavaScript, atd. ----------- +#Knihovny pro desktopové aplikace ## Gnome - GNU Network Object Model Environment - Window manager - Vývojová platforma - GTK+ -- V r. 1997 Miguel de Icaza and Federico Mena právě kvůli problémům s Qt licencí v KDE. +- Bylo potřeba něco jako Win95 pro Linux. +- V r. 1997 Miguel de Icaza and Federico Mena mimo jiné i kvůli problémům s Qt licencí v KDE. +- [[the story of the Gnome|the-gnome-story]] ---------- ## KDE -- 1996 Matthias Ettrich, student Eberhard Karls University v Tübingen. +- 1996 Matthias Ettrich, student Eberhard Karls University v Tübingen (1998 zaměstnanec TrollTech). +- I jemu scházelo něco jako Win95 pro Linux. - Qt - Trošku jiná filosofie než Gnome, ale v podstatě to samé. ---------- +## FLTK +- Vhodná pro aplikace s nízkými HW nároky a statické linkování + +---------- + +## wxWindows / wxWidgets +[wxWidgets](http://www.wxwindows.org/) + +---------- + ## GTK+ (GIMP Toolkit) -- Vytvořen v roce 1997 členy skupiny eXperimental Computing Facility (XCF) Kalifornské university v Berkeley (Spencer Kimball, Peter Mattis a Josh MacDonald) pro vývoj programu GIMP (GNU Image Manipulation Program). +- Vytvořen v roce 1997 členy skupiny eXperimental Computing Facility (XCF) Kalifornské university v Berkeley (Peter Mattis, Spencer Kimball, Josh MacDonald) pro vývoj programu GIMP (GNU Image Manipulation Program) jako náhrada knihovny Motif. - Napsán objektově v jazyce C, což sebou nese řadu výhod i nevýhod. - LGPL licence. - Současná verze již multiplatformní. @@ -68,40 +188,122 @@ Používat přímo xlib by bylo poněkud těžkopádné ([[příklad| xlib-examp ## QT -- Haavard Nord a Eirik Chambe-Eng začali vývoj v roce 1991, později založili firmu Trolltech. +- Haavard Nord a Eirik Chambe-Eng (Norwegian Institute of Technology in Trondheim) začali vývoj v roce 1991, později založili firmu Trolltech [[the story of Qt|the-qt-story]]. - V r. 2009 ji koupila Nokia. -- V C++ => obtížnější wrapping. +- V C++ => obtížnější wrapping, ABI problemy. - Od samého počátku multiplatformní (dokonce vlastni make systém). - Signal/Slot koncept (implementace observer pattern). - Komerční a LGPL licence (od r. 2009), dříve GPL, ještě dříve podivná QPL (1998) kvuli KDE. - Snaží se doplnit C++ a libc/c++ o chybějící vlastnosti vyplývající zejména z chabého RTTI v C++ -1. signals and slots -1. object properties -1. QPointer - guarded pointers that are automatically set to 0 when the referenced object is destroyed, unlike normal C++ pointers which become dangling pointers when their objects are destroyed -1. qobject_cast - a dynamic cast that works across library boundaries -1. contextual string translation for internationalization -1. sophisticated interval driven timers that make it possible to elegantly integrate many tasks in an event-driven GUI -1. hierarchical and queryable object trees that organize object ownership in a natural way +- signals and slots, across threads !!! +- object properties +- QSharedPointer, QWeakPointer, QScopedPointer - guarded pointers that are automatically set to 0 when the referenced object is destroyed, unlike normal C++ pointers which become dangling pointers when their objects are destroyed +- qobject_cast - a dynamic cast that works across library boundaries +- contextual string translation for internationalization +- sophisticated interval driven timers that make it possible to elegantly integrate many tasks in an event-driven GUI +- hierarchical and queryable object trees that organize object ownership in a natural way - Implementují velké množství objektů, které se využívají při tvorbě aplikací jako kontajnery, grafické formáty, sockety, SQL konektivita, SSL, JavaScript interpreter, QML apod. **multiplatformním způsobem**. - Model/View architektura. - Implicitně sdílené objekty. - Cenou, kterou za to platíme je MOC (Meta Object Compiler) +- Qt 5.6 LTS (2016) +- Qt 5.7 (2016) nelze přeložit bez c++11 +- c++11 mala revoluce, move semantics, perfect forwarding, lambda functions, auto keyword, multi threading => část Qt kódu je součástí c++. Např. stl containers + movable objects jsou mnohem efektivnější než Qt containers (QList) + [[Qt hello world]] -## Signal/Slot koncept +# Úspěšné postupy při tvorbě GUI aplikací + +Ať už se rozhodnete pro jakoukoliv platformu, narazíte nakonec na stejné problémy, budete implementovat: + +* Prezentační vrstvu + * UI design (deklarativní) + * XML + * QML + * kód + * navázání ovládacích prvků na jejich handlery (procedurální) + * SIGNAL/SLOT + * update zobrazovacích prvků se změnami prezentovaných dat + * SIGNAL/SLOT + * MVC + * komunikace s aplikační vrstvou + * SIGNAL/SLOT + * RPC + * v tu ránu potřebujete serializaci-deserializaci a většinou i VARIANT +* Aplikační vrstvu + * Business logika + * tady je konečně to programování + * Persistence dat + * velmi často SQL + +## UI design + +- způsob (deklarativní) jakým definujeme UI +- poloha a atributy ovládacích prvků v oknech aplikace +- poměrně výrazně ovlivňuje produktivitu vývojáře +- kód, XML, QML, custom + +### Použití layout manageru + +- Zaručuje optimální umístění a velikost widgetů při změně velikosti okna. +- Je přirozenější říct tlačítka jsou nalevo pod sebou, než specifikovat jejich souřadnice + + +## Komunikace objektů -- Obecně řeší observer pattern. +- objekty spolu musí komunikovat + - callback - dangling pointers + - inner classes Java + - SIGNAL/SLOT + +### Signal/Slot koncept + +- Observer pattern, výrazně redukuje boilerplate kód. - Many to many relationship. - Velice se hodí na řešení volání callback funkcí widgetů. -- Kromě toho řeší mnoho dalších problémů, zejména neexistující reference. +- dokáží multiplatformě obalit problém synchronizace window system eventů a eventů od file desriptorů (implementace není vždy ideální) +- Kromě toho řeší mnoho dalších problémů, zejména neexistující reference (dangling pointers). ![signal-slot][4] +### QVariant + +QVariant může být každý objekt, který má + +* public implicit constructor +* public copy constructor +* public destructor + + +## Model-View-Controller(Delegate) architektura + +- Odděluje data od jejich prezentace. +- Data jsou v aplikaci jen jednou, řeší data redundancy hell +- Jedny data mohpu být zobrazeny více způsoby či perspektivami. +- Jeden pohled lze použít pro zobrazní různých dat, pro různé modely +- Modely generující data, data vubec nemusí existovat, počítají se na požádání. +- Delegát/Controller slouží pro zobrazení/editaci dat + +![model-view-overview][5] + +![model-view][6] + +## Qt Declarative QML + +* use QML for UI design +* use JavaScript for UI event handling +* use C++ for business logic implementation +* looks great, but ... type erasure is developer's grave + [1]: X_client_sever_example.svg [2]: http://cs.wikipedia.org/wiki/X_display_manager [3]: xlib.png [4]: abstract-connections.png + [5]: modelview-overview.png + [6]: modelview-example.svg + +