Open Source Programování » prednasky » Grafická uživatelská prostředí a knihovny
  1. Tvorba grafických aplikací
    1. Žijeme v přelomovém období
    2. Potřebujeme vůbec GUI?
    3. Tvorba aplikaci
  2. Grafický subsystém např. v Unixu
    1. X Window System
    2. Alternativy
    3. Správce oken (window manager)
    4. X protokol
  3. Knihovny pro desktopové aplikace
    1. Gnome
    2. KDE
    3. FLTK
    4. wxWindows / wxWidgets
    5. GTK+ (GIMP Toolkit)
    6. QT
  4. Úspěšné postupy při tvorbě GUI aplikací
    1. UI design
    2. Komunikace objektů
    3. Model-View-Controller(Delegate) architektura
    4. Qt Declarative QML

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)
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ý 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.
  • 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

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.
  • Nejslavnější implementací je Xlib.

Xlib

Používat přímo xlib by bylo poněkud těžkopádné (příklad), 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

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

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 the story of Qt.
  • V r. 2009 ji koupila Nokia.
  • 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++
  • 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

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

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

  • 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

UI design

  • 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

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

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

model-view

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