QtQuick - WSL II
-
Upload
daker-fernandes -
Category
Technology
-
view
1.678 -
download
4
description
Transcript of QtQuick - WSL II
![Page 1: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/1.jpg)
QtQuickWorkshop de Software Livre
Daker Fernandes Pinheiro
Março/2011, UFPE
![Page 2: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/2.jpg)
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
![Page 3: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/3.jpg)
Agenda
� O que é Qt?
� QtCreator
� QtQuick
� QML + Exercícios
� Finalmentes
![Page 4: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/4.jpg)
O que é Qt?
Framework cross-plataform e LGPL para desenvolvimento de software
![Page 5: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/5.jpg)
Quem usa o Qt?
![Page 6: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/6.jpg)
Quem desenvolve o Qt?
![Page 7: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/7.jpg)
Quem desenvolve o Qt?Desenvolvedaroes da Nokia - mais de 14 anos de experiência
![Page 8: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/8.jpg)
Quem desenvolve o Qt?Comunidade
![Page 9: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/9.jpg)
Quem desenvolve o Qt?Você! :-)
http://qt.gitorious.orghttp://labs.qt.nokia.com
http://developer.qt.nokia.com
![Page 10: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/10.jpg)
C++
![Page 11: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/11.jpg)
PythonPySide
Bindings (LGPL) do Qt para Python
![Page 12: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/12.jpg)
Ferramentas
![Page 13: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/13.jpg)
Nokia Qt SDK
http://www.forum.nokia.com/Develop/Qt/
![Page 14: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/14.jpg)
Simulador
![Page 15: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/15.jpg)
Documentação
http://doc.qt.nokia.com
![Page 16: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/16.jpg)
Edição
Várias features: auto-complete (Eclipse-like), highlight de erros,refactoring, etc
![Page 17: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/17.jpg)
Compilador/ Debugger
Compilador e debugger poderoso para diferentes plataformas
![Page 18: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/18.jpg)
O que é QtQuick?
� Qt ≥ 4.7
� QML: linguagem declarativa JavaScript-like
� Qt Declarative: módulo C++
� Suporte do Qt Creator
� Guia QtQuick
� Referência
![Page 19: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/19.jpg)
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
}}
![Page 20: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/20.jpg)
QML - Conceitos Básicos
� Objetos
� Propriedades
� Comentários
� Identi�cadores (id)
� Âncoras
� Expressões
![Page 21: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/21.jpg)
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
}}
![Page 22: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/22.jpg)
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
}}
}
![Page 23: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/23.jpg)
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
}
![Page 24: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/24.jpg)
QML - Item
� anchors
� children, resources
� clip
� data
� focus
� opacity
� scale
� state, states, transitions
� transform, transformOrigin
� visible
� x, y, z
� width, height
![Page 25: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/25.jpg)
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
}
![Page 26: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/26.jpg)
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}
}
![Page 27: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/27.jpg)
QML - Mais Elementos Visuais
� BorderImage
� TextInput
� TextEdit
� Flickable
� Mais..
![Page 28: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/28.jpg)
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 "
}}
}
![Page 29: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/29.jpg)
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
![Page 30: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/30.jpg)
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 "
}}
}
![Page 31: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/31.jpg)
QML - MouseArea
� Sinais� onCanceled� onClicked� onDoubleClicked� onEntered� onExited� onPositionChanged� onPressAndHold� onPressed� onReleased
![Page 32: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/32.jpg)
QML - MouseArea
� Propriedades� enabled� drag� pressed� hoverEnabled� mouseX, mouseY� containsMouse
![Page 33: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/33.jpg)
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
![Page 34: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/34.jpg)
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)
![Page 35: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/35.jpg)
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.
![Page 36: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/36.jpg)
QML - Estados e Animações
� states, state
� State
� when
� PropertyChanges
� Transition
� NumberAnimation
� easing
� Behavior
![Page 37: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/37.jpg)
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
![Page 38: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/38.jpg)
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
![Page 39: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/39.jpg)
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 "
}}
![Page 40: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/40.jpg)
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
![Page 41: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/41.jpg)
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
}}
![Page 42: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/42.jpg)
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
}
![Page 43: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/43.jpg)
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!
![Page 44: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/44.jpg)
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.
![Page 45: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/45.jpg)
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.
![Page 46: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/46.jpg)
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]
![Page 47: QtQuick - WSL II](https://reader031.fdocumentos.tips/reader031/viewer/2022020110/559582481a28ab23548b4649/html5/thumbnails/47.jpg)
Dúvidas?