[[!meta title="Grafická uživatelská prostředí a knihovny"]]
[[!toc levels=2]]
+# Tvorba grafických aplikací
+
+## Žijeme v přelomovém období
+
+- 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á uživatelská prostředí a knihovny
-## X Window System
+#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.
## 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í.
## QT
-- Haavard Nord a Eirik Chambe-Eng 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).
+- 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. 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
-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]]
-# Tvorba grafických aplikací
+# Úspěšné postupy při tvorbě GUI aplikací
-Kromě aplikací určených k zpracování a zobrazení grafických dat, je tu GUI.
+Ať už se rozhodnete pro jakoukoliv platformu, narazíte nakonec na stejné problémy, budete implementovat:
-Proč GUI:
-- Uživatel může být hloupější, existuje jisté latentní Know-How, aplikace se ovládají obdobně pomocí stejných typů widgetů.
-- Stačí pasivní znalost UI.
+* 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
-## Model-View architektura
+## UI design
-- Odděluje data od jejich prezentace.
-- Jedny data mohpu být zobrazeny více způsoby či perspektivami.
-- Více fronendů.
+- 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
-[[!img modelview-overview.png align="right" size="" alt=""]]
-overview
+## Komunikace objektů
-[[!img modelview.svg align="right" size="" alt=""]]
+- objekty spolu musí komunikovat
+ - callback - dangling pointers
+ - inner classes Java
+ - SIGNAL/SLOT
-## Komunikace objektů, Signal/Slot koncept
+### Signal/Slot koncept
-- Obecně řeší observer pattern.
+- Observer pattern, výrazně redukuje boilerplate kód.
- Many to many relationship.
- Velice se hodí na řešení volání callback funkcí widgetů.
+- 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
projects / edu / osp-wiki.git / blobdiff