Interfacce grafiche in Qt

(1)

Tomaiuolo – Fondamenti di informaticaTomaiuolo – Fondamenti di informatica . Ingegneria dell'informazione – UniPR. Ingegneria dell'informazione – UniPR p://www.ce.unipr.it/people/tomamic/p://www.ce.unipr.it/people/tomamic/

Interfacce grafiche in Qt

Fondamenti di informatica

Michele Tomaiuolo

tomamic@ce.unipr.it

http://www.ce.unipr.it/people/tomamic

(2)

Fondamenti di informatica Fondamenti di informatica dell'informazione – UniPR dell'informazione – UniPR unipr.it/people/tomamic/unipr.it/people/tomamic/

Caratteristiche di Qt

Design OO: classi intuitive, riusabili ed estendibili Open source: Qt Project, Nokia Digia

Portabile: buone prestazioni con poche risorse

Sistemi desktop: Windows, MacOS, Linux …

Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi …

App avanzate: KDE, KOffice, VLC, Google Earth, Skype (Linux), Mathematica…

Sviluppo multipiattaforma

(3)

Libreria modulare

Modulo Descrizione

QtCore Core non-graphical classes used by other modules QtGui Graphical user interface (GUI) components

QtMultimedia Classes for low-level multimedia functionality QtNetwork Classes for network programming

QtOpenGL OpenGL support classes QtOpenVG OpenVG support classes

QtScript Classes for evaluating Qt Scripts QtScriptTools Additional Qt Script components

QtSql Classes for database integration using SQL QtSvg Classes for displaying the contents of SVG files QtWebKit Classes for displaying and editing Web content QtXml Classes for handling XML

QtXmlPatterns An XQuery & XPath engine for XML and custom data models QtDeclarative An engine for declaratively building fluid user interfaces

Phonon Multimedia framework classes Qt3Support Qt v.3 compatibility classes

(4)

Interfacce grafiche

Modulo QtGui per interfacce grafiche evolute

Usabilità, esperienza più soddisfacente per utente Supporto grafica 2D, integrazione con OpenGL Anti-aliasing, trasparenza, trasformazioni vettoriali

Insieme completo di widget di partenza

Sviluppo con meno codice, sfruttando la lib Buona OOP: specializzazione e composizione

Personalizzazione stile con poche righe di CSS

QApplication::setStyleSheet

(5)

Bottoni

QPushButton

QToolButton

QRadioButton

QCheckBox

(6)

Contenitori

QGroupBox QFrame

QToolBox

QTabWidget

(7)

Viste di elementi

QListView

QTreeView

QTableView

(8)

Display

QProgressBar

QLCDNumber

QLabel

(9)

Menu ecc.

QMenu

QMenuBar

QToolBar

QStatusBar

(10)

Input

QSlider QLineEdit QComboBox

QDoubleSpinBox QSpinBox

QTimeEdit QDateEdit

QDateTimeEdit

(11)

Input

QCalendarWidget QTextEdit

QScrollBar

QFontComboBox

QDial

(12)

Stili

Sfrutta le primitive grafiche della piattaforma

Efficienza e aspetto delle app familiare e intuitivo Ma possibile usare anche uno stile personalizzato!

QApplication::setStyle(new QWindowsStyle);

(13)

Disposizione dei widget

#include <QApplication>

#include <QTextEdit>

int main(int argv, char **args) { QApplication app(argv, args);

QTextEdit textEdit;

textEdit.show();

return app.exec();

}

Gestione del ciclo degli eventi (mouse,

tastiera ecc.) Gestione del ciclo degli eventi (mouse,

tastiera ecc.)

Tutorial:

Hello notepad Tutorial:

Hello notepad

(14)

Creare un nuovo widget

Estendere QWidget , o una sua sottoclasse Aggiungere funzionalità

Implementiamo metodi virtuali o virtuali puri Altrimenti usati i metodi della classe base

Incapsulare parti dell'interfaccia utente

Nuovo widget: composto da widget elementari

Altre parti dell'applicazione non hanno bisogno di conoscere i singoli widget

Il nuovo widget può essere riusato

(15)

Sottoclasse di QWidget

class Notepad : public QWidget {

Q_OBJECT public:

Notepad();

public slots:

void exit();

private:

QTextEdit * textEdit;

QPushButton * exitButton;

};

Vogliamo chiedere conferma all'utente

prima di uscire Vogliamo chiedere conferma all'utente

prima di uscire

Metodi speciali, da

connettere a segnali

Metodi speciali, da

connettere a segnali

Aggiunge la gestione di

segnali e slot Aggiunge la gestione di

segnali e slot

I widget semplici sono incapsulati come

campi privati I widget semplici sono incapsulati come

campi privati

(16)

Costruire la GUI

Notepad::Notepad() {

textEdit = new QTextEdit();

exitButton = new QPushButton(tr("Quit"));

QLayout * layout = new QVBoxLayout();

layout->addWidget(textEdit);

layout->addWidget(exitButton);

setLayout(layout); // QWidget setWindowTitle(tr("Notepad"));

connect(

exitButton, SIGNAL(clicked()), this, SLOT(exit()));

Costruttore:

componiamo la GUI Costruttore:

componiamo la GUI QObject::tr

traduce il testo della interfaccia utente

QObject::tr traduce il testo della

interfaccia utente

Widget disposti in un layout

verticale Widget disposti in un layout

verticale

(17)

Layout principali

Qt usa il meccanismo dei layout per disporre i widget Ci sono tre classi di layout pricipali

QHBoxLayout QVBoxLayout QGridLayout

Per installare un layout su un widget, dobbiamo invocare il metodo setLayout del widget

Il layout gestisce l'area interna al widget

(18)

Layout compositi

È possibile inserire un layout dentro un altro Es. Layout aggiuntivo a destra, con bottoni disposti in verticale

// …QVBoxLayout* buttonLayout = new QVBoxLayout();

buttonLayout->addWidget(openButton);

buttonLayout->addWidget(saveButton);

buttonLayout->addWidget(exitButton);

buttonLayout->addStretch();

(19)

Stretch, gestire lo spazio

With addStretch()

Dopo i bottoni abbiamo inserito uno “stretch”

Si estende fino ad occupare tutto lo spazio avanzante

With addStretch() Without addStretch()

(20)

Rendere l'applicazione reattiva

// …

connect(openButton, SIGNAL(clicked()), this, SLOT(open()));

connect(saveButton, SIGNAL(clicked()), this, SLOT(save()));

connect(exitButton, SIGNAL(clicked()), this, SLOT(exit()));

openButton : clicked()

openButton : clicked() connect Notepad : open() Notepad : open()

Signals Slots

connect

(21)

Accoppiamento tra segnali e slot

Accoppiamento lasco

Un oggetto emette segnale, ma non sa quali slot ricevono Molti segnali ad un singolo slot, un segnale a molti slot

Type safe

La firma del segnale deve corrispondere a quella degli slot collegati

La firma di uno slot può

essere più corta, trascura

degli argomenti che riceve

Compilatore rileva errori

(22)

Scrittura file

void Notepad::save() {

QString fileName = QFileDialog::getSaveFileName(this);

if (fileName != "") {

ofstream out(fileName.toStdString()); // c++11 if (out.good()) {

QString text = textEdit->toPlainText();

out << text.toStdString();

} else {

QMessageBox::critical(this, tr("Error"), tr("Could not save file"));

} } }

Scelta file di scrittura Scelta file di scrittura

Scrittura intero testo

(23)

Lettura file

void Notepad::open() {

QString fileName = QFileDialog::getOpenFileName(this);

if (fileName != "") {

ifstream in(fileName.toStdString().c_str()); // c++03 if (in.good()) {

string content; getline(in, content, '\0');

textEdit->setText(content.c_str());

} else {

QMessageBox::critical(this, tr("Error"), tr("Could not open file"));

} } }

Scelta file di lettura Scelta file di lettura

Lettura intero file

(24)

Chiusura app

void Notepad::exit() {

int button = QMessageBox::question(

this,

tr("Notepad - Quit"),

tr("Do you really want to quit?"), QMessageBox::Yes | QMessageBox::No);

if (button == QMessageBox::Yes) { close();

} }

// See documentation (F1):

// QMessageBox // QInputDialog

Dialogo per conferma Dialogo per

conferma

Chiusura finestra Chiusura

finestra