Introdução ao QML

Tchê Linux Pelotas 2014 1
Introdução ao QML
Luis Gustavo S. Barreto
<gustavosbarreto@gmail.com>

O que é QML?
●
É uma linguagem declarativa para descrever
elementos de interface gráfica
●
Permite o uso de JavaScript para
implementar a lógica de alto nível da interface
gráfica

QML
=

Contextualização
●
QML vs. Qt Quick
●
Qt Quick é uma coleção de tecnologias para
criar interfaces em QML
●
QML faz parte do Qt Quick, que por sua vez
é integrante do Framework Qt

Um pouco de história
●
Criado em 1995 pela Trolltech
●
Em 1997 o KDE passou a utilizar Qt
●
Em 2001 se tornou multi-plataforma
●
Em 2005 foi lançado a Qt4
●
Em 2008 foi adquirida pela Nokia e
vendida em 2011 para a Digia
●
Em 2010 foi lançado o Qt Quick/QML

O Framework Qt
É um framework multiplataforma para desenvolvimento
de aplicações em C++
●
Containers: Listas, Vetores, ...
●
Classes para comunicação entre sockets, leitura e
escrita de arquivos, manipulação de strings, acesso a
banco de dados, parser XML e JSON, manipulação de
threads, recursos multimídia, renderizador HTML
●
Conjunto de elementos gráficos (Botões, caixas de
texto, rótulos, …)

Qt Quick
É uma coleção de tecnologias para criar
interfaces para aplicações desktop, mobile e
dispositivos embarcados
●
QML, a linguagem
●
Creator Tools (Qt Creator), o IDE

Plataformas Mobile

A linguagem QML
●
É descrita com uma estrutura em arvore de
objetos e bindings de propriedades
●
As propriedades são avaliadas
dinâmicamente, ou seja, são recalculadas
sempre que o valor muda
●
A comunicação entre os objetos é feita através
do uso de sinais e slots

Exemplo QML
Rectangle {
id: retangulo
width: 200
height: 200
color: areaMouse.pressed ? "red" : "blue"
MouseArea {
id: areaMouse
anchors.fill: parent
}
}

Exemplo QML e JavaScript
Rectangle {
id: retangulo
width: 200
height: 200
MouseArea {
id: areaMouse
anchors.fill: parent
onClicked: {
var cores = [ 'red', 'green', 'blue' ];
var i = Math.floor((Math.random()*cores.length)+0);
retangulo.color = cores[i];
}
}
}

Elementos
●
Gráficos
– Rectangle – Um retângulo
– Image – Para incorporação de imagens
●
Texto
– Text – Para inserção de textos
– TextInput – Para capturar entrada do teclado
●
Posicionadores
– Column – Arranja seus filhos verticalmente
– Row – Arranja seus filhos horizontalmente
– Grid – Posiciona seus filhos em um grid

Posicionamento baseado em
âncoras
Cada objeto possui 7 linhas âncoras que
permitem o relacionamento entre linhas âncoras
de outros objetos.

Exemplo de ancoragem
Rectangle { id: r1; color: "blue" }
Rectangle {
color: "red";
anchors.left: r1.right;
anchors.top: r1.bottom;
}

Model, View e Delegate
●
Model – Contém dados estruturados
●
View – Um container que exibe os dados
●
Delegate – Define como um dado deve ser
apresentado na view

Legal, e agora?
●
Site oficial: www.qt-project.org
●
Documentação: http://qt-project.org/doc
●
Fórum: www.qtcentre.org
●
Site com códigos fonte: www.qt-apps.org

Perguntas?

Obrigado!
Luis Gustavo S. Barreto
<gustavosbarreto@gmail.com>
www.github.com/gustavosbarreto

Introdução ao QML

Mais conteúdo relacionado

Destaque (20)

Semelhante a Introdução ao QML (20)

Último (7)

Introdução ao QML