[[!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
- desktopové aplikace opouští programátorské výsluní a jsou nahrazovány mobilními
- dlouho jsme měli klávesnici, myš a nepsanou dohodu o tom, jak má vypadat widget-set
- s mobilními aplikacemi přichází touch-screen, což má obrovský impakt na UI
- 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í
- vysledkem je, že v grafických aplikacích jsme v podstatě zase na začátku
- Je velký rozdíl mezi desktopovou aplikací a mobilní, přesto existují snahy je sjednotit (Windows Metro, Ubuntu Unity)

## 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** (MasOS, Windows, Linux) (iOS, Windows Mobile, Android, BB10, ...)
- jako developer jistě chcete svou aplikaci napsat jednou a pak ji prodávat na všech platformách
- logování
- konfigurace
- kontainery
- persistentní data
- komunikace s okolím, často nějaký druh RPC (SQL, HTTP, AJAX, DBus)
- podpora standardů (XML, JSON, PDF, JPG, PNG, SVG)
- autentizace uživatelů
- bezpečnost (systémová, práva uživatelů)
- lokalizace
- multithreading, synchronizace
- pluginy
- atd. ...

GUI aplikace mají navíc:

- zpracování eventů (event driven aplikace, xev)
- widgetset
- layout manager
- mobilní aplikace - UI adaptability
- atd. ...

### Režie

- instalátor/balíčkovací systém
- aktualizace
- build system (CMake, QMake, Ant, ...)

#### Stále nemáme ani řádek cílené funkcionality

### Systémové požadavky

- použité programovací jazyky a jejich počet
- cílová platforma (cílový OS) / multiplatformnost
- lokální, síťová, tenký/tlustý klient, 1-2-3 vrstvá
- desktop
    - widgetset
- web
    - framework
    - HTML5
- mobile
    - Android - Java
    - Apple iOS - Object C
    - Windows Mobile
    - BlackBerry BB10 - Cascades Qt/QML
    - Meego - Qt + QML ???
    - Bada
- embeded
    - MicroWindows
    - mnoho dalších možností
- HW nároky (paměť, procesor, konektivita)
- GC ano či ne?

### Ekonomické

- možství času
- množství peněz
- množství developerů

### Vývojové nástroje

- **verzovací systém** (GIT, SVN, CVS, Mercurial, )
- dobré nářadí nám výrazně ulehčí praci a ušetří čas a nervy

### V neposlední řadě

- **MUSÍ TO FUNGOVAT**

### Doby, kdy toto vše dokázal napsat někdo sám jsou nenávratně pryč

- ať chceme, či ne, jsme nuceni se dříve či později porozhlédnout po nějakém pěkném frameworku
- rovněž vhodné IDE dokáže naši práci podstatně urychlit (code completion, indexer, profiling, debugging, UI designer)

----------


#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.
- 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).
- 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.

<a name="x-protocol"/>

## X protokol ###

- 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+
- 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 (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 (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í.
- Součást GNU projektu.
- Využívá jej mnoho vyšších programovacích jazyků pro snadný wrapping.

[[GTK+ hello world]]

----------

## QT

- 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]].
- V r. 2009 ji koupila Nokia.
- V C++ => obtížnější wrapping.
- 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
- 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 hello world]]

# Úspěšné postupy při tvorbě GUI aplikací

Ať už se rozhodnete pro jakoukoliv platformu, narazíte nakonec na stejné problémy

## Komunikace objektů

- objekty spolu musí komunikovat
    - callback - dangling pointers
    - inner classes Java
    - SIGNAL/SLOT

### Signal/Slot koncept

- 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]

## 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]

### 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

### UI definition

- způsob 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

  [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