QtQuick - WSL II

QtQuickWorkshop de Software LivreDaker Fernandes PinheiroMarç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 prossional: 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.org http://labs.qt.nokia.com http://developer.qt.nokia.com

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 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 }}

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

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 }}

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 } }}

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}

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

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}

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 }}

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

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 " } }}

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

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 " } }}

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

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)

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.

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

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

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

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 " }}

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

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 }}

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}

QML - Outros ModelsEm 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 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.

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.

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]

Dúvidas?

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

http://codecereal.blogspot.com	417
http://codecereal.blogspot.com.br	84
http://codecereal.blogspot.de	8
http://codecereal.blogspot.com.es	7
http://codecereal.blogspot.in	5
http://codecereal.blogspot.fr	5
http://codecereal.blogspot.pt	5
http://codecereal.blogspot.co.uk	4
http://codecereal.blogspot.ca	3
http://codecereal.blogspot.com.ar	2
http://codecereal.blogspot.com.au	2
http://codecereal.blogspot.it	2
http://codecereal.blogspot.co.nz	1
http://codecereal.blogspot.se	1
http://translate.googleusercontent.com	1
http://codecereal.blogspot.jp	1

QtQuick - WSL II

by Daker Fernandes on May 27, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

16 Embeds 548

Statistics

QtQuick - WSL II — Presentation Transcript