Application pour Freebox player, utilisation d'onglets

Version imprimable

30/08/2014, 07h33
zesensei

Application pour Freebox player, utilisation d'onglets

Bonjour,
Je débute en QML et j'aimerais utiliser cet item de la bibliotheque de free comme base de mon application :
http://dev.freebox.fr/sdk/libfbxqml/...x.ui.page.Tabs
Comme je débute, je n'arrive pas à l'instancier.
Si quelqu'un pouvait me fournir un exemple d'instanciation de cet élement ça me débloquerait.
Merci.

Bonjour,

En lisant la documentation, il me semble qu'il vous faut effectuer ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import fbx.ui.page.Tabs 1.0 Tabs { width: 200 height: 200 model: ListModel { ListElement { title: "Onglet 1"; url: "" } ListElement { title: "Onglet 2"; url: "" } } Text { anchors.centerIn: parent text: title } }
Je n'ai cependant pas bien compris le rôle du paramètre "url". Je vous propose dans un premier temps d'essayer avec ceci.

Bonne fin de journée à vous,
Louis

31/08/2014, 14h33
zesensei

Merci pour l'aide,
Ca fonctionne bien.
Je me posais surtout la question de la composition de la liste (et oui, je ne savais pas construire une liste).

Pour l'histoire des URL, c'est assez mystérieux aussi pour moi.
Le seul exemple qui pourrait (conditionnel) s'y référer est présent dans cette autre page de documentation de l'UI :
http://dev.freebox.fr/sdk/libfbxqml/....ui.page.Stack (tout en bas).

Le résultat de votre exemple est :
http://img11.hostingpics.net/pics/30...x1080scrot.png

Si on click sur un onglet il devient actif.
Pour le moment les onglets n'affichent pas de contenu (normal vu le code, moins normal alors que j'ai renseigné une URL d'un QML avec un rectangle coloré). Je continue de fouiller pour indiquer dans ce topic la méthode globale pour utiliser ce composant (pour que ça serve à d'autres développeurs qui seraient dans le même cas que moi).
A bientôt,

Bonjour,

Oui, en effet, ces ressources sont intéressantes. De ce que je comprends, si vous avez un fichier mytab1.qml (contenant par exemple un Rectangle rouge) et un fichier mytab2.qml (contenant par exemple un Rectangle vert) à côté de votre fichier contenant le widget d'onglets, cela donnerait ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 import QtQuick 2.0 import fbx.ui.page.Tabs 1.0 Tabs { width: 200 height: 200 model: ListModel { ListElement { title: "Onglet 1"; url: "mytab1.qml" } ListElement { title: "Onglet 2"; url: "mytab2.qml" } } }
Exemple d'un fichier mytab1.qml :
Code:

1 2 3 4 5 6 import QtQuick 2.0 Rectangle { anchors.fill: parent // optionnel, j'imagine color: "red" }
Est-ce bien fonctionnel ?

Bonne journée à vous,
Louis

Presque...
Il est nécessaire de définir la property 'baseUrl' sinon il ne trouve pas ses petits (il ne peut charger aucun fichier, aucune page).
Je dois encore creuser car pour le moment je n'arrive à le faire fonctionner qu'avec un chemin absolu, alors qu'il faudra du relatif au final.
Voilà donc mon code :
IHM_Test1.qml
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import QtQuick 2.2 import fbx.application 1.0 import fbx.ui.page 1.0 Application { id : ihm_Test1 Tabs { baseUrl: "/home/laurent/IHM_Test1/Login.qml" width: 200 height: 200 model: ListModel { ListElement { title: "Onglet 1"; url: "Login.qml" } ListElement { title: "Onglet 2"; url: "Navigate.qml" } } Text { anchors.centerIn: parent text: title } } }
Login.qml
Code:

1 2 3 4 5 6 7 8 9 10 11 import QtQuick 2.0 import fbx.ui.page 1.0 Page{ Rectangle { width: 100 height: 62 color: "white" } }
Navigate.qml
Code:

1 2 3 4 5 6 7 8 9 10 11 import QtQuick 2.0 import fbx.ui.page 1.0 Page{ Rectangle { width: 100 height: 62 color: "green" } }
Résultat :
http://img11.hostingpics.net/pics/35...x1080scrot.png http://img11.hostingpics.net/pics/38...x1080scrot.png
Le tout avec les animations par défaut de ce composant.
Il va falloir maintenant que je me penche plus sur le QML pour comprendre la notion de signal et à quoi sert le composant 'TabList' qui est associé à celui-ci.
Merci pour l'aide.
Si je trouve le moyen d'avoir une URL relative, je modifie ce post.
Je considère que le sujet est résolu car il est décrit comment instancier l’élément par défaut, mon objectif initial.

31/08/2014, 15h38
Amnell

Bonjour,

En théorie, vous n'avez plus besoin du "Text" dans votre IHM_Test1.qml. Je pensais qu'il aurait permis de gérer l'onglet actuel, initialement, et qu'il ne s'agissait pas derrière d'un système d'URL.
Pour le baseUrl, avez-vous essayé de tout simplement faire baseUrl: "." ?

Bonne journée à vous,
Louis
31/08/2014, 16h06
zesensei

Oui, déjà essayé.
En baseUrl: "Login.qml" ça passe.
Par contre dans la liste
url: "Login.qml"
ne passe pas

Citation:

TransitionManager unable to load Login.qml
qml: <Failure file:///home/laurent/libfbxqml-5ed909ecf/fbx/async/Login.qml/Login.qml:-1 File not found

Je ne sais pourquoi il prends le chemin de la bibliothèque comme référence dans ce cas (ok, importPaths est une valeur tentante pour compléter un chemin).
Je tâtonne un peu, mais ça devrait passer par la suite.
31/08/2014, 16h18
Amnell

Bonjour,

Dans ce cas, baseUrl: Qt.resolvedUrl(".") devrait fonctionner, je pense.
http://qt-project.org/doc/qt-5/qml-q...lvedUrl-method

Bonne journée à vous,
Louis
31/08/2014, 18h53
zesensei
Dommage.
Code:

1 2 3 property string tab1_url: Qt.resolvedUrl("Login.qml") ListElement { title: "Onglet 1"; url: tab1_url }
donne

Citation:

ListElement: cannot use script for property value

J'ai essayé en remplaçant directement la valeur par le script, sans plus de succès.
C'est dans ces cas simple qu'on voit que je début complètement en QML.

Bonsoir,

En fait, j'entendais plutôt ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import QtQuick 2.2
import fbx.application 1.0
import fbx.ui.page 1.0
 
Application {
    id : ihm_Test1
    Tabs {
        baseUrl: Qt.resolvedUrl(".")
        width: 200
        height: 200
        model: ListModel {
            ListElement { title: "Onglet 1"; url: "Login.qml" }
            ListElement { title: "Onglet 2"; url: "Navigate.qml" }
        }
    }
}

Est-ce que cela fonctionne ?

Bonne soirée,
Louis

31/08/2014, 19h27
zesensei

Parfait.
Ca fonctionne super bien.
Prochaine étape (dans un futur post) les portées de variables et leur manipulation par des fonctions, puis la lecture de flux vidéo avec ce kit freebox (finalité de l'application, il faudrait quand même que j'y arrive).
Ensuite, j'aurais de l'authentification par Oauth à comprendre et j'aurais tout en main pour mon projet fou.
Merci beaucoup pour l'aide qui m'a bien débloqué.