Je crée mon appli Freebox Révolution : Comment créer des pages pour son application

Toutes les semaines Univers Freebox vous propose un tutoriel pour créer simplement une application pour votre Freebox Révolution. Après avoir créé son projet il est temps de commencer à s’amuser un peu avec sa Freebox.

Après notre jeu sur les nombres aléatoire, cette semaine, nous allons voir quelques spécificités du SDK de la Freebox Révolution. Nous allons nous intéresser aujourd’hui au système de pages. 

Dans un premier temps, nous allons créer 3 nouveaux fichiers QML. Pour ce faire, il faudra juste aller dans Fichier > Nouveau fichier ou projet… et choisir dans la case Fichiers et classes, Qt puis QML File. Nous avons choisi ici d’appeler ces trois fichiers QML page1, page2 et page3.

Le détail du code, pas à pas

Dans notre fichier QML créé lors de la création de notre projet, nous allons rajouter deux lignes, import fbx.ui.page 1.0 et import fbx.ui.layout 1.0. 

Dans notre Application, nous allons ajouter un Background directement fournis dans le SDK de Free.

Nous allons ensuite créer un Stack, c’est ce dernier qui nous permettra de gérer, d’afficher et de stocker les pages de notre application. Comme souvent, nous allons lui donner un id, le focus et nous définissons ensuite son ancrage dans l’application, car le positionnement des pages se fera par rapport à lui. Ensuite avec baseUrl, nous indiquons à l’application dans quel dossier aller chercher les différents fichiers, le point signifie que le dossier est le dossier du projet. Ensuite initialPage nous permet de dire au Stack quelle page il devra charger au démarrage.

Dans chacun des trois autres fichiers, nous allons créer une Page dans laquelle nous ajouterons uniquement un texte. Puis sur chaque page, nous agirons sur notre Stack lorsque l’on presse sur la touche OK de la télécommande. Sur la première page, nous allons utiliser la fonction push() qui va permettre d’afficher la prochaine page et de l’ajouter à la liste d’objets de notre Stack.

Sur la seconde page, nous allons utiliser la fonction replace(), qui comme son nom l’indique va remplacer le dernier élément de notre Stack, ici notre deuxième page, par un autre, dans notre cas notre troisième et dernière page.

Sur cette dernière page, nous allons utiliser la fonction pop() lorsque l’on appuie sur la touche OK. Cette fonction va supprimer le dernier élément de notre Stack, notre page actuelle, ce qui nous permettra de revenir sur la première page de notre application.

Nous pouvons maintenant tester notre application.

Cet article a été repris sur le site Univers FreeBox