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]


Objetivos

● Apresentar o que é Qt Meta-object Language (QML)● Diferenças entre QML e Qt/C++● Demonstrar como integrar QML com Qt/C++


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


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)

http://qt.digia.com/Product/Learning/Topics/QML-Qt-Quick/

http://doc.qt.digia.com/4.7-snapshot/qdeclarativeintroduction.html

http://en.wikipedia.org/wiki/QML


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

mailto:[email protected]

http://basyskom.com/


O que é QML

Item {

propertyA: 100

propertyB: 100

children: [

Item { propertyC: 100 },

Item { propertyC: 200 }

]

}

● Descreve uma árvore de objetos e propriedades


O que é QML

● Descreve uma árvore de objetos e propriedades

Item {

propertyA: 100

propertyB: 100

Item { propertyC: 100 },

Item { propertyC: 200 }

}


O que é QML

● Permite incorporar código Javascript

Item {

propertyA: 100

propertyB: propertyA + 100 // aqui

onSomeEvent: myFunction() // aqui

}


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”


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!


Onde Usá-la

● Oportunidade para designers● Protótipos diretamente em QML● Trabalho próximo ao dos desenvolvedores


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


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)


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”


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)


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


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)


Trabalhando com QML

● Qt Creator 2 .0 suporta QML● Pode criar projetos QML● Pode rodar e depurar QML


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


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"


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


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


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


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


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


Componentes Disponíveis

● Qt provê um conjunto de componentes● Rectangle● Text● Image● BorderImage● WebView


WebView

import QtWebKit 1.1

WebView {

url: "http://www.kde.org"

preferredWidth: 1024

preferredHeight: 768

scale: 0.95

smooth: false

}

● qmlviewer webview.qml


Configurando um Elemento● Existem várias propriedades comuns a esses componentes

● x, y, width, height● color, opacity● visible● scale, rotation


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


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


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


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


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


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


Javascript

Rectangle { width: 200; height 100; color: "blue"

Text { anchors.fill: parent text: "Me pressione!" }


O quê aconteceu aqui?Nós amaramos um função

Javascript anônima aum signal.


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


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 }



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


Estados (states)

● Usando estados podemos facilmente criar transições suaves entre conjuntos de valores de propriedades

normal large

rotated


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


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 } }, ... ]}


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 } }, ... ]}


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


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}


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


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


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"));


Controlando Propriedades no C++● O rootContext de um engine pode ser acessado● O método setContextProperty pode ser usado para

configurar variáveis globais


QDeclarativeContext *context = qmlView->rootContext();context->setContextProperty("myState", QString("normal"));

qmlView->setSource(QUrl::fromLocalFile("myqml.qml"));


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


Expondo QObject

● Ao expor um QObject como uma propriedade de contexto seus slots, signals e enumerates também são expostos


QLabel *myLabel = new QLabel;QDeclarativeContext *context = qmlView->rootContext();context->setContextProperty("theLabel", myLabel);

MouseArea { anchors.fill: parent onClicked: { theLabel.setText("Hello Qt!"); }}


Obrigado !http://br.kde.org

Lamarque V. [email protected]

introdução ao desenvolvimento de aplicações qml · c++ não é tão bom para interface de...

Documents