QML – Wikipédia, a enciclopédia livre

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.

Adoção[editar | editar código-fonte]

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

Sintaxe e semântica[editar | editar código-fonte]

Sintaxe básica[editar | editar código-fonte]

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.

Ligações de propriedades[editar | editar código-fonte]

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

Estados[editar | editar código-fonte]

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ção[editar | editar código-fonte]

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

Integração com Qt/C++[editar | editar código-fonte]

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 em Qt[editar | editar código-fonte]

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

Ferramentas de desenvolvimento[editar | editar código-fonte]

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.

Referências[editar | editar código-fonte]