Développer avec QML

Aurélien Gâteau

26 novembre 2011

Presenter Notes

QML : Qt Markup Language

  • Une nouvelle façon de concevoir des applications
  • Utilisable de manière indépendante ou embarqué dans des applications existantes
  • Deux langages :
    • Un langage déclaratif simple, ressemblant à du CSS
    • JavaScript pour les interactions

Presenter Notes

Hello World

import QtQuick 1.0

Rectangle {
    width: 200
    height: 150
    Text {
        anchors.centerIn: parent
        text: "Hello World"
    }
}

Presenter Notes

Éléments de base

Les éléments fournient avec QML sont très simples. Les plus communs sont :

  • Item
  • Rectangle
  • MouseArea
  • Text
  • TextInput
  • TextEdit
  • Image
  • BorderImage

Presenter Notes

Pas de "clipping"

La taille d'un élément n'est pas limitée par la taille de son parent !

import QtQuick 1.0

Rectangle {
    width: 200
    height: 150

    Rectangle {
        width: 10
        height: 40
        color: "green"
        anchors.centerIn: parent

        Text {
            anchors.centerIn: parent
            text: "Hello World"
        }
    }
}

Presenter Notes

Les ancres

Presenter Notes

Introduction

  • QML n'a pas de notion de "layout"
  • Les éléments peuvent être positionnés par rapport aux autres

Presenter Notes

Exemple

Rectangle {
    width: 250
    height: 200

    Rectangle {
        id: topLeftRect
        color: "red"
        anchors.left: parent.left
        anchors.top: parent.top
        width: 40
        height: 40
    }

    Rectangle {
        id: bottomRect
        color: "green"
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 40
    }
}

Presenter Notes

Exemple (suite)

    //...
    Rectangle {
        color: "black"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: topLeftRect.bottom
        width: 40
        height: 40
    }

    Rectangle {
        color: "blue"
        anchors.left: topLeftRect.right
        anchors.leftMargin: 10
        anchors.top: parent.top
        anchors.topMargin: 10
        anchors.bottom: bottomRect.verticalCenter
        width: 40
    }
    //...

Presenter Notes

MouseArea

Presenter Notes

Introduction

  • Elément invisible permettant de répondre aux événements de la souris
  • Utilisable de manière impérative ou déclarative

Presenter Notes

Utilisation impérative

  • MouseArea définit de nombreux signaux sur lesquels on peut connecter du code JavaScript :
    • onClicked
    • onEntered
    • onExited
    • ...

Presenter Notes

Utilisation déclarative

  • MouseArea définit également de nombreuses propriétés :
    • pressed
    • pressedButtons
    • containsMouse
  • On peut définir les propriétés d'autres éléments en fonction de propriétés de la MouseArea

Presenter Notes

Effet de proximité

  • La MouseArea peut être plus grande que son parent, ce qui permet d'implémenter des effets de proximité

Presenter Notes

Les composants

Presenter Notes

Introduction

  • Permet de réutiliser des blocs de QML
  • Il suffit de créer un fichier dont le nom respecte le format CamelCase.qml

Presenter Notes

Exemple simple

Square.qml

Rectangle {
    color: "blue"
    width: 40
    height: width
    radius: 7
}

Code utilisant le composant Square :

Rectangle {
    width: 200
    height: 150
    Square {
        x: 10
        y: 10
    }
    Square {
        x: 60
        y: 10
    }
    Square {
        x: 10
        y: 60
        color: "red"
    }
}

Presenter Notes

Signaux

Permettent de signaler au monde extérieur que quelque chose c'est produit.

Définition

MyComponent.qml

Item {
    signal activated // Définition

    MouseArea {
        onClicked: myItem.activated() // Emission
        ...
    }
}

Utilisation

Item {
    MyComponent {
        onActivated: { /* Code JS à exécuter */ }
    }
}

Presenter Notes

Propriétés

Syntaxe : property <type> <nom>[: <valeur>]

Définition

MyComponent.qml

Item {
    property int length: 20 // Définition
    Rectangle {
        width: myItem.length + 4 // Utilisation
        ...
    }
}

Utilisation

Item {
    MyComponent {
        length: 30
    }
}

Presenter Notes

Les alias

Permettent d'exposer une propriété d'un élément enfant

Syntaxe : property alias <nom>: <enfant.propriété>

Définition

Item {
    property alias color: rect.color
    Rectangle {
        id: rect
        ...
    }
}

Utilisation

Item {
    MyComponent {
        color: "red"
    }
}

Presenter Notes

Exemple concret de composants

Calculatrice minimaliste

Presenter Notes

Animations

Presenter Notes

Introduction

Plusieurs façons d'appliquer des animations

  • Utilisation d'objets Animation
  • Behavior
  • Via les transitions (non abordées ici)

Presenter Notes

Objets Animation

  • Animation = changement progressive de la valeur d'une propriété
  • QML peut animer la majorité des types de propriétés

Presenter Notes

ParallelAnimation et SequentialAnimation

  • Permettent de grouper et d'enchaîner des animations

Presenter Notes

Behavior

  • Solution simple pour associer une animation à une propriété

Presenter Notes

Qt Components

Presenter Notes

Intégration C++

  • Widget pour afficher du QML : QDeclarativeView
  • Toute classe dérivant de QObject peut être exposée en QML

Presenter Notes

Qt Components

  • Eléments QML ayant l'apparence de widgets natifs
  • En cours de développement
  • Méthode privilégiée pour la création d'applications dans Qt5

Presenter Notes

Conclusion

  • Plus souple que le système de widgets
  • Permet un meilleur découplage entre le développeur et le designer
  • Langage déclaratif ⇒ s'adapter à un nouveau mode de pensée

Presenter Notes

Questions ?

Presenter Notes