Aurélien Gâteau

26 novembre 2011

• 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

import QtQuick 1.0

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

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

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

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"
        }
    }
}

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

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
    }
}

    //...
    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
    }
    //...

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

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

• 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

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

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

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"
    }
}

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 */ }
    }
}

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
    }
}

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"
    }
}

Calculatrice minimaliste

Plusieurs façons d'appliquer des animations

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

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

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

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

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

• 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

• 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