X-Git-Url: http://rtime.felk.cvut.cz/gitweb/edu/osp-wiki.git/blobdiff_plain/6f8812f032385ced32d36cea97735d6acf4f1bb0..HEAD:/prednasky/gui/index.mdwn diff --git a/prednasky/gui/index.mdwn b/prednasky/gui/index.mdwn index 91af12cf..aeb1e2eb 100644 --- a/prednasky/gui/index.mdwn +++ b/prednasky/gui/index.mdwn @@ -3,12 +3,12 @@ [[!toc levels=2]] # Tvorba grafických aplikací -## Nová doba, host vyhazuje vrchního +## Žijeme v přelomovém období -- dlouho jsme měli klávesnici, myš a jasno -- 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í -- pak přišel (velmi zjednodušeně) Steve Jobs vynalezl iphone a ipad a řekl swipe or die -- vysledkem je, že v grafických aplikacích jsme v podstatě zase na začátku +- 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? @@ -27,81 +27,74 @@ - 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 psalo +- Je třeba je používat pravidelně, jinak uživatel zapomene, jak se to vlastně psalo ### CLI aplikace s GUI kabátkem -- V podstatě ideální stav +- Na desktopu ideální stav - Asi nejvíc práce ## Tvorba aplikaci ### Požadavky na aplikaci -- 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) +- **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 -- 3D layer, podporu akcelerace - atd. ... -### Režie - -- instalátor/balíčkovací systém -- aktualizace -- build system (CMake, QMake, Ant, ...) - -#### Stále nemáme ani řádek cílené funkcionality +### Některé platformy -### 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 +- desktop + - Linux + - OSX + - Windows +- web + - HTML5 + frameworky (Django, Ruby on rails, NodeJS, ...) - mobile - Android - Java - Apple iOS - Object C - - Windows Mobile ? - - Meego - Qt + QML - - Bada, BB OS X -- embeded - - MicroWindows - - mnoho dalších možností -- HW nároky (paměť, procesor, konektivita) -- GC ano či ne? - -### Ekonomické + - Windows Mobile + - Ubuntu Phone - HTML5, Qt/QML + - Sailfish OS - HTML5, Qt/QML -- možství času -- množství peněz -- množství developerů +**Je pozoruhodné, kolik z těchto platforem je podporováno knihovnou Qt.** ### Vývojové nástroje -- dobré nářadí nám výrazně ulehčí praci a ušetří čas a nervy - -### V neposlední řadě +- 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ě -- **MUSÍ TO FUNGOVAT** ---------- @@ -110,16 +103,16 @@ GUI aplikace mají navíc: vždy je dobré znát protivníka -## X Window System +## 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. @@ -142,7 +135,7 @@ Samotný X Server má na starost pouze zobrazení na obrazovku, obsluhu hardware ## 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] @@ -158,7 +151,7 @@ Používat přímo xlib by bylo poněkud těžkopádné ([[příklad| xlib-examp - 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 o the Gnome](http://primates.ximian.com/~miguel/gnome-history.html) +- [[the story of the Gnome|the-gnome-story]] ---------- @@ -195,30 +188,67 @@ Používat přímo xlib by bylo poněkud těžkopádné ([[příklad| xlib-examp ## 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é](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]] # Úspěšné postupy při tvorbě GUI aplikací -Ať už se rozhodnete pro jakoukoliv platformu, narazíte nakonec na stejné problémy +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ů @@ -229,7 +259,7 @@ Ať už se rozhodnete pro jakoukoliv platformu, narazíte nakonec na stejné pro ### 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í) @@ -237,6 +267,15 @@ Ať už se rozhodnete pro jakoukoliv platformu, narazíte nakonec na stejné pro ![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. @@ -250,10 +289,12 @@ Ať už se rozhodnete pro jakoukoliv platformu, narazíte nakonec na stejné pro ![model-view][6] -### Použití layout manageru +## Qt Declarative QML -- Zaručuje optimální umístění a velikost widgetů při změně velikosti okna. -- Je přirozenější říct tlčítka jsou nalevo pod sebou, než specifikovat jejich souřadnice +* 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