QML

Thiago Lacerda openbossa - INdT

Por qu?

Muito cdigo necessrio, quando se usa a antiga API de UI do Qt (GraphicsView) Diminuindo a velocidade para criar UIs Qualquer modificao == compilar cdigo

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 arvre de objetos, com propriedades (colocar exemplo de properties)

Benefcios

Facilidade para criar UIs ricas Menos cdigo Totalmente integrada com o Qt Integrada com JavaScript

Fcil para modularizar o cdigo

Estreita a relao entre os desenvolvedores e designers

Plugins
Sem compilao

Tipos bsicos do QML

bool int string real

variant
url color date

Tipos bsicos do QML

double list point rect

time
...

Elementos bsicos do QML

Item Component QtObject

Elementos grficos e textuais

Text Image BorderImage

Mouse e interao

MouseArea Flickable Keys

Posicionadores e repetidores

Column

Row
Grid

Repeater

Anchor Layout

Define relaes 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 expresso JavaScript tambm pode ser usado

Acessar propriedades de objetos, chamar funes e usar objetos JavaScript (built-in)

Elements and Objects as Property Values

O binding tambm pode ser feito com objetos

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

Property Aliases

No aloca espao para essa propriedades to tipo alias

Conecta a nova propriedade diretamente com outra (como um tnel)

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, tambm 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 parmetro

Com ele podemos

Saber que boto do mouse foi apertado Posio do mouse

Objeto mouse

Criando Componentes

Componente algum elemento QML que pode ser instanciado

Geralmente definido em um arquivo .qml

Reutilizao de cdigo

Criando Componentes

Exemplo:

Criando Componentes

Componentes criados no mesmo diretrio so 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 ao quando o componente acaba de ser carregado ou destrudo

Criando Componentes

Componentes tambm podem ser definidos dentro do prprio Item

Criao feita com o mtodo createObject

Estados

Componentes podem ter vrios estados Dependendo do estado, algumas aes podem ser tomadas, propriedades mudadas, etc. Exemplo: um sinal de trnsito 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 condio, usando a propriedade when

Animaes e Transies

Durante mudana de estados, podemos querer mudanas animadas nas propriedades

Para animar entre mudana de estados, usamos o elemento Transition

Animaes

SequentialAnimation ParallelAnimation Behavior PropertyAction ScriptAction

Animaes e Transies

Animao de propriedades

PropertyAnimation

NumberAnimation
ParentAnimation AnchorAnimation

Animaes e Transies

Exemplo

Animaes e Transies

Exemplo

Views e Models

Views so colees 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 contedo

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

Views e Models

ListModel

Hierarquia de elementos com roles

Views e Models

XmlListModel

Constri um model atravs de um arquivo XML Roles so 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 so 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 mtodo 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 fcil de criar um plugin

Wizard do QtCreator

Cria seu arquivo .pro

Cria o esqueleto do seu plugin Cria o qmldir

Cria seu tipo inicial