Post on 08-Apr-2015
description
QT QUICKCriando Interfaces ricas e interativas com Qt Quick
quarta-feira, 29 de setembro de 2010
QUEM SOU EU?
Paulo Cesar FerreiraGraduado em ciência da computação pela UEL
em 2009
quarta-feira, 29 de setembro de 2010
QUEM SOU EU?
• Cursando pós-graduação em Design de Interação pelo Instituto Faber Ludens
• Ganhador do 1o Desafio Qt/openBossa (ganhei usando cheat, no caso, o QML, que na época não havia sido lançado ainda)
quarta-feira, 29 de setembro de 2010
ONDE TRABALHO
• Centro de Estudos Avançados do Recife (C.E.S.A.R.)
• Grupo de Inovação e Pesquisa (GIP)
quarta-feira, 29 de setembro de 2010
SOBRE O C.E.S.A.R.
1996 Nasce o C.E.S.A.R
Iniciada preocupação em
usabilidade e pesquisa em interfaces2001
2004Time de
usabilidade
Criado o Processo de Inovação do C.E.S.A.R2005
2008
2 Laboratórios de experiência do usuário
Time multidisciplinar formado por: Engenheiros de usabilidade, designers de interação, psicólogos, designers de interface, ilustradores, antropólogos e engenheiros de software
quarta-feira, 29 de setembro de 2010
O PROCESSO DE INOVAÇÃO
quarta-feira, 29 de setembro de 2010
O QUE EU FAÇO LÁ?
• Engenheiro de software do time de design
• Participo de todo o processo de inovação
• Responsabilidades: viabilidade tecnológica de idéias, pesquisar novas tecnologias e desenvolvimento de protótipos
quarta-feira, 29 de setembro de 2010
PROBLEMAS
• Prototipação de alta fidelidade são caros
• São feitos geralmente em Flash
• São jogados fora quando se vai implementar o produto final
• Ferramentas de desenvolvimento tradicionais limitam a liberdade criativa do designer
quarta-feira, 29 de setembro de 2010
QT QUICK
• Aproxima designers e desenvolvedores
• Linguagem declarativa simples, baseada em Javascript, que muitos designers já dominam
• Propicia interfaces ricas, fluídas e animadas
quarta-feira, 29 de setembro de 2010
EXEMPLOS EM QT QUICK
quarta-feira, 29 de setembro de 2010
EXEMPLOS EM QT QUICK
quarta-feira, 29 de setembro de 2010
O QT QUICK
•Qt Quick é uma tecnologia de interface com usuário de alto nível
• Permite programadores e designers trabalharem juntos para criar interfaces animadas, “touch-enabled”
• Consiste em:
•QML, uma linguagem declarativa baseada em Javascript
•Qt Creator, uma IDE com editor visual de QML
•Qt Declarative, módulo C++ para integração com QML
quarta-feira, 29 de setembro de 2010
PROGRAMAÇÃO DECLARATIVA
•Declarativo • Tradicional (imperativo)
Rectangle { width: 200 height: 50 Text { text: "Olá mundo" anchors.centerIn: parent }}
public class HelloSwing { public static void main(String[] args) { JFrame frame = new JFrame("Frame"); JLabel label = new JLabel("Olá mundo"); Dimension d = new Dimension(300, 50); frame.setSize(d); frame.add(label); frame.setVisible(true); }}
Na linguagem declarativa, retira-se as especifidades de programação, e preocupa-se só com layout, conteúdo e comportamento
quarta-feira, 29 de setembro de 2010
PROGRAMAÇÃO DECLARATIVA
• Com o QML, podemos declarar tanto a interface em si, quanto animações, estados, comportamentos:
Rectangle { id: frame width: 200 height: 50 Text { text: "Ola mundo" anchors.centerIn: parent smooth: true
SequentialAnimation on scale { loops: Animation.Infinite NumberAnimation { to: 2 } NumberAnimation { to: 0.5 } NumberAnimation { to: 1 } } }}
quarta-feira, 29 de setembro de 2010
COMPONENTES MAIS COMUNS
Rectangle { width: 100 height: 100 color: "red" border.color: "black" border.width: 5 radius: 10 }
Rectangle ImageImage { width: 200 height: 100 source: "http://www.google.com/images/logos/ps_logo2.png"}
Rectangle { height: 16; width: 300; border.color: "black" TextInput { anchors.fill: parent }}
TextInput
quarta-feira, 29 de setembro de 2010
COMPONENTES MAIS COMUNS
WebView FlickableFlickable { width: 200; height: 200 contentWidth: image.width; contentHeight: image.height
Image { id: image; source: "bigImage.png" }}
WebView { url: "http://www.nokia.com" preferredWidth: 490 preferredHeight: 400 scale: 0.5 smooth: false smoothCache: true}
quarta-feira, 29 de setembro de 2010
BINDING DE PROPRIEDADES
• Permite que você vincule o resultado de uma expressão a uma propriedade
•Quando o resultado da expressão muda, o valor da propriedade também muda
Rectangle { width: otherItem.width height: otherItem.height}
Rectangle { function calculateMyHeight() { return Math.max(otherItem.height, thirdItem.height); }
anchors.centerIn: parent width: Math.min(otherItem.width, 10) height: calculateMyHeight() color: { if (width > 10) "blue"; else "red" }}
quarta-feira, 29 de setembro de 2010
CRIANDO ITENS REUSÁVEIS
• Um documento QML, define um componente QML, que é um template para criação de objetos com layout e comportamento pré-definido
import Qt 4.7
Rectangle { property alias text: textItem.text
width: 100; height: 30 border.width: 1 radius: 5; smooth: true
gradient: Gradient { GradientStop { position: 0.0; color: "darkGray" } GradientStop { position: 0.5; color: "black" } GradientStop { position: 1.0; color: "darkGray" } }
Text { id: textItem anchors.centerIn: parent color: "white" }
}
Button.qml Application.qml
import Qt 4.7
Column { spacing: 10
Button { text: "Apple" } Button { text: "Orange" } Button { text: "Pear" } Button { text: "Grape" }}
quarta-feira, 29 de setembro de 2010
LAYOUT
Row
Column
Row { spacing: 2 Rectangle { color: "red"; width: 50; height: 50 } Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "blue"; width: 50; height: 20 } }
Column { spacing: 2 Rectangle { color: "red"; width: 50; height: 50 } Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "blue"; width: 50; height: 20 } }
Grid Grid { columns: 3 spacing: 2 Rectangle { color: "red"; width: 50; height: 50 } Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "blue"; width: 50; height: 20 } Rectangle { color: "cyan"; width: 50; height: 50 } Rectangle { color: "magenta"; width: 10; height: 10 } }
quarta-feira, 29 de setembro de 2010
ÂNCORAS
• Ajudam a “grudar” objetosanchors { left: parent.left; right: parent.right; }
Gruda o canto direito ao elemento pai
• Redimensiona para preencheranchors.fill: parent
Redimensiona o elemento até preencher o elemento pai
• Centralizaanchors.horizontalCenter: parent.horizontalCenter
Centraliza horizontalmente de acordo com o elemento pai
quarta-feira, 29 de setembro de 2010
EVENTOS DE TECLADO
Rectangle { color: "lightsteelblue"; width: 240; height: 25 Text { id: myText } Item { id: keyHandler focus: true Keys.onPressed: { if (event.key == Qt.Key_A) myText.text = 'Key A was pressed' else if (event.key == Qt.Key_B) myText.text = 'Key B was pressed' else if (event.key == Qt.Key_C) myText.text = 'Key C was pressed' } }}
quarta-feira, 29 de setembro de 2010
EVENTOS DE MOUSE
• Sempre é necessária a criação de um MouseArea para tratar eventos de mouse
Rectangle { width: 100; height: 100 color: "green"
MouseArea { anchors.fill: parent acceptedButtons: Qt.LeftButton | Qt.RightButton onClicked: { if (mouse.button == Qt.RightButton) parent.color = 'blue'; else parent.color = 'red'; } }}
Veja o anchors.fill: parent no mouseArea, que fará com que ele preencha toda a área do retângulo
quarta-feira, 29 de setembro de 2010
ANIMAÇÕESPropertyAnimationAnima uma propriedade arbitrária para determinado valor
Rectangle { width: 100; height: 100 color: "red"
PropertyAnimation on x { to: 50; duration: 1000; loops: Animation.Infinite } PropertyAnimation on y { to: 50; duration: 1000; loops: Animation.Infinite }}
Item { width: 100; height: 100
Rectangle { id: rect width: 100; height: 100; color: "red"
Behavior on x { PropertyAnimation { duration: 500 } } Behavior on y { PropertyAnimation { duration: 500 } } }
MouseArea { anchors.fill: parent onClicked: { rect.x = mouse.x; rect.y = mouse.y } }}
BehaviorInstala animação em uma propriedade. Sempre que a propriedade for alterada, a animação será executada
quarta-feira, 29 de setembro de 2010
ANIMAÇÃO• A PropertyAnimation é o tipo mais básico de animação de
propriedades. Existem vários outros elementos de animação especializados, como o ColorAnimation e o RotationAnimation:
Rectangle { width: 100; height: 100
ColorAnimation on color { from: "red"; to: "yellow"; duration: 1000 }}
Item { width: 300; height: 300
Rectangle { width: 100; height: 100; anchors.centerIn: parent color: "red"
RotationAnimation on rotation { to: 90; direction: RotationAnimation.Clockwise } }}
ColorAnimation
RotationAnimation
quarta-feira, 29 de setembro de 2010
ANIMAÇÕES
• Todas as animações correm em paralelo. Se você quiser executar uma sequência de animações, deve usar o SequentialAnimation:
Rectangle { id: rect width: 120; height: 200
Image { id: img source: "pics/qt.png" anchors.horizontalCenter: parent.horizontalCenter y: 0
SequentialAnimation on y { loops: Animation.Infinite NumberAnimation { to: rect.height - img.height; easing.type: Easing.OutBounce; duration: 2000 } PauseAnimation { duration: 1000 } NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 } } }}
quarta-feira, 29 de setembro de 2010
USANDO JAVASCRIPT
• Funções Javascript simples, podem ser escritas no próprio código QML:
Item { function factorial(a) { a = parseInt(a); if (a <= 0) return 1; else return a * factorial(a - 1); } width: 100; height: 100
MouseArea { anchors.fill: parent onClicked: console.log(factorial(10)) }}
quarta-feira, 29 de setembro de 2010
USANDO JAVASCRIPT
• Grandes blocos de Javascript, podem ser separados em um arquivo, como por exemplo, factorial.js, e depois importados dentro do código QML:
import "factorial.js" as MathFunctions Item { MouseArea { anchors.fill: parent onClicked: console.log(MathFunctions.factorial(10)) } }
quarta-feira, 29 de setembro de 2010
MODELS E VIEWS
• Para facilitar a exibição de dados, o QML possui o conceito de model/views
• Existem dois tipos de model: o ListModel e o XmlListModel.
•O primeiro funciona como uma lista simples de dados:
ListModel { id: myModel ListElement { type: "Dog"; age: 8 } ListElement { type: "Cat"; age: 5 } }
quarta-feira, 29 de setembro de 2010
MODELS E VIEWS
• Para exibir os dados de uma ListModel, usamos uma ListView: ListView { anchors.fill: parent model: myModel delegate: Text { text: type + ", " + age } }
• A propriedade delegate, define como cada item da lista será renderizado. Podemos por exemplo definir um Componente e passar para o delegate:
Component { id: myDelegate Column { spacing: 4 Text { text: "Type: "+ type } Text { text: "Age: "+ age } Rectangle { height: 20; width: 1} }}
ListView { anchors.fill: parent model: myModel delegate: myDelegate}
quarta-feira, 29 de setembro de 2010
MODELS E VIEWS
•O outro tipo de ListModel, mais útil, é o XmlListModel, que lê um arquivo XML, o interpreta e gera a lista a ser usada no ListView:
XmlListModel { id: feedModel source: "http://rss.news.yahoo.com/rss/oceania" query: "/rss/channel/item" XmlRole { name: "type"; query: "type/string()" } XmlRole { name: "age"; query: "age/string()" }}
ListView { anchors.fill: parent model: myModel delegate: Text { text: type + ", " + age }}
Note que é possível continuar usando a mesma ListView, e simplesmente trocar o model. Isto é bem útil quando você está construindo um protótipo, e quer deixá-lo funcional
quarta-feira, 29 de setembro de 2010
EXEMPLO PRÁTICO
• Vamos agora codificar um cliente de twitter!
quarta-feira, 29 de setembro de 2010
DESAFIO!
• Agora que você tem um cliente funcional de twitter, implemente uma busca por string
•Query na API do twitter :
• http://search.twitter.com/search.atom?q=suaquery
quarta-feira, 29 de setembro de 2010
FUTURO DO QML
• Investimento pesado da Nokia na tecnologia
• 3D QML
• Editor visual de QML
quarta-feira, 29 de setembro de 2010
DÚVIDAS?
quarta-feira, 29 de setembro de 2010