QML
Thiago Lacerda
openbossa - 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
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