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 - atd. ...
  58
  59 GUI aplikace mají navíc:
  60
  61 - zpracování eventů (event driven aplikace, xev)
  62 - widgetset
  63 - layout manager
  64 - mobilní aplikace - UI adaptability
  65 - atd. ...
  66
  67 ### Režie
  68
  69 - instalátor/balíčkovací systém
  70 - aktualizace
  71 - build system (CMake, QMake, Ant, ...)
  72
  73 #### Stále nemáme ani řádek cílené funkcionality
  74
  75 ### Systémové požadavky
  76
  77 - použité programovací jazyky a jejich počet
  78 - cílová platforma (cílový OS) / multiplatformnost
  79 - lokální, síťová, tenký/tlustý klient, 1-2-3 vrstvá
  80 - desktop
  81     - widgetset
  82 - web
  83     - framework
  84     - HTML5
  85 - mobile
  86     - Android - Java
  87     - Apple iOS - Object C
  88     - Windows Mobile
  89     - BlackBerry BB10 - Cascades Qt/QML
  90     - Meego - Qt + QML ???
  91     - Bada
  92 - embeded
  93     - MicroWindows
  94     - mnoho dalších možností
  95 - HW nároky (paměť, procesor, konektivita)
  96 - GC ano či ne?
  97
  98 ### Ekonomické
  99
 100 - možství času
 101 - množství peněz
 102 - množství developerů
 103
 104 ### Vývojové nástroje
 105
 106 - **verzovací systém** (GIT, SVN, CVS, Mercurial, )
 107 - dobré nářadí nám výrazně ulehčí praci a ušetří čas a nervy
 108
 109 ### V neposlední řadě
 110
 111 - **MUSÍ TO FUNGOVAT**
 112
 113 ### Doby, kdy toto vše dokázal napsat někdo sám jsou nenávratně pryč
 114
 115 - ať chceme, či ne, jsme nuceni se dříve či později porozhlédnout po nějakém pěkném frameworku
 116 - rovněž vhodné IDE dokáže naši práci podstatně urychlit (code completion, indexer, profiling, debugging, UI designer)
 117
 118 ----------
 119
 120
 121 #Grafický subsystém např. v Unixu
 122
 123 vždy je dobré znát protivníka
 124
 125 ## X Window System
 126
 127 - Grafické prostředí pro operační systém UNIX
 128 - Začal vyvíjet institut MIT (Massachusetts Institute of Technology) v r. 1984.
 129 - Označení X11 (verze 11) od r. 1987
 130 - Další verze jsou označovány jako revize.
 131 - 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ů.
 132 - Klient-server architektura, klient (GUI aplikace) nemusí nutně běžet na stejném stroji, jako server.
 133 - Server se stará o klávesnici, myš a zobrazení grafického výstupu aplikací.
 134 - Klient komunikuje se serverem pomocí socketu. Používá [X-protokol](#x-protocol).
 135 - XFree86 v roce 1992 z X386, což byla implementace X serveru pro 386 architekturu.
 136 - X11R6.4 restriktivnější licence ve verzi 4.4 v únoru 2004.
 137 - Referenční implementací je X server vyvíjený X.Org Foundation.
 138
 139 ![X architektura][1]
 140
 141 ## Alternativy
 142
 143 - Wayland display server - kompozice, zatím no network transparency
 144 - Apple Quartz
 145 - Android SurfaceFlinger
 146 - MS Windows
 147 - atd.
 148
 149 ## Správce oken (window manager)
 150
 151 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.
 152
 153 <a name="x-protocol"/>
 154
 155 ## X protokol ###
 156
 157 - Specifikuje způsob komunikace mezi X-Serverem a X-Klienty.
 158 - Nejslavnější implementací je Xlib.
 159
 160 ![Xlib][3]
 161
 162 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.
 163
 164 #Knihovny pro desktopové aplikace
 165
 166 ## Gnome
 167 - GNU Network Object Model Environment
 168 - Window manager
 169 - Vývojová platforma
 170 - GTK+
 171 - Bylo potřeba něco jako Win95 pro Linux.
 172 - V r. 1997 Miguel de Icaza and Federico Mena mimo jiné i kvůli problémům s Qt licencí v KDE.
 173 - [the story of the Gnome](the-gnome-story.html)
 174
 175 ----------
 176
 177 ## KDE
 178 - 1996 Matthias Ettrich, student Eberhard Karls University v Tübingen (1998 zaměstnanec TrollTech).
 179 - I jemu scházelo něco jako Win95 pro Linux.
 180 - Qt
 181 - Trošku jiná filosofie než Gnome, ale v podstatě to samé.
 182
 183 ----------
 184
 185 ## FLTK
 186 - Vhodná pro aplikace s nízkými HW nároky a statické linkování
 187
 188 ----------
 189
 190 ## wxWindows / wxWidgets
 191 [wxWidgets](http://www.wxwindows.org/)
 192
 193 ----------
 194
 195 ## GTK+ (GIMP Toolkit)
 196
 197 - 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.
 198 - Napsán objektově v jazyce C, což sebou nese řadu výhod i nevýhod.
 199 - LGPL licence.
 200 - Současná verze již multiplatformní.
 201 - Součást GNU projektu.
 202 - Využívá jej mnoho vyšších programovacích jazyků pro snadný wrapping.
 203
 204 [[GTK+ hello world]]
 205
 206 ----------
 207
 208 ## QT
 209
 210 - 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é](http://www.civilnet.cn/book/embedded/gui/qt4/pref04.html).
 211 - V r. 2009 ji koupila Nokia.
 212 - V C++ => obtížnější wrapping.
 213 - Od samého počátku multiplatformní (dokonce vlastni make systém).
 214 - Signal/Slot koncept (implementace observer pattern).
 215 - Komerční a LGPL licence (od r. 2009), dříve GPL, ještě dříve podivná QPL (1998) kvuli KDE.
 216 - Snaží se doplnit C++ a libc/c++ o chybějící vlastnosti vyplývající zejména z chabého RTTI v C++
 217 1. signals and slots
 218 1. object properties
 219 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
 220 1. qobject_cast - a dynamic cast that works across library boundaries
 221 1. contextual string translation for internationalization
 222 1. sophisticated interval driven timers that make it possible to elegantly integrate many tasks in an event-driven GUI
 223 1. hierarchical and queryable object trees that organize object ownership in a natural way
 224 - 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**.
 225 - Model/View architektura.
 226 - Implicitně sdílené objekty.
 227 - Cenou, kterou za to platíme je MOC (Meta Object Compiler)
 228
 229 [[Qt hello world]]
 230
 231 # Úspěšné postupy při tvorbě GUI aplikací
 232
 233 Ať už se rozhodnete pro jakoukoliv platformu, narazíte nakonec na stejné problémy
 234
 235 ## Komunikace objektů
 236
 237 - objekty spolu musí komunikovat
 238     - callback - dangling pointers
 239     - inner classes Java
 240     - SIGNAL/SLOT
 241
 242 ### Signal/Slot koncept
 243
 244 - Observer pattern, výrazně redukuje boilerplate kód.
 245 - Many to many relationship.
 246 - Velice se hodí na řešení volání callback funkcí widgetů.
 247 - dokáží multiplatformě obalit problém synchronizace window system eventů a eventů od file desriptorů (implementace není vždy ideální)
 248 - Kromě toho řeší mnoho dalších problémů, zejména neexistující reference (dangling pointers).
 249
 250 ![signal-slot][4]
 251
 252 ## Model-View-Controller(Delegate) architektura
 253
 254 - Odděluje data od jejich prezentace.
 255 - Data jsou v aplikaci jen jednou, řeší data redundancy hell
 256 - Jedny data mohpu být zobrazeny více způsoby či perspektivami.
 257 - Jeden pohled lze použít pro zobrazní různých dat, pro různé modely
 258 - Modely generující data, data vubec nemusí existovat, počítají se na požádání.
 259 - Delegát/Controller slouží pro zobrazení/editaci dat
 260
 261 ![model-view-overview][5]
 262
 263 ![model-view][6]
 264
 265 ### Použití layout manageru
 266
 267 - Zaručuje optimální umístění a velikost widgetů při změně velikosti okna.
 268 - Je přirozenější říct tlačítka jsou nalevo pod sebou, než specifikovat jejich souřadnice
 269
 270 ### UI definition
 271
 272 - způsob jakým definujeme UI
 273 - poloha a atributy ovládacích prvků v oknech aplikace
 274 - poměrně výrazně ovlivňuje produktivitu vývojáře
 275 - kód, XML, QML, custom
 276
 277   [1]: X_client_sever_example.svg
 278   [2]: http://cs.wikipedia.org/wiki/X_display_manager
 279   [3]: xlib.png
 280   [4]: abstract-connections.png
 281   [5]: modelview-overview.png
 282   [6]: modelview-example.svg
 283
 284
 285
 286
 287
 288
 289