Freebox QML – le module application

Pour faciliter l’entraide sur le SDK Freebox, QtFr a créer un forum dédié et un wiki. La question maintenant est de savoir comment utiliser au mieux ces outils.

L’idéal serait de mettre en place une page indiquant les fonctionnalités supportées et celles bridées.
J’ai lancé une discussion, pour avoir vos avis et commentaires, sur comment faire cela : Support QML Freebox.

Dans le premier article, j’avais présenté comment installer et tester la bibliothèque fbx (Freebox QML Library), permettant de programmer sur la Freebox en QML. Dans ce deuxième article, je vais entrer plus en détail sur les fonctionnalités du module Application.

Le module Application

Le module application contient deux éléments QML : Application et Setting.

L’élément Application

Tous les programmes pour Freebox doivent contenir un élément Application comme élément principal (ou un élément dérivé de ce type). Ce composant est simplement un élément de type Window affiché en plein écran et proposant trois propriétés :

  • identifier (string) : identifiant de l’application ;
  • name (string) : nom de l’application ;
  • profileId (int) : identifiant de l’utilisateur.

Pour le moment, ces propriétés ne sont pas initialisées, on peut supposer qu’elles ne le seront que lorsque l’application sera déployée sur une Freebox. Manifestement, cet élément intercepte le clavier pour éviter que l’on appuie sur Échappe ou Retour pour quitter le mode plein écran. Pour quitter l’application, utilisez Alt + F4.

Il est possible d’écrire une petite application pour afficher ces valeurs, en utilisant un élément Column et des éléments Text :

import QtQuick 2.2
import fbx.application 1.0

Application {
    id: app
    Column {
        anchors.centerIn: parent
        Text {
            text: "identifier: " + app.identifier
            font.pointSize: 18
            color: "white"
        }
        Text {
            text: "name: " + app.name
            font.pointSize: 18
            color: "white"
        }
        Text {
            text: "profileId: " + app.profileId
            font.pointSize: 18
            color: "white"
        }
    }
}

affiche :

Propriétés de l'élément Application

Propriétés de l’élément Application

La documentation précise qu’il ne faut pas tenter de récupérer les événements clavier avec Keys directement dans Application, il faut créer un élément dans Application et récupérer les événements dedans. On peut écrire une petite application pour afficher un cercle bleu que l’on déplace avec les touches directionnelles du clavier :

import QtQuick 2.2
import fbx.application 1.0

Application {
    Item {
        anchors.fill: parent
        Rectangle {
            id: target
            x: (parent.width - width) / 2;
            y: (parent.height - height) / 2;
            width: 20; height: 20
            radius: width / 2
            color: "lightblue"
        }
        focus: true
        Keys.onPressed: {
            switch (event.key) {
            case Qt.Key_Up: {
                target.y -= 5;
                break;
            }
            case Qt.Key_Down: {
                target.y += 5;
                break;
            }
            case Qt.Key_Left: {
                target.x -= 5;
                break;
            }
            case Qt.Key_Right: {
                target.x += 5;
                break;
            }
            }
        }
    }
}

affiche :

Déplacer un cercle avec le clavier

Déplacer un cercle avec le clavier

L’élément Settings

L’élément Settings permet théoriquement de conserver des données persistantes, qui sont chargées au début du programme et sauvegardées chaque fois qu’elles sont modifiées. En pratique, cet élément n’est pas fonctionnel dans la version actuelle de fbx (le code actuellement ne fait qu’afficher les données, sans les enregistrer, et en plus, il est bugé).

Pour corriger les bugs actuels, il faut modifier les fichiers fbx\application\settings.qml et fbx\application\settings.js pour modifier les identifiants App en app (un identifiant ne peut pas commencer par une majuscule). Il faut également corriger les lignes suivantes dans settings.js :

ligne 45 : values = app.children && app.settings.children;
ligne 103 : console.log("Settings save", JSON.stringify(values));

Avec ces corrections, il est possible d’utiliser Settings, par exemple dans le code précédent avec le cercle bleu :

Application {
    id: app
    Settings {
        id: settings
        property alias x: target.x
        property alias y: target.y
    }
    Item {
        ... // suite du code précédent

Ce code permet donc de créer un élément Settings dans l’élément Application. Il faut que l’élément Application possède l’identifiant app et l’élément Settings possède l’identifiant settings (dans la version actuelle du code, peut être que cela sera corrigé par la suite). Les propriétés x et y du cercle sont liés (alias) dans l’élément Settings, ce qui permet de « sauvegarder » la position à chaque fois qu’elle est changée (en fait, cela affiche simplement des messages dans la console).

Par exemple, si l’on appuie deux fois sur la touche directionnelle Haut, la série de messages suivants est affichée :

qml: Setting x connected
qml: Setting y connected
qml: Getting settings failed
qml: Settings value changed false false
qml: Settings x undefined 140
qml: Settings x changed
qml: Settings y undefined 85
qml: Settings y changed
qml: Settings save {"x":140,"y":85}
qml: Settings value changed false false
qml: Settings x 140 140
qml: Settings y 85 80
qml: Settings y changed
qml: Settings save {"x":140,"y":80}

Une remarque sur les performances de Settings. Pour le moment, rien n’indique si les données seront enregistrées sur le disque de la Freebox ou en ligne (les données sont formatées en utilisant JSON). Dans tous les cas, l’écriture des données prendra un peu de temps. Il sera donc possible d’enregistrer des données peu utilisées (un identifiant, des préférences, etc.) directement dans Settings, mais si vous souhaitez enregistrer des données qui sont souvent modifiées (comme la position du cercle dans le code précédent), cela risque de produire un ralentissement de votre application.

Dans ce cas, il est préférable d’enregistrer les données uniquement lorsque l’utilisateur quitte l’application. Pour charger les données, il faudra alors utiliser le signal ready de Settings (qui est émit lorsque les données sont chargées) et le signal attaché Component.onDestruction pour les enregistrer :

Application {
    id: app
    Settings {
        id: settings
        property int x
        property int y
        onReady: {
            target.x = x;
            target.y = y;
        }
    }
    Component.onDestruction: {
        settings.x = target.x;
        settings.y = target.y;
    }
    Item {
        ... // suite du code

Dans ce code, les propriétés x et y de settings ne sont plus des alias des propriétés x et y de target. Lorsque les données sont chargées, le slot onReady est appelé et copie les valeurs de settings.x et settings.y dans target.x et target.y. Lorsque l’on quitte l’application, c’est le slot Component.onDestruction qui est appelé et qui réalise l’opération inverse.

Conclusion

Une remarque sur la documentation de fbx : certains codes donnés dans la documentation ne sont pas fonctionnels. Par exemple, le code donné dans la page de documentation de Setting utilise une fonction sessionOpen, qui n’existe pas dans Qt ou dans fbx. Ce sont sont peut être des fonctionnalités qui seront ajoutées par la suite ?

Vous pouvez télécharger le projet d’exemple avec le cercle dans l’archive suivante (pensez à modifier le fichier .qmlproject pour modifier la propriété importPaths selon votre installation de fbx).

J’aborderais dans le prochain article le module interface utilisateur.

Advertisements

6 commentaires sur « Freebox QML – le module application »

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s