25. listopadu 2014, Brno Připravil: David Procházka Qt a QML Programovací jazyk C++
Obsah přednášky Strana 2 / 38 Obsah přednášky 1 Obsah přednášky 2 Událostně řízené programování 3 Knihovna Qt 4 QML 5 Vlastnosti elementů QML 6 Události 7 Vlastní element 8 Skupiny elementů 9 Závěr
Obsah přednášky Strana 3 / 38 Obsah přednášky Dnes se naučíme vytvořit grafické uživatelské rozhraní pomocí knihovny Qt a jazyka QML.
Událostně řízené programování Strana 4 / 38 Obsah přednášky 1 Obsah přednášky 2 Událostně řízené programování 3 Knihovna Qt 4 QML 5 Vlastnosti elementů QML 6 Události 7 Vlastní element 8 Skupiny elementů 9 Závěr
Událostně řízené programování Strana 5 / 38 Událostně řízené programování a GUI UŘP se typicky používá při implementaci GUI. Událostně řízené prog. je občas zaměňováno s objektovým (zpravidla je využíváno objektů, ale třeba GLUT není OO). Nástrojem pro změnu stavu není volání metody, ale událost. V Qt jsou události označovány signály a jsou zpracovány handlery signálů sloty.
Událostně řízené programování Strana 6 / 38 Signály a sloty Signál je nástroj, jak dá entita zbytku aplikace najevo, že nastala určitá situace (nahrazuje přímé zavolání metody určitého objektu). Slot je speciální metoda, která má schopnost signál zachytit a zareagovat na něj. Aby mohl být slot vyvolán musí být vytvořena instance dané třídy a musí být pomocí příkazu connect na signál napojen. connect můžete napsat přímo, nebo ho zavolá Qt Creator (po kliknutí na příslušnou volbu).
Událostně řízené programování Strana 7 / 38 Signály a sloty
Knihovna Qt Strana 8 / 38 Obsah přednášky 1 Obsah přednášky 2 Událostně řízené programování 3 Knihovna Qt 4 QML 5 Vlastnosti elementů QML 6 Události 7 Vlastní element 8 Skupiny elementů 9 Závěr
Knihovna Qt Strana 9 / 38 Knihovny pro tvorbu GUI WxWidgets (C++, podporováno více jazyků, Windows/UNIXy) Cocoa (napsáno a podporováno Objective C, MacOS X) Qt (napsáno v C++, podporována řada jazyků, Windows/UNIXy) GTK+ (napsáno v C, podporována řada jazyků, Windows/UNIXy)
Knihovna Qt Strana 10 / 38 Knihovna Qt Multiplatformní knihovna pro tvorbu GUI. Podpora řady jazyků (C++, Python, Java... ). Komplexní funkcionalita (od XML po OpenGL). Součástí frameworku jsou i vývojové aplikace (Qt Creator). Zaměření i na mobilní platformy. Komerční i free licence. Systematický vývoj a rozumná dokumentace (a komunita).
Knihovna Qt Strana 11 / 38 Qt5 Essentials Qt Core Qt Network Qt OpenGL Qt Qml Qt Quick Qt Webkit Qt Multimedia Qt SQL Qt Location Qt Sensors Qt Service Framework Qt Publish & Subscribe Qt System Information
Knihovna Qt Strana 12 / 38 Qt5 Add-on modules Qt Widgets Qt SVG Qt Xml Qt Xml Patterns Qt Script, Script Tools Qt Concurrent Qt Print Support Qt Help Qt UiTools Qt Designer Qt ActiveQt (Windows) Qt Multimedia Widgets Qt 3D...
QML Strana 13 / 38 Obsah přednášky 1 Obsah přednášky 2 Událostně řízené programování 3 Knihovna Qt 4 QML 5 Vlastnosti elementů QML 6 Události 7 Vlastní element 8 Skupiny elementů 9 Závěr
QML Strana 14 / 38 QML Modelovací jazyk založený na JavaScriptu do design uživatelských rozhraní (i aplikační logiku) Obsahuje moduly pro práci s XML, WebKitem aj. Nahrazuje (doplňuje) vytváření GUI pomocí klasických widgetů. Umožňuje tvorbu multiplatformních GUI (Windows, Linux, OS X, Android, ios, Windows Phone... ) Spolupracuje (bezešvě) s C++ a JavaScriptem. Obsahuje dva základní moduly: základní objekty jako obdélník, tabulka atp. pokročilé objekty přímo pro GUI (tlačítko).
QML Strana 15 / 38 Základní aplikace Příklad se základním elementem Window (okno aplikace) a textem. 1 import QtQuick 2.2 2 import QtQuick. Window 2.1 3 4 Window { 5 visible : true 6 width : 360 7 height : 360 8 9 Text { 10 text : " Hello World " 11 anchors. centerin : parent 12 } 13 }
QML Strana 16 / 38 Základní elementy Element Význam Item Obecný element (obálka) Window Okno aplikace Rectangle Obdélník Text Textový popisek (text obsahuje popis ) Image Obrázek (source obsahuje jméno souboru)
Vlastnosti elementů QML Strana 17 / 38 Obsah přednášky 1 Obsah přednášky 2 Událostně řízené programování 3 Knihovna Qt 4 QML 5 Vlastnosti elementů QML 6 Události 7 Vlastní element 8 Skupiny elementů 9 Závěr
Vlastnosti elementů QML Strana 18 / 38 Vlastnosti elementů Každý prvek má řadu vlastností implicitně (výška, pozice atp.). Lze si definovat i nové vlastnosti (properties). Vlastnosti mají definované typy (existuje typová kontrola). Jednotlivé vlastnosti bud deklarujeme na samostatné řádky nebo mezi ně dáme středník. 1 Window { 2 visible : true 3 width : 360; height : 360
Vlastnosti elementů QML Strana 19 / 38 Složené vlastnosti Některé vlastnosti jsou složené z více položek. Ty pak lze definovat dvěma způsoby: 1 Text { 2 text : " Hello World " 3 anchors. centerin : parent 4 font. bold : true 5 font. pixelsize : 30 6 } nebo: 1 Text { 2 text : " Hello World " 3 anchors. centerin : parent 4 font { bold : true ; pixelsize : 30} 5 }
Vlastnosti elementů QML Strana 20 / 38 Velikost a pozice Velikost je často stanovena pomocí width a height. Pozici lze definovat absolutně (x a y) nebo relativně (anchors). Pozice je vždy určena v rámci nadřazeného objektu (elementy tvoří hierarchii). Příklad absolutní pozice: 1 Text { 2 text : " Hello World " 3 x: 50; y: 50 4 } Příklad vycentrování elementu do nadřazeného: 1 Text { 2 text : " Hello World " 3 anchors. centerin : parent 4 }
Vlastnosti elementů QML Strana 21 / 38 QML Další příklad ukazuje možnost samostatného nastavení horizontálního a vertikálního zarovnání. 1 Text { 2 text : " Hello World " 3 anchors. horizontalcenter : parent. horizontalcenter 4 anchors. verticalcenter : parent. verticalcenter 5 anchors. horizontalcenteroffset : 100 6 anchors. verticalcenteroffset : 100 7 } Existuje celá řada dalších vlastností jako jsou okraje atp.
Události Strana 22 / 38 Obsah přednášky 1 Obsah přednášky 2 Událostně řízené programování 3 Knihovna Qt 4 QML 5 Vlastnosti elementů QML 6 Události 7 Vlastní element 8 Skupiny elementů 9 Závěr
Události Strana 23 / 38 Identifikace elementů Každý element může mít své unikátní id. Prostřednictvím tohoto id se na něj lze odkázat z jakéhokoliv QML souboru projektu! 1 Window { 2 id: mywindow 3 visible : true 4 width : 360 5 height : 360 6...
Události Strana 24 / 38 Změna stavu elementu Objekty umí reagovat na události myši a dotykové obrazovky/touchpadu. Musíme pouze definovat oblast, která má na událost reagovat a jak se má změna projevit. Změna chování/vzhledu elementu se obvykle řeší pomocí stavu. Ty se ukládají do pole states. Každý element má výchozí bezejmený stav. 1 states : [ 2 State { 3 name : " Hidden " 4 PropertyChanges { 5 target : tileimage 6 opacity : 0.0 7 } 8 }, 9...
Události Strana 25 / 38 Rychlost změny stavu Změna se může projevit okamžitě (výchozí) nebo v průběhu časového intervalu. Pro změnu číselných hodnot používáme třídu NumberAnimation. Příklad změny rychlosti změny vlastnosti opacity. 1 transitions : Transition { 2 NumberAnimation { 3 properties : " opacity " 4 duration : 300 5 } 6 }
Události Strana 26 / 38 Příklad definice reakce na myš Příklad změny stavu po kliknutí na element. 1 MouseArea { 2 // oblast reakce bude stejne velka jako predek 3 anchors. fill : parent 4 // reagujeme na udalost kliknuti 5 onclicked : { 6 // zmenime stav ementu s id minetile na " Hidden " 7 minetile. state = " Hidden " 8 } 9 }
Události Strana 27 / 38 Příklad definice reakce na myš (2) Příklad změny stavu při najetí nad element a jeho opuštění 1 MouseArea { 2 anchors. fill : parent 3 4 // aktivuj zachytavani prejezdu mysi 5 hoverenabled : true 6 7 // pri vstupu zmen stav na " Light " 8 onentered : { 9 gamebutton. state = " Light " 10 } 11 12 // pri vyjeti se vrat do vychoziho stavu 13 onexited : { 14 gamebutton. state = "" 15 }
Události Strana 28 / 38 Příklad pinch&zoom gesta Příklad změny stavu při najetí nad element a jeho opuštění 1 PinchArea { 2 // jakou oblast vyplnuji 3 anchors. fill : parent 4 // ktery objekt se ma menit 5 pinch. target : newsframe 6 // jake jsou omezeni otaceni a zmeny velikosti 7 pinch. minimumrotation : -360 8 pinch. maximumrotation : 360 9 pinch. minimumscale : 0.1 10 pinch. maximumscale : 10 11...
Události Strana 29 / 38 Příklad pinch&zoom gesta (2) Dále můžeme definovat reakci na počátek, konec a změnu gesta. Třeba opět změnou stavu nebo triviální přímou změnou vlastnosti. 1 PinchArea { 2... 3 onpinchstarted : newsframe. border. color = " white "; 4 onpinchupdated : newsframe. border. color = " gray "; 5 onpinchfinished : newsframe. border. color = " black "; 6 }
Vlastní element Strana 30 / 38 Obsah přednášky 1 Obsah přednášky 2 Událostně řízené programování 3 Knihovna Qt 4 QML 5 Vlastnosti elementů QML 6 Události 7 Vlastní element 8 Skupiny elementů 9 Závěr
Vlastní element Strana 31 / 38 Tvorba vlastního elementu Lze definovat vlastní QML ement. Uložíte jej do samostatného QML souboru, který pojmenujete tak, jak se má jmenovat element v kódu. Mimo vlastností implictně se nacházejících u použitých elementů (width u Rectangle atp.), můžete definovat vždy i své vlastnosti: 1 Rectangle { 2 property int pocetzakazniku : 0 3 width : 300 4 height : 600 5... 6 }
Vlastní element Strana 32 / 38 Změna atributu a alias Vlastnosti, které jste ve vlastním elementu inicializovali na určitou hodnotu, můžete překrýt při jeho vytváření: 1 MyButton { 2 width : 200 3 popis : " Konec " 4... 5 } Pokud máte do sebe zanořené elementy, používejte pro změnu vnořených vlastností alias. Uvnitř MyButton: 1 Rectangle { 2 property alias popis : texttlacitka. text 3 4 Text { 5 id: texttlacitka 6 text : " Konec "
Skupiny elementů Strana 33 / 38 Obsah přednášky 1 Obsah přednášky 2 Událostně řízené programování 3 Knihovna Qt 4 QML 5 Vlastnosti elementů QML 6 Události 7 Vlastní element 8 Skupiny elementů 9 Závěr
Skupiny elementů Strana 34 / 38 Opakovače 1 Row { Opakovač umožňuje udělat cyklus na elementy. Opakovač vždy obsahuje model a delegáta. Model musí generovat elementy (čísla, objekty). Delegát je musí zpracovat. 2 Repeater { 3 model : 10 4 Rectangle { width : 20; height : 20; color : " red "} 5 } 6 } 7 8 Column { 9 Repeater { 10 model : 10 11 Text { text : " I m item " + index } 12 }
Skupiny elementů Strana 35 / 38 Opakovače (2) Modelem i delegátem mohou být vlastní objekty 1 Repeater { 2 // trida, ktera mi generuje elementy s novinkami 3 model : XmlFeeder { 4 5 } 6 // trida, ktera novinky vizualizuje jako dlazdice 7 delegate : NewsStory { 8 id: frame 9 } 10 }
Skupiny elementů Strana 36 / 38 Tabulky 1 Grid { Elementy lze skládat do řádků (Row) a sloupců (Column). Ty lze do sebe zanořovat. Prvky se automaticky skládají pod/vedle sebe. Také je lze skládat do tabulky (Grid). Prvky se pak skládají pořádcích. 2 rows : 5 // pocet radku 3 columns : 5 // pocet sloupcu 4 spacing : 10 // odsazeni 5...
Závěr Strana 37 / 38 Obsah přednášky 1 Obsah přednášky 2 Událostně řízené programování 3 Knihovna Qt 4 QML 5 Vlastnosti elementů QML 6 Události 7 Vlastní element 8 Skupiny elementů 9 Závěr
Závěr Strana 38 / 38 Shrnutí Naučili jsme se deklarovat GUI pomocí QML. Jak vytvořit element a nadefinovat mu vlastnosti. Jak reagovat na základní události. Jak propojit GUI s OpenGL scénou.