QtQuick - WSL II

1,962 views

Published on

Presentation to the II Free Software Workshop at CIn-UFPE - Recife - Brazil.

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,962
On SlideShare
0
From Embeds
0
Number of Embeds
916
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

QtQuick - WSL II

  1. 1. QtQuickWorkshop de Software LivreDaker Fernandes PinheiroMarço/2011, UFPE
  2. 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. 3. Agenda ˆ O que é Qt? ˆ QtCreator ˆ QtQuick ˆ QML + Exercícios ˆ Finalmentes
  4. 4. O que é Qt? Framework cross-plataform e LGPL para desenvolvimento de software
  5. 5. Quem usa o Qt?
  6. 6. Quem desenvolve o Qt?
  7. 7. Quem desenvolve o Qt?Desenvolvedaroes da Nokia - mais de 14 anos de experiência
  8. 8. Quem desenvolve o Qt?Comunidade
  9. 9. Quem desenvolve o Qt?Você! :-) http://qt.gitorious.org http://labs.qt.nokia.com http://developer.qt.nokia.com
  10. 10. C++
  11. 11. PythonPySide Bindings (LGPL) do Qt para Python
  12. 12. Ferramentas
  13. 13. Nokia Qt SDK http://www.forum.nokia.com/Develop/Qt/
  14. 14. Simulador
  15. 15. Documentação http://doc.qt.nokia.com
  16. 16. Edição Várias features: auto-complete (Eclipse-like), highlight de erros, refactoring, etc
  17. 17. Compilador/ Debugger Compilador e debugger poderoso para diferentes plataformas
  18. 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. 19. QML - Hello Worldhelloworld.qmlimport 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. 20. QML - Conceitos Básicos ˆ Objetos ˆ Propriedades ˆ Comentários ˆ Identicadores (id) ˆ Âncoras ˆ Expressões
  21. 21. QML - Conceitos Básicosids.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. 22. QML - Tipos Básicostypes.qmlItem { 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. 23. QML - Rectanglerectangle.qmlRectangle { 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. 24. QML - Item ˆ anchors ˆ children, resources ˆ clip ˆ data ˆ focus ˆ opacity ˆ scale ˆ state, states, transitions ˆ transform, transformOrigin ˆ visible ˆ x, y, z ˆ width, height
  25. 25. QML - Texttext.qmlText { 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. 26. QML - Imageimage.qmlImage { 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. 27. QML - Mais Elementos Visuais ˆ BorderImage ˆ TextInput ˆ TextEdit ˆ Flickable ˆ Mais..
  28. 28. QML - MouseAreamouse.qmlRectangle { 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. 29. Exercício 1Crie a visualização das informações de uma espécie de ser vivo com asseguintes informações: ˆ Nome Cientíco ˆ Foto ˆ Descrição
  30. 30. QML - MouseAreamouse.qmlRectangle { 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. 31. QML - MouseArea ˆ Sinais ˆ onCanceled ˆ onClicked ˆ onDoubleClicked ˆ onEntered ˆ onExited ˆ onPositionChanged ˆ onPressAndHold ˆ onPressed ˆ onReleased
  32. 32. QML - MouseArea ˆ Propriedades ˆ enabled ˆ drag ˆ pressed ˆ hoverEnabled ˆ mouseX, mouseY ˆ containsMouse
  33. 33. QML - Exercício 2Crie 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. 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. 35. Exercício 3Encapsule 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 mostrada ou nãoFaç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.
  36. 36. QML - Estados e Animações ˆ states, state ˆ State ˆ when ˆ PropertyChanges ˆ Transition ˆ NumberAnimation ˆ easing ˆ Behavior
  37. 37. Exercício 4Crie 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
  38. 38. Models e Views no QtQuickSã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. 39. QML - ListModelÉ um modelo QML geralmente utilizado para prototipagem.list.qmlListModel { 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. 40. QML - ComponentsSã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. 41. QML - Componentscomponent.qmlComponent { id : speciesDelegate SpeciesInfo { w i d t h : 700 h e i g h t : 200 speciesName : species descriptionText : description photoUrl : photo }}
  42. 42. QML - ViewsElementos visuais que lêem a informação de um modelo e pintam cadaitem através de seu delegate (um Component). ˆ ListView ˆ GridView ˆ PathView ˆ Repeaterlistview.qmlListView { model : l i s t M o d e l I d delegate : listModelDelegate}
  43. 43. QML - Outros ModelsEm QML podemos ter diversos tipos de Model. ˆ Inteiros ˆ Listas Javascript ˆ Modelos C++ ˆ QStringList ˆ QListQObject* ˆ QAbstractItemModel ˆ Modelos QML ˆ ListModel ˆ XmlListModel ˆ Crie o seu!
  44. 44. Exercício 5Crie um ListModel com as informações das espécies e utilize o elementodo Exercício 4 como delegate para visualizá-los em uma lista.
  45. 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. 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. 47. Dúvidas?
  48. 48. Obrigado! Daker Fernandes Pinheiro http://codecereal.blogspot.com daker.pinheiro@openbossa.org @dakerfp

×