IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Qt Quick Discussion :

Concevoir une interface avec Qt Designer ou Qt Quick ?


Sujet :

Qt Quick

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Août 2011
    Messages
    6
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2011
    Messages : 6
    Par défaut Concevoir une interface avec Qt Designer ou Qt Quick ?
    Bonjour à tous,

    Je voudrais connaître la différence entre les .ui et les .qml (même si les ui portent bien leurs noms).
    Je voudrais faire une appli avec des fenêtres très design (images en fond et images à la place des boutons et non des images dans les boutons où l'on voit les bords du bouton). J'ai vu que la fenêtre 'design' de Qt Creator était intéressante pour mettre disposer les objets et les dimensionner comme il faut.

    Merci pour votre aide
    Max

  2. #2
    Rédacteur
    Avatar de Amnell
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2009
    Messages
    1 840
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2009
    Messages : 1 840
    Par défaut
    Bonjour,

    Le QML et les .ui diffèrent radicalement dans le sens où les .ui intègrent des éléments du module Qt Widgets, qui sous-entend que le développement de l'interface graphique se fait en C++. Leur stylisation se fait par le biais de feuilles de style CSS. Les fichiers QML quant à eux utilisent un langage déclaratif proche du CSS associant des propriétés à des valeurs. Par exemple, pour faire un bouton très simple, stylisé et centré, on aurait 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
    17
    18
    19
    20
    Rectangle { // Création d'un rectangle pour le fond du bouton
        color: "#494949" // Couleur grise pour le fond du bouton
        radius: 12 // On l'arrondit
        width: 50 // Il fait 50px de largeur
        height: 20 // Il fait 20px de hauteur
        anchors.centerIn: parent // On le centre dans la fenêtre le contenant
     
        Text { // Le texte affiché par le bouton
            anchors.centerIn: parent // On le centre dans le rectangle arrondi créé, son parent
            text: "Cliquez ici !" // Le texte du bouton
            color: "white" // Couleur blanche
        }
     
        MouseArea { // Permet de définir une zone permettant de détecter les clics
            anchors.fill: parent // On lui indique qu'il prend la taille de son parent, le rectangle gris
            onClicked{
                // Traitement à faire lors du clic sur le bouton
            }
        }
    }
    Un aperçu du rendu :

    Nom : Capture.PNG
Affichages : 1279
Taille : 1,2 Ko

    On atteint des résultats assez sympas via du QML, comme la démo SameGame le montre :



    On peut placer ce genre de code dans un fichier .qml pour pouvoir l'instancier dans d'autres fichiers QML sans avoir à tout réécrire. En gros, faire du QML, c'est faire des composants réutilisables selon vos goûts stylistiques et les assembler pour en faire l'interface graphique. Globalement, j'aime aujourd'hui bien plus travailler avec le QML dans le sens où il est bien plus aisé de concevoir simplement une interface graphique avec des animations, un style qui diffère des styles de bureau, ce genre de chose, mais il ne faut pas perdre de vue que, même si le QML est en soit très simple, il faut tout de même apprendre à s'en servir. L'approche générale de développement avec QML est une approche modèle-view, soit avec la logique côté C++ et l'interface graphique côté QML/JavaScript, soit la logique côté JavaScript directement en phase avec le QML, sans qu'il n'y ait plus de C++ qu'un main(). En effet, le QML repose sur le JavaScript, comme à l'endroit du onClicked de la MouseArea du code précédent. Il existe un grand nombre de ressources qui permettent de s'initier au QML si cette nouvelle façon de coder avec Qt vous intéresse.

    Voir aussi : Le forum Qt, les cours et tutoriels Qt, et la FAQ Qt.

    N'hésitez pas si vous avez des questions (je suis resté très général dans mes explications pour vous donner un léger aperçu),
    Bonne soirée,
    Louis
    N'oubliez pas de consulter la FAQ Qt ainsi que les cours et tutoriels C++/Qt !

    Dernier article : Débuter avec les Enlightenment Foundation Libraries (EFL)
    Dernières traductions : Introduction à Qt Quick - Applications modernes avec Qt et QML
    Vous cherchez un livre sur Qt 5, Qt Quick et QML ? Créer des applications avec Qt 5 - Les essentiels

Discussions similaires

  1. [QtGui] Concevoir visuellement des interfaces avec Qt Designer
    Par dourouc05 dans le forum PyQt
    Réponses: 5
    Dernier message: 16/02/2016, 17h31
  2. [POO] réaliser une 'interface' avec PHP4
    Par TabrisLeFol dans le forum Langage
    Réponses: 3
    Dernier message: 27/12/2008, 21h00
  3. Réponses: 5
    Dernier message: 07/12/2005, 10h41
  4. Piloter une interface avec des relais
    Par Yepazix dans le forum API, COM et SDKs
    Réponses: 13
    Dernier message: 26/10/2004, 19h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo