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, **je to hnus**, (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 | 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     * Mutex
 133     * Socket
 134     * Virtuální paměť
 135     * Perfektní znalost nějakého programovacího jazyka je velkou výhodou
 136
 137
 138 ----------
 139
 140
 141 #Grafický subsystém např. v Unixu
 142
 143 vždy je dobré znát protivníka
 144
 145 ## X Window System
 146
 147 - Grafické prostředí pro operační systém UNIX
 148 - Začal vyvíjet institut MIT (Massachusetts Institute of Technology) v r. 1984.
 149 - Označení X11 (verze 11) od r. 1987
 150 - Další verze jsou označovány jako revize.
 151 - 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ů.
 152 - Klient-server architektura, klient (GUI aplikace) nemusí nutně běžet na stejném stroji, jako server.
 153 - Server se stará o klávesnici, myš a zobrazení grafického výstupu aplikací.
 154 - Klient komunikuje se serverem pomocí socketu. Používá [X-protokol](#x-protocol).
 155 - XFree86 v roce 1992 z X386, což byla implementace X serveru pro 386 architekturu.
 156 - X11R6.4 restriktivnější licence ve verzi 4.4 v únoru 2004.
 157 - Referenční implementací je X server vyvíjený X.Org Foundation.
 158
 159 ![X architektura][1]
 160
 161 ## Alternativy
 162
 163 - Wayland display server - kompozice, zatím no network transparency
 164 - Apple Quartz
 165 - Android SurfaceFlinger
 166 - MS Windows
 167 - atd.
 168
 169 ## Správce oken (window manager)
 170
 171 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.
 172
 173 <a name="x-protocol"/>
 174
 175 ## X protokol ###
 176
 177 - Specifikuje způsob komunikace mezi X-Serverem a X-Klienty.
 178 - Nejslavnější implementací je Xlib.
 179
 180 ![Xlib][3]
 181
 182 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.
 183
 184 #Knihovny pro desktopové aplikace
 185
 186 ## Gnome
 187 - GNU Network Object Model Environment
 188 - Window manager
 189 - Vývojová platforma
 190 - GTK+
 191 - Bylo potřeba něco jako Win95 pro Linux.
 192 - V r. 1997 Miguel de Icaza and Federico Mena mimo jiné i kvůli problémům s Qt licencí v KDE.
 193 - [[the story of the Gnome|the-gnome-story]]
 194
 195 ----------
 196
 197 ## KDE
 198 - 1996 Matthias Ettrich, student Eberhard Karls University v Tübingen (1998 zaměstnanec TrollTech).
 199 - I jemu scházelo něco jako Win95 pro Linux.
 200 - Qt
 201 - Trošku jiná filosofie než Gnome, ale v podstatě to samé.
 202
 203 ----------
 204
 205 ## FLTK
 206 - Vhodná pro aplikace s nízkými HW nároky a statické linkování
 207
 208 ----------
 209
 210 ## wxWindows / wxWidgets
 211 [wxWidgets](http://www.wxwindows.org/)
 212
 213 ----------
 214
 215 ## GTK+ (GIMP Toolkit)
 216
 217 - 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.
 218 - Napsán objektově v jazyce C, což sebou nese řadu výhod i nevýhod.
 219 - LGPL licence.
 220 - Současná verze již multiplatformní.
 221 - Součást GNU projektu.
 222 - Využívá jej mnoho vyšších programovacích jazyků pro snadný wrapping.
 223
 224 [[GTK+ hello world]]
 225
 226 ----------
 227
 228 ## QT
 229
 230 - 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 [[celkem zajímavé|the-qt-story]].
 231 - V r. 2009 ji koupila Nokia.
 232 - V C++ => obtížnější wrapping.
 233 - Od samého počátku multiplatformní (dokonce vlastni make systém).
 234 - Signal/Slot koncept (implementace observer pattern).
 235 - Komerční a LGPL licence (od r. 2009), dříve GPL, ještě dříve podivná QPL (1998) kvuli KDE.
 236 - Snaží se doplnit C++ a libc/c++ o chybějící vlastnosti vyplývající zejména z chabého RTTI v C++
 237 1. signals and slots
 238 1. object properties
 239 1. 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
 240 1. qobject_cast - a dynamic cast that works across library boundaries
 241 1. contextual string translation for internationalization
 242 1. sophisticated interval driven timers that make it possible to elegantly integrate many tasks in an event-driven GUI
 243 1. hierarchical and queryable object trees that organize object ownership in a natural way
 244 - 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**.
 245 - Model/View architektura.
 246 - Implicitně sdílené objekty.
 247 - Cenou, kterou za to platíme je MOC (Meta Object Compiler)
 248
 249 [[Qt hello world]]
 250
 251 # Úspěšné postupy při tvorbě GUI aplikací
 252
 253 Ať už se rozhodnete pro jakoukoliv platformu, narazíte nakonec na stejné problémy, budete implementovat:
 254 * Prezentační vrstvu
 255     * UI design (deklarativní)
 256         * XML
 257         * QML
 258         * kód
 259     * navázání ovládacích prvků na jejich handlery (procedurální)
 260         * SIGNAL/SLOT
 261     * update zobrazovacích prvků se změnami prezentovaných dat
 262         * SIGNAL/SLOT
 263         * MVC
 264     * komunikace s aplikační vrstvou
 265         * SIGNAL/SLOT
 266         * RPC
 267             * v tu ránu potřebujete serializaci-deserializaci a většinou i VARIANT
 268 * Aplikační vrstvu
 269     * Business logika
 270         * tady je konečně to programování
 271     * Persistence dat
 272         * velmi často SQL
 273
 274 ## UI design
 275
 276 - způsob (deklarativní) jakým definujeme UI
 277 - poloha a atributy ovládacích prvků v oknech aplikace
 278 - poměrně výrazně ovlivňuje produktivitu vývojáře
 279 - kód, XML, QML, custom
 280
 281 ### Použití layout manageru
 282
 283 - Zaručuje optimální umístění a velikost widgetů při změně velikosti okna.
 284 - Je přirozenější říct tlačítka jsou nalevo pod sebou, než specifikovat jejich souřadnice
 285
 286
 287 ## Komunikace objektů
 288
 289 - objekty spolu musí komunikovat
 290     - callback - dangling pointers
 291     - inner classes Java
 292     - SIGNAL/SLOT
 293
 294 ### Signal/Slot koncept
 295
 296 - Observer pattern, výrazně redukuje boilerplate kód.
 297 - Many to many relationship.
 298 - Velice se hodí na řešení volání callback funkcí widgetů.
 299 - dokáží multiplatformě obalit problém synchronizace window system eventů a eventů od file desriptorů (implementace není vždy ideální)
 300 - Kromě toho řeší mnoho dalších problémů, zejména neexistující reference (dangling pointers).
 301
 302 ![signal-slot][4]
 303
 304 ## Model-View-Controller(Delegate) architektura
 305
 306 - Odděluje data od jejich prezentace.
 307 - Data jsou v aplikaci jen jednou, řeší data redundancy hell
 308 - Jedny data mohpu být zobrazeny více způsoby či perspektivami.
 309 - Jeden pohled lze použít pro zobrazní různých dat, pro různé modely
 310 - Modely generující data, data vubec nemusí existovat, počítají se na požádání.
 311 - Delegát/Controller slouží pro zobrazení/editaci dat
 312
 313 ![model-view-overview][5]
 314
 315 ![model-view][6]
 316
 317 ## Qt Declarative QML
 318
 319 * use QML for UI design
 320 * use JavaScript for UI event handling
 321 * use C++ for business logic implementation
 322 * looks great, but ... type erasure is developer's grave
 323
 324   [1]: X_client_sever_example.svg
 325   [2]: http://cs.wikipedia.org/wiki/X_display_manager
 326   [3]: xlib.png
 327   [4]: abstract-connections.png
 328   [5]: modelview-overview.png
 329   [6]: modelview-example.svg
 330
 331
 332
 333
 334
 335
 336