Introdução ao Desenvolvimento de Aplicações QML · C++ não é tão bom para interface de...
Transcript of Introdução ao Desenvolvimento de Aplicações QML · C++ não é tão bom para interface de...
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Introdução ao Desenvolvimento de Aplicações QML
Lamarque V. [email protected]
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Objetivos
● Apresentar o que é Qt Meta-object Language (QML)● Diferenças entre QML e Qt/C++● Demonstrar como integrar QML com Qt/C++
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Pré-requisitos
● Necessários● Saber programar em Qt/C++ e Javascript● Fundamentos de Orientação a Objetos (OO)● Experiência em desenvolvimento de aplicações desktop
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Metodologia
● Duração: 3 horas● Tópicos expositivos e laboratórios práticos● Referências:
● http://qt.digia.com/Product/Learning/Topics/QML-Qt-Quick/
● Introduction to the QML Language (http://doc.qt.digia.com/4.7-snapshot/qdeclarativeintroduction.html)
● http://en.wikipedia.org/wiki/QML
● Intro to QML / Declarative UI (Caio Marcelo, CampKDE 2010)
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Sobre o Instrutor
● Lamarque Vieira Souza ([email protected])
● Trabalha para basysKom (http://basyskom.com Alemanha)
● Bacharel e Mestre em Ciência da Computação (UFMG)
● Nokia Qt Certified Developer
● Nokia Qt Certified C++ Specialist
● Participa dos projetos:● Solid (mantenedor do Plasma NetworkManagement)● Plasma Active● WebKit
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
O que é QML
Item {
propertyA: 100
propertyB: 100
children: [
Item { propertyC: 100 },
Item { propertyC: 200 }
]
}
● Descreve uma árvore de objetos e propriedades
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
O que é QML
● Descreve uma árvore de objetos e propriedades
Item {
propertyA: 100
propertyB: 100
Item { propertyC: 100 },
Item { propertyC: 200 }
}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
O que é QML
● Permite incorporar código Javascript
Item {
propertyA: 100
propertyB: propertyA + 100 // aqui
onSomeEvent: myFunction() // aqui
}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
IU Declarativa usando QML● Animações e efeitos● Objeto “MouseRegion” para eventos● Nota: geralmente se fala apenas QML ao invés de
“interface de usuário declarativa usando QML”
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Onde Usá-la
● Aplicações baseadas em canvas● Weather demo (previsão de tempo), aplicações para dispositivos móveis● ksmserver usando QML
● Pequenas aplicações totalmente em QML● Applets do Plasma
● Mais opções de temabilidade● Não somente com images, cores e fontes● Mas toda a aparência da aplicação!
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Onde Usá-la
● Oportunidade para designers● Protótipos diretamente em QML● Trabalho próximo ao dos desenvolvedores
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Características da QML
● Transparência de rede● Boa integração com C++● API semelhante a HTML5, por exemplo, possui
armazenamento local● Ainda não há API para DBus
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Significado de QML
● Linguagem para descrever árvores e objetos● Linguagem para descrever interface de usuário de uma
aplicação● Ferramenta para construir pequenas aplicações
● qmlviewer● Permite construir componentes complexos (smarthome)
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Analogias sobre QML
● EFL: “QML é um tipo de Edje para Qt”● Web: “QML é um um tipo HTML + CSS”● Qt: “QML é tipo um arquivo .ui do QtDesigner”
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
QML + Qt/C++ = Qt Quick
● C++ é ótimo para desenvolvimento de aplicações● Estrutura de dados● Algoritmos● Lógica de negócios● Interface de usuários estruturada
● C++ não é tão bom para interface de usuários para dispositivos móveis● Muitos objetos ativos em paralelo● Muitos estados, potencialmente soprepostos● Mudanças dependente de temporizadores e não suaves (fluidas)
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
QML + Qt/C++ = Qt Quick
● Usando Qt Quick, a lógica de negócios e operações críticas em desempenho podem ser implementadas em C++
● A interface de usuário pode ser escrita usando QML● Qt Meta-object Language● Declarativa● Baseada em Javascript
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Qt Quick
● Qt Quick consiste de● QML – A linguagem● Qt Declarative – módulo Qt
– Contem o engine QML, context e view– Bindings Qt para QML
– Mecanismos para integração entre C++ e QML
● Ferramentas de depuração para Qt Creator (em desenvolvimento)
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Trabalhando com QML
● Qt Creator 2 .0 suporta QML● Pode criar projetos QML● Pode rodar e depurar QML
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Exemplo
● QML é uma linguagem declarativa baseada em Javascript
import QtQuick 1.1
Rectangle { width: 200 height: 200 color: "red"}
Declara um elemento Rectangle – cria uma
instância de objeto
Nomes de compnentes sempreinicial com letra maiúscula
Vincula propertiesA seus valores
Importa componentesdo QtQuick
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Importando Recursos
● Importando definições de componentes● A diretiva import importa:
● Classes componentes de módulos C++● Outros módulos QML● Arquivos Javascript● Quando importar módulos C++, a versão sempre tem que ser
especificadaimport QtQuick 1.1import MyCppClasses 1.2import "from-qml"import "scripts.js"
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Criando Hierarquia de Objetos● Quando se declara elementos dentro de outras
declarações de objetos, você cria uma hierarquia de objetos
Rectangle { Rectangle { Text { } } Text { }}
Text
Text
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Navegando na Árvore de Objetos● É possível se referir ao pai de um objeto usando o nome
parent
Rectangle { Rectangle { width: parent.width
Text { color: parent.color } } Text { }}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Nomeando Elementos
● Pode-se nomear elementos utilizando a propriedade chamada id
● Você pode então referir a eles por nome
Rectangle { id: outerRectangle ...
{ height: outerRectangle.height ...
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Binding de Valores
● Em QML, valores são amarrados (bound) e não atribuídos
Rectangle { id: firstRect x: 10 ...}
Rectangle { x: 400 - firstRect.x ...}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Animando Valores
● Valores de propriedades podem ser animados
Rectangle { id: firstRect}
Rectangle { x: 400 – firstRect.x ...}
SequentialAnimation { running: true loops: Animation.Infinite NumberAnimation { target: firstRect; property: "x"; to: 300 } NumberAnimation { target: firstRect; property: "x"; to: 50 }}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Componentes Disponíveis
● Qt provê um conjunto de componentes● Rectangle● Text● Image● BorderImage● WebView
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
WebView
import QtWebKit 1.1
WebView {
url: "http://www.kde.org"
preferredWidth: 1024
preferredHeight: 768
scale: 0.95
smooth: false
}
● qmlviewer webview.qml
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Configurando um Elemento● Existem várias propriedades comuns a esses componentes
● x, y, width, height● color, opacity● visible● scale, rotation
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Layouts de Âncora
● Layouts de âncora podem ser usados para ancorar elementos uns aos outros
Rectangle { Rectangle { anchors.fill: parent ... } ...}
Rectangle { id: leftRectangle ...}
Rectangle { anchors.left: leftRectangle.right ...}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Layouts e Margens
● Você pode combinar layouts de âncora com margensRectangle { Rectangle { anchors.fill: parent anchors.margins: 5 ... } ...}
Rectangle { id: leftRectangle ...}
Rectangle { anchors.left: leftRectangle.right anchors.leftMargin: 10 ...}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Propriedades de Layoutsde Âncora● Pode-se ancorar ítens a
● Left, top, right, bottom● VerticalCenter, horizontalCenter,● Baseline
● Pode-se especificar margens individuais ou usar anchors.margins
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Outros Layouts
● Podemos criar layouts clássicos usando containers como Grid, Row e Column● Não funciona se x e y estão amarados (bound)● A propriedade spacing está disponível em todos● A propriedade column controla o tamanho dos grids
Grid { columns: 2 spacing: 5
Rectangle { width: 20; height: 20; color: "red" } Rectangle { width: 20; height: 20; color: "green" } Rectangle { width: 20; height: 20; color: "blue" }}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Adicionando Intera ãoç
● Interação é conseguida usando áreas (areas) separadas dos componentes visuais● MouseArea – área que aceita eventos de mouse● GestureArea – área que aceita eventos de gesto
– Exige eventos de toque (touchscreen)
– Dispositivos que suportam somente um toque poderão prover somente eventos de mouse, verifique a documentação dele
● Eventos de teclado são conseguidos através de focus
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Criando um Botão
● Você pode criar um botão usando Rectangle, Text e MouseArea
Rectangle { width: 200; height 100; color: "lightBlue"
Text { anchors.fill: parent text: "Me pressione!" }
MouseArea { anchors.fill: parent onClicked: { parent.color = "green" } }}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Javascript
Rectangle { width: 200; height 100; color: "blue"
Text { anchors.fill: parent text: "Me pressione!" }
MouseArea { anchors.fill: parent onClicked: { parent.color = "green" } }}
O quê aconteceu aqui?Nós amaramos um função
Javascript anônima aum signal.
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Criando Componentes
● Criar cada botão a partir de três elementos não é uma boa solução
● É possível criar componentes em QML● Um componente pode ser instanciado como um elemento● Componentes podem ser mantidos em módulos que são
incluídos em seus arquivos QML
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Componente Botão
● Crie o botão em um arquivo chamado Button.qml
import QtQuick 1.1
Rectangle { width: 200; height: 100; color: "lightBlue" property alias text: innerText.text
Text { id: innerText anchors.fill: parent }
MouseArea { anchors.fill: parent onClicked: { parent.color = "green" } }}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Componente Botão
● Instancie os botões em seu arquivo QML● O arquivo QML deve estar no mesmo diretório que o arquivo Button.qml
● Se não estiver, você pode importar o diretório que contem Button.qml como um módulo
import QtQuick 1.1
Row { spacing: 10
Button { text: "Oslo" } Button { text: "Copenhagen" } Button { text: "Helsinki" } Button { text: "Stockholm" }}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Estados (states)
● Usando estados podemos facilmente criar transições suaves entre conjuntos de valores de propriedades
normal large
rotated
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Definindo Estados
● A propriedade states contem os estados
import QtQuick 1.1
Rectangle { width: 400; height: 400;
Rectangle { id: myRect width: 100; height: 100; anchors.centerIn: parent color: "green"; }
states: [ State { name: "normal" }, State { name: "large" }, State { name: "rotated" } ]}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Definindo Estados
● Cada state contem um conjunto de mudança de propriedades
Rectangle { states: [ State { name: "normal" PropertyChanges { target: myRect width: 100; height: 100; rotation: 0 } }, ... ]}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Criando Transi ões çSuaves● A propriedade transitions define como animar as
propriedades durante uma mudança de estadoRectangle { transitions: [ Transition { from: "*"; to: "normal" NumberAnimation { properties: "width, height" easing.type: Easing.InOutQuad duration: 1000 } NumberAnimation { properties: "rotation" easing.type: Easing.OutElastic duration: 3000 } }, ... ]}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Alternando entre Estados
● Atribua um valor válido à propriedade state
import QtQuick 1.1
Rectangle { ... MouseArea { anchors.fill: parent onClicked: { if(parent.state == "normal") { parent.state = "rotated"; } else if(parent.state == ... }}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Alterando Entre Estados
● Ou amarre a propriedade state a um valor
● … que pode formar uma ligação com C++
import QtQuick 1.1
Rectangle { ... state: myState}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Variáveis Globais
● É possível amarrar (bind) valores vindos do Javascript ou C++
● Ao amarrar os valores vindos do C++, a lógica de negócios pode controlar o estado
● QML somente controla a interface com o usuário, includindo transições e efeitos
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Integrando QML com C++
● QML é executado por um QDeclarativeEngine● Cada componente pode ser alocado● A propriedade comum é um QGraphicsObject, mas
também pode ser um QObject
QGraphicsScene *scene = myExistingGraphicsScene();
QDeclarativeEngine *engine = new QDeclarativeEngine;
QDeclarativeComponent component(engine, QUrl::fromLocalFile("myqml.qml"));QGraphicsObject *object = qobject_cast<QGraphicsObject *>(component.create());
scene->addItem(object);
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Integrando QML com C++
● O widget de conveniência QDeclarativeView pode ser usado● Contem um engine● Gerencia a criação de componentes
QDeclarativeView *qmlView = new QDeclarativeView;
qmlView->setSource(QUrl::fromLocalFile("myqml.qml"));
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Controlando Propriedades no C++● O rootContext de um engine pode ser acessado● O método setContextProperty pode ser usado para
configurar variáveis globais
QDeclarativeView *qmlView = new QDeclarativeView;
QDeclarativeContext *context = qmlView->rootContext();context->setContextProperty("myState", QString("normal"));
qmlView->setSource(QUrl::fromLocalFile("myqml.qml"));
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Amarrado, mas não Atribuído● Como QML amarra valores ao invés de atribuí-los, mudar uma
propriedade de contexto a partir do C++ também muda seu valor no QML
void Window::rotateClicked(){ QDeclarativeContext *context = qmlView->rootContext(); context->setContextProperty("myState", QString("rotated"));}
void Window::normalClicked(){ QDeclarativeContext *context = qmlView->rootContext(); context->setContextProperty("myState", QString("normal"));}
void Window::largeClicked(){ QDeclarativeContext *context = qmlView->rootContext(); context->setContextProperty("myState", QString("large"));}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Expondo QObject
● Ao expor um QObject como uma propriedade de contexto seus slots, signals e enumerates também são expostos
QDeclarativeView *qmlView = new QDeclarativeView;
QLabel *myLabel = new QLabel;QDeclarativeContext *context = qmlView->rootContext();context->setContextProperty("theLabel", myLabel);
MouseArea { anchors.fill: parent onClicked: { theLabel.setText("Hello Qt!"); }}
IX Conferência Latino-Americana de Software Livre – V Fórum KDE Brasil – Edição Latino-Americana – Out/2012
Obrigado !http://br.kde.org
Lamarque V. [email protected]