Upload
internet
View
113
Download
2
Embed Size (px)
Citation preview
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