QML (Qt Meta Linguagem ou Qt Modeling Language^[2]) é uma linguagem de marcação para interfaces de usuário. É uma linguagem declarativa parecida com JSON para criar aplicações focadas na interface do usuário. Código JavaScript inline manipula aspectos imperativos. Ela é parte do Qt Quick, o kit de criação de interfaces desenvolvido pela Nokia na framework Qt. QML é usada principalmente para aplicações móveis, onde interações por toque, animações fluidas (60 FPS) e experiência do usuário são cruciais.

Documentos QML descrevem uma árvore de elementos. Elementos QML^[3] que já vêm com o Qt formam um sofisticado conjunto de blocos de construção: gráficos (por exemplo retângulo, imagem) e comportamentais (por exemplo estado, transição, animação). Estes elementos podem ser combinados para criar componentes que variam em complexidade desde simples botões e sliders, até programas completos que usam a internet.

Elementos QML podem ser expandidos por JavaScript padrão tanto in-line quanto via arquivos incluídos. Elementos também podem ser facilmente integrados e estendidos por componentes em C++ usando o framework Qt.

QML é a língua; o seu sistema de JavaScript em tempo de execução é o motor V4 e Qt Quick é o a framework de interface gráfica baseada em gráfico de cena. Estas são todas partes do módulo Qt Declarative, mas a tecnologia não é mais chamada Qt Declarative.

• Unity (interface de usuário)
• BlackBerry 10

Exemplo:

import QtQuick 2.0

 Rectangle {
     id: canvas
     width: 250
     height: 200
     color: "blue"

     Image {
         id: logo
         source: "pics/logo.png"
         anchors.centerIn: parent
         x: canvas.height / 5
     }
 }

Objetos são especificados por tipo, seguidos por um par de chaves. Tipos de objeto sempre começam com letra maiúscula. No exemplo acima, há dois objetos, um Rectangle (retângulo); e sua filha, uma Image (imagem). Entre as chaves, pode-se especificar informações sobre o objeto, como suas propriedades. Propriedades são especificadas como "propriedade: valor". No exemplo acima, podemos ver que a imagem tem uma propriedade denominada source (fonte), que recebeu o valor "pics/logo.png". A propriedade e o seu valor são separados por dois pontos.

A propriedade id

Cada objeto pode receber uma propriedade única, chamada de "id". Atribuir um id permite que o objeto seja encontrado por outros objetos e scripts. O primeiro elemento retângulo abaixo tem um id, "meuRet". O segundo elemento Retângulo define a sua própria largura (width) referindo-se a "meuRet.width", o que significa que ele terá o mesmo valor de largura que o primeiro retângulo.

 Item {
     Rectangle {
         id: meuRet
         width: 120
         height: 100
     }
     Rectangle {
         width: meuRet.width
         height: 200
     }
 }

Note que um id deve começar com uma letra minúscula ou um caractere sublinhado, e não pode conter caracteres diferentes de letras, dígitos e sublinhados.

Uma ligação de propriedade especifica o valor de uma propriedade em forma declarativa. O valor da propriedade é automaticamente atualizado se a outras propriedades ou dados mudarem de valor, seguindo o paradigma de programação reativa.

Ligações de propriedade são criadas implicitamente em QML sempre que uma propriedade é atribuída uma expressão de JavaScript. O QML abaixo usa duas ligações de propriedade para ligar o tamanho do retângulo ao de "outroItem".

 Rectangle {
     width: outroItem.width
     height: outroItem.height
 }

QML estende um motor compatível com padrões de JavaScript , de modo que qualquer expressão válida de JavaScript pode ser usada como uma ligação de propriedade. Ligações podem acessar as propriedades do objeto, fazer chamadas de função, e até mesmo usar o objetos que já vêm no JavaScript, como a Date (data) e Math (matemática).

Veja no exemplo abaixo o uso de uma função que calcula a altura (height) do elemento:

 Rectangle {
     function calcularMinhaAltura() {
         return Math.max(outroItem.height, terceiroItem.height);
     }
     anchors.centerIn: parent
     width: Math.min(outroItem.width, 10)
     height: calcularMinhaAltura()
     color: { if (width > 10) "blue"; else "red" }
 }

Os estados são um mecanismo para combinar alterações de propriedades em uma unidade semântica. Um botão, por exemplo, tem um estado pressionado e um não-pressionado, uma aplicação de livro de endereços pode ter um estado só de leitura e outro de edição. Cada elemento tem um estado básico "implícito". Cada estado é descrito listando as propriedades e os valores daqueles elementos que diferem do estado básico.

Por exemplo, no estado padrão, meuRet é posicionado em 0,0. No estado "movido", ele está posicionado em 50,50. Clicar na MouseArea (área do mouse) altera o estado do estado padrão para o estado "movido", movendo o retângulo.

 import QtQuick 2.0

 Item {
     id: meuItem
     width: 200; height: 200

     Rectangle {
         id: meuRet
         width: 100; height: 100
         color: "red"
     }
     states: [
         State {
             name: "moved"
             PropertyChanges {
                 target: myRect
                 x: 50
                 y: 50
             }
         }
     ]
     MouseArea {
         anchors.fill: parent
         onClicked: meuItem.state = 'moved'
     }
 }

Mudanças de estado podem ser animadas usando Transitions (transições).

Por exemplo, adicionar este código ao elemento "Item" acima anima a transição para o estado "movido":

 transitions: [
     Transition {
         from: "*"
         to: "moved"
         NumberAnimation { properties: "x,y"; duration: 500 }
     }
  ]

Animações em QML são feitas animando propriedades de objetos. Propriedades dos tipos "real", "int", "color", "rect", "point", "size", e "vector3d" podem ser animadas.

QML suporta três formas principais de animação: animação básica de propriedade, transições e comportamentos de propriedades.

A forma mais simples de animação é a PropertyAnimation (animação de propriedade), que pode animar todos os tipos de propriedades listadas acima. Uma PropertyAnimation pode ser especificada como uma fonte de valor usando a Animation (animação) na sintaxe da propriedade. Isto é especialmente útil para repetir animações.

O exemplo a seguir cria um efeito quicando:

 Rectangle {
     id: rect
     width: 120; height: 200

     Image {
         id: img
         source: "pics/qt.png"
         x: 60 - img.width/2
         y: 0

         SequentialAnimation on y {
             loops: Animation.Infinite
             NumberAnimation { to: 200 - img.height; easing.type: Easing.OutBounce; duration: 2000 }
             PauseAnimation { duration: 1000 }
             NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 }
         }
     }
 }

QML não precisa de Qt/C++ para ser usado, mas pode ser facilmente estendido através do Qt.

Conceitos familiares

QML fornece acesso direto para os seguintes conceitos do Qt:

• QAction – o tipo de ação
• QObject sinais e slots - disponíveis como funções a que podem ser chamadas em JavaScript
• Propriedades de QObject - disponíveis como variáveis em JavaScript
• QWidget – QDeclarativeView é uma widget que mostra QML
• Q*Model – usado diretamente na ligação de dados (e.g. QAbstractItemModel)

Manipuladores de sinais permitem que ações sejam tomadas em resposta a um evento. Por exemplo, o elemento "MouseArea" tem manipuladores de sinais para lidar com eventos de pressionar, soltar ou clicar o mouse:

 MouseArea {
     onPressed: console.log("mouse button pressed")
 }

Todos os nomes de manipuladores de sinais começam com "on".

Como QML e JavaScript são muito semelhantes, quase todos os editores de código que suportam JavaScript vão funcionar. No entanto, suporte completo para realce de sintaxe, conclusão de código, ajuda integrada, e um editor WYSIWYG, estão disponíveis na IDE livre multi-plataforma Qt Creator desde a versão 2.1. A versão do Creator que é fornecida com as versões comerciais do Qt têm mais recursos no editor WYSIWYG.

O executável qml pode ser usado para executar um arquivo QML como um script. No entanto, empacotar uma aplicação para a implantação geralmente envolve escrever um simples lançador em C++ e empacotar os arquivos QML necessários como recursos.