Top Banner
M. Tomaiuolo – Fondamenti di informatica M. Tomaiuolo – Fondamenti di informatica Dip. Ingegneria dell'informazione – UniPR Dip. Ingegneria dell'informazione – UniPR h ttp://www.ce.unipr.it/people/tomamic/ http://www.ce.unipr.it/people/tomamic/ Interfacce grafiche in Qt Fondamenti di informatica Michele Tomaiuolo [email protected] http://www.ce.unipr.it/people/tomamic
33

Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

Sep 04, 2018

Download

Documents

doanlien
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Interfacce grafiche in Qt

Fondamentidi informatica

Michele [email protected]

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

Page 2: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

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

Qt Creator: ambiente integrato, disegno visuale di gui

App portabili su sistemi desktop e mobile/embedded

Page 3: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Libreria modulare

Modulo DescrizioneQtCore Core non-graphical classes used by other modulesQtGui Graphical user interface (GUI) componentsQtMultimedia Classes for low-level multimedia functionalityQtNetwork Classes for network programmingQtOpenGL OpenGL support classesQtOpenVG OpenVG support classesQtScript Classes for evaluating Qt ScriptsQtScriptTools Additional Qt Script componentsQtSql Classes for database integration using SQLQtSvg Classes for displaying the contents of SVG filesQtWebKit Classes for displaying and editing Web contentQtXml Classes for handling XMLQtXmlPatterns An XQuery & XPath engine for XML and custom data modelsQtDeclarative An engine for declaratively building fluid user interfacesPhonon Multimedia framework classesQt3Support Qt v.3 compatibility classes

Page 4: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

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 CSSQApplication::setStyleSheet

QWidget::setStyleSheet

Page 5: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Bottoni

QPushButton

QToolButton

QRadioButton

QCheckBox

Page 6: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Contenitori

QGroupBox

QFrame

QToolBox

QTabWidget

Page 7: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Viste di elementi

QListView

QTreeView

QTableView

Page 8: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Display

QProgressBar

QLCDNumber

QLabel

Page 9: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Menu ecc.

QMenu

QMenuBar

QToolBar

QStatusBar

Page 10: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Input

QSlider

QLineEdit

QComboBox

QDoubleSpinBox

QSpinBox

QTimeEdit

QDateEdit

QDateTimeEdit

Page 11: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Input

QCalendarWidget

QTextEdit

QScrollBar

QFontComboBox

QDial

Page 12: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

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

Page 13: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

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 ciclodegli eventi (mouse,

tastiera ecc.)

Gestione del ciclodegli eventi (mouse,

tastiera ecc.)

Tutorial:Hello notepad

Tutorial:Hello notepad

Page 14: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

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

Nella stessa applicazione o in altri progetti

Page 15: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Sottoclasse di QWidget

class Notepad : public QWidget{ Q_OBJECT

public: Notepad();

public slots: void exit();

private: QTextEdit * textEdit; QPushButton * exitButton;};

Vogliamo chiedereconferma all'utente

prima di uscire

Vogliamo chiedereconferma all'utente

prima di uscire

Metodispeciali, daconnetterea segnali

Metodispeciali, daconnetterea segnali

Aggiungela gestione di

segnalie slot

Aggiungela gestione di

segnalie slot

I widget semplicisono incapsulati come

campi privati

I widget semplicisono incapsulati come

campi privati

Page 16: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

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::trtraduce il testo della

interfaccia utente

QObject::trtraduce il testo della

interfaccia utente

Click sul bottonecollegato al metodo exit

(SIGNAL→SLOT)

Click sul bottonecollegato al metodo exit

(SIGNAL→SLOT)

Widgetdisposti

in un layoutverticale

Widgetdisposti

in un layoutverticale

Page 17: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Layout principali

Qt usa il meccanismo dei layout per disporre i widget

Ci sono tre classi di layout pricipaliQHBoxLayout

QVBoxLayout

QGridLayout

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

Il layout gestisce l'area interna al widget

Page 18: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Layout compositi

È possibile inserire un layout dentro un altro

Es. Layout aggiuntivoa destra, con bottoni disposti in verticale

// …QVBoxLayout* buttonLayout = new QVBoxLayout();buttonLayout->addWidget(openButton);buttonLayout->addWidget(saveButton);buttonLayout->addWidget(exitButton);buttonLayout->addStretch();

QHBoxLayout* mainLayout = new QHBoxLayout();mainLayout->addWidget(textEdit);mainLayout->addLayout(buttonLayout);

Page 19: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

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

Page 20: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

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() Notepad : open()Notepad : open()connect

Signals Slots

saveButton : clicked()saveButton : clicked() Notepad : save()Notepad : save()connect

exitButton : clicked()exitButton : clicked() Notepad : exit()Notepad : exit()connect

Page 21: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Accoppiamento tra segnali e slot

Accoppiamento lascoUn oggetto emette segnale, ma non sa quali slot ricevonoMolti segnali ad un singolo slot, un segnale a molti slot

Type safeLa firma del segnale deve corrispondere a quella degli slot collegatiLa firma di uno slot può essere più corta, trascura degli argomenti che riceveCompilatore rileva errori

Page 22: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

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 filedi scritturaScelta filedi scrittura

Scritturaintero testoScrittura

intero testo

Page 23: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

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 filedi lettura

Scelta filedi lettura

Letturaintero fileLettura

intero file

Page 24: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

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// QDialog

Dialogo perconferma

Dialogo perconferma

Chiusurafinestra

Chiusurafinestra

Page 25: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Interfacce basate su griglie

QGridLayout: dispone i widget in una griglia

All'inserimento del widget, specificare riga e colonna (0-indexed)

Possibile specificare anche l'occupazione di più celle adiacenti

Page 26: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Gruppi di bottoni

QButtonGroup: raggruppamento logico di bottoni

Non fornisce nessuna rappresentazione visuale

Utile per associare i bottoni ad un indice intero

Definisce il segnale buttonClicked, che trasmette come parametro l'indice del bottone

Possibile connettere questo segnale anziché il segnale clicked di ciascun bottone

Utile anche per raggruppare bottoni radio

Gestisce lo stato di tutti i bottoni nel gruppo

Se “exclusive”, solo un bottone selezionato

Page 27: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

FifteenGui

class FifteenGui : public QWidget{ Q_OBJECT

public: FifteenGui(FifteenPuzzle* model, QWidget* parent = NULL); ~FifteenGui();

public slots: void controlButtons(int i);

private: void updateAllButtons(); void checkSolution();

QButtonGroup * buttonGroup; FifteenPuzzle * model;};

Page 28: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

FifteenGui – Costruttore

QGridLayout * layout = new QGridLayout();buttonGroup = new QButtonGroup();

for (int y = 0; y < ROWS; ++y) { for (int x = 0; x < COLUMNS; ++x) { QPushButton * b = new QPushButton(); buttonGroup->addButton(b, y * COLUMNS + x); layout->addWidget(b, y, x); }}updateAllButtons();setLayout(layout);

QObject::connect( buttonGroup, SIGNAL(buttonClicked(int)), this, SLOT(controlButtons(int)));

Conversionetra coord cartesiane

e indice intero

Conversionetra coord cartesiane

e indice intero

Page 29: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

FifteenGui – Controllo bottoni

void FifteenGui::controlButtons(int i) { int y = i / COLUMNS, x = i % COLUMNS; model->move(y, x); updateAllButtons();}

void FifteenGui::updateAllButtons() { for (int y = 0; y < ROWS; y++) { for (int x = 0; x < COLUMNS; x++) { char symbol = model->get(y, x); int i = y * COLUMNS + x; buttonGroup->button(i)->setText(QString(symbol)); } } checkSolution(); // ...}

Conversionetra indice intero ecoord cartesiane

Conversionetra indice intero ecoord cartesiane

In realtà:model->getColumns()

model->getRows()

In realtà:model->getColumns()

model->getRows()

Page 30: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

FifteenGui – Controllo soluzione

void FifteenGui::checkSolution() { if (model->isSolved()) { QMessageBox::information(this, "Puzzle solved!", "Puzzle solved!"); model->shuffle(); updateAllButtons(); }}

Finestra di dialogoinformativa

Finestra di dialogoinformativa

Page 31: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Finestra principale

QMainWindow: widget complesso, con un proprio layout particolare, per aggiungere:

QMenuBar

QStatusBar

QToolBar

QDockWidget

Widget principale al centrosetCentralWidget(new Qwidget());

centralWidget()->setLayout(layout);

Page 32: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Sottoclasse di QMainWindow

#include <QtGui>class Notepad : public QMainWindow { Q_OBJECT

public: Notepad();

public slots: void open(); void save(); void exit();

private: QTextEdit *textEdit; QAction *openAction; QAction *saveAction; QAction *exitAction; QMenu *fileMenu;};

Nuovislot

Nuovislot

Azioni peril menu

Azioni peril menu

Page 33: Interfacce grafiche in Qt - unipr.it · Mobile/embedded: Android (Necessitas), Symbian, MeeGo-JollaOS, BlackBerry QNX, Raspberry Pi ... Qt Creator: ambiente integrato, disegno visuale

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

M.

Tom

aiu

olo

– F

on

dam

enti

di

info

rmat

ica

Dip

. In

ge

gn

eria

del

l'in

form

azio

ne

– U

niP

RD

ip.

Ing

eg

ner

ia d

ell'i

nfo

rmaz

ion

e –

Un

iPR

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

htt

p:/

/ww

w.c

e.u

nip

r.it

/peo

ple

/to

mam

ic/

Creare un menù

Notepad::Notepad() { textEdit = new QTextEdit; setCentralWidget(textEdit);

openAction = new QAction(tr("&Open"), this); saveAction = new QAction(tr("&Save"), this); exitAction = new QAction(tr("E&xit"), this);

fileMenu = menuBar()->addMenu(tr("&File")); fileMenu->addAction(openAction); fileMenu->addAction(saveAction); fileMenu->addSeparator(); fileMenu->addAction(exitAction);

connect(openAction, SIGNAL(triggered()), this, SLOT(open())); connect(saveAction, SIGNAL(triggered()), this, SLOT(save())); connect(exitAction, SIGNAL(triggered()), this, SLOT(exit()));}

Azioni daaggiungere

al menu

Azioni daaggiungere

al menu

Menu “File”con azioni

Menu “File”con azioni

Connessionemenu → slot

Connessionemenu → slot