La logique du programme des applications QML peut être définie en JavaScript. Le code JavaScript peut être défini en ligne dans un document QML, ou il peut être divisé en fichiers JavaScript (appelés ressources JavaScript en QML).
QML prend en charge deux types différents de ressources JavaScript: les fichiers d'implémentation code-behind et les fichiers partagés (bibliothèque). Les deux ressources JavaScript peuvent être importées à partir d'autres ressources JavaScript ou incluses dans des modules QML.
Ressources d'implémentation codées
La plupart des fichiers JavaScript importés dans des documents QML sont des implémentations avec état de documents QML importés dans ceux-ci. Dans ces cas, chaque instance du type d'objet QML défini dans le document nécessite une copie distincte de l'objet et de l'état JavaScript pour fonctionner correctement.
Le comportement par défaut lors de l'importation de fichiers JavaScript consiste à fournir une copie isolée unique pour chaque instance de composant QML. Si le fichier JavaScript n'utilise pas l'instruction .import pour importer des ressources ou des modules, son code s'exécutera dans la même étendue que l'instance de composant QML, de sorte que les objets et les propriétés déclarés dans le composant QML soient accessibles et manipulables. Sinon, il aura sa propre portée unique et, si nécessaire, les objets et les attributs du composant QML doivent être transmis en tant que paramètres à la fonction du fichier JavaScript.
Voici des exemples de ressources d'implémentation code-behind:
// Importation MyButton.qml
Importation QtQuick 2.0
"my_button_impl.js" en tant que logique // Une nouvelle instance de cette ressource JavaScript
// est chargée pour chaque instance de Button.qml.
Rectangle {
id: rect
largeur: 200
hauteur: 100
couleur: "rouge"
MouseArea {
id: mousearea
anchors.fill: parent
onClicked: Logic.onClicked (rect)
}
}
// my_button_impl.js
var clickCount = 0; // cet état est distinct pour chaque instance de la
fonction MyButton onClicked (bouton) {
clickCount + = 1;
if ((clickCount% 5) == 0) {
button.color = Qt.rgba (1,0,0,1);
} else {
button.color = Qt.rgba (0,1,0,1);
}
}
Généralement, une logique simple doit être définie en ligne dans le fichier QML, mais afin de maintenir la maintenabilité et la lisibilité, une logique plus complexe doit être séparée en ressources d'implémentation code-behind.
Ressources JavaScript partagées (bibliothèques)
Par défaut, les fichiers JavaScript importés de QML partagent leur contexte avec les composants QML. Cela signifie que les fichiers JavaScript peuvent accéder aux mêmes objets QML et peuvent les modifier. Par conséquent, chaque importation doit avoir une copie unique de ces fichiers.
La section précédente a présenté l'importation avec état des fichiers JavaScript. Cependant, certains fichiers JavaScript sont sans état et, dans un sens, ressemblent davantage à des bibliothèques réutilisables, car ils fournissent un ensemble de fonctions d'assistance qui ne nécessitent rien de leur emplacement d'importation. Si vous utilisez des balises utilitaires spéciales pour marquer de telles bibliothèques, vous pouvez économiser beaucoup de mémoire et accélérer l'instanciation des composants QML, comme illustré dans l'exemple suivant.
// factorial.js
.pragma bibliothèque
var factorialCount = 0;
fonction factorielle (a) {
a = parseInt (a);
// récursion factorielle
si (a> 0)
renvoie a * factorielle (a - 1);
// état partagé
factorialCount + = 1;
// cas de base récursif.
retour 1;
}
fonction factorialCallCount () {
return factorialCount;
}
Le pragma doit apparaître avant tout code JavaScript (sauf les commentaires).
Veuillez noter que plusieurs documents QML peuvent importer "factorial.js" et appeler les fonctions factorielles et factoriellesCallCount qu'il fournit. Le statut de l'importation JavaScript est partagé entre les documents importés dans QML, donc lorsqu'il est appelé dans un document QML qui n'appelle jamais la fonction factorielle, la valeur de retour de la fonction factorialCallCount peut être différente de zéro.
Par exemple:
//
Importation Calculator.qml Importation QtQuick 2.0
"factorial.js" en tant que FactorialCalculator // Cette ressource JavaScript n'est
// jamais chargée une seule fois par le moteur,
// même si plusieurs instances de
// Calculator.qml sont créées.
Texte {
largeur: 500
hauteur: 100
propriété int entrée: 17
texte: "La factorielle de" + entrée + "est:" + FactorialCalculator.factorial (entrée)
}
En raison du partage, les fichiers de bibliothèque .pragma ne peuvent pas accéder directement aux objets ou attributs d'instance de composant QML, bien que les valeurs QML puissent être transmises en tant que paramètres de fonction.
