Discussion :

[zesensei]

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.

[Amnell]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :


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,

[Amnell]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[zesensei]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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.

[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

[zesensei]

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

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.

[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

[zesensei]

Dommage.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

donne

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.

[Amnell]

Bonsoir,

En fait, j'entendais plutôt ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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é.