qtquick - wsl ii
Post on 03-Jul-2015
1.678 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related