User Interface em Qt

Conceitos bsicos de UI em Qt

Danilo Freire de Souza Santos

Roteiro
Tipos de Dados e Strings Elementos bsicos de UI em Qt Aes em Qt Eventos em Qt

Qt Bsico

Tipos de Dados
Antes de tudo
Qt type qint8 qint16 qint32 qint64 qreal uchar / quint8 ushort / quint16 uint/ quint32 ulong qulonglong/ quint64 typedef de Signed char Signed short Signed int long long int Double / float (ARM) Unsigned char Unsigned short unsigned int unsigned long unsigned long long int 0 at 255 0 at 65535 0 at 4294967296 0 at 4294967296 unsigned 64 bit
Qt Bsico

Intervalo -128 at + 127 -32768 at + 32767 -2147483648 at +2147483647 uigned 64 bit

QString
Semelhante as strings C++ padro Qt sempre utiliza codificao Unicode (16 bit) Qt faz uso de compartilhamento implcito de strings para aumentar a eficincia e reduzir a sobrecarga de memria Quando for armazenar dados (bytes) ou strings 8bit terminadas em \0, utilize: QByteArray

Qt Bsico

Compartilhamento Implcito
Funciona transparentemente
Apenas ponteiro para dados passado Dados apenas copiados se uma funo escreve nele
QString str1 = Hello World; QString str2 = str1; str2.replace(world, class);

str1

Hello World
referncias 1

str1 str2

Hello World
referncias 2

Contagem de referncia Uso em Qt:

Qstring, Qimage, etc Voc pode utilizar em suas classes:
QSharedDataPointer

str1

Hello World
referncias 1

str2

Hello Class
referncias 1

Qt Bsico

QVariant
Guarda um tipo de dado Utilizado para converso entre tipos

QDataStreamout(...); Qvariant v(10); int x = v.toInt(); out << v; v = QVariant("hello"); v = QVariant(tr("hello")); int y = v.toInt(); Qstring s = v.toString(); out << v; [...]

// // // // // // // //

The variant now contains an int x = 10 Writes a type tag and an int to out The variant now contains a QByteArray The variant now contains a QString y = 0 s = tr("hello") Writes a type tag and a Qstring to out

Qt Bsico

Listas, mapas, etc

Classes semelhantes as da STL C++
O uso das classes STL possvel, entretanto, pode no ser totalmente suportadas por todos os compiladores
Containers Sequnciais (Listas) QList (QStringList) QLinkedList QVector QStack QQueue Containers Associativos (Mapas) QMap QMultiMap QHash QMultiHash QSet

=> Dvidas sobre interadores em Listas/Mapas C++?

Qt Bsico 7

Widgets, Dialogs, e outras coisas

Criar vrios widgets no main() pode transformar uma aplicao bastante complicada Portanto, outras abordagens devem ser utilizadas:
Sub-classing Widgets Uso de Dialogs pr-definidos Uso do Main Window

Qt Bsico

Criando widgets (sub-classing)

Utilizado para extender uma funcionalidade
Criar um novo SLOT em um Widget
Exemplo: Adicionar um SLOT em um Widget para alterar o texto de label.

Emitir um novo SIGNAL

Exemplo: Emitir um SIGNAL quando um boto for apertado, entretanto, este SIGNAL leva como parmetro um valor

Hands-on!

Qt Bsico

Exerccios
Criar um widget com um boto e um label.
Quando o boto for apertado o texto do label ser alterado!

Criar um boto prprio que deriva QPushButton.

Este boto recebe no construtor uma QString como ID. Crie um widget com trs botes. Quando cada um dos botes for apertado, um SIGNAL clicked(int) ser emitido com um valor diferente. Indique o valor apertado com um MessageBox no Widget
QMessageBox::information(this, tr("A button has been clicked"),QString(tr("Button ID: %1")).arg(id), QMessageBox::Ok);
Qt Bsico 10

Dialogs
O que ?
Uma janela de alto nvel, geralmente utilizada para tarefas curtas, como um informativo, por exemplo. Pode retornar um valor.

Modal
Bloqueia outras janelas (dialog de escolha de arquivos, por exemplo) Geralmente executado com um exec(), e s retorna quando a janela fechada Se executado via show(), retorna imediatamente Resultado atravs de sinais

Modeless
Funciona independentemente de outras janelas Sempre retorna imediatamente. Funciona com o show()

Qt Bsico

11

Criando seu prprio Dialog

Exemplo:
MyDialog Main Window OK CANCEL Dialog pressed OK

Main Window MyDialog Main Window OK CANCEL Dialog pressed Cancel

Qt Bsico

12

Cdigo
#include "mydialog.h #ifndefMYDIALOG_H #defineMYDIALOG_H #include #include #include #include <QDialog> <QPushButton> <QVBoxLayout> <QLabel> MyDialog::MyDialog() { setFixedSize(200, 100); QVBoxLayout* vbox= newQVBoxLayout(); QLabel* label = newQLabel(Qual a sua escolha?); QPushButton* okButton= newQPushButton("Ok"); QPushButton* cancelButton= newQPushButton("Cancelar"); // Set the ok button as default okButton->setDefault(true); vbox->addWidget(label); vbox->addWidget(okButton); vbox->addWidget(cancelButton); setLayout(vbox); connect(okButton, SIGNAL(clicked()), this, SLOT(accept())); connect(cancelButton, SIGNAL(clicked()), this, SLOT(reject())); }

Class MyDialog: public QDialog { Q_OBJECT public: MyDialog(); }; #endif// MYDIALOG_H

Qt Bsico

13

Classe Base e mtodos

QDialog:
Examinem a documentao no SDK

Qt Bsico

14

Alguns Dialogs prontos!

Dialog para escolher cores:
QColorDialog

Dialog de erro:
QErrorMessage

Dialog para escolher fontes:

QFontDialog

Dialog de Mensagem
QMessageBox

Dialog para escolha de arquivos

QFileDialog
Qt Bsico 15

Main Window
A classe QMainWindow prov um layout pre-definido para janelas de aplicaes
O Widget principal deve ser definido, os outros so opcionais Voc pode extend-lo para sua aplicao

Por que no usar sua prpria widget?

QMainWindow possibilita e garante um aparncia mais consistente entre as aplicaes (alm de ser mais fcil utiliz-lo) Menu Bar Toolbars Dock Widgets Central Widget

Status Bar Qt Bsico 16

Exerccio
Crie sua prpria MyMainWindow
Como Widget central utilize um QTextEdit Utilize o metdo setCentralWidget() no construtor do MainWindow.

Qt Bsico

17

Ao (Action)
Representa uma ao do usurio (UI) Definidos uma vez e utilizados em diversos locais So inseridos em widgets
Menus Toolbars Atalhos de teclados

Armazenam informaes sobre

Icnes, Textos, etc

Qt Bsico

18

Barra de Menu
QMenu uma widget base para barras de menu QMenuBar automaticamente criado pelo QMainWindow Um Qmenu contm vrios itens de menu
Estes itens de menua lanam Aes

Qt Bsico

19

Exemplo de QAction
Vamos utilizar a barra de menu do exemplo anterior:
Crie uma ao para abrir arquivos
acaoAbrir = new QAction(&Abrir, this);

Conecte a ao a um SLOT de sua aplicao

connect(acaoAbrir, SIGNAL(triggered()), this, SLOT(abrirArquivo()));

Adicione o item de menu na barra de menu

menuAbrir = menuBar()->addMenu(&Arquivo); menuAbrir->addAction(acaoAbrir);

Quando a ao for lanada, o SLOT abrirArquivo() vai ser chamado

Dica: Use o QFileDialog::getOpenFileName();
Qt Bsico 20

Eventos (Events)
Aplicaes em Qt so baseadas em Eventos Eventos so gerados em resposta a aes do usurio
Apertar de uma tecla, eventos de toque, etc..

Qt Bsico

21

Eventos e Sinais
Sinais (Signals)
So usados em widgets O Widget lana um sinal clicked() e no um evento de apertar de teclas

Eventos
So usados para implementar widgets O widget recebe o evento de apertar tecla enter, e lana um sinal de clicked()
Boto do mouse liberado OS QApplication::exec() (loop de eventos) QEvent SIGNAL clicked()

QPushButton::event()

Qt Bsico

22

Um pouco mais sobre o Event Loop

Threads podem ter seu prprio loop de eventos
Utilizando o mtodo exec()
QApplication::exec() ou QThread::exec(), por exemplo

Os eventos em Qt derivam de QEvent De onde eles vm?

Do Servidor de Janelas
Eventos de mouse, e teclas

Gerados pelo prprio Qt

Timers, por exemplo

Eventos so tratados pelo QObject

Qt Bsico 23

QEvent
Existem vrios tipos de Eventos
Utilize QEvent::type() para avaliar o tipo

Um evento pode ser uma sub-classe de Qevent

QMouseEvent, QKeyEvent, QTimerEvent Estes eventos adicionam informaes extras
Que boto foi apertado, a posio, etc

Qt Bsico

24

Processando Eventos em um QObject

Um evento entregue no mtodo event() O QWidget j oferece uma srie de mtodos para lidar com eventos especficos
mouseMoveEvent() Quando for um evento de movimentao de mouse paintEvent() Quando for um evento de painting closeEvent() Quando for um evento de fechar Etc

Sobrecarregue esse mtodos, veja documentao para mais mtodos que lidam com eventos
Qt Bsico 25

Exerccio

Inicie um timer em um widget quando ele for exibido

Implemente o mtodo showEvent() para lidar com o evento de show do widget Execute o mtodo startTime(int) no showEvent() e implemente a funo timerEvent() para lidar os eventos de timer Em cada evento de timer, altere um label com um contador.

Qt Bsico

26

Mais sobre eventos?

Vamos explorar o exemplos de Drag and Drop do SDK!
Sigam instrues do professor!

Qt Bsico

27