4. Séparation du code JavaScript
Insérer des fonctions JavaScript directement dans le code QML n'est pas vraiment une
bonne pratique, surtout si ces fonctions sont nombreuses. De même, pour utiliser une
même fonction dans plusieurs fichiers QML, le copier-coller n'est pas un choix
acceptable. C'est pourquoi Qt Quick permet d'inclure des fichiers JavaScript, grâce à
l'instruction import, placée en tout début de fichier ; par exemple, pour inclure le
fichier code.js :
import QtQuick 2.5
import "code.js" as Code
Dans ce cas, toutes les fonctions de code.js seront disponibles dans l'identifiant
Code : si une fonction factorial() y est définie, elle sera accessible côté QML
comme Code.factorial().
Ce même mécanisme d'inclusion est disponible entre fichiers JavaScript, grâce à une
extension à la syntaxe de base de JavaScript (qui n'est donc pas disponible dans un
navigateur) : la fonction Qt.include("file.js") inclut le fichier file.js. Toutes
les fonctions de file.js seront alors directement disponibles dans le fichier
JavaScript, mais aussi côté QML.
Note > Lors de la création d'un fichier JavaScript, Qt Creator demandera s'il doit
créer un fichier sans état. Les fonctions contenues dans ces fichiers ne peuvent pas
manipuler des composants Qt Quick : elles ne peuvent que calculer des résultats en
fonction de la valeur de leurs entrées. Cette différence se marque au niveau de la
première ligne du fichier JavaScript :
.pragma library
L'exemple précédent peut se refactoriser pour déplacer les deux fonctions de
changement de taille du texte affiché. Pour plus de propreté, elles ne travaillent plus
forcément sur un seul composant bien nommé, mais prennent en argument le composant
dont la taille doit varier. Ainsi, le fichier JavaScript code.js s'écrira comme ceci :
Note > Le code de cet exemple est disponible dans le projet fichier-js .
function increaseSize(textField) {
textField.pointSize += 1;
}
297