Introdução ao Qt

1

Introdução ao Qt

OBJETIVOS

2

● O Framework Qt● O que é o Qt?● Por que usar o Qt?● Quem usa Qt?

● Interface com QtQuick● QML● Qt Creator IDE● C++ API

● Multiplataforma● QtMobility

O Framework Qt

3

O que é o Qt?

4

• É um framework para aplicações multi-plataforma em C+++.

• Suporta aplicações com e sem interface gráfica.

• Desenvolvido inicialmente pela TrollTech e atualmente mantido como projeto OpenSource pela Nokia.

Por que usar o Qt?

5

• É baseado no C++ padrão mas pode ser utilizado com diversas outras linguagens.

• Possui suporte a internacionalização de Aplicações.

• Roda nas principais plataformas móveis e de desktop.

• É distribuido nas licenças LGPL v2.1, GPL e Comercial (Qt Comercial).

• Suporta recursos gráficos avançados.

• Permite a mistura de código nativo com código web.

Por que usar o Qt?

6

● Qt é o framework utilizado para desenvolvimento de aplicações nas plataformas Symbian, Maemo e MeeGo.

Nokia X7-00

Nokia N900

Nokia N9

Por que usar o Qt?

7

• Permite escrever um único código para múltiplas plataformas.

• Possui uma IDE com suporte a drag-n-drop.

Por que usar o Qt?

8

• Utiliza o conceito de sinal-slot, modelo MVC, graphics view/scene/item.

• Possui ampla documentação.

• Uma comunidade ativa e participativa.

Adobe Photoshop ElementsAutodesk Maya

Skype

Quem usa Qt?

Google EarthWolfram Mathematica

Quem usa Qt?

Interface com QtQuick

11

12

• QtQuick (Qt User Interface Creation Kit) é uma interface de alto nível para criação simplificada de interfaces.

• É composto por:

• QML: Uma linguagem declarativa

• Qt Creator

• API em C++ para integração com o Qt

QML

13

• QML é uma linguagem declarativa para elementos de interface gráfica.

• Descreve a interface gráfica● Como os elementos são● Como eles se comportam

• A interface final é uma árvore de elementos com propriedades (semelhante ao HTML)

QML

QML

15

• Para usar um módulo, primeiro precisamos importá-lo.

• Especifique o nome do módulo e a versão desejada

import QtQuick 1.1// Define um quadrado azul claroRectangle {width: 400; height: 400color: "lightblue"}

Import QtQuick 1.1// Define um quadrado azul claroRectangle {width: 400; height: 400color: "lightblue"}

QML

• Comentários podem ser definidos com:● // para comentários de uma linha● /* ... */ para comentários em bloco

QML

17

• Declare os elementos que queria usar

• O corpo do elemento é o que fica entre chaves.

• Vários elementos padrão são incluídos.

• Novos elementos podem ser especificados

Import QtQuick 1.1// Define um quadrado azul claroRectangle {width: 400; height: 400color: "lightblue"}

QML

18

• Elementos contém propriedades

• Cada propriedade é definida usando um nome e um valor

● nome: valor

Import QtQuick 1.1// Define um quadrado azul claroRectangle {width: 400; height: 400color: "lightblue"}

QML

19

• Um elemento Rectangle● Definido entre chaves

● Contendo as propriedades width, height e color

Import QtQuick 1.1// Define um quadrado azul claroRectangle {width: 400; height: 400color: "lightblue"}

QML

20

• Vários elementos estão disponível para uso.● São estruturas na linguagem● Representam partes visíveis e não visíveis.

• Item é o elemento mais básico● Não é visível por si só● Tem uma posição e dimensões● É usado para agrupar elementos visuais● Geralmente é o elemento de maior nível

• Outros elementos:● Text, TextInput, Page, Circle, Row, Column...

QML

21

• QML também define elementos sem representação visual

● Estados, transições.● Gradientes, timers.

• Cada elemento possui propriedades● Propriedades customizadas podem podem ser

criadas

• Consultar documentação sobre as propriedades de cada tipo de elemento.

Qt Creator IDE

22

• O Qt Creator IDE possui:● Editor visual para criar e editar componentes QML● Ferramentas de projeto e build de aplicações● Sistema de ajuda integrado e sensível ao contexto● Debuger visual● Ferramentas para navegação rápida no código● Highlight de sintaxe e code completion

Qt Creator IDE

Run

BuildPesquisa

Barra de Projetos

Símbolos

Seletor de Modo

Painéis de informação

Modo de Design

Qt Creator IDE

Debuger

Controles de Fluxo

Variáveis

Qt Creator IDE

Tipo de Build

Qt Creator IDE

Qt Creator IDE

27

• É instalado automaticamente com o QtSDK● qt.nokia.com/downloads/● Versões para Windows, Linux e MacOS● Pacotes de instalação On-Line e Off-Line

• Pode ser instalado como standalone

C++ API

28

• O Qt Quick suporta interação com C++● QtDeclarative é a API que permite interagir e gerenciar

componentes● A interação ocorre através de objetos expostos ao ambiente

QML como novos tipos

• Elementos não visuais são subclasses do tipo QObject.

• Tipos visuais (items) são subclasses do tipo QDeclarativeItem

● QdeclarativeItem é o equivalente ao Item do QML

• A interação entre QML e C++ ocorre através de:

● Propriedades● Sinais e Slots (métodos que não retornam valores)● Métodos (definidos com a macro Q_INVOKABLE)

C++ API

29

EXEMPLO

Multiplataforma

30

QtMobility

31

• O Projeto QtMobility cobre uma vasta gama de tecnologias e funcionalidades.

● É um conjunto de APIs e Frameworks que proveem uma interface única de acesso a recursos, independente de plataforma.

• É suportado por Linux, Windows, Mac OS, Symbiam, Meego e Maemo 5.

QtMobility

32

• QtMobility APIs● Messaging: Uma interface comum para SMS, MMS e

E-Mail● Contatos● Localização: posicionamento, postos de referência,

mapas● Multimídia● Informações de Sistema● Sensores

...

QtMobility

33

• Algumas APIs possuem plugins QML● Com isso é possível desenvolver aplicações

poderosas e multiplataforma apenas com QML

QtMobility

34

Mais Informações

35

• @nokiadev_brasil• http://blog.qtlabs.org.br/• http://bit.ly/NokiaDev_Qt_Brasil• E-mail: daniel.bittencourt@openbossa.org