Dopo aver installato Qt Creator sul nostro PC e provato una prima applicazione demo è arrivato il momento di creare qualcosa dal niente. In questa lezione verrà quindi creata un’applicazione minimale da cui partire per un qualsiasi progetto.
Poiché lo scopo di questo articolo è quello di imparare faremo le cose nella maniera più manuale possibile e quindi eviteremo l’uso di Qt Designer. Si suppone che il lettore abbia già una certa conoscenza di C++.
Cominciamo!
Lanciamo Qt Creator installato sulla nostra macchina di sviluppo e nella pagina di benvenuto andiamo a selezionare “Create Project”. Nella finestra di dialogo che si aprirà selezioneremo a sinistra “Qt C++ Project” e a destra “Mobile Qt Application”. In questo modo Qt Creator ci preparerà il progetto nella maniera che ci torna utile.
Andiamo avanti con “Choose” per inserire i dettagli del progetto che potranno essere modificati anche successivamente: nome del progetto e cartella dove salvarlo. Procedendo ci verrà chiesto per quali piattaforme compilare e quindi selezioniamo il simulatore e nel mio caso i dispositivi Symbian.
Andando avanti ci viene chiesto di creare lo scheletro per il file principale. Selezioniamo QMainWindow e togliamo il check dalla generazione del form per evitare l’uso di Qt Designer.
Ancora un passo e il wizard ci fa un riepilogo e ci crea il progetto. Ci ritroviamo quindi con l’insieme minimo di file che costituirà la nostra applicazione.
Il nostro progetto è stato creato. Andiamo a vedere da cosa è composto.
Nella colonna di sinistra possiamo navigare tra i vari file. Il punto di partenza dell’applicazione è ovviamente main.cpp che avrà più o meno questa forma:
#include <QtGui/QApplication>
#include "mainwindow.h"
int main(int argc, char *argv[]) {
QApplication a(argc, argv);
MainWindow w;
#if defined(Q_WS_S60)
w.showMaximized();
#else
w.show();
#endif
return a.exec();
}
In pratica fa davvero poco. Crea soltanto un’istanza di QApplication, che è indispensabile per il funzionamento dell’applicazione Qt, e un’istanza di MainWindow definito nel file mainwindow.cpp. MainWindow è una semplice estensione di QMainWindow, un widget di Qt che visualizza la finestra principale di un’applicazione, e il main, dopo averne creato un’istanza si limita a visualizzarlo. La direttiva al preprocessore permette di distinguere un’applicazione desktop da una per Symbian. Nel primo caso si limita a visualizzare la finestra principale, nel secondo la massimizza.
Gli altri file sono l’header mainwindow.h e il file descrittore del progetto con estensione pro.
Se lanciamo questa applicazione sul simulatore avremo una semplice schermata vuota. Un po’ poco per rimanere soddisfatti.
Divertiamoci quindi a creare un qualcosa di solo leggermente più complesso visualizzando una semplice lista di stringhe di testo.
Il widget che scegliamo per visualizzare la lista è QListView. Probabilmente è fin troppo complesso per quello che andremo a fare, ma è interessante da vedere.
QListView appartiene al model/view framework di Qt. Si tratta di un gruppo di classi che permette di separare i dati dalla presentazione realizzando delle strutture più ordinate. Se QListView svolge il ruolo di view è quindi necessario scegliere un’altra classe che faccia dal model. La nostra scelta è un semplice QStandardItemModel che contiene degli oggetti QStandardItem.
Ed ecco quindi il contenuto di mainwindow.cpp.
#include "mainwindow.h"
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent)
{
QStandardItemModel *model = new QStandardItemModel();
QStandardItem *parentItem = model->invisibleRootItem();
for (int i = 0; i < 4; i++) {
QStandardItem *item = new QStandardItem(QString("item %0").arg(i));
parentItem->appendRow(item);
}
QListView *listView = new QListView();
listView->setModel(model);
this->setCentralWidget(listView);
}
Come prima cosa viene creata un’istanza di QStandardItemModel chiamata model. Questo model struttura i dati secondo un semplice albero. Per poter inserire delle foglie occorre però un reference al nodo radice. La radice è di tipo QStandardItem e la chiamiamo parentItem.
A questo punto il ciclo valorizza 4 elementi. Per ogni elemento item viene creato un oggetto di tipo QStandardItem. Al costruttore passiamo una stringa che contiene l’id dell’elemento e che sarà visualizzata. Aggiungiamo a parentItem la foglia appena creare con un appendRow.
A fine ciclo viene creata la QListView e subito dopo colleghiamo il model alla view. A quanto punto ci rimane solo da impostare come oggetto centrale della main window la QListView.
Per poter compilare sarà necessario definire nel header le varie classi Qt che stiamo utilizzando. In questo caso possiamo anche scegliere la via breve con un semplice.
#include <QtGui>
Il risultato così ottenuto è già un qualcosa di apprezzabile.
Con pochissimo sforzo possiamo rendere ancora più interessante questa nostra semplice applicazione: aggiungiamo un’icona ad ogni elemento della lista.
Per farlo è necessario aggiungere delle risorse all’applicazione. Cliccando col tasto destro nella colonna di sinistra apriamo il menù contestuale e selezioniamo “Add new”. Nella finestra di dialogo selezionamo “Qt” a sinistra e “Qt Resource File” a destra. Scegliamo un nome per il file, ad esempio “resources” e terminiamo la procedura del wizard. Al nostro progetto è stata quindi aggiunta una cartella denominata “Resources” che contiene un file resources.qrc.
Selezioniamolo e definiamo un prefisso per i file di questo gruppo di risorse. Andiamo su “Add” e poi su “Add Prefix” e inseriamo “/” come percorso. Ancora “Add” e poi “Add Files” per inserire dei file nel percorso. Selezioniamo un qualsiasi file immagine dal PC. Nel mio caso ho scelto una PNG a forma di fumetto denominata balloon.png. Qt Creator chiederà di salvare il file selezionato all’interno della cartella del progetto. Infine vedremo elencato il file immagine nel file delle risorse.
Facciamo quindi una piccola modifica a mainwindow.cpp trasformando la riga di creazione degli item in questo.
QStandardItem *item = new QStandardItem(QIcon(":/balloon.png"), QString("item %0").arg(i));
Quasi senza sforzo abbiamo aggiunto le icone.
Siamo quindi giunti al termine di questo tutorial. Spero che vi sia d’aiuto per cominciare a muovere i primi passi nel mondo di Qt e di Symbian.