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