introdução ao qml
Post on 19-Jul-2015
140 Views
Preview:
TRANSCRIPT
Tchê Linux Pelotas 2014 1
Introdução ao QML
Luis Gustavo S. Barreto<gustavosbarreto@gmail.com>
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
Tchê Linux Pelotas 2014 3
QML=
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
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
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, …)
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
Tchê Linux Pelotas 2014 8
Plataformas Mobile
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
Tchê Linux Pelotas 2014 10
Exemplo QMLRectangle { id: retangulo width: 200 height: 200 color: areaMouse.pressed ? "red" : "blue" MouseArea { id: areaMouse anchors.fill: parent }}
Tchê Linux Pelotas 2014 11
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]; } }}
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
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.
Tchê Linux Pelotas 2014 14
Exemplo de ancoragem
Rectangle { id: r1; color: "blue" }Rectangle { color: "red"; anchors.left: r1.right; anchors.top: r1.bottom;}
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
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
Tchê Linux Pelotas 2014 17
Perguntas?
Tchê Linux Pelotas 2014 18
Obrigado!
Luis Gustavo S. Barreto<gustavosbarreto@gmail.com>
www.github.com/gustavosbarreto
top related