QtQuickWorkshop de Software Livre

Daker Fernandes Pinheiro

Março/2011, UFPE

Sobre mim...

� É DAKER mesmo, não é apelido

� Desenvolvedor Qt desde 2010

� Formação: Graduando em Ciência da Computação @ CIn-UFPE

� Experiência pro�ssional: INdT

� Software Livre :-)

� Camisetas Brancas

Agenda

� O que é Qt?

� QtCreator

� QtQuick

� QML + Exercícios

� Finalmentes

O que é Qt?

Framework cross-plataform e LGPL para desenvolvimento de software

Quem usa o Qt?

Quem desenvolve o Qt?

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

Quem desenvolve o Qt?Comunidade

Quem desenvolve o Qt?Você! :-)

http://qt.gitorious.orghttp://labs.qt.nokia.com

http://developer.qt.nokia.com

C++

PythonPySide

Bindings (LGPL) do Qt para Python

Ferramentas

Nokia Qt SDK

http://www.forum.nokia.com/Develop/Qt/

Simulador

Documentação

http://doc.qt.nokia.com

Edição

Várias features: auto-complete (Eclipse-like), highlight de erros,refactoring, etc

Compilador/ Debugger

Compilador e debugger poderoso para diferentes plataformas

O que é QtQuick?

� Qt ≥ 4.7

� QML: linguagem declarativa JavaScript-like

� Qt Declarative: módulo C++

� Suporte do Qt Creator

� Guia QtQuick

� Referência

QML - Hello World

helloworld.qml

i m p o r t Q tQu i c k 1 .0/* H e l l o W o r l d em QML */

R e c t a n g l e {w i d t h : 360h e i g h t : 360T e x t {

i d : t e x t

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 : " H e l l o W o r l d " // P r o p r i e d a d e s

}}

QML - Conceitos Básicos

� Objetos

� Propriedades

� Comentários

� Identi�cadores (id)

� Âncoras

� Expressões

QML - Conceitos Básicos

ids.qml

i m p o r t Q tQu i c k 1 .0R e c t a n g l e {

w i d t h : 200 ; h e i g h t : 200T e x t {

i d : t i t l e

a n c h o r s . t o p : p a r e n t . t o pt e x t : " W o r l d "

}T e x t {

a n c h o r s . b o t t om : p a r e n t . b o t t omt e x t : " H e l l o " + t i t l e . t e x t

}}

QML - Tipos Básicos

types.qml

I t e m {w i d t h : 360 ; h e i g h t : 360 // p r o p r i e d a d e s ' int '

R e c t a n g l e {x : 2 0 . 5 ; y : 55 .0 // p r o p r i e d a d e s ' r e a l '

w i d t h : 200 ; h e i g h t : 200c o l o r : " red " // p r o p r i e d a d e ' c o l o r '

T e x t {x : 100 ; y : 20t e x t : " H e l l o " // p r o p r i e d a d e ' s t r i n g '

c o l o r : " # F A F 0 B 8 " // rgb em h e x a

}}

}

QML - Rectangle

rectangle.qml

R e c t a n g l e {w i d t h : 100 ; h e i g h t : 100b o r d e r . c o l o r : " red "

b o r d e r . w i d t h : 5c o l o r : " b l u e "

r a d i u s : 20sm o o t h : t r u e

}

QML - Item

� anchors

� children, resources

� clip

� data

� focus

� opacity

� scale

� state, states, transitions

� transform, transformOrigin

� visible

� x, y, z

� width, height

QML - Text

text.qml

T e x t {w i d t h : 200 ; h e i g h t : 50t e x t : " Meu <i > Texto </ i > "

c o l o r : " b l a c k "

e l i d e : T e x t . E l i d e R i g h t

w r apMode : T e x t . WordWrap

f o n t . b o l d : t r u e

f o n t . f a m i l y : " H e l v e t i c a "

f o n t . p i x e l S i z e : 40t e x t F o r m a t : T e x t . R i c h T e x t

}

QML - Image

image.qml

I m a g e {i d : i m a g e

w i d t h : 360 ; h e i g h t : 360s o u r c e : " ./ c o r a l . png " // p r o p r i e d a d e " url "

f i l l M o d e : I m a g e . S t r e t c hsm o o t h : t r u e

T e x t {t e x t : i m a g e . s t a t u s == I m a g e . Re a d y ?

" R e a d y " : " Not R e a d y "

f o n t . p i x e l S i z e : 32}

}

QML - Mais Elementos Visuais

� BorderImage

� TextInput

� TextEdit

� Flickable

� Mais..

QML - MouseArea

mouse.qml

R e c t a n g l e {w i d t h : 300 ; h e i g h t : 300c o l o r : " b l u e "

Mou s eA r e a {a n c h o r s . f i l l : p a r e n t

// H a n d l e r do s i n a l c l i c k e d

o n C l i c k e d : {p a r e n t . c o l o r = " red "

}}

}

Exercício 1

Crie a visualização das informações de uma espécie de ser vivo com asseguintes informações:

� Nome Cientí�co

� Foto

� Descrição

QML - MouseArea

mouse.qml

R e c t a n g l e {w i d t h : 300 ; h e i g h t : 300c o l o r : " b l u e "

Mou s eA r e a {a n c h o r s . f i l l : p a r e n t

// H a n d l e r do s i n a l c l i c k e d

o n C l i c k e d : {p a r e n t . c o l o r = " red "

}}

}

QML - MouseArea

� Sinais� onCanceled� onClicked� onDoubleClicked� onEntered� onExited� onPositionChanged� onPressAndHold� onPressed� onReleased

QML - MouseArea

� Propriedades� enabled� drag� pressed� hoverEnabled� mouseX, mouseY� containsMouse

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çõesdesaparece

� Quando a foto for clicada novamente, as informações reaparecem

QML - Criando meu próprios elementos

� Arquivos QML são elementos!� De�nindo Propriedades

� property tipo nomeDaPropriedade [: valorDefault]

� Propriedades alias

� Sinais (signal)

� Sinais propertyChanged

� Métodos (function)

Exercício 3

Encapsule o item do Exercício 2 em um item (SpeciesInfo) com asseguintes 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 mostradaou não

Faça com que somente a segunda parte do nome cientí�co �que emnegrito (utilize as tags <b></b>).Para isso, crie uma função auxiliar.

QML - Estados e Animações

� states, state

� State

� when

� PropertyChanges

� Transition

� NumberAnimation

� easing

� Behavior

Exercício 4

Crie uma animação para fazer as informações de especie e descriçãoaparecerem-desaparecerem do Elemento do Exercício 3.

� Utilize estados

� Tente animar utilizando a opacidade

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

QML - ListModel

É um modelo QML geralmente utilizado para prototipagem.

list.qml

L i s t M o d e l {L i s t E l e m e n t {

p h o t o : " c o r a l . png "

s p e c i e s : " C h e n o p o d i u m A m b r o s i o i d e s "

d e s c r i p t i o n : " L o r e m i p s u m d o l o r sit a m e t "

}L i s t E l e m e n t {

p h o t o : " m o n e r a . png "

s p e c i e s : " S t a c h y b o t r y s C h a r t a r u m "

d e s c r i p t i o n : " V i v a m u s l i b e r o l e c t u s "

}}

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

QML - Components

component.qml

Compon e n t {i d : s p e c i e s D e l e g a t e

S p e c i e s I n f o {w i d t h : 700h e i g h t : 200

s p e c i e s N a m e : s p e c i e s

d e s c r i p t i o n T e x t : d e s c r i p t i o n

p h o t o U r l : p h o t o

}}

QML - Views

Elementos visuais que lêem a informação de um modelo e pintam cadaitem através de seu delegate (um Component).

� ListView� GridView� PathView� Repeater

listview.qml

L i s t V i e w {mod e l : l i s t M o d e l I d

d e l e g a t e : l i s t M o d e l D e l e g a t e

}

QML - Outros Models

Em QML podemos ter diversos tipos de Model.

� Inteiros

� Listas Javascript� Modelos C++

� QStringList� QList<QObject*>� QAbstractItemModel

� Modelos QML� ListModel� XmlListModel� Crie o seu!

Exercício 5

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

Exercícios Extra

� Faça uma vizualização do tipo grid apenas com as imagens e nomedas 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.

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 nosExemplos]

Dúvidas?

Obrigado!

Daker Fernandes Pinheirohttp://codecereal.blogspot.comdaker.pinheiro@openbossa.org

@dakerfp