Introdução ao QML

Tchê Linux Pelotas 2014 1

Introdução ao QML

Luis Gustavo S. Barreto<[email protected]>


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 QMLRectangle { id: retangulo width: 200 height: 200 color: areaMouse.pressed ? "red" : "blue" MouseArea { id: areaMouse anchors.fill: parent }}


Exemplo QML e JavaScriptRectangle { 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<[email protected]>

www.github.com/gustavosbarreto

Software

Introdução ao QML