Este documento apresenta uma palestra sobre QtQuick e Software Livre. Apresenta conceitos básicos de QtQuick como QML, elementos visuais e interação, além de exercícios práticos para aplicar os conceitos aprendidos.

1. QtQuick
Workshop de Software Livre
Daker Fernandes Pinheiro
Março/2011, UFPE

2. Sobre mim...
ˆ É DAKER mesmo, não é apelido
ˆ Desenvolvedor Qt desde 2010
ˆ Formação: Graduando em Ciência da Computação @ CIn-UFPE
ˆ Experiência prossional: INdT
ˆ Software Livre :-)
ˆ Camisetas Brancas

3. Agenda
ˆ O que é Qt?
ˆ QtCreator
ˆ QtQuick
ˆ QML + Exercícios
ˆ Finalmentes

4. O que é Qt?
Framework cross-plataform e LGPL para desenvolvimento de software

5. Quem usa o Qt?

6. Quem desenvolve o Qt?

7. Quem desenvolve o Qt?
Desenvolvedaroes da Nokia - mais de 14 anos de experiência

8. Quem desenvolve o Qt?
Comunidade

9. Quem desenvolve o Qt?
Você! :-)
http://qt.gitorious.org
http://labs.qt.nokia.com
http://developer.qt.nokia.com

10. C++

11. Python
PySide
Bindings (LGPL) do Qt para Python

12. Ferramentas

13. Nokia Qt SDK
http://www.forum.nokia.com/Develop/Qt/

14. Simulador

15. Documentação
http://doc.qt.nokia.com

16. Edição
Várias features: auto-complete (Eclipse-like), highlight de erros,
refactoring, etc

17. Compilador/ Debugger
Compilador e debugger poderoso para diferentes plataformas

18. O que é QtQuick?
ˆ Qt ≥ 4.7
ˆ QML: linguagem declarativa JavaScript-like
ˆ Qt Declarative: módulo C++
ˆ Suporte do Qt Creator
ˆ Guia QtQuick
ˆ Referência

19. QML - Hello World
helloworld.qml
import QtQuick 1.0
/* Hello World em QML */
Rectangle {
w i d t h : 360
h e i g h t : 360
Text {
id : text
a n c h o r s . c e n t e r I n : p a r e n t // A n c o r a s
t e x t : Hello World // P r o p r i e d a d e s
}
}

20. QML - Conceitos Básicos
ˆ Objetos
ˆ Propriedades
ˆ Comentários
ˆ Identicadores (id)
ˆ Âncoras
ˆ Expressões

21. QML - Conceitos Básicos
ids.qml
i m p o r t QtQuick 1.0
Rectangle {
w i d t h : 2 0 0 ; h e i g h t : 200
Text {
id : t i t l e
anchors . top : parent . top
t e x t : World
}
Text {
anchors . bottom : p a r e n t . bottom
t e x t : Hello + t i t l e . t e x t
}
}

22. QML - Tipos Básicos
types.qml
Item {
w i d t h : 3 6 0 ; h e i g h t : 360 / / p r o p r i e d a d e s ' i n t '
Rectangle {
x : 2 0 . 5 ; y : 55.0 // p r o p r i e d a d e s ' real '
w i d t h : 2 0 0 ; h e i g h t : 200
c o l o r : red // p r o p r i e d a d e ' color '
Text {
x : 1 0 0 ; y : 20
t e x t : Hello // p r o p r i e d a d e ' string '
c o l o r : # FAF0B8 // rgb em hexa
}
}
}

23. QML - Rectangle
rectangle.qml
Rectangle {
w i d t h : 1 0 0 ; h e i g h t : 100
b o r d e r . c o l o r : red
border . width : 5
c o l o r : blue
r a d i u s : 20
smooth : t r u e
}

24. QML - Item
ˆ anchors
ˆ children, resources
ˆ clip
ˆ data
ˆ focus
ˆ opacity
ˆ scale
ˆ state, states, transitions
ˆ transform, transformOrigin
ˆ visible
ˆ x, y, z
ˆ width, height

25. QML - Text
text.qml
Text {
w i d t h : 2 0 0 ; h e i g h t : 50
t e x t : Meu i Texto / i
c o l o r : black
e l i d e : Text . E l i d e R i g h t
w r a p M o d e : T e x t . WordWrap
font . bold : true
fo nt . f a m i l y : Helvetica
f o n t . p i x e l S i z e : 40
textFormat : Text . RichText
}

26. QML - Image
image.qml
Image {
id : image
w i d t h : 3 6 0 ; h e i g h t : 360
s o u r c e : ./ coral . png // p r o p r i e d a d e url
f i l l M o d e : Image . S t r e t c h
smooth : t r u e
Text {
t e x t : i m a g e . s t a t u s == I m a g e . R e a d y ?
Ready : Not Ready
f o n t . p i x e l S i z e : 32
}
}

27. QML - Mais Elementos Visuais
ˆ BorderImage
ˆ TextInput
ˆ TextEdit
ˆ Flickable
ˆ Mais..

28. QML - MouseArea
mouse.qml
Rectangle {
w i d t h : 3 0 0 ; h e i g h t : 300
c o l o r : blue
MouseArea {
anchors . f i l l : parent
// H a n d l e r do sinal clicked
onClicked : {
parent . color = red
}
}
}

29. Exercício 1
Crie a visualização das informações de uma espécie de ser vivo com as
seguintes informações:
ˆ Nome Cientíco
ˆ Foto
ˆ Descrição

30. QML - MouseArea
mouse.qml
Rectangle {
w i d t h : 3 0 0 ; h e i g h t : 300
c o l o r : blue
MouseArea {
anchors . f i l l : parent
// H a n d l e r do sinal clicked
onClicked : {
parent . color = red
}
}
}

31. QML - MouseArea
ˆ Sinais
ˆ onCanceled
ˆ onClicked
ˆ onDoubleClicked
ˆ onEntered
ˆ onExited
ˆ onPositionChanged
ˆ onPressAndHold
ˆ onPressed
ˆ onReleased

32. QML - MouseArea
ˆ Propriedades
ˆ enabled
ˆ drag
ˆ pressed
ˆ hoverEnabled
ˆ mouseX, mouseY
ˆ containsMouse

33. QML - Exercício 2
Crie o seguinte comportamento no item do Exercício 1:
ˆ Quando a foto for clicada, o retângulo com as demais informações
desaparece
ˆ Quando a foto for clicada novamente, as informações reaparecem

34. QML - Criando meu próprios elementos
ˆ Arquivos QML são elementos!
ˆ Denindo Propriedades
ˆ property tipo nomeDaPropriedade [: valorDefault]
ˆ Propriedades alias
ˆ Sinais (signal)
ˆ Sinais propertyChanged
ˆ Métodos (function)

35. Exercício 3
Encapsule o item do Exercício 2 em um item (SpeciesInfo) com as
seguintes propriedades:
ˆ photo - imagem da espécie
ˆ species - o nome cientíco da espécie
ˆ description - um texto com uma breve descrição sobre a espécie
ˆ expanded - um booleano que dirá se a descrição está sendo mostrada
ou não
Faça com que somente a segunda parte do nome cientíco que em
negrito (utilize as tags b/b).
Para isso, crie uma função auxiliar.

36. QML - Estados e Animações
ˆ states, state
ˆ State
ˆ when
ˆ PropertyChanges
ˆ Transition
ˆ NumberAnimation
ˆ easing
ˆ Behavior

37. Exercício 4
Crie uma animação para fazer as informações de especie e descrição
aparecerem-desaparecerem do Elemento do Exercício 3.
ˆ Utilize estados
ˆ Tente animar utilizando a opacidade

38. Models e Views no QtQuick
São um mecanismo para lidar com conjuntos de dados.
ˆ Models mantém e manipulam os dados ou items
ˆ Views mostram os dados ou items
ˆ Utilizando delegates

39. QML - ListModel
É um modelo QML geralmente utilizado para prototipagem.
list.qml
ListModel {
ListElement {
ph ot o : coral . png
s p e c i e s : Chenopodium Ambrosioides
d e s c r i p t i o n : Lorem ipsum dolor sit amet
}
ListElement {
ph ot o : monera . png
s p e c i e s : Stachybotrys Chartarum
d e s c r i p t i o n : Vivamus libero lectus
}
}

40. QML - Components
São esquemas de objetos que são criados apenas quando necessários.
São utilizados pelas views para mostrar cada item.
ˆ Modularização
ˆ Economia de Memória (Lazy Evaluation)
ˆ Utilizado como delegate das Views QML

41. QML - Components
component.qml
Component {
id : speciesDelegate
SpeciesInfo {
w i d t h : 700
h e i g h t : 200
speciesName : species
descriptionText : description
photoUrl : photo
}
}

42. QML - Views
Elementos visuais que lêem a informação de um modelo e pintam cada
item através de seu delegate (um Component).
ˆ ListView
ˆ GridView
ˆ PathView
ˆ Repeater
listview.qml
ListView {
model : l i s t M o d e l I d
delegate : listModelDelegate
}

43. QML - Outros Models
Em QML podemos ter diversos tipos de Model.
ˆ Inteiros
ˆ Listas Javascript
ˆ Modelos C++
ˆ QStringList
ˆ QListQObject*
ˆ QAbstractItemModel
ˆ Modelos QML
ˆ ListModel
ˆ XmlListModel
ˆ Crie o seu!

44. Exercício 5
Crie um ListModel com as informações das espécies e utilize o elemento
do Exercício 4 como delegate para visualizá-los em uma lista.

45. Exercícios Extra
ˆ Faça uma vizualização do tipo grid apenas com as imagens e nome
das espécies
ˆ Crie um modelo C++ capaz de persistir/manipular os dados
ˆ Crie uma interface de cadastro de novas espécies
ˆ M.O.N.E.R.A.

46. Links Essenciais
ˆ QtQuick
ˆ Treinamento de QtQuick para Designers
ˆ Treinamento de QtQuick para Developers
ˆ Treinamento de Qt
ˆ Aprenda QtQuick
ˆ Referência QML
ˆ Documentação do Qt
ˆ Aprenda Javascript
ˆ Kunstformen der Natur Ernst Haeckel [Imagens Utilizadas nos
Exemplos]

47. Dúvidas?

48. Obrigado!
Daker Fernandes Pinheiro
http://codecereal.blogspot.com
daker.pinheiro@openbossa.org
@dakerfp