Tutorial Librerie Qt Parte 2

Transcript

1 Tutorial Librerie Qt Parte 2 Premessa Questo tutorial è rilasciato sotto Licenza Creative Commons: Attribution-NonCommercial-NoDerivativeWorks ( Questo documento può quindi essere riprodotto senza violare nessuna legge, sia in versione elettronica, sia in versione cartacea, purché sia riprodotto integralmente in tutte le sue parti, compresa la pagina che contiene queste informazioni: Versione originale scaricabile dal sito Tutti i marchi riportati in questa pubblicazione appartengono ai rispettivi proprietari. In questo secondo articolo sul toolkit Qt vedremo alcuni importanti concetti di programmazione di questa libreria e alcuni esempi pratici. Per prima cosa faremo pratica sull'uso di Designer e costruiremo una prima semplice applicazione in grado di visualizzare un' immagine nel formato PGN, XPM, JPG; successivamente ci occuperemo di due importanti argomenti: il layout management e la gestione degli eventi. Il layout management è il meccanismo offerto da Qt per posizionare gli oggetti all'interno di una GUI e la gestione degli eventi ci consente di intercettare qualsiasi interazione con l'utente (tastiera mouse) o con il sistema (timers, eventi dovuti al sistema di gestione delle finestre). Prima di addentrarci nella nostra trattazione, riprendiamo pero' brevemente un concetto visto nel numero precedente. Breve richiamo del meccanismo di S&S La nostra applicazione farà uso del meccanismo di Signals & Slots visto in dettaglio nel precedente articolo sulle Qt. Prima di addentrarci però nell'uso di questa potente funzione offerta dal Qt Toolkit, rivediamone brevemente il funzionamento. Gli slots sono praticamente identici alle funzioni membro di una classe, si può quindi parlare di slots pubblici, privati e protetti e possono essere invocati così come avviene per tutti gli altri metodi tradizionali di una classe. La differenza sostanziale è che uno slot, può sempre essere collegato ad un segnale e quindi sarà invocato ogni volta che il segnale verrà emesso. Questo collegamento signal/slot, viene realizzato con la funzione di libreria connect ed ha la sintassi: connect (sender,signal(signal),receiver,slot(slot)); dove sender e receiver sono i puntatori agli oggetti Qt (nel nostro esempio sender è il bottone e receiver il semaforo) da porre in comunicazione e signal, slot sono funzioni (in questo caso senza parametri) appartenenti rispettivamente all'oggetto sender e receiver. Nel caso invece di collegamento signal/slot con 1 parametro intero si avrà:

2 connect (sender,signal(signal(int)),receiver,slot(slot(int))); La macro SIGNAL() e la macro SLOT() sono essenziali per il funzionamento del tutto e verranno pre-processate dal meta object compiler (moc) prima della compilazione di tutti i files del progetto. Così come esiste una funzione connect, esiste anche la funzione opposta, la disconnect, usata per disconnettere il segnale dallo slot precedentemente collegati. La sintassi della funzione è: disconnect (sender,signal(signal),receiver,slot(slot)); In questo modo è possibile attivare e disattivare il collegamento tra oggetti a run-time. Va inoltre ricordato che più segnali possono essere collegati ad uno stesso slot, un segnale può essere collegato a più slots ed infine un segnale può essere collegato ad un altro segnale: connect (sender,signal(signal1),receiver,slot(signal2)); In questo caso, quando viene emesso il segnale signal1, verrà anche emesso il segnale signal2. Tenendo presente questi concetto, possiamo ora passare alla realizzazione della nostra prima applicazione con Qt Designer. Qt Designer Come visto nel nostro precedente articolo, il toolkit Qt è stato progettato dalla Trolltech per essere immediato e di facile utilizzo. Un'applicazione Qt può essere realizzata scrivendone interamente il codice sorgente C++, oppure mediante l'ambiente di design rapido fornito dal toolkit stesso, ovvero il Qt Designer. Mediante questo tool, le possibilità offerte al programmatore Qt vengono ampliate, si può quindi realizzare un'applicazione combinando forms disegnati visivamente e codice sorgente scritto dal programmatore. In questo articolo ci addentreremo nella programmazione di Qt e realizzeremo una piccola applicazione in grado di visualizzare immagini facendo uso del designer. Uso di Qt Designer Per prima cosa occorre chiamare dalla nostra shell preferita il Qt Designer, per far ciò dobbiamo digitare designer. Dopo l'avvio e lo splash screen, designer ci porrà il primo quesito, ovvero quale tipo di form vogliamo creare. Per la nostra applicazione selezioneremo Dialog tra le possibilità offerte e designer si presenterà come in figura 1.

3 Figura 1 Sul lato sinistro di designer possiamo vedere la toolbox contenente tutti i widgets Qt che possono essere usati per creare la nostra applicazione. La toolbox suddivide tutti i widgets in otto gruppi. Il primo gruppo, Common Widgets, raggruppa gli oggetti grafici di uso più comune, richiamabile premendo il bottone Buttons, troviamo il gruppo che unisce tutti i widgets Qt di tipo bottone(come ad esempio PushButton o CheckBox), successivamente troviamo il gruppo Container di cui fanno parte gli oggetti di tipo contenitore, come ad esempio ToolBox, che è appunto il widget che ora stiamo usando per la nostra carrellata (designer è stato realizzato usando appunto i widget che mette a disposizione), a seguire selezioniamo il gruppo Views e qui vi troviamo tutti gli oggetti utili per la visualizzazione, come ad esempio liste e tabelle. Il gruppo successivo Database contiene i widgets da impiegare per realizzare applicazioni di interfaccia verso database e di seguito ancora troviamo il gruppo Input, contenente i widgets necessari per l'inserimento dati (tramite tastiera o mouse), si va dal semplice LineEdit (input su singola linea) a TextEdit (input su più linee) ed infine il gruppo Display che raggruppa un insieme di oggetti utili per mostrare informazioni all'utente. Un componente molto impiegato in campo industriale, contenuto in questo gruppo, è senza dubbio LCDNumber. Esso consente di rappresentare numeri simulando i display chiamati a sette segmenti. L'ultimo gruppo Custom Widgets, vuoto, è stato creato per contenere nuovi widgets, creati dal programmatore. Esiste infatti un meccanismo a plugin che consente di espandere Designer, aggiungendo nuovi componenti. Sul lato destro di designer troviamo invece una colonna composta da tre finestre. La finestra più in alto, detta project overview porta informazioni circa il progetto su cui stiamo lavorando, nome, files appartenenti al progetto e così via. Subito sotto abbiamo la finestra Object Explorer che ci permette di navigare attraverso tutti i widgets della nostra applicazione (tab Objects ) e i membri (slots, funzioni e proprietà) dell'oggetto selezionato. L'ultima finestra, in basso, è l'editor di proprietà e signal handler. Tramite questa finestra possiamo impostare praticamente tutte le proprietà del widget selezionato e definire i metodi da richiamare per gestire gli eventi generati dal widget stesso. Al centro, tra le due colonne di tools, troviamo il nostro form, il cui nome di default è Form1. Il

4 primo passo che dobbiamo compiere ora è quello di popolare il nostro form con i widgets necessari al funzionamento della nostra applicazione. Per prima cosa creeremo quindi un PushButton per far terminare l'applicazione e lo posizioneremo in basso, al centro del nostro form. Per fare ciò, dovremo selezionare il gruppo Buttons, clickandoci sopra con il tasto sinistro del mouse e poi selezioneremo (sempre con il mouse) PushButton. A questo punto, se muoviamo il mouse sul nostro form, vediamo che il cursore assume la forma di una croce; questo ci serve per capire che stiamo per posizionare un widget. Dopo aver scelto il punto in cui lasciar cadere il nostro PushButton premiamo ancora una volta il tasto sinistro del mouse. Ora il nostro bottone di uscita è posizionato, per spostarlo, possiamo premere il tasto sinistro del mouse su di esso e trascinarlo sino al punto di arrivo e poi lascieremo il tasto del mouse. Dopo aver posizionato correttamente il bottone di uscita, dovremo impostarne le proprietà, quali ad esempio il testo e il metodo da richiamare sull'evento di clicked. Per prima cosa selezioniamo il nostro bottone sulla finestra di Object Explorer, dopodichè, sulla finestra di Property Editor, cercheremo la proprietà text ed inseriremo il nostro testo, ad esempio Esci. Selezionando da menu bar la voce Edit e, all'interno di esso, l'opzione Connections, ci verrà presentato a video il dialogo di impostazione delle connessioni (relativo alle connessioni tra Signals&Slots) visibile in figura 2 Figura 2 Selezionando New, la prima riga verrà della finestra verrà inizializzata con una connessione vuota. Il nostro compito sarà quello di selezionare il sender tra tutte le opzioni possibili, nel nostro caso sarà pushbutton1, il segnale da intercettare released(), il receiver Form1 e lo slot da associare al signal, nel nostro caso close(). Dopo aver realizzato questa associazione, salviamo il nostro file.ui in una directory di progetto, ad esempio di nome esempio, editiamo un nuovo file, il cui nome può essere main.cpp contenente il codice seguente: /********************************************/ /* Nome file : main.cpp */

5 /* Sopo : creazione dell'applicazione */ /* associata al form Form1 */ /********************************************/ #include <qapplication.h> #include "form1.h" main(int argc, char *argv[]) QApplication app(argc,argv); Form1 *form1=new Form1; app.setmainwidget(form1); form1->show(); return app.exec(); } e salviamolo nella directory esempio. Dalla nostra shell preferita, posizioniamoci nella directory esempio e digitiamo il comando qmake project, otterremo il file qmake esempio.pro e digitando nuovamente qmake, disporremo del file di make automaticamente generato da qmake stesso. Il nostro ultimo passo da compiere sarà lanciare make ed ottenere il nostro eseguibile che, presenterà l'interfaccia utente disegnata con il Qt Designer. A questo punto, dopo aver creato lo scheletro della nostra applicazione possiamo concentrarci sul nostro obiettivo e cioè visualizzare immagini. Per prima cosa inseriamo un nuovo bottone che ci permetterà di selezionare l'immagine da caricare, il testo da associare a questo bottone potrà essere ad esempio carica immagine, posizioniamolo vicino al pulsante di uscita ed aggiungiamo uno spaziatore alla destra dei due pulsanti. Come ultimo oggetto, sistemiamo una PixmapLabel sopra il blocco dei pulsanti e, tenendo premuto il tasto SHIFT, selezioniamo tutti i componenti grafici dell'applicazione, compreso il form stesso. Ora premiamo CTRL G ed otterremo qualcosa simile a figura 3

6 Figura 3 Selezioniamo ora il form, dalla menu bar, scegliamo il menu Edit e la voce Slots.... Si presenterà una finestra di dialogo come quella di figura 4

7 Figura 4 Premiamo il pulsante New Function e poi il pulsante OK. Questo ci permetterà di creare uno slot, di nome newslot() da associare al pulsante Carica Immagine, designer ci chiederà di creare un nuovo file ui.h e noi confermeremo; questo sarà il file su cui andremo a gestire le operazioni di caricamento immagine. Per far ciò, selezioniamo nuovamente il menu Edit, la voce connections... ed aggiungeremo, tramite il pulsante New una nuova connessione come abbiamo fatto prima per il pulsante Esci. Questa volta però, associeremo il pulsante Carica Immagine (il cui nome è pushbutton2), il segnale sarà released, il ricevitore sarà il form (Form1) e lo slot sarà quello che abbiamo creato, ovvero newslot(). Il codice di caricamento dell'immagine potrà essere del tipo: #include <qfiledialog.h> void Form1::newSlot() QString s = QFileDialog::getOpenFileName( "/home", "Images (*.png *.xpm *.jpg)", this, "open file dialog" "Choose a file" ); if(!s.isnull() &&!s.isempty()) pixmaplabel3->setpixmap(qpixmap(s)); } Analizziamo ora il codice di newslot(). L'istruzione QString s = QFileDialog::getOpenFileName(

8 "/home", "Images (*.png *.xpm *.jpg)", this); permette di aprire una finestra di dialogo tramite il metodo getopenfilename offerto dalla classe QFileDialog. I parametri passati a questo metodo sono: /home ovvero la directory su cui posizionare la ricerca "Images (*.png *.xpm *.jpg)" Questa istruzione imposta il filtro per la visualizzazione dei files da aprire this puntatore al padre della finestra di dialogo Il risultato della selezione effettuata dalla finestra di dialogo verrà salvata nella QString s. Prima di procedere con il caricamento del file selezionato, occorre sincerarsi che la selezione sia stata effettuata e a questo scopo serve l'istruzione if(!s.isnull() &&!s.isempty()). La classe QString mette a disposizione i metodi isnull() e isempty(), proprio per verificare che la stringa contenuta non sia nulla o vuota. Dopo aver controllato la stringa corrispondente al nome del file immagine da caricare, tramite il metodo pixmaplabel1->setpixmap(qpixmap(s)), carichiamo una nuova pixmap nella nostra QLabel. Da notare che il parametro da passare a setpixmap è di tipo QPixmap, ma noi disponiamo di una semplice stringa. Il problema si risolve facilmente poiché tramite QPixmap(s), andiamo proprio a creare una pixmap usando il costruttore apposito messo a disposizione dalla classe. Il risultato del nostro lavoro sarà visibile a figura 5

9 Figura 5 Introduzione al layout management Ciascun oggetto inserito in un form viene posizionato in un preciso punto ed ha dimensioni precise. Questo si traduce programmaticamente in attributi di posizione e attributi dimensionali. Un problema comune, dovuto al posizionamento assoluto di un widget all'interno di un form, è che quando il form cambia di dimensioni, il widget può risultare non più centrato, o peggio ancora, non più visibile. Per risolvere questo inconveniente, in caso di form ridimensionabili, non si ricorre al posizionamento assoluto dei widgets, bensì si delega il posizionamento degli stessi ad un gestore di layout. Qt implementa un efficiente meccanismo di layout management per liberare il programmatore dal problema del posizionamento dei widgets all'interno di una qualsiasi finestra. Il layout manager di Qt prevede tre modi basilari per la gestione del layout: posizionamento assoluto, layout manuale ed infine a layout manager. Il posizionamento assoluto è il modo più crudo per sistemare i widgets all'interno della nostra interfaccia utente, per fare ciò, non occorre far altro che assegnare i valori di posizione e le dimensioni del widget nel codice sorgente; nel caso di posizionamento assoluto per un widget di tipo bottone, useremo il metodo setgeometry nel modo seguente: button->setgeometry(x, y, w, h). L'esempio riportato pone il widget grafico di tipo QPushButton, di cui abbiamo il puntatore button, alle coordinate assolute x ed y all'interno del widget che lo contiene (ad esempio la

10 finestra dell'applicazione) ed inoltre attribuisce ad esso le dimensioni w ed h rispettivamente per la larghezza e l'altezza; in altre parole, il bottone grafico viene considerato come se fosse un rettangolo di base uguale a w ed altezza uguale ad h e per determinare il suo posizionamento, si assegnano le coordinate x,y al suo vertice in alto a sinistra, come mostrato in figura 6. Figura 6 Il posizionamento assoluto presenta molti svantaggi, primo tra tutti l'impossibilità per l'utente di ridimensionare la finestra, in questo caso infatti, il nostro bottone potrebbe risultare disallineato o peggio ancora risultare tagliato se la finestra stessa fosse troppo piccola per contenerlo. Un altro problema è dovuto al fatto che la stringa di testo presente sui widgets (nel caso di figura 6, QPushButton) potrebbe risultare tagliata qualora il font di default fosse troppo grande, oppure nel caso di traduzione in altre lingue, la parola potrebbe essere più lunga di quella prevista nella lingua d'origine. Un alternativa al posizionamento assoluto è il posizionamento manuale; in questo caso infatti i widgets vengono sempre posizionati in modo assoluto, ma le loro dimensioni e posizione vengono calcolati in base alle dimensioni della finestra che li contiene. Qualsiasi widget Qt (e quindi anche la finestra di un'applicazione), restituisce informazioni sulle sue dimensioni mediante i metodi height() (altezza) e width() (larghezza). Così come per il posizionamento assoluto, anche per il posizionamento manuale occorre inserire nel codice sorgente un gran numero di costanti corrispondenti alle dimensioni e posizione di ciascun widget, con pesanti conseguenze sulla leggibilità e manutenibilità del codice (nonché della sua eleganza!) La miglior soluzione per piazzare i widgets nella nostra interfaccia utente è senza dubbio quella di affidarsi ai layout managers di Qt; in questo caso infatti, delegeremo a Qt stesso tutto il lavoro di posizionamento e ridimensionamento dell'intera interfaccia utente della nostra applicazione. I layout managers di Qt, prevedono per ogni widget dei valori di default e cercano di riservare ad essi le dimensioni ottimali sulla base del font selezionato, della dimensione dei caratteri e del loro contenuto; oltre a ciò, svolgono il ridimensionamento automatico quando viene selezionato un nuovo font, cambia il testo contenuto in un widget o viene ridimensionata la finestra dell'applicazione. Qt fornisce tre manager di layout: QHBoxLayout, QVBoxLayout e QgridLayout. Tutte e tre le classi sono derivate dalla classe più generica, QLayout, che è appunto il gestore di base del layout previsto da Qt e sono pienamente supportate da Designer; grazie a questa possibilità quindi, potremo disegnare in modo rapido e visivo i nostri form ed avvalerci in modo trasparente ed immediato dell'enorme potenza fornitaci dai layout managers.

11 Classi di layout management Il primo layout manager che analizzaremo è QHBoxLayout, tramite esso possiamo posizionare i widgets allineandoli in orizzontale. Un esempio tipico di uso può essere: QBoxLayout * layout = new QHBoxLayout( widget ); QPushButton *b1= new QPushButton(0); QPushButton *b2= new QpushButton(0); QPushButton *b3= new QPushButton(0); QPushButton *b4= new QPushButton(0); layout->addwidget( b1); layout->addwidget( b2 ); layout->addwidget( b3); layout->addwidget( b4 ); Mediante QBoxLayout * layout = new QHBoxLayout( widget ) creiamo dinamicamente il gestore di layout orizzontale e aggiungiamo nel layout i quattro bottoni b1,b2,b3,b4 tramite il metodo addwidget(). Il codice scritto ci permetterà di allineare orizzontalmente i quattro bottoni come in figura 7 Figura 7 All'allineamento verticale provvede invece QVBoxLayout, analogamente a quanto visto prima avremo: QBoxLayout * layout = new QVBoxLayout( widget ); QPushButton *b1= new QPushButton(0); QPushButton *b2= new QpushButton(0); QPushButton *b3= new QPushButton(0); QPushButton *b4= new QPushButton(0); layout->addwidget( b1); layout->addwidget( b2 ); layout->addwidget( b3); layout->addwidget( b4 ); Mediante QBoxLayout * layout = new QVBoxLayout( widget ) creiamo dinamicamente il gestore di layout verticale e aggiungiamo nel layout i quattro bottoni b1,b2,b3,b4 tramite il metodo addwidget(). Ed otterremo l'allineamento di figura 8

12 Figura 8 Per quanto riguarda invece il grid layout avremo: QGridLayout * l = new QGridLayout(this); QPushButton *b1= new QPushButton(this); QPushButton *b2= new QPushButton(this); QPushButton *b3= new QPushButton(this); QPushButton *b4= new QPushButton(this); b1->settext("bottone 1"); b2->settext("bottone 2"); b3->settext("bottone 3"); b4->settext("bottone 4"); l->addwidget(b1,0,0); l->addwidget(b2,0,1); l->addwidget(b3,1,0); l->addwidget(b4,1,1); Ed otterremo il risultato di figura 9 Figura 9 In questo caso, il metodo addwidget non avrà un solo parametro come per i layout manager visti prima, dovremo infatti informare il layout manager riguardo dove vogliamo inserire il widget, in quale cella. Il secondo e terzo parametro infatti assumono i valori: (0,0) corrispondente alla cella in alto a sinistra della griglia (0,1) la cella in alto a destra (1,0) la cella in basso a sinistra (1,1) la cella in basso a destra Gestione degli eventi Le applicazioni GUI vengono definite applicazioni di tipo event-driven, ovvero pilotate dagli eventi; questa definizione è davvero rappresentativa, in quanto in un'applicazione GUI, tutto ciò che succede è il risultato di un evento. Quando programmiamo con il toolkit Qt, raramente abbiamo bisogno di preoccuparci del meccanismo degli eventi, poiché i widgets Qt che usiamo emettono autonomamente dei segnali nel momento in cui occorre qualcosa di significativo. La gestione degli eventi diventa quindi importante nel momento in cui vogliamo scrivere dei nuovi custom widgets o vogliamo modificare il comportamento di widgets esistenti. Vediamo ora, per capirne l'importanza, alcuni esempi di eventi e successivamente vedremo gli eventi principali messi a disposizione dalla classe QWidget. Questo sarà un utile punto da cui partire nel prossimo tutorial. per costruire il nostro primo custom widget. Gli eventi vengono generati da Qt in risposta a diverse situazioni: quando viene premuto un tasto sulla tastiera, oppure un tasto del mouse, Qt si incarica di generare un evento. Un evento però può anche essere generato in seguito al riposizionamento di una finestra sul desktop, in quanto caso ad esempio, il sistema di gestione delle finestre riceve un evento che usa per

13 ridisegnare ciò che prima era nascosto dalla finestra; in questo caso parleremo di evento di Paint (disegno). Terminiamo ora la nostra breve carrellata citando l'evento di Show. Come già visto in precedenza, la creazione di un widget non implica automaticamente la sua visibilità, bisogna infatti richiamare esplicitamente il metodo di show() per disegnarlo a video. Richiamare il metodo di show() è il metodo che Qt ci offre per informare il motore di disegno del toolkit che un widget, di cui noi abbiamo definito le proprietà grafiche, testuali, di posizione e dimensioni, deve essere ridisegnato. Un altro evento, molto comune nella pratica, è il timer. Se gli eventi visti sin'ora occorrono come risultato di un'azione eseguita dall'utente dell'applicazione, i timers permettono all'applicazione stessa di eseguire un compito ad intervallo di tempo. Gli esempi riportati sopra ci permettono di capire la filosofia che sta dietro agli eventi, ma nulla è ancora stato detto su come essi vengono implementati. Nel mondo Qt, un evento è un metodo virtuale, il che vuol dire, semplificando il concetto, che quando deriviamo da una classe di partenza con eventi, possiamo reimplementarli (sono sempre dei metodi!) per fornirgli le funzionalità necessarie alla nostra applicazione e poiché un esempio è ben più chiaro di mille parole, vediamo ora un caso pratico. Il nostro esempio dimostrerà l'uso dell'evento di timer e per far cio' creeremo un widget il cui aspetto esteriore sarà una stringa testuale scorrevole verso sinistra; le lettere scorreranno di un pixel ogni 100 millesimi di secondo. Questo è un ottimo esempio, fornitoci dalla letteratura ufficiale Trolltech, utile per muovere i primi passi nella creazione di custom widget. Per prima cosa dovremo creare il nostro primo custom widget ; per far ciò deriveremo dalla classe QWidget, creata appositamente allo scopo e successivamente reimplementeremo i metodi virtuali paintevent(), timerevent(), showevent() ed infine hideevent(). La nostra nuova classe mytimer sarà quindi: #include <qwidget.h> class mytimer : public QWidget public: mytimer(qwidget *parent = 0, const char *name = 0); void settext(const QString &newtext); QString text() const return mytext; } protected: void paintevent(qpaintevent *event); void timerevent(qtimerevent *event); void showevent(qshowevent *event); void hideevent(qhideevent *event); private: QString mytext; int mytimerid; int offset; }; La classe class mytimer, di tipo public QWidget presenta tre metodi pubblici: il costruttore (mytimer), il metodo che ci permette di modificare il testo visualizzato dal widget (settext) ed infine il metodo da usare per leggere il testo contenuto. Come si può notare, il fatto che la stringa testuale mytext sia di tipo privato, ci obbliga a fornire due metodi pubblici per la sua lettura e scrittura. Questo è il meccanismo tipico usato per nascondere all'esterno la stringa mytext e permettere la sua elaborazione solo attraverso i metodi da noi forniti; questo meccanismo è ampiamente usato dal toolkit Qt per fornire al programmatore la possibilità di modificare e leggere le proprietà di un widget, senza però averne accesso diretto. I metodi privati della nostra classe, ovvero paintevent(), timerevent(), showevent() e hideevent() rappresentano invece tutti gli eventi che andremo a gestire; quest'operazione è possibile poiché essi sono

14 metodi virtuali definiti in QWidget. Troviamo infine le proprietà della nostra classe, mytext, che rappresentano rispettivamente la stringa testuale del nostro widget, il timer che useremo per gestire la temporizzazione (mytimerid) e la posizione corrente della nostra stringa, necessaria per gestire lo spostamento verso sinistra ad ogni intervallo di tempo. Vediamo ora l'implementazione dei metodi della classe mytimer, iniziando dal costruttore. mytimer::mytimer(qwidget *parent, const char *name) : QWidget(parent, name) mytimerid = 0; offset=0; } Al costruttore della nostra classe passiamo come argomenti due parametri: il primo rappresenta il padre dell'oggetto (ogni oggetto di Qt ha un padre, nel caso di oggetti top level, il puntatore al padre sarà zero)e il secondo rappresenta il nome che verrà dato all'oggetto (il nome non deve essere confuso con la stringa di testo, bensì è un valore mnemonico utile per identificare gli oggetti durante le sessioni di debugging). Soffermiamoci brevemente sulla funzione QString text() const return mytext; }. Questa funzione è molto semplice, il suo unico scopo è restituire la stringa testuale del nostro widget. Per modificare invece tale stringa ricorreremo alla seguente implementazione di settext: void mytimer::settext(const QString &newtext) mytext = newtext; update(); } Questo metodo presenta una peculiarità. Tralasciamo la ovvia mytext = newtext e concentriamoci sulla update(). Essa ci permette di lanciare l'evento di paint al nostro widget, la modifica della stringa di testo va infatti ridisegnata a video e per far ciò occorre scatenare un evento che, una volta riconosciuto dal motore di Qt, ci permetterà il richiamo del metodo di paintevent illustrato qui di seguito. void mytimer::paintevent(qpaintevent *) QPainter painter(this); int textwidth = fontmetrics().width(text()); if (textwidth < 1) return; int x = -offset; while (x < width()) painter.drawtext(x, 0, textwidth, height(), AlignLeft AlignVCenter, text()); x += textwidth; } } Tutti i widgets Qt usano paintevent() per disegnare a video il widget stesso; perciò nel nostro esempio dovremo uniformarci a questa filosofia e confinare tutte le operazioni di disegno in questo metodo. La prima operazione da compiere in un metodo di paintevent sarà quella di allocare dinamicamente un oggetto di tipo QPainter, esso è infatti lo strumento che Qt ci mette a disposizione per disegnare l'aspetto di un widget. L'istruzione QPainter painter(this) ci permette di allocare dinamicamente un oggetto QPainter il cui padre è il nostro stesso widget (e cioè l'argomento this passato al costruttore). QPainter fornisce funzioni ottimizzate per disegnare linee, cerchi, archi e corde, ellissi, poligoni; oltre a ciò, consente di scrivere stringhe testuali controllandone l'allineamento la posizione e

15 tutti gli attributi tipici (colore, font, dimensioni). Per le operazioni di disegno più evolute, consente inoltre di gestire sistemi e trasformazioni di coordinate. L'istruzione int textwidth = fontmetrics().width(text())ci permette di conoscere la dimensione del testo contenuto nel nostro widget. Per poter comprendere questa istruzione occorre ricordare alcune cose: fontmetrics() è un metodo di QPainter che ci permette di conoscere le informazioni metriche associate al font correntemente usato (quali ad esempio le dimensioni in pixel). L'oggetto restituito da questo metodo sarà di tipo QFontMetrics. fontmetrics().width(qstring & str) width() è un metodo proprio di QfontMetrics che ci consente di conoscere la lunghezza in pixel della stringa passata come argomento (& str) fontmetrics().width(text()) la funzione text(), propria del nostro widget, restituisce la stringa contenente il testo che vogliamo visualizzare (per la precisione mytext). In questo modo, il valore restituito da fontmetrics().width(text()) sarà proprio la lunghezza in pixel della nostra stringa di testo, calcolata sulla base del font preselezionato e delle sue dimensioni. Questo valore, contenuto in textwidth, ci sarà utile per svolgere i calcoli necessari alle operazioni di disegno. Il blocco di istruzioni seguente: int x = -offset; while (x < width()) painter.drawtext(x, 0, textwidth, height(), AlignLeft AlignVCenter, text()); x += textwidth; ci permetterà di disegnare la stringa testuale ripetutamente, sino ad occupare tutta la dimensione orizzontale del nostro widget, - ottenuta tramite la funzione width() - e, ad ogni iterazione, la posizione orizzontale da cui la stringa verrà disegnata cambierà di valore, sulla base del calcolo x += textwidth. L'istruzione su cui è bene soffermare l'attenzione è il richiamo del metodo painter.drawtext. Come già suggerisce il nome stesso, questo è un metodo di QPainter incaricato di disegnare una stringa di testo. Vediamo ora più in dettaglio i parametri: x: posizione orizzontale (all'interno del nostro widget) da cui la stringa verrà disegnata 0: posizione verticale (all'interno del nostro widget) da cui la stringa verrà disegnata textwidth: lunghezza della stringa da disegnare height(): altezza della stringa da disegnare AlignLeft AlignVCenter: queste sono costanti proprie di Qt, usate per informare drawtext sul metodo di allineamento da adottare per il disegno della stringa. Nel nostro caso AlignLeft richiede di allineare la stringa partendo da sinistra e AlignVCenter richiede un allineamento verticale di tipo centrato. Vediamo ora l'implementazione di showevent: void mytimer::showevent(qshowevent *event) mytimerid = starttimer(100);

16 } Questo metodo ci permette di far la conoscenza con una funzione propria di QWidget, ovvero starttimer(), questa funzione attiva il timer (contenuto in ogni widget Qt) e gli assegna un valore di 100 millesimi di secondo. Da questo momento in poi, il nostro widget genererà un evento di timer ogni 100 millesimi di secondo; questo evento di timer verrà riconosciuto dal motore di Qt che provvederà a richiamare il nostro metodo timerevent(). void mytimer::timerevent(qtimerevent *event) ++offset; update(); } timerevent viene richiamata automaticamente ogni 100 millesimi di secondo, essa incrementa la variabile offset di uno per simulare il movimento del testo e successivamente richiama update(), metodo proprio di QWidget, che si occupa di lanciare l'evento di paint e scatenare così la chiamata alla nostra funzione di paintevent. Occorre infine ricordare, quando si utilizzano i timers di Qt, che è necessario prima di terminare l'applicazione, terminarli. A questo compito provvede l'ultimo metodo che andremo ad analizzare. void mytimer::hideevent(qhideevent *event) killtimer(mytimerid) } Come si può facilmente osservare, il metodo killtimer, proprio della classe QWidget, si occupa di distruggere il timer precedentemente attivato. Conclusioni Nel prossimo tutorial ci occuperemo di widgets con una rapida ma dettagliata carrellata sui componenti di interfaccia utente che il nostro toolkit preferito ci mette a disposizione e poi ci addentreremo nel mondo della programmazione di custom widgets, realizzando un indicatore numerico tipo tachimentro.