25. listopadu 2014, Brno ´ Pˇripravil: David Prochazka
Qt a QML Programovac´ı jazyk C++
ˇ Obsah pˇredna´ sky
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ´ ı Udalostn eˇ ˇr´ızene´ programovan´
3
Knihovna Qt
4
QML
5
Vlastnosti elementu˚ QML
6
´ Udalosti
7
Vlastn´ı element
8
Skupiny elementu˚
9
´ er ˇ Zav
Strana 2 / 38
ˇ Obsah pˇredna´ sky
Strana 3 / 38
ˇ Obsah pˇredna´ sky Dnes se nauˇc´ıme vytvoˇrit graficke´ uˇzivatelske´ rozhran´ı pomoc´ı knihovny Qt a jazyka QML.
´ ´ ı Udalostn eˇ rˇ´ızene´ programovan´
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ´ ı Udalostn eˇ ˇr´ızene´ programovan´
3
Knihovna Qt
4
QML
5
Vlastnosti elementu˚ QML
6
´ Udalosti
7
Vlastn´ı element
8
Skupiny elementu˚
9
´ er ˇ Zav
Strana 4 / 38
´ ´ ı Udalostn eˇ rˇ´ızene´ programovan´
Strana 5 / 38
´ ´ ı a GUI Udalostn eˇ rˇ´ızene´ programovan´ ˇ se typicky pouˇz´ıva´ pˇri implementaci GUI. URP ´ ˇ ano ´ s objektov´ym Udalostn eˇ rˇ´ızene´ prog. je obˇcas zameˇ nov ´ (zpravidla je vyuˇz´ıvano objektu, ˚ ale tˇreba GLUT nen´ı OO). ´ ˇ stavu nen´ı volan´ ´ ı metody, ale Nastrojem pro zmenu ´ udalost. ´ ´ signaly ´ a jsou zpracovany ´ V Qt jsou udalosti oznaˇcovany ´ u˚ – sloty. handlery signal
´ ´ ı Udalostn eˇ rˇ´ızene´ programovan´
Strana 6 / 38
´ a sloty Signaly ´ je nastroj, ´ Signal jak da´ entita zbytku aplikace najevo, zˇ e ´ ı metody nastala urˇcita´ situace (nahrazuje pˇr´ıme´ zavolan´ ´ urˇciteho objektu). ´ ı metoda, ktera´ ma´ schopnost signal ´ Slot je specialn´ ˇ zachytit a zareagovat na nej. ´ mus´ı b´yt vytvoˇrena instance Aby mohl b´yt slot vyvolan ´ dane´ tˇr´ıdy a mus´ı b´yt pomoc´ı pˇr´ıkazu connect na signal napojen. connect muˇ ˚ zete napsat pˇr´ımo, nebo ho zavola´ Qt Creator (po kliknut´ı na pˇr´ısluˇsnou volbu).
´ ´ ı Udalostn eˇ rˇ´ızene´ programovan´
´ a sloty Signaly
Strana 7 / 38
Knihovna Qt
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ´ ı Udalostn eˇ ˇr´ızene´ programovan´
3
Knihovna Qt
4
QML
5
Vlastnosti elementu˚ QML
6
´ Udalosti
7
Vlastn´ı element
8
Skupiny elementu˚
9
´ er ˇ Zav
Strana 8 / 38
Knihovna Qt
Strana 9 / 38
Knihovny pro tvorbu GUI ´ WxWidgets (C++, podporovano v´ıce jazyku, ˚ Windows/UNIXy) ´ ´ Cocoa (napsano a podporovano Objective C, MacOS X) ´ ´ ˇrada jazyku, Qt (napsano v C++, podporovana ˚ Windows/UNIXy) ´ ´ ˇrada jazyku, GTK+ (napsano v C, podporovana ˚ Windows/UNIXy)
Knihovna Qt
Strana 10 / 38
Knihovna Qt Multiplatformn´ı knihovna pro tvorbu GUI. Podpora rˇady jazyku˚ (C++, Python, Java. . . ). Komplexn´ı funkcionalita (od XML po OpenGL). ´ ı frameworku jsou i v´yvojove´ aplikace (Qt Creator). Souˇcast´ ˇ ren´ı i na mobiln´ı platformy. Zameˇ Komerˇcn´ı i free licence. Systematick´y v´yvoj a rozumna´ 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 Help
Qt SVG
Qt UiTools
Qt Xml
Qt Designer
Qt Xml Patterns
Qt ActiveQt (Windows)
Qt Script, Script Tools
Qt Multimedia Widgets
Qt Concurrent
Qt 3D
Qt Print Support
...
QML
Strana 13 / 38
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ´ ı Udalostn eˇ ˇr´ızene´ programovan´
3
Knihovna Qt
4
QML
5
Vlastnosti elementu˚ QML
6
´ Udalosti
7
Vlastn´ı element
8
Skupiny elementu˚
9
´ er ˇ Zav
QML
Strana 14 / 38
QML Modelovac´ı jazyk zaloˇzen´y na JavaScriptu do design uˇzivatelsk´ych rozhran´ı (i aplikaˇcn´ı logiku) ´ s XML, WebKitem aj. Obsahuje moduly pro praci ˇ ´ ren´ı GUI pomoc´ı klasick´ych Nahrazuje (doplnuje) vytvaˇ widgetu. ˚ ˇ Umoˇznuje tvorbu multiplatformn´ıch GUI (Windows, Linux, OS X, Android, iOS, Windows Phone. . . ) ˇ s C++ a JavaScriptem. Spolupracuje (bezeˇsve) ´ Obsahuje dva zakladn´ ı moduly: ´ ´ ık, tabulka atp. zakladn´ ı objekty jako obdeln´ pokroˇcile´ objekty pˇr´ımo pro GUI (tlaˇc´ıtko).
QML
Strana 15 / 38
´ Zakladn´ ı aplikace ´ Pˇr´ıklad se zakladn´ ım elementem Window (okno aplikace) a textem. 1 2
import QtQuick 2.2 import QtQuick . Window 2.1
3 4 5 6 7
Window { visible : true width : 360 height : 360
8
Text { text : " Hello World " anchors . centerIn : parent }
9 10 11 12 13
}
QML
Strana 16 / 38
´ Zakladn´ ı elementy Element Item Window Rectangle Text Image
Vyznam ´ ´ Obecn´y element (obalka) Okno aplikace ´ ık Obdeln´ Textov´y popisek (text obsahuje popis ) ´ ´ Obrazek (source obsahuje jmeno souboru)
Vlastnosti elementu˚ QML
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ´ ı Udalostn eˇ ˇr´ızene´ programovan´
3
Knihovna Qt
4
QML
5
Vlastnosti elementu˚ QML
6
´ Udalosti
7
Vlastn´ı element
8
Skupiny elementu˚
9
´ er ˇ Zav
Strana 17 / 38
Vlastnosti elementu˚ QML
Strana 18 / 38
Vlastnosti elementu˚ Kaˇzd´y prvek ma´ ˇradu vlastnost´ı implicitneˇ (v´ysˇ ka, pozice atp.). Lze si definovat i nove´ vlastnosti (properties). Vlastnosti maj´ı definovane´ typy (existuje typova´ kontrola). Jednotlive´ vlastnosti bud’ deklarujeme na samostatne´ ˇradky ´ ´ nebo mezi neˇ dame stˇredn´ık. 1 2 3
Window { visible : true width : 360; height : 360
Vlastnosti elementu˚ QML
Strana 19 / 38
Sloˇzene´ vlastnosti ˇ Nekter e´ vlastnosti jsou sloˇzene´ z v´ıce poloˇzek. Ty pak lze ˇ definovat dvema zpusoby: ˚ 1 2 3 4 5 6
Text { text : " Hello World " anchors . centerIn : parent font . bold : true font . pixelSize : 30 }
nebo: 1 2 3 4 5
Text { text : " Hello World " anchors . centerIn : parent font { bold : true ; pixelSize : 30} }
Vlastnosti elementu˚ QML
Strana 20 / 38
Velikost a pozice Velikost je cˇ asto stanovena pomoc´ı width a height. Pozici lze definovat absolutneˇ (x a y) nebo relativneˇ (anchors). ´ ´ Pozice je vˇzdy urˇcena v ramci nadˇrazeneho objektu (elementy tvoˇr´ı hierarchii). Pˇr´ıklad absolutn´ı pozice: 1 2 3 4
Text { text : " Hello World " x : 50; y : 50 }
´ ı elementu do nadˇrazeneho: ´ Pˇr´ıklad vycentrovan´ 1 2 3 4
Text { text : " Hello World " anchors . centerIn : parent }
Vlastnosti elementu˚ QML
Strana 21 / 38
QML ´ Dalˇs´ı pˇr´ıklad ukazuje moˇznost samostatneho nastaven´ı ´ ıho a vertikaln´ ´ ıho zarovnan´ ´ ı. horizontaln´ 1 2 3 4 5 6 7
Text { text : " Hello World " anchors . horizontalCenter : parent . horizontalCenter anchors . verticalCenter : parent . verticalCenter anchors . h o r i z o n t a l C e n t e r O f f s e t : 100 anchors . v e r t i c a l C e n t e r O f f s e t : 100 }
Existuje cela´ ˇrada dalˇs´ıch vlastnost´ı jako jsou okraje atp.
´ Udalosti
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ´ ı Udalostn eˇ ˇr´ızene´ programovan´
3
Knihovna Qt
4
QML
5
Vlastnosti elementu˚ QML
6
´ Udalosti
7
Vlastn´ı element
8
Skupiny elementu˚
9
´ er ˇ Zav
Strana 22 / 38
´ Udalosti
Identifikace elementu˚ ´ ı id. Kaˇzd´y element muˇ ˚ ze m´ıt sve´ unikatn´ ˇ lze odkazat ´ Prostˇrednictv´ım tohoto id se na nej z ´ jakehokoliv QML souboru projektu! 1 2 3 4 5 6
Window { id : myWindow visible : true width : 360 height : 360 ...
Strana 23 / 38
´ Udalosti
Strana 24 / 38
ˇ Zmena stavu elementu ´ Objekty um´ı reagovat na udalosti myˇsi a dotykove´ obrazovky/touchpadu. ´ Mus´ıme pouze definovat oblast, ktera´ ma´ na udalost ˇ reagovat a jak se ma´ zmena projevit. ˇ ´ ı/vzhledu elementu se obvykle ˇreˇs´ı pomoc´ı Zmena chovan´ ´ ı do pole states. stavu. Ty se ukladaj´ Kaˇzd´y element ma´ v´ychoz´ı bezejmen´y stav. 1 2 3 4 5 6 7 8 9
states : [ State { name : " Hidden " PropertyChanges { target : tileImage opacity : 0.0 } }, ...
´ Udalosti
Strana 25 / 38
ˇ Rychlost zmeny stavu ˇ Zmena se muˇ ˚ ze projevit okamˇziteˇ (v´ychoz´ı) nebo v ˇ ´ prub cˇ asoveho intervalu. ˚ ehu ˇ cˇ ´ıseln´ych hodnot pouˇz´ıvame ´ Pro zmenu tˇr´ıdu NumberAnimation. ˇ rychlosti zmeny ˇ vlastnosti opacity. Pˇr´ıklad zmeny 1 2 3 4 5 6
transitions : Transition { NumberAnimation { properties : " opacity " duration : 300 } }
´ Udalosti
Strana 26 / 38
Pˇr´ıklad definice reakce na mysˇ ˇ stavu po kliknut´ı na element. Pˇr´ıklad zmeny 1 2 3 4 5 6 7 8 9
MouseArea { // oblast reakce bude stejne velka jako predek anchors . fill : parent // reagujeme na udalost kliknuti onClicked : { // zmenime stav ementu s id mineTile na " Hidden " mineTile . state = " Hidden " } }
´ Udalosti
Strana 27 / 38
Pˇr´ıklad definice reakce na mysˇ (2) ˇ stavu pˇri najet´ı nad element a jeho opuˇsten´ ˇ ı Pˇr´ıklad zmeny 1 2
MouseArea { anchors . fill : parent
3 4 5
// aktivuj zachytavani prejezdu mysi hoverEnabled : true
6 7 8 9 10
// pri vstupu zmen stav na " Light " onEntered : { gameButton . state = " Light " }
11 12 13 14 15
// pri vyjeti se vrat do vychoziho stavu onExited : { gameButton . state = " " }
´ Udalosti
Strana 28 / 38
Pˇr´ıklad ”pinch&zoom”gesta ˇ stavu pˇri najet´ı nad element a jeho opuˇsten´ ˇ ı Pˇr´ıklad zmeny 1 2 3 4 5 6 7 8 9 10 11
PinchArea { // jakou oblast vyplnuji anchors . fill : parent // ktery objekt se ma menit pinch . target : newsFrame // jake jsou omezeni otaceni a zmeny velikosti pinch . minimumRotation : -360 pinch . maximumRotation : 360 pinch . minimumScale : 0.1 pinch . maximumScale : 10 ...
´ Udalosti
Strana 29 / 38
Pˇr´ıklad ”pinch&zoom”gesta (2) ´ muˇ ´ ˇ Dale konec a zmenu ˚ zeme definovat reakci na poˇcatek, ˇ zmenou ˇ ´ ı pˇr´ımou zmenou ˇ gesta. Tˇreba opet stavu nebo trivialn´ vlastnosti. 1 2 3 4 5 6
PinchArea { ... onPinchStarted : newsFrame . border . color = " white " ; onPinchUpdated : newsFrame . border . color = " gray " ; onPinchFinished : newsFrame . border . color = " black " ; }
Vlastn´ı element
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ´ ı Udalostn eˇ ˇr´ızene´ programovan´
3
Knihovna Qt
4
QML
5
Vlastnosti elementu˚ QML
6
´ Udalosti
7
Vlastn´ı element
8
Skupiny elementu˚
9
´ er ˇ Zav
Strana 30 / 38
Vlastn´ı element
Strana 31 / 38
Tvorba vlastn´ıho elementu Lze definovat vlastn´ı QML ement. ´ Uloˇz´ıte jej do samostatneho QML souboru, kter´y ´ pojmenujete tak, jak se ma´ jmenovat element v kodu. ´ ıc´ıch u pouˇzit´ych Mimo vlastnost´ı implictneˇ se nachazej´ elementu˚ (width u Rectangle atp.), muˇ ˚ zete definovat vˇzdy i sve´ vlastnosti: 1 2 3 4 5 6
Rectangle { property int pocetZakazniku : 0 width : 300 height : 600 ... }
Vlastn´ı element
Strana 32 / 38
ˇ Zmena atributu a alias Vlastnosti, ktere´ jste ve vlastn´ım elementu inicializovali na ´ ren´ı: urˇcitou hodnotu, muˇ ˚ zete pˇrekr´yt pˇri jeho vytvaˇ 1 2 3 4 5
MyButton { width : 200 popis : " Konec " ... }
´ do sebe zanoˇrene´ elementy, pouˇz´ıvejte pro Pokud mate ˇ vnoˇren´ych vlastnost´ı alias. Uvnitˇr MyButton: zmenu 1 2
Rectangle { property alias popis : textTlacitka . text
3 4 5 6
Text { id : textTlacitka text : " Konec "
Skupiny elementu˚
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ´ ı Udalostn eˇ ˇr´ızene´ programovan´
3
Knihovna Qt
4
QML
5
Vlastnosti elementu˚ QML
6
´ Udalosti
7
Vlastn´ı element
8
Skupiny elementu˚
9
´ er ˇ Zav
Strana 33 / 38
Skupiny elementu˚
Strana 34 / 38
ˇ Opakovace ˇ ˇ Opakovaˇc umoˇznuje udelat cyklus“ na elementy. ” ´ Opakovaˇc vˇzdy obsahuje model a delegata. Model mus´ı generovat elementy (ˇc´ısla, objekty). ´ je mus´ı zpracovat. Delegat 1 2 3 4 5 6
Row { Repeater { model : 10 Rectangle { width : 20; height : 20; color : " red " } } }
7 8 9 10 11 12
Column { Repeater { model : 10 Text { text : " I ’m item " + index } }
Skupiny elementu˚
Strana 35 / 38
ˇ (2) Opakovace ´ Modelem i delegatem mohou b´yt vlastn´ı objekty 1 2 3
Repeater { // trida , ktera mi generuje elementy s novinkami model : XmlFeeder {
4
} // trida , ktera novinky vizualizuje jako dlazdice delegate : NewsStory { id : frame }
5 6 7 8 9 10
}
Skupiny elementu˚
Strana 36 / 38
Tabulky ´ ´ u˚ (Row) a sloupcu˚ (Column). Elementy lze skladat do ˇradk Ty lze do sebe zanoˇrovat. ´ ı pod/vedle sebe. Prvky se automaticky skladaj´ ´ Take´ je lze skladat do tabulky (Grid). ´ ı poˇradc´ ´ ıch. Prvky se pak skladaj´ 1 2 3 4 5
Grid { rows : 5 // pocet radku columns : 5 // pocet sloupcu spacing : 10 // odsazeni ...
´ er ˇ Zav
Strana 37 / 38
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ´ ı Udalostn eˇ ˇr´ızene´ programovan´
3
Knihovna Qt
4
QML
5
Vlastnosti elementu˚ QML
6
´ Udalosti
7
Vlastn´ı element
8
Skupiny elementu˚
9
´ er ˇ Zav
´ er ˇ Zav
Strana 38 / 38
Shrnut´ı Nauˇcili jsme se deklarovat GUI pomoc´ı QML. Jak vytvoˇrit element a nadefinovat mu vlastnosti. ´ ´ Jak reagovat na zakladn´ ı udalosti. ´ Jak propojit GUI s OpenGL scenou.
