View
15
Download
0
Category
Preview:
Citation preview
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)
1 importQtQuick2.023 Rectangle{4 id:background5 width:300;height:1006 color:"lightblue"78 Rectangle{9 color:"green"
10 y:25//overwrittenbythetopanchor11 height:50;width:5012 anchors.right:background.right13 anchors.top:background.top14 }15 }
p.23
Ligned'Ancrage-exemple(cont'd)
1 importQtQuick2.023 Rectangle{4 id:background5 width:300;height:1006 color:"lightblue"78 Rectangle{9 color:"green"
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
Summary:Summary:Entertext...
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:"<b>Summary:</b>"+lineEdit.text16 }17 }
p.46
Modificationdelapropriétéexposée
Summary:Summary:Entertext...
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:"<b>Summary:</b>"+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é
Summary:Summary:Entertext...
1 importQtQuick2.023 Rectangle{4 readonlypropertystringtext: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 }
Simodifiéauruntime,laconsoleafficherauneerreur:TypeError...
Necessitéd'unmechanismed'expositionenécriture
p.48
Expositionenlectureetécriture:l'Alias
Summary:Summary:Entertext...
1 importQtQuick2.023 Rectangle{4 propertyaliastext: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.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
Summary:Summary:Entertext...
1 importQtQuick2.923 Rectangle{4 width:400;height:100;5 color:"lightblue"67 LineEdit{8 id:lineEdit9 anchors.centerIn:parent
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:"<b>Summary:</b>"+lineEdit.text20 }21 }
p.53
Signauxautogenérés
Summary:Summary:Entertext...
1 importQtQuick2.923 Rectangle{4 width:400;height:100;5 color:"lightblue"67 LineEdit{8 id:lineEdit9 anchors.centerIn:parent
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:"<b>Summary:</b>"+lineEdit.text20 }21 }
p.54
Résuméetconceptiond'API
Notiondevisibilité
Notiond'exposition
Emissiondesignaux
Exposerdesfonctions
p.55
Findeprésentation
Merciàtousdevotreattention,Sivousavezdesquestions
Recommended