linguagem de programação i - start [prof. carlos eduardo...
TRANSCRIPT
Interfaces gráficas usando Qt
● Introdução ao Qt ● O ambiente Qt Creator ● QML ● API C++
!2
Qt
● É um framework para aplicações multi-plataforma em C++ ◦ É baseado no C++ padrão mas pode ser utilizado
com diversas outras linguagens. ● Suporta aplicações com e sem interface gráfica. ● Desenvolvido inicialmente pela TrollTech, foi
mantido como projeto OpenSource pela Nokia e atualmente pertence a Digia
● É suportado pelas principais plataformas móveis e de desktop ◦ Permite escrever um único código para múltiplas
plataformas. ● Qt 5
!3
Qt
● Possui suporte a internacionalização de Aplicações.
● É 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” ● Possui uma IDE com suporte a recursos
avançados. ◦ Qt Creator 3.1
!4
!5
Qt
● Utiliza o conceito de sinal-slot, modelo MVC, graphics view/scene/item.
● Possui ampla documentação. ● Uma comunidade ativa e participativa ● Vários projetos usam ◦ Skype, Maya, Google Earth, KDE, Spotify (Linux), Virtualbox, VLC...
● Versão corrente: Qt 5
!6
Qt!7
Qt!8
Qt!9
Qt Interface
● 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
!10
Qt - QML
● 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)
!11
Qt - QML!12
Qt - QML
● Para usar um módulo, primeiro precisamos importá-lo.
● Especifica o nome do módulo e a versão desejada
!13
import QtQuick 1.1 // Define um quadrado azul claro Rectangle { width: 400; height: 400 color: "lightblue" }
Qt - QML
● 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...
!14
Qt - QML
● 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.
!15
Qt Creator
● O Qt Creator IDE possui: ◦ Editor visual para criar e editar componentes QML ◦ Construtor de GUI (Interface Gráfica com o Usuário) ◦ Ferramentas de projeto e build de aplicações ◦ Sistema de ajuda integrado e sensível ao contexto ◦ Debugger visual ◦ Ferramentas para navegação rápida no código
!16
Qt Creator
● Editor de código com suporte a C++, QML e ECMAscript
● Ferramentas de navegação rápida pelo código ● Realçamento de sintaxe e auto-complemento de
código ● Checagem estática de código e dicas de estilo
enquanto você digita ● Suporte a refatoração de código ● Ajuda sensível a contexto ● Dobramento de código ● Correspondência de parênteses e modo de seleção
de parênteses
!17
Qt Creator
● O depurador visual para C++ conhece a estrutura de muitas classes Qt, aumentando sua habilidade de exibir os dados do Qt claramente.
● Addicionalmente, o Qt Creator exibe os dados brutos do GDB de modo limpo e conciso. ◦ Interrompa a execução do programa. ◦ Ande através do programa linha por linha ou
instrução por instrução. ◦ Defina pontos de parada. ◦ Examine o conteúdo da pilha de chamada,
observadores e variáveis locais e globais.
!18
Qt Creator!19
Qt Creator!20
Qt Creator!21
Qt – API C++
● 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)
!22
Aplicação Exemplo!23
!24
class MainWindow : public QMainWindow { Q_OBJECT !public: MainWindow(); !protected: void closeEvent(QCloseEvent *event); !private: QPlainTextEdit *textEdit; QString curFile; ! QMenu *fileMenu; QMenu *editMenu; QMenu *helpMenu; QToolBar *fileToolBar; QToolBar *editToolBar; QAction *newAct; QAction *openAct; QAction *saveAct; QAction *saveAsAct; QAction *exitAct; QAction *cutAct; QAction *copyAct; QAction *pasteAct; QAction *aboutAct; QAction *aboutQtAct; };
!25
private slots: void newFile(); void open(); bool save(); bool saveAs(); void about(); void documentWasModified(); void createActions(); void createMenus(); void createToolBars(); void createStatusBar(); void readSettings(); void writeSettings(); bool maybeSave(); void loadFile(const QString &fileName); bool saveFile(const QString &fileName); void setCurrentFile(const QString &fileName); QString strippedName(const QString &fullFileName);
!26
MainWindow::MainWindow() { textEdit = new QPlainTextEdit; setCentralWidget(textEdit); ! createActions(); createMenus(); createToolBars(); createStatusBar(); ! readSettings(); ! connect(textEdit->document(), SIGNAL(contentsChanged()), this, SLOT(documentWasModified())); ! setCurrentFile(""); setUnifiedTitleAndToolBarOnMac(true); }
!27
void MainWindow::about() { QMessageBox::about(this, tr("About Application"), tr("The <b>Application</b> example demonstrates how to " "write modern GUI applications using Qt, with a menu bar, " "toolbars, and a status bar.")); }
!28
bool MainWindow::maybeSave() { if (textEdit->document()->isModified()) { QMessageBox::StandardButton ret; ret = QMessageBox::warning(this, tr("Application"), tr("The document has been modified.\n" "Do you want to save your changes?"), QMessageBox::Save | QMessageBox::Discard | QMessageBox::Cancel); if (ret == QMessageBox::Save) return save(); else if (ret == QMessageBox::Cancel) return false; } return true; }
!29
void MainWindow::loadFile(const QString &fileName) { QFile file(fileName); if (!file.open(QFile::ReadOnly | QFile::Text)) { QMessageBox::warning(this, tr("Application"), tr("Cannot read file %1:\n%2.") .arg(fileName) .arg(file.errorString())); return; } ! QTextStream in(&file); #ifndef QT_NO_CURSOR QApplication::setOverrideCursor(Qt::WaitCursor); #endif textEdit->setPlainText(in.readAll()); #ifndef QT_NO_CURSOR QApplication::restoreOverrideCursor(); #endif ! setCurrentFile(fileName); statusBar()->showMessage(tr("File loaded"), 2000); }
!30
bool MainWindow::saveFile(const QString &fileName) { QFile file(fileName); if (!file.open(QFile::WriteOnly | QFile::Text)) { QMessageBox::warning(this, tr("Application"), tr("Cannot write file %1:\n%2.") .arg(fileName) .arg(file.errorString())); return false; } ! QTextStream out(&file); #ifndef QT_NO_CURSOR QApplication::setOverrideCursor(Qt::WaitCursor); #endif out << textEdit->toPlainText(); #ifndef QT_NO_CURSOR QApplication::restoreOverrideCursor(); #endif ! setCurrentFile(fileName); statusBar()->showMessage(tr("File saved"), 2000); return true; }
!31
#include <QApplication> !#include "mainwindow.h" !int main(int argc, char *argv[]) { Q_INIT_RESOURCE(application); ! QApplication app(argc, argv); app.setOrganizationName("QtProject"); app.setApplicationName("Application Example"); MainWindow mainWin; mainWin.show(); return app.exec(); }
Aplicação exemplo
● http://qt-project.org/doc/qt-5/qtwidgets-mainwindows-application-example.html
!32
Outros exemplos
● http://qt-project.org/doc/qt-5/qtquick-window-example.html !
● http://qt-project.org/doc/qt-5/qtwidgets-mainwindows-mainwindow-example.html
!33
Referências
● Notas de aula – Claudio Esperança e Paulo Cavalcanti (UFRJ)
● Notas de aula – Allan Lima (citi/UFPE) ● Notas de aula – Daniel Bittencourt (INdT)
!34
