introduction au qml - kdab€¦ · objectifs de cette présentation comprendre la philosophie de...

p.1

IntroductionauQMLetàlacréationdecomposantsCapitoleduLibre2018

PresentedbyFranckArrecot

p.2

Objectifsdecetteprésentation

ComprendrelaphilosophiedeQML

DécouvrirlasyntaxeQML

ComprendrelesconceptsQML

Appréhenderlaconceptiondecomposants

p.3

IntroductionauQML

p.4

QtQuicketQML

QtQuickestunmoduleQt

QMLlangagedéclaratifinstanciantlesobjetsQtQuick

Créationrapided'interfaceréactivetypéemoble

BackendopenGLutiledansuncontexteembarqué

p.5

HelloworldenQML:pointd'entréeC++

UneapplicationQMLresteunprogrammeC++1 #include<QGuiApplication>2 #include<QQuickView>34 intmain(intargc,char*argv[])5 {6 QGuiApplicationapp(argc,argv);78 QQuickViewview;9 view.setSource(QUrl("main.qml"));

10 view.show();1112 returnapp.exec();13 }

p.6

HelloworldenQML:pointd'entréeQML

Lefichiermain.qmlracinedelascène

LangagedéclaratiftypéJSON:clé-valeur

Relationd'imbricationparent/enfant

1 importQtQuick2.923 Rectangle{4 width:4005 height:2006 color:"lightblue"7 }

p.7

Exempled'unmainQMLsimple

ConceptsQML:Elément,Proprieté,Type,Valeur

1 importQtQuick2.923 Rectangle{4 width:4005 height:2006 x:0;y:07 color:"lightblue"8 }

p.8

Exempled'unmainQMLavecimbrication

HelloWorldRelationdeparenté

Propriétéspéciale:binding

1 importQtQuick2.923 Rectangle{4 width:4005 height:2006 color:"lightblue"78 Rectangle{9 width:150

10 height:width11 color:"lightgreen"1213 Text{14 text:"HelloWorld"15 }16 }17 }

p.9

Exempled'unmainQMLavecimbrication(cont'd)

Proprietéidpourréférencerunélément

Bindinginter-éléments

1 importQtQuick2.923 Rectangle{4 id:root5 width:4006 height:2007 color:"lightblue"89 Rectangle{

10 y:1011 height:10012 width:root.width13 color:"lightgreen"14 }15 }

p.10

Utilisationdumot-cléparent

1 importQtQuick2.923 Rectangle{4 //id:root5 width:4006 height:2007 color:"lightblue"89 Rectangle{

10 y:1011 height:10012 width:parent.width13 color:"lightgreen"14 }15 }

p.11

Exemplederéévaluationd'unbinding

1 importQtQuick2.923 Rectangle{4 width:2505 height:2506 color:"lightblue"78 TextInput{9 id:textInput

10 x:50;y:10011 text:"Textinput"12 font.pixelSize:181314 Rectangle{15 y:textInput.height16 width:textInput.width17 height:1218 color:"red"19 }20 }21 }

p.12

DifférentstypesdepropriétésQML

Propriétésstandardsauxquellesonattribuedesvaleurs:1 Text{2 text:"Helloworld"3 height:504 }

Propriétésd'identitédonnantunenomàunélément:1 Text{2 id:label3 text:"Helloworld"4 }

p.13

DifférentstypesdepropriétésQML(cont'd)

Propriétésgroupéesquiregroupentplusieurspropriétésayantunlien:1 Text{2 font.family:"Helvetica"3 font.pixelSize:244 }

Propriétéspersonnaliséesquipeuventêtreajoutéesàélément:1 Rectangle{2 propertyrealmass:100.03 }45 Circle{6 propertyrealradius:50.07 }

Propriétésattachéesquipeuventêtreattachéessurunélément

p.14

Résumé

ModuleQtQuickvslanguageQML

Organisationd'unprogrammeQML

Découvertedelasyntaxeetdesconceptsdebases

Aspectdynamiquedubinding

Notiond'arborescenceetdeparentée

p.15

Conséquencesdelarelationdeparentée

Systèmedecoordonnées

Prioritéd'affichage

1 importQtQuick2.92 Rectangle{3 width:6004 height:4005 color:"lightblue"67 Rectangle{8 x:1009 y:100

10 width:20011 height:20012 color:"red"13 }1415 Rectangle{16 x:10017 y:10018 width:20019 height:20020 color:"yellow"21 }22 }

p.16

Propriétéd'opacité

Systemedecoordonnées

Prioritéd'affichage

1 importQtQuick2.92 Rectangle{3 width:6004 height:4005 color:"lightblue"67 Rectangle{8 x:1009 y:100

10 width:20011 height:20012 color:"red"13 }1415 Rectangle{16 x:12017 y:12018 width:20019 height:20020 color:"yellow"21 opacity:0.522 }23 }

p.17

ClippingenQML

1 importQtQuick2.923 Rectangle{4 width:6005 height:4006 color:"lightblue"78 Rectangle{9 x:100

10 y:10011 width:65012 height:20013 color:"yellow"14 opacity:0.515 }16 }

p.18

Propriétéclip

1 importQtQuick2.92 Rectangle{3 width:6004 height:4005 color:"lightblue"6 clip:true78 Rectangle{9 x:100

10 y:10011 width:65012 height:20013 color:"yellow"14 opacity:0.515 }16 }

p.19

Systemed'Ancrage

Mechanismepourpositionnerlesélémentslesunsparrapportauxautres

Lesancressontdesbindingsquiseréévaluentdynamiquement

Deuxtypesd'ancresLignesd'ancrage(left,topetc...).Ancrageutilitaire(centerIn,fill).

p.20

Ligned'Ancrage

Définitdeslignesimaginairessurlesbordsoulecentred'unélément

Uneligned'ancragenepeutêtrealignéequ'avecuneautreligned'ancragecompatible

p.21

Ligned'Ancrage-exemple

1 importQtQuick2.023 Rectangle{4 id:background5 width:300;height:1006 color:"lightblue"78 Rectangle{9 color:"green"

10 y:2511 height:50;width:5012 anchors.right:background.right13 }14 }

Contraintedepositiond'unélémentavecunautre(parentoufrère)

Référencedirecteauxlignesd'ancrage:Onutilisebackground.rightetpasbackground.anchors.right

p.22

Ligned'Ancrage-exemple(cont'd)


10 y:25//overwrittenbythetopanchor11 height:50;width:5012 anchors.right:background.right13 anchors.top:background.top14 }15 }

p.23

Ligned'Ancrage-exemple(cont'd)


10 height:5011 anchors.top:background.top1213 anchors.left:background.left14 anchors.right:background.right15 }16 }

Contraintlapositionetlatailled'unélémentparrapportàunautre

LesancrespeuventêtreutiliséesenparrallèledelatailleUtiliserwidthetlesancresleft/rightdonnelaprioritéauxancres

p.24

Marges

WritingWriting

1 importQtQuick2.023 Rectangle{4 id:bg5 width:400;height:2006 color:"lightblue"7 8 Image{id:book;source:"../images/book.svg"9 anchors.left:bg.left

10 anchors.leftMargin:bg.width/1611 anchors.verticalCenter:bg.verticalCenter}1213 Text{text:"Writing";font.pixelSize:3214 anchors.left:book.right15 anchors.leftMargin:3216 anchors.baseline:book.verticalCenter}17 }

p.25

Ancresutilitaires

DeuxancresutilitairescenterInpourcentrerunélémentàl'interieurd'unautrefillpourqu'unélémentenremplisseunautre

Lesancresutilitairesprennentcommevaleurl'idd'unélémentOnnepeutfaireréférencequ'auxiddesélémentsparentetfrèresPossibilitéd'utiliserlemot-cléparent

p.26

Ancresutilitaires-exemple

1 importQtQuick2.023 Rectangle{4 id:rectangle15 width:400;height:4006 color:"lightblue"78 Rectangle{9 color:"green"

10 width:50;height:5011 anchors.centerIn:rectangle112 }13 }

p.27

Tourd'horizondesélémentsQtQuick

AssemblagedebriquesQMLdebase

Découverted'élémentsQtQuickdebase

p.28

Typedebases

1 importQtQuick2.923 Rectangle{45 width:6006 height:4007 color:"lightblue"89 QtObject{

10 id:toto11 objectName:"toto"12 }1314 Item{15 x:0;y:016 width:100;height:10017 opacity:118 }19 }

p.29

Gestiondeschampstexte

Hello1 importQtQuick2.923 Rectangle{4 width:500;height:100;5 color:"lightblue"67 Text{8 text:"Hello"9 font.pixelSize:16

10 }1112 TextInput{13 text:"Clickhereandtype"14 font.pixelSize:1615 }1617 TextEdit{18 text:"Typemultiline\ntext"19 font.pixelSize:1620 }21 }

p.30

Gestiondesimages

1 Image{2 source:"images/rocket.png"3 width:150;smooth:true4 fillMode:Image.PreserveAspectFit5 }67 AnimatedImage{8 width:200;height:2009 source:"images/image-animated.gif"

10 }1112 Rectangle{13 width:150;height:15014 gradient:Gradient{15 GradientStop{position:0.0;color:"green"}16 GradientStop{position:1.0;color:"blue"}17 }18 }

p.31

Résumé

Systèmedecoordonées

Ordred'affichagedeséléments

Utilisationdesancrespourplacerseséléments

DécouvertedesdiversélémentsQtQuick

p.32

Gestiondessignaux:MouseArea

Pressme

Clickme

1 Rectangle{2 width:400;height:300;3 color:"lightblue"45 Text{6 text:"Pressme"78 MouseArea{9 anchors.fill:parent

10 onPressed:parent.color="green"11 onReleased:parent.color="black"12 }13 }1415 Text{16 text:"Clickme"1718 MouseArea{19 anchors.fill:parent20 onClicked:parent.font.bold=!parent.font.bold21 }22 }23 }

Signalhandlerpourréagiràl'émissiond'unsignal:onSignal

Paramètredusignaldansladocumentationouladéclaration

p.33

Gestiondesévènements:MouseAreaenbinding

PressmePressme

1 importQtQuick2.023 Rectangle{4 width:400;height:200;5 color:"lightblue"67 Text{8 anchors.centerIn:parent9 text:"Pressme";font.pixelSize:48

10 color:mouseArea.pressed?"green":"black"1112 MouseArea{13 id:mouseArea14 anchors.fill:parent15 }16 }17 }

UtilisationdespropriétésdeMouseAreadansunbinding

Evènementsinstantanésetévènementd'état

p.34

Lerisqued'écrasementdubinding

PressMe

1 importQtQuick2.023 Rectangle{4 width:400;height:200;5 color:"lightblue"67 Text{8 text:"PressMe"9 color:mouseArea.pressed?"green":"black"

10 anchors.centerIn:parent11 font.pixelSize:321213 MouseArea{14 id:mouseArea15 anchors.fill:parent16 onDoubleClicked:parent.color="yellow"17 }18 }19 }

Unbindingestunefonctionquiseréévaluedynamiquement

ContextejavascriptvsContexteQML

p.35

FonctionsenQML

Syntax:function<name>([parameter1,...]){...}

Example:1 Text{2 id:myItem3 text:"Hello"4 functionclear(){5 text="";6 }7 }89 //Dansuncontextejavascript

10 myItem.clear()

p.36

Résumé

Signauxetgestionnairesdesignaux

ContexteQMLetcontexteJavascript

Signauxvspropriétésbindées

Ecrasementd'unbinding

p.37

Créationetconceptiondenosproprescomposants

p.38

Créationetconceptiondenosproprescomposants

Créationdecomposantsdansdesfichiersqmlséparés

Comprendrelavisiblitéetlesméchanismesd'exposition

Concevoirdescomposantsréutilisablesetconfigurables

Reflexionsurl'APId'uncomposantQML

p.39

Exempled'élémentàréutiliser

1 importQtQuick2.023 Rectangle{4 width:400;height:100;5 color:"lightblue"67 Rectangle{8 width:3009 height:50

10 anchors.centerIn:parent1112 border.color:"green"13 color:"white"14 radius:4;smooth:true15 clip:true1617 TextInput{18 anchors.fill:parent19 anchors.margins:220 text:"Entertext..."21 color:focus?"black":"gray"22 font.pixelSize:parent.height-623 }24 }25 }

p.40

Instanciationnotreélément

1 importQtQuick2.023 Rectangle{4 width:400;height:1005 color:"lightblue"67 LineEdit{8 anchors.centerIn:parent9 width:300;height:50

10 }11 }

Elémentréutilisablefactorisédansunfichierdédié:LineEdit.qml

p.41

FichierLineEdit.qml

1 importQtQuick2.023 Rectangle{4 border.color:"green"5 color:"white"6 radius:4;smooth:true7 clip:true89 TextInput{

10 id:textInput11 anchors.fill:parent12 anchors.margins:213 text:"Entertext..."14 color:focus?"black":"gray"15 font.pixelSize:parent.height-616 }17 }

p.42

Notiondevisibilité

1 importQtQuick2.023 Rectangle{4 border.color:"green"5 color:"white"6 radius:4;smooth:true7 clip:true89 TextInput{

10 id:textInput11 anchors.fill:parent12 anchors.margins:213 text:"Entertext..."14 color:focus?"black":"gray"15 font.pixelSize:parent.height-616 }17 }

1 importQtQuick2.923 Rectangle{4 width:400;height:100;5 color:"lightblue"67 LineEdit{8 anchors.centerIn:parent9 width:300;height:50

10 }11 }

PremièreapprochedetypedérivéenQML

Proprietésàlaracineducomposantaccessibles

Notiondeconfigurationviaexpositiondepropriétésinternes

p.43

Rappel-Propriétéspersonnalisées

Syntax:[readonly]property<type><name>[:<value>]1 propertystringproduct:"QtQuick"2 propertyintcount:1233 propertyrealslope:123.4564 propertyboolcondition:true5 propertyurladdress:"http://qt.io/"6 readonlypropertyintarea:width*height

p.44

Expositiond'unevaleurinterne

Summary:Summary:Entertext...

1 importQtQuick2.023 Rectangle{4 propertystringtext:textInput.text56 border.color:"green"7 color:"white"8 radius:4;smooth:true9 clip:true

1011 TextInput{12 id:textInput13 anchors.fill:parent14 anchors.margins:215 text:"Entertext..."16 color:focus?"black":"gray"17 font.pixelSize:parent.height-618 }19 }

p.45

Utilisationdelapropriétéexposée


1 importQtQuick2.023 Rectangle{4 width:400;height:100;5 color:"lightblue"67 LineEdit{8 id:lineEdit9 anchors.centerIn:parent

10 width:300;height:5011 }1213 Text{14 anchors.bottom:parent.bottom15 text:"Summary:"+lineEdit.text16 }17 }

p.46

Modificationdelapropriétéexposée



10 width:300;height:5011 }1213 Text{14 anchors.bottom:parent.bottom15 text:"Summary:"+lineEdit.text16 }1718 Image{19 id:clearButton20 source:"../images/clear.svg"21 anchors{right:parent.right;rightMargin:422 verticalCenter:lineEdit.verticalCenter}23 opacity:lineEdit.text===""?0.25:1.024 MouseArea{25 anchors.fill:parent26 onClicked:lineEdit.text=""27 }28 }29 }

p.47

Mot-cléreadonlyd'unepropriété


1 importQtQuick2.023 Rectangle{4 readonlypropertystringtext:textInput.text56 border.color:"green"7 color:"white"8 radius:4;smooth:true9 clip:true


Simodifiéauruntime,laconsoleafficherauneerreur:TypeError...

Necessitéd'unmechanismed'expositionenécriture

p.48

Expositionenlectureetécriture:l'Alias


1 importQtQuick2.023 Rectangle{4 propertyaliastext:textInput.text56 border.color:"green"7 color:"white"8 radius:4;smooth:true9 clip:true


p.49

Créersesméthodesdepuisuncomposant

Syntax:function<name>([parameter1,...]){...}1 Rectangle{2 id:rect3 propertystringtext:"Hello"4 functionclear(){5 text="";6 ...7 }8 }

Appeldelafonctionrect.clear()

p.50

Créersespropressignaux

Syntaxedusignal:signal<name>[(<type><name>,...)]

Syntaxedusignalhandler:on<Name>:<expression>signalchecked(boolcheckValue)

Signalhandlerassocié:onChecked

Argumentpassésouslenom:checkValue

p.51

Créersespropressignaux-exemple

1 importQtQuick2.923 Rectangle{4 id:root5 signalaccepted(stringtext);6 readonlypropertystringtext:textInput.text78 TextInput{9 id:textInput

10 anchors.fill:parent11 anchors.margins:212 text:"Entertext..."13 color:focus?"black":"gray"14 font.pixelSize:parent.height-61516 onAccepted:root.accepted(text)17 }18 }

p.52

Utilisationdusignalhandler-exemple



10 width:300;height:5011 border.width:212 border.color:"yellow"1314 onAccepted:lineEdit.border.color=(text=="")?"red":"yellow"15 }1617 Text{18 anchors.bottom:parent.bottom19 text:"Summary:"+lineEdit.text20 }21 }

p.53

Signauxautogenérés



10 width:300;height:5011 border.width:212 border.color:"yellow"1314 onTextChanged:lineEdit.border.color=(text=="")?"red":"yellow"15 }1617 Text{18 anchors.bottom:parent.bottom19 text:"Summary:"+lineEdit.text20 }21 }

p.54

Résuméetconceptiond'API

Notiondevisibilité

Notiond'exposition

Emissiondesignaux

Exposerdesfonctions

p.55

Findeprésentation

Merciàtousdevotreattention,Sivousavezdesquestions

introduction au qml - kdab€¦ · objectifs de cette présentation comprendre la philosophie de...

Documents