QML

Thiago Lacerdaopenbossa - INdT

Por quê?

Muito código necessário, quando se usa a antiga API de UI do Qt (GraphicsView)

Diminuindo a velocidade para criar UIs Qualquer modificação == compilar código

O que é QML?

Introduzido no Qt 4.7 Linguagem declarativa para criar UIs ricas Descreve a “cara” da UI, assim como seu

comportamento UI é tratada como uma arvóre de objetos, com

propriedades (colocar exemplo de properties)

Benefícios

Facilidade para criar UIs ricas Menos código Totalmente integrada com o Qt Integrada com JavaScript Fácil para modularizar o código Estreita a relação entre os desenvolvedores e

designers Plugins Sem compilação

Tipos básicos do QML

bool int string real variant url color date

Tipos básicos do QML

double list point rect time ...

Elementos básicos do QML

Item Component QtObject

Elementos gráficos e textuais

Text Image BorderImage

Mouse e interação

MouseArea Flickable Keys

Posicionadores e repetidores

Column Row Grid Repeater

Anchor Layout

Define relações entre as âncoras dos itens Poder posicionar os itens usando o conceito de

âncoras

Anchor Layout

Exemplo

Propriedades

Componentes QML tem propriedades que podem ser lidas e modificadas por outros objetos

Propriedades podem ser criadas pelo desenvolvedor

Property Binding

Faz um “bind” do valor de uma propriade, para ter sempre o valor de outra propriedade

O valor da propriedade é automaticamente atualizado, caso o valor da outra seja mudado

Property Binding

Qualquer expressão JavaScript também pode ser usado

Acessar propriedades de objetos, chamar funções e usar objetos JavaScript (built-in)

Elements and Objects as Property Values

O “binding” também pode ser feito com objetos

Tenha cuidado quando referenciar o pai de um objeto que está sendo usado como “binding”

Property Aliases

Não aloca espaço para essa propriedades to tipo “alias”

Conecta a nova propriedade diretamente com outra (como um túnel)

Tem o mesmo tipo da propriedade destino

Elemento Binding

Usado para assegurar que a propriedade “target” sempre terá um determinado valor

O “binding” nunca é perdido

Signals e Handlers

Signals: Mesmo conceito do Qt Cada sinal tem o seu handler, sempre no

formato: on<signalName>

Signals e Handlers

Cada propriedade do QML tem seu signal Consequentemente, cada signal da

propriedade, também terá seu handler Formato: on<propertyName>Changed

Eventos de Mouse

Signals e handlers para interagir com eventos de mouse

Elemento MouseArea Signals

pressed clicked canceled doubleClicked released

Eventos de Mouse

Exemplo

Eventos de Mouse

Os handlers da MouseArea recebem um MouseEvent como parâmetro

Com ele podemos Saber que botão do mouse foi apertado Posição do mouse

Objeto “mouse”

Criando Componentes

Componente é algum elemento QML que pode ser instanciado

Geralmente definido em um arquivo .qml Reutilização de código

Criando Componentes

Exemplo:

Criando Componentes

Componentes criados no mesmo diretório são vistos sem problemas

Quando utilizar dentro de outro arquivo, o nome deve ser igual ao usado para nomear o arquivo

Component.onCompleted e Component.onDestruction

Handlers usados para fazer alguma ação quando o componente acaba de ser carregado ou destruído

Criando Componentes

Componentes também podem ser definidos dentro do próprio Item

Criação feita com o método createObject

Estados

Componentes podem ter vários estados Dependendo do estado, algumas ações

podem ser tomadas, propriedades mudadas, etc.

Exemplo: um sinal de trânsito Conjunto de propriedades definidas em um

elemento State

Estados

Elementos de um State PropertyChanges StateGroup StateChangeScript ParentChange AnchorsChanges

Propriedade state é sempre presente em um Item

Item sempre inicia no estado “default”

Criando Estados

Criando Estados

Estados podem ser ativados de acordo com alguma condição, usando a propriedade “when”

Animações e Transições

Durante mudança de estados, podemos querer mudanças animadas nas propriedades

Para animar entre mudança de estados, usamos o elemento Transition

Animações SequentialAnimation ParallelAnimation Behavior PropertyAction ScriptAction

Animações e Transições

Animação de propriedades PropertyAnimation NumberAnimation ParentAnimation AnchorAnimation

Animações e Transições

Exemplo

Animações e Transições

Exemplo

Views e Models

Views são coleções de itens Views do QML

ListView GridView PathView WebView

View e Models

Você diz como será cada item da sua view Delegate

O model deve ser fornecido para lista preencher seu conteúdo

Possibilidade de exportar seus models em C++ para o QML

Views e Models

ListModel Hierarquia de elementos com “roles”

Views e Models

XmlListModel Constrói um model através de um arquivo

XML Roles são especificados pelo XmlRole

Views e Models

Exemplo

Criando Tipos

Tipos mais complexos podem ser criados no C++ e exportados pro QML

Herdam de QObject Plugins são utilizados para isso

Criando Tipos

Primeiro cria-se uma classe que herda de QDeclarativeExtensionPlugin

Crie seu tipo, derivando de QObject e exporte as propriedade usando a macro Q_PROPERTY

Registre seu tipo com o método registerTypes() Exporte seu plugin usando a macro

Q_EXPORT_PLUGIN2 Crie um arquivo qmldir, para expor seu plugin e

seus tipos QML

Criando Tipos

Criando seu tipo

Criando Tipos

Exemplo de Plugin

Criando Tipos

Depois dos passos anteriores podemos no QML fazer

Criando Tipos

Maneira mais fácil de criar um plugin Wizard do QtCreator Cria seu arquivo .pro Cria o esqueleto do seu plugin Cria o qmldir Cria seu tipo inicial