Saltar para o conteúdo

QML

Origem: Wikipédia, a enciclopédia livre.
QML
Paradigma Declarativa, reativa, script
Surgido em 2009
Última versão 5.8.0[1] / 23 de Janeiro de 2017
Estilo de tipagem Dinâmica, forte
Dialetos ISO/IEC 14882:1998
ISO/IEC 14882:2003
ISO/IEC 14882:2011
Influenciada por XAML, JSON, JavaScriptm Qt
Influenciou Qt

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.

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

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

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.

  1. «Qt 5.8 Released». 23 de janeiro de 2017 
  2. «Henrik Hartz (Product Manager for Qt Software at Nokia) comment on the name». 24 de agosto de 2009. Consultado em 22 de março de 2017. Arquivado do original em 25 de março de 2014 
  3. «Qt 4.7: QML Elements». Doc.qt.nokia.com. Consultado em 22 de setembro de 2010. Arquivado do original em 11 de agosto de 2012