qt quick

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


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)


ONDE TRABALHO

• Centro de Estudos Avançados do Recife (C.E.S.A.R.)

• Grupo de Inovação e Pesquisa (GIP)


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


O PROCESSO DE INOVAÇÃO


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


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


QT QUICK

• Aproxima designers e desenvolvedores

• Linguagem declarativa simples, baseada em Javascript, que muitos designers já dominam

• Propicia interfaces ricas, fluídas e animadas


EXEMPLOS EM QT QUICK


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


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


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


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


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}


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


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


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


Â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


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


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


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


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


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


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


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


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


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}


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


EXEMPLO PRÁTICO

• Vamos agora codificar um cliente de twitter!


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


http://search.twitter.com/search.atom?q=lalala

http://search.twitter.com/search.atom?q=lalala

FUTURO DO QML

• Investimento pesado da Nokia na tecnologia

• 3D QML

• Editor visual de QML


DÚVIDAS?


qt quick

Documents