O documento introduz o QML, uma linguagem para desenvolvimento de interfaces gráficas. Explica que o QML permite a criação de elementos visuais e lógica através de JavaScript. Apresenta alguns conceitos como ancoragem, modelo-visão-delegado e contextualiza o QML como parte do framework Qt para desenvolvimento multiplataforma.

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

2. Tchê Linux Pelotas 2014 2
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

3. Tchê Linux Pelotas 2014 3
QML
=

4. Tchê Linux Pelotas 2014 4
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

5. Tchê Linux Pelotas 2014 5
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

6. Tchê Linux Pelotas 2014 6
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, …)

7. Tchê Linux Pelotas 2014 7
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

8. Tchê Linux Pelotas 2014 8
Plataformas Mobile

9. Tchê Linux Pelotas 2014 9
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

10. Tchê Linux Pelotas 2014 10
Exemplo QML
Rectangle {
id: retangulo
width: 200
height: 200
color: areaMouse.pressed ? "red" : "blue"
MouseArea {
id: areaMouse
anchors.fill: parent
}
}

11. Tchê Linux Pelotas 2014 11
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];
}
}
}

12. Tchê Linux Pelotas 2014 12
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

13. Tchê Linux Pelotas 2014 13
Posicionamento baseado em
âncoras
Cada objeto possui 7 linhas âncoras que
permitem o relacionamento entre linhas âncoras
de outros objetos.

14. Tchê Linux Pelotas 2014 14
Exemplo de ancoragem
Rectangle { id: r1; color: "blue" }
Rectangle {
color: "red";
anchors.left: r1.right;
anchors.top: r1.bottom;
}

15. Tchê Linux Pelotas 2014 15
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

16. Tchê Linux Pelotas 2014 16
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

17. Tchê Linux Pelotas 2014 17
Perguntas?

18. Tchê Linux Pelotas 2014 18
Obrigado!
Luis Gustavo S. Barreto
<gustavosbarreto@gmail.com>
www.github.com/gustavosbarreto