prednasky/gui/index.mdwn

   1 [[!meta title="Grafická uživatelská prostředí a knihovny"]]
   2
   3 [[!toc levels=2]]
   4 # Tvorba grafických aplikací
   5
   6 ## Žijeme v přelomovém období
   7
   8 - vznikl obrovský trh z mobilními aplikacemi
   9 - desktopové aplikace opouští programátorské výsluní a jsou nahrazovány mobilními
  10 - dlouho jsme měli klávesnici, myš a nepsanou dohodu o tom, jak má vypadat widget-set
  11 - s mobilními aplikacemi přichází touch-screen, což má obrovský impakt na UI
  12 - postupně se vžívá názor, že aplikace musí být průhledná, nepřehledná a zmatená, aby byla úspěšná na trhu, uživatelé na to přistupují
  13 - vysledkem je, že v grafických aplikacích jsme v podstatě zase na začátku
  14 - Je velký rozdíl mezi desktopovou aplikací a mobilní, přesto existují snahy je sjednotit (Windows Metro, Ubuntu Unity)
  15
  16 ## Potřebujeme vůbec GUI?
  17
  18 ### Výhody/nevýhody GUI aplikací
  19
  20 - 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ů.
  21 - Stačí pasivní znalost UI.
  22 - Větší vyjadřovací schopnost, obrázek má nespornou vyjadřovací schopnost.
  23 - Lze maximálně využít display.
  24 - Počítačová grafika
  25 - Většinu aplikace tvoří GUI
  26 - Lze je používat v režimu sváteční uživatel
  27
  28 ### Výhody/nevýhody CLI aplikací
  29
  30 - Učící křivka je jednotkový skok
  31 - Lze jednoduše skriptovat a automatizovat práci
  32 - Většinu aplikace tvoří business logika
  33 - Je třeba je používat pravidelně, jinak uživatel zapomene, jak se to vlastně psalo
  34
  35 ### CLI aplikace s GUI kabátkem
  36
  37 - Na desktopu ideální stav
  38 - Asi nejvíc práce
  39
  40 ## Tvorba aplikaci
  41
  42 ### Požadavky na aplikaci
  43
  44 - **MULTIPLATFORMNOST** (MasOS, Windows, Linux) (iOS, Windows Mobile, Android, BB10, ...)
  45 - jako developer jistě chcete svou aplikaci napsat jednou a pak ji prodávat na všech platformách
  46 - logování
  47 - konfigurace
  48 - kontainery
  49 - persistentní data
  50 - komunikace s okolím, často nějaký druh RPC (SQL, HTTP, AJAX, DBus)
  51 - podpora standardů (XML, JSON, PDF, JPG, PNG, SVG)
  52 - autentizace uživatelů
  53 - bezpečnost (systémová, práva uživatelů)
  54 - lokalizace
  55 - multithreading, synchronizace
  56 - pluginy
  57 - instalátor/balíčkovací systém
  58 - aktualizace
  59 - atd. ...
  60
  61 GUI aplikace mají navíc:
  62
  63 - zpracování eventů (event driven aplikace, xev)
  64 - widgetset
  65 - layout manager
  66 - mobilní aplikace - UI adaptability
  67 - atd. ...
  68
  69 #### Stále nemáme ani řádek cílené funkcionality
  70
  71 ### Systémové požadavky
  72
  73 - použité programovací jazyky a jejich počet
  74 - cílová platforma (cílový OS) / multiplatformnost
  75 - lokální, síťová, tenký/tlustý klient, 1-2-3 vrstvá
  76 - desktop
  77     - widgetset
  78 - web
  79     - framework
  80     - HTML5
  81 - mobile
  82     - Android - Java
  83     - Apple iOS - Object C
  84     - Windows Mobile
  85     - BlackBerry BB10 - Cascades Qt/QML
  86     - Meego - Qt + QML ???
  87     - Bada
  88 - embeded
  89     - MicroWindows
  90     - mnoho dalších možností
  91 - HW nároky (paměť, procesor, konektivita)
  92 - GC ano či ne?
  93
  94 ### Ekonomické
  95
  96 - možství času
  97 - množství peněz
  98 - množství developerů
  99
 100 ### Vývojové nástroje
 101
 102 - Build System (CMake, QMake, Ant, ...)
 103 - Source Code Management (Git, Mercurial, Bazaar, Darts, SVN, CVS, ...)
 104 - Issue Tracking System (Jira, BugZilla, GitLab, GitHub, Redmine, Track, ...)
 105 - Code Review (GitHub, GitLab, Gerrit, ...)
 106 - Continuous Integration CI (Jenkins, Travis, GitHub, ...)
 107 - Testing Framework
 108 - Documentation Wiki (Confluence, IkiWiki, GitLab, GitHub, DokuWiki, <1000 skipped>, MediaWiki)
 109 - Process Planning, Agile, Scrum, Kanban, Waterfall, (Jira, Redmine)
 110
 111
 112 ### V neposlední řadě
 113
 114 - **MUSÍ TO FUNGOVAT**
 115
 116 ### Doby, kdy toto vše dokázal vymyslet a napsat někdo sám jsou nenávratně pryč
 117
 118 - ať chceme, či ne, jsme nuceni se dříve či později porozhlédnout po nějakém pěkném frameworku
 119 - rovněž vhodné IDE dokáže naši práci podstatně urychlit (code completion, indexer, profiling, debugging, UI designer)
 120
 121 [[!table class="borders" data="""
 122 Firma  | Počet zaměstnanců | SCM      | CI              | Wiki       | Issue tracking | Planning
 123 Firma1 | 1                 | Git      |                 | DokuWiki   | todo.txt       | včera vám to uděláme
 124 Firma2 | 10 000            | Git, SVN | Jenkins         | Confulence | Jira           | Scrum s lidskou tváří
 125 Firma3 | 200 000           | Git      | Jenkins         | Confulence | Jira           | Scrum s ďábelskou tváří
 126 Firma4 | 200               | Git      | Jenkins, Travis | GitLab     | GitLab         | káva po obědě
 127 """]]
 128
 129 * **Každý developer, který chce pracovat v IT firmě, musí umět GIT.**
 130 * Každý developer, který chce dělat něco užitečného v IT firmě, musí vědět, co je:
 131     * Process
 132     * Thread + synchronization
 133     * Mutex
 134     * Socket
 135     * Virtuální paměť
 136     * Perfektní znalost nějakého programovacího jazyka je velkou výhodou
 137
 138
 139 ----------
 140
 141
 142 #Grafický subsystém např. v Unixu
 143
 144 vždy je dobré znát protivníka
 145
 146 ## X Window System
 147
 148 - Grafické prostředí pro operační systém UNIX
 149 - Začal vyvíjet institut MIT (Massachusetts Institute of Technology) v r. 1984.
 150 - Označení X11 (verze 11) od r. 1987
 151 - Další verze jsou označovány jako revize.
 152 - 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ů.
 153 - Klient-server architektura, klient (GUI aplikace) nemusí nutně běžet na stejném stroji, jako server.
 154 - Server se stará o klávesnici, myš a zobrazení grafického výstupu aplikací.
 155 - Klient komunikuje se serverem pomocí socketu. Používá [X-protokol](#x-protocol).
 156 - XFree86 v roce 1992 z X386, což byla implementace X serveru pro 386 architekturu.
 157 - X11R6.4 restriktivnější licence ve verzi 4.4 v únoru 2004.
 158 - Referenční implementací je X server vyvíjený X.Org Foundation.
 159
 160 ![X architektura][1]
 161
 162 ## Alternativy
 163
 164 - Wayland display server - kompozice, zatím no network transparency
 165 - Apple Quartz
 166 - Android SurfaceFlinger
 167 - MS Windows
 168 - atd.
 169
 170 ## Správce oken (window manager)
 171
 172 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.
 173
 174 <a name="x-protocol"/>
 175
 176 ## X protokol ###
 177
 178 - Specifikuje způsob komunikace mezi X-Serverem a X-Klienty.
 179 - Nejslavnější implementací je Xlib.
 180
 181 ![Xlib][3]
 182
 183 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.
 184
 185 #Knihovny pro desktopové aplikace
 186
 187 ## Gnome
 188 - GNU Network Object Model Environment
 189 - Window manager
 190 - Vývojová platforma
 191 - GTK+
 192 - Bylo potřeba něco jako Win95 pro Linux.
 193 - V r. 1997 Miguel de Icaza and Federico Mena mimo jiné i kvůli problémům s Qt licencí v KDE.
 194 - [[the story of the Gnome|the-gnome-story]]
 195
 196 ----------
 197
 198 ## KDE
 199 - 1996 Matthias Ettrich, student Eberhard Karls University v Tübingen (1998 zaměstnanec TrollTech).
 200 - I jemu scházelo něco jako Win95 pro Linux.
 201 - Qt
 202 - Trošku jiná filosofie než Gnome, ale v podstatě to samé.
 203
 204 ----------
 205
 206 ## FLTK
 207 - Vhodná pro aplikace s nízkými HW nároky a statické linkování
 208
 209 ----------
 210
 211 ## wxWindows / wxWidgets
 212 [wxWidgets](http://www.wxwindows.org/)
 213
 214 ----------
 215
 216 ## GTK+ (GIMP Toolkit)
 217
 218 - 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.
 219 - Napsán objektově v jazyce C, což sebou nese řadu výhod i nevýhod.
 220 - LGPL licence.
 221 - Současná verze již multiplatformní.
 222 - Součást GNU projektu.
 223 - Využívá jej mnoho vyšších programovacích jazyků pro snadný wrapping.
 224
 225 [[GTK+ hello world]]
 226
 227 ----------
 228
 229 ## QT
 230
 231 - 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]].
 232 - V r. 2009 ji koupila Nokia.
 233 - V C++ => obtížnější wrapping, ABI problemy.
 234 - Od samého počátku multiplatformní (dokonce vlastni make systém).
 235 - Signal/Slot koncept (implementace observer pattern).
 236 - Komerční a LGPL licence (od r. 2009), dříve GPL, ještě dříve podivná QPL (1998) kvuli KDE.
 237 - Snaží se doplnit C++ a libc/c++ o chybějící vlastnosti vyplývající zejména z chabého RTTI v C++
 238 - signals and slots, across threads !!!
 239 - object properties
 240 - 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
 241 - qobject_cast - a dynamic cast that works across library boundaries
 242 - contextual string translation for internationalization
 243 - sophisticated interval driven timers that make it possible to elegantly integrate many tasks in an event-driven GUI
 244 - hierarchical and queryable object trees that organize object ownership in a natural way
 245 - 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**.
 246 - Model/View architektura.
 247 - Implicitně sdílené objekty.
 248 - Cenou, kterou za to platíme je MOC (Meta Object Compiler)
 249
 250 - Qt 5.6 LTS (2016)
 251 - Qt 5.7 (2016) nelze přeložit bez c++11
 252 - 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)
 253
 254 [[Qt hello world]]
 255
 256 # Úspěšné postupy při tvorbě GUI aplikací
 257
 258 Ať už se rozhodnete pro jakoukoliv platformu, narazíte nakonec na stejné problémy, budete implementovat:
 259
 260 * Prezentační vrstvu
 261     * UI design (deklarativní)
 262         * XML
 263         * QML
 264         * kód
 265     * navázání ovládacích prvků na jejich handlery (procedurální)
 266         * SIGNAL/SLOT
 267     * update zobrazovacích prvků se změnami prezentovaných dat
 268         * SIGNAL/SLOT
 269         * MVC
 270     * komunikace s aplikační vrstvou
 271         * SIGNAL/SLOT
 272         * RPC
 273             * v tu ránu potřebujete serializaci-deserializaci a většinou i VARIANT
 274 * Aplikační vrstvu
 275     * Business logika
 276         * tady je konečně to programování
 277     * Persistence dat
 278         * velmi často SQL
 279
 280 ## UI design
 281
 282 - způsob (deklarativní) jakým definujeme UI
 283 - poloha a atributy ovládacích prvků v oknech aplikace
 284 - poměrně výrazně ovlivňuje produktivitu vývojáře
 285 - kód, XML, QML, custom
 286
 287 ### Použití layout manageru
 288
 289 - Zaručuje optimální umístění a velikost widgetů při změně velikosti okna.
 290 - Je přirozenější říct tlačítka jsou nalevo pod sebou, než specifikovat jejich souřadnice
 291
 292
 293 ## Komunikace objektů
 294
 295 - objekty spolu musí komunikovat
 296     - callback - dangling pointers
 297     - inner classes Java
 298     - SIGNAL/SLOT
 299
 300 ### Signal/Slot koncept
 301
 302 - Observer pattern, výrazně redukuje boilerplate kód.
 303 - Many to many relationship.
 304 - Velice se hodí na řešení volání callback funkcí widgetů.
 305 - dokáží multiplatformě obalit problém synchronizace window system eventů a eventů od file desriptorů (implementace není vždy ideální)
 306 - Kromě toho řeší mnoho dalších problémů, zejména neexistující reference (dangling pointers).
 307
 308 ![signal-slot][4]
 309
 310 ### QVariant
 311
 312 QVariant může být každý objekt, který má
 313
 314 * public implicit constructor
 315 * public copy constructor
 316 * public destructor
 317
 318
 319 ## Model-View-Controller(Delegate) architektura
 320
 321 - Odděluje data od jejich prezentace.
 322 - Data jsou v aplikaci jen jednou, řeší data redundancy hell
 323 - Jedny data mohpu být zobrazeny více způsoby či perspektivami.
 324 - Jeden pohled lze použít pro zobrazní různých dat, pro různé modely
 325 - Modely generující data, data vubec nemusí existovat, počítají se na požádání.
 326 - Delegát/Controller slouží pro zobrazení/editaci dat
 327
 328 ![model-view-overview][5]
 329
 330 ![model-view][6]
 331
 332 ## Qt Declarative QML
 333
 334 * use QML for UI design
 335 * use JavaScript for UI event handling
 336 * use C++ for business logic implementation
 337 * looks great, but ... type erasure is developer's grave
 338
 339   [1]: X_client_sever_example.svg
 340   [2]: http://cs.wikipedia.org/wiki/X_display_manager
 341   [3]: xlib.png
 342   [4]: abstract-connections.png
 343   [5]: modelview-overview.png
 344   [6]: modelview-example.svg
 345
 346
 347
 348
 349
 350
 351