.

Desenvolvimento Rpido de Aplicaes Mveis Utilizando a Linguagem Declarativa QML

Ricardo Erikson V. de S. Rosa
Centro de P&D em Tecnologia Eletrnica e da Informao Universidade Federal do Amazonas

ERCEMAPI 2011

Parte I
.

Quem Somos, de Onde Viemos e Para Onde Vamos?

.

Agenda

. 1 . 2 . 3

Quem sou eu? Perl da turma Sobre o curso

Agenda

. 1 . 2 . 3

Quem sou eu? Perl da turma Sobre o curso

Quem sou eu?

Nome: Ricardo Erikson Veras de Sena Rosa Natural de Teresina Tecnlogo em Anlise e Desenvolvimento de Sistemas - IFPI Mestre em Engenharia Eltrica - UFAM Doutorando em Engenharia Eltrica - UFMG reas de atuao:
Linhas e Produto de Software (SPL) Desenvolvimento de Software para Dispositivos Mveis/TV Digital Inteligncia Computacional

Contato

Email : ricardoerikson@gmail.com Skype : ricardoerikson Twitter : @ricardoerikson Facebook : @ricardoerikson

Agenda

. 1 . 2 . 3

Quem sou eu? Perl da turma Sobre o curso

Perl da turma

Por que vocs esto aqui? Vocs conhecem HTML, CSS, JavaScript, C++? Vocs j conheciam o framework Qt?

Agenda

. 1 . 2 . 3

Quem sou eu? Perl da turma Sobre o curso

O curso

Esse curso sobre:

A linguagem declarativa QML (Qt Meta-objects Language) Desenvolvimento rpido de aplicaes mveis Desenvolvimento para plataformas que suportam o framework Qt

Esse curso NO sobre:

O framework Qt de maneira geral Publicao de aplicativos em uma app store

O curso

Esse curso sobre:

A linguagem declarativa QML (Qt Meta-objects Language) Desenvolvimento rpido de aplicaes mveis Desenvolvimento para plataformas que suportam o framework Qt

Esse curso NO sobre:

O framework Qt de maneira geral Publicao de aplicativos em uma app store

Parte II
.

A Linguagem Declarativa QML

.

Agenda
. 4 . 5 . 6 . 7 . 8 . 9 . 10 Introduo Ambiente de desenvolvimento Propriedades e Tipos de dados Elementos Bsicos Layout Baseado em Pontos de Ancoragem Tratamento de eventos Estado e Transies

Motivao
Os desenvolvedores buscam reduzir o tempo gasto no desenvolvimento de novos aplicativos
Time to shelf Time to payment Tempo de desenvolvimento

Tempo excessivo gasto na criao das UIs . Agravante . APIs diferentes para diferentes plataformas . . O que os desenvolvedores querem? . Rapidez na codicao e prototipagem Desenvolvimento cross-platform .

Motivao
Os desenvolvedores buscam reduzir o tempo gasto no desenvolvimento de novos aplicativos
Time to shelf Time to payment Tempo de desenvolvimento

Tempo excessivo gasto na criao das UIs . Agravante . APIs diferentes para diferentes plataformas . . O que os desenvolvedores querem? . Rapidez na codicao e prototipagem Desenvolvimento cross-platform .

Motivao
Os desenvolvedores buscam reduzir o tempo gasto no desenvolvimento de novos aplicativos
Time to shelf Time to payment Tempo de desenvolvimento

Tempo excessivo gasto na criao das UIs . Agravante . APIs diferentes para diferentes plataformas . . O que os desenvolvedores querem? . Rapidez na codicao e prototipagem Desenvolvimento cross-platform .

Imaginem a seguinte situao

Tenho uma ideia super legal e quero desenvolver um prottipo. Como eu sei programar em Symbian C++, vou desenvolver esse prottipo para a plataforma Symbian. Algum tempo depois Minha ideia realmente muito legal, todos gostaram e agora quero disponibiliz-la nas plataformas iOS, Android e MeeGo. E agora?

Imaginem a seguinte situao

Tenho uma ideia super legal e quero desenvolver um prottipo. Como eu sei programar em Symbian C++, vou desenvolver esse prottipo para a plataforma Symbian. Algum tempo depois Minha ideia realmente muito legal, todos gostaram e agora quero disponibiliz-la nas plataformas iOS, Android e MeeGo. E agora?

Imaginem a seguinte situao

Tenho uma ideia super legal e quero desenvolver um prottipo. Como eu sei programar em Symbian C++, vou desenvolver esse prottipo para a plataforma Symbian. Algum tempo depois Minha ideia realmente muito legal, todos gostaram e agora quero disponibiliz-la nas plataformas iOS, Android e MeeGo. E agora?

Imaginem a seguinte situao

Tenho uma ideia super legal e quero desenvolver um prottipo. Como eu sei programar em Symbian C++, vou desenvolver esse prottipo para a plataforma Symbian. Algum tempo depois Minha ideia realmente muito legal, todos gostaram e agora quero disponibiliz-la nas plataformas iOS, Android e MeeGo. E agora?

Eis que surge QML

Qt Meta-objects Language Linguagem declarativa utilizada no kit de desenvolvimento Qt Quick (Qt User Interface Creation Kit) Desenvolvimento cross-platform Os objetos que devem ser apresentados na UI so declarados de maneira rpida e fcil. A lgica da aplicao pode ser escrita totalmente em JavaScript.

Eis que surge QML

Facilita a utilizao do padro MVC (model-view-controller). Exemplo do Anatron. Flexibilidade na criao das UIs.
Elementos de formas, imagens e textos. Estados, transies, animaes, transformaes, efeitos grcos, etc.

Possibilidade de utilizar cdigo C++ na criao de aplicaes mais complexas.

Atividade: Desenhando um retngulo

Como se desenha um retngulo utilizando Qt/C++? E em QML?

Atividade: Desenhando um retngulo

Como se desenha um retngulo utilizando Qt/C++? E em QML?

Flying Bus1

Jogo relativamente simples QML + JavaScript Aproximadamente 400 linhas de cdigo (incluindo comentrios) Video img/van.png

1 http://developer.qt.nokia.com/wiki/Flying_Bus_Game

Agenda
. 4 . 5 . 6 . 7 . 8 . 9 . 10 Introduo Ambiente de desenvolvimento Propriedades e Tipos de dados Elementos Bsicos Layout Baseado em Pontos de Ancoragem Tratamento de eventos Estado e Transies

Ambiente de Desenvolvimento

QtSDK2 Qt Creator Remote Compiler Qt QML Viewer / QML Runtime Os aplicativos podem ser invocados utilizando cdigo Qt/C++ utilizando a class QDeclarativeView

2 http://qt.nokia.com/downloads

Agenda
. 4 . 5 . 6 . 7 . 8 . 9 . 10 Introduo Ambiente de desenvolvimento Propriedades e Tipos de dados Elementos Bsicos Layout Baseado em Pontos de Ancoragem Tratamento de eventos Estado e Transies

Tabela: Alguns tipos utilizados no sistema de tipagem da linguagem QML.

Tipo color bool date font int double real list point rect string url

Descrio Nomes de cores especicadas no padro SVG entre aspas. Os valores tambm podem ser especicados nos formatos #RRGGBB ou #AARRGGBB. Pode assumir os valores true ou false. Data especicada no formato YYYY-MM-DD. Encapsula as propriedades de uma instncia do tipo QFont do Qt. Representa valores inteiros. Possui ponto decimal e seus valores so armazenados com preciso dupla. Representa um nmero real. Representa uma lista de objetos. Representa um ponto atravs das coordenadas x e y. Consiste na representao dos atributos x, y, width e height. Texto livre entre aspas. Representa a localizao de algum recurso, como um arquivo, atravs de seu endereo.

Propriedades e tipos de dados

Propriedade do tipo nome-valor: color: blue Objetos QML possuem identicador (id) A propriedade de um objeto acessada por <id>.<propriedade> Binding: quando uma propriedade expressada em funo de outra Denio de novas propriedades

Agenda
. 4 . 5 . 6 . 7 . 8 . 9 . 10 Introduo Ambiente de desenvolvimento Propriedades e Tipos de dados Elementos Bsicos Layout Baseado em Pontos de Ancoragem Tratamento de eventos Estado e Transies

Elementos Bsicos
Tabela: Alguns elementos bsicos disponveis na linguagem QML.

Elemento Item Rectangle Image Text TextInput MouseArea

Descrio O elemento mais bsico da linguagem QML. Embora no possua aparncia visual, ele utilizado como base de todos os elementos visuais. utilizado para preenchimento de reas e frequentemente utilizado como base para o posicionamento de outros elementos. Todos os formatos suportados pelo Qt podem ser utilizados no elemento Image, incluindo PNG, JPEG e SVG. utilizado para adicionar texto na UI. Esse elemento possibilita a entrada de texto no aplicativo. um elemento invisvel, frequentemente utilizado em conjunto com elementos visveis, no tratamento de eventos de entrada com o ponteiro do mouse ou toques na tela.

Agenda
. 4 . 5 . 6 . 7 . 8 . 9 . 10 Introduo Ambiente de desenvolvimento Propriedades e Tipos de dados Elementos Bsicos Layout Baseado em Pontos de Ancoragem Tratamento de eventos Estado e Transies

Pontos de ancoragem

Cada objeto possui basicamente 6 pontos invisveis de ancoragem:

left right top bottom horizontalCenter verticalCenter

Hands on: Implementao de uma top bar e um menu com 3 opes (Contato, Sobre e Sair) utilizando pontos de ancoragem

Agenda
. 4 . 5 . 6 . 7 . 8 . 9 . 10 Introduo Ambiente de desenvolvimento Propriedades e Tipos de dados Elementos Bsicos Layout Baseado em Pontos de Ancoragem Tratamento de eventos Estado e Transies

Signals and Slots

Signals and Slots em Qt:

O objeto obj1 notica a ocorrncia de um evento para quem quiser ouvir O objeto obj2 quer ouvir os eventos ocorridos no objeto obj1 O Qt, atravs do mtodo QObject::connect, disponibiliza o meio necessrio para que esses dois objetos se entendam.

Signals and Slots em QML

Signal handlers (slots) 1 sinal possui 1 slot Padro: <signal> on<Signal> Ex: clicked onClicked no elemento MouseArea

Signals and Slots

Signals and Slots em Qt:

O objeto obj1 notica a ocorrncia de um evento para quem quiser ouvir O objeto obj2 quer ouvir os eventos ocorridos no objeto obj1 O Qt, atravs do mtodo QObject::connect, disponibiliza o meio necessrio para que esses dois objetos se entendam.

Signals and Slots em QML

Signal handlers (slots) 1 sinal possui 1 slot Padro: <signal> on<Signal> Ex: clicked onClicked no elemento MouseArea

MouseArea

Tratamento de eventos de clique:

onClicked onDoubleClicked onPressAndHold onPressed onReleased

Hands on: adicionando eventos ao nosso menu com signals and slots

Agenda
. 4 . 5 . 6 . 7 . 8 . 9 . 10 Introduo Ambiente de desenvolvimento Propriedades e Tipos de dados Elementos Bsicos Layout Baseado em Pontos de Ancoragem Tratamento de eventos Estado e Transies

Estados em QML
. O estado de um objeto representado pelos valores atuais das suas propriedades. Estado base: Os elementos State e PropertyChanges
1 2 3 4 5

State { name: pressed when: mouse.pressed PropertyChanges { target: rect; color: red } } Hands on: adicionando estados ao nosso menu

Estados em QML
. O estado de um objeto representado pelos valores atuais das suas propriedades. Estado base: Os elementos State e PropertyChanges
1 2 3 4 5

State { name: pressed when: mouse.pressed PropertyChanges { target: rect; color: red } } Hands on: adicionando estados ao nosso menu

Estados em QML
. O estado de um objeto representado pelos valores atuais das suas propriedades. Estado base: Os elementos State e PropertyChanges
1 2 3 4 5

State { name: pressed when: mouse.pressed PropertyChanges { target: rect; color: red } } Hands on: adicionando estados ao nosso menu

Animaes com o elemento Behavior

Dene uma animao padro sempre que determinada propriedade de um objeto sofre alteraes Boa prtica: evitar a utilizao do estado base em animaes com Behavior.

.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

import QtQuick 1.0 Rectangle { width: 500; height: 100 MouseArea { id: mouse; anchors.fill: parent } Rectangle { id: rect; width: 100; height: 100; color: blue Behavior on x { NumberAnimation{duration: 200} } states: [ State { name: EstadoInicial when: !mouse.pressed PropertyChanges { target: rect; x: 0 } }, State { name: EstadoFinal when: mouse.pressed PropertyChanges { target: rect; x: 400 } } ] } }

Transies entre Estados

Utilizando o elemento Transition Propriedades:

animation from to reversible

Mesmos elementos de animao utilizados em Behavior Transition sobre o Behavior

.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import QtQuick 1.0 Rectangle { width: 200; height: 100 Rectangle { id: obj; width: 100; height: 100; color: red } MouseArea { id: mouse; anchors.fill: parent } states: State { name: EstadoFinal; when: mouse.pressed PropertyChanges { target: obj; x: 100; color: green } } transitions: Transition { NumberAnimation { properties: x; duration: 200 } ColorAnimation { duration: 200 } }

Parte III
.

QML para Adultos

.

Agenda

. 11 . 12

Componentes QML Customizados Criao Dinmica de Componentes com JavaScript

Componentes QML Customizados

A linguagem QML fortemente baseada em componentizao Tudo componente Imagine um componente QML como uma caixa preta que interagem com o mundo externo atravs de suas propriedades, sinais, slots e funes Hands on: Criando o componente Button.qml

Componentes QML Customizados

A linguagem QML fortemente baseada em componentizao Tudo componente Imagine um componente QML como uma caixa preta que interagem com o mundo externo atravs de suas propriedades, sinais, slots e funes Hands on: Criando o componente Button.qml

.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

import QtQuick 1.0 Rectangle { id: button anchors.centerIn: parent width: 100; height: 100 radius: 50; color: red signal clicked MouseArea { anchors.fill: button onClicked: { button.clicked() } }

Observe a linha 8

Componentes QML Customizados

Denio inline (no prprio documento, e no em um arquivo separado) Elemento Component. Sua denio pode ser utilizada por outros elementos atravs dos mecanismos a seguir: Loader um elemento usado para carregar componentes QML visuais dinamicamente. Faz referncia tanto a um arquivo QML, usando a propriedade source, quanto a um objeto Component, utilizando a propriedade sourceComponent; createObject um mtodo pertencente aos objetos do tipo Component, que permite criar dinamicamente objetos a partir de suas denies de componente. Este mtodo recebe como parmetro a referncia (id) do objeto que ser o pai do novo objeto criado.

.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

import QtQuick 1.0 Item { id: mainView; width: 360; height: 640 Component { id: circleComponent Rectangle { id: circle width: 40; height: 40; radius: 40; color: green } } Loader { id: pointer; sourceComponent: circleComponent} MouseArea { anchors.fill: mainView onMousePositionChanged: { var circle = circleComponent.createObject(mainView) circle.x = mouseX - circle.width/2 circle.y = mouseY - circle.height/2 circle.color = blue } } }

Agenda

. 11 . 12

Componentes QML Customizados Criao Dinmica de Componentes com JavaScript

Criao Dinmica de Componentes com JavaScript

Abordagem bastante utilizada no desenvolvimento de jogos com QML Utilizao dos mtodos createComponent e createObject: createComponent recebe a URL do arquivo QML createObject mtodo pertencente a objetos do tipo Component. Recebe como parmetro a referncia do item que ser o pai e uma srie de pares chave-valor com conguraes das propriedades

.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import QtQuick 1.0 Rectangle { id: mainView width: 360 height: 640 function randomColor() { return Qt.rgba(Math.random(),Math.random(), Math.random(), 0.5 + (Math.random())/2) } Component.onCompleted: { var buttonComponent = Qt.createComponent(Button.qml); var buttonObj = buttonComponent.createObject( mainView, {color : randomColor()}); buttonObj.clicked.connect(function() { color = randomColor() }); } }

Criando Objetos a partir de uma String

. Criao de objetos em tempo de execuo Utilizao do mtodo createQmlObject() da varivel global Qt
1 2 3 4 5

var newObj = Qt.createQmlObject( import QtQuick 1.0; + Rectangle { color: red; width: 20; height: 20}, parentItem, dynamicSnippet1);

Criando Objetos a partir de uma String

. Criao de objetos em tempo de execuo Utilizao do mtodo createQmlObject() da varivel global Qt
1 2 3 4 5

var newObj = Qt.createQmlObject( import QtQuick 1.0; + Rectangle { color: red; width: 20; height: 20}, parentItem, dynamicSnippet1);

Agenda

. 11 . 12

Componentes QML Customizados Criao Dinmica de Componentes com JavaScript

Deletando Objetos Dinamicamente

Itens criados dinamicamente podem trazer impactos negativos para a aplicao fortemente recomendado que se tenha um bom gerenciamento dos objetos criados preciso cuidado ao deletar os objetos Utilizao do mtodo destroy

.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import QtQuick 1.0 Rectangle { id: mainView; width: 640; height: 360 Component.onCompleted: { var newObject = Qt.createQmlObject( import QtQuick 1.0; + Rectangle { anchors.centerIn: parent; + color: red; width: 200; height: 200; + radius: 20}, mainView, snippetCode1); var newMouseArea = Qt.createQmlObject( import QtQuick 1.0; + MouseArea { anchors.fill: parent;}, newObject, mouseArea1); newMouseArea.clicked.connect(function() { newObject.opacity = 0; newObject.destroy(1000) }); } }

Troca de sinais entre C++ e QML.

Obrigado!

Contato

Email : ricardoerikson@gmail.com Skype : ricardoerikson Twitter : @ricardoerikson Facebook : @ricardoerikson