La prima applicazione con KDevelop e Qt 4

splash

Questa guida non ha la pretesa di insegnare a programmare in C++ (per questo ci sono tonnellate di manuali ed esempi disponibili) ma di introdurre rapidamente l’utente, che si avvicina per la prima volta alla programmazione nel mondo GNU/Linux, alla programmazione delle interfacce grafiche con le fantastiche librerie Qt4.
Un consiglio, abusate pure come volete della guida in linea delle Qt4 che è fatta veramente bene e diventa indispensabile se si decide di sviluppare applicazioni più complesse.

Allacciate le cinture… si comincia!

Creazione del progetto Qt 4

  • Avviare KDevelop
  • Selezionare dal menù Progetto la voce Nuovo progetto
  • Selezionare dal ramo C++ la voce QMake project quindi, da quest’ultimo, scegliere Applicazione Qt4

immagine_001

  • Nel campo Nome applicazione specificare un nome per il progetto (ad es. CiaoMondo_Qt4)
  • Nel campo Posizione specificare il percorso all’interno del quale salvare il progetto (io ho creato la cartella Progetti all’interno della mia home directory), quindi cliccare su Avanti.
  • Specificare il nome dell’autore del progetto, il vostro indirizzo e-mail, la versione del programma ed il tipo di licenza con cui intendete rilasciare il programma. Per adesso potete semplicemente accettare i valori proposti ed andare avanti ma, se intendete distribuire il vostro programma sarà bene inserire le informazioni con cura, queste infatti vi permetteranno di rivendicare sempre la paternità sul vostro magnifico software. Cliccare su Avanti.

immagine_002

  • Selezionare il sistema di controllo della versione. Anche qui per ora possiamo sorvolare e cliccare con decisione sul pulsante Avanti ma, se un giorno decideste di scrivere un’applicazione più complessa, un sistema per il controllo della versione potrebbe aiutarvi molto. Cliccare su Avanti con noncuranza 🙂 .

immagine_003

  • In questa schermata è possibile modificare il template contenete le informazioni sull’autore del software e sul tipo di licenza con cui quest’ultimo viene distribuito (il software, non l’autore 😛 ). Da notare che quanto scritto in questa pagina verrà inserito all’inizio di ogni file header (.h) del vostro progetto. Cliccare su Avanti.

immagine_004

  • In questa schermata è possibile modificare il template contenete le informazioni sull’autore del software e sul tipo di licenza con cui quest’ultimo viene distribuito. Da notare che quanto scritto in questa pagina verrà inserito all’inizio di ogni file sorgente (.cpp) del vostro progetto. Cliccare su Fine.

immagine_005

A questo punto KDevelop ha già creato un’applicazione Qt4 funzionante:

immagine_006

  • Siccome lo so che siete curiosi come delle scimmie e non vedete l’ora di far girare il vostro programma, selezionare dal menù Compila la voce Compila progetto (oppure premere F8) e rispondere affermativamente alla richiesta di eseguire qmake. In questo modo verranno creati tutti i file intermedi (come Makefile, file moc e uic) necessari per compilare il software.

immagine_007

  • Nella finestra Messaggi è possibile leggere quello che accade in fase di compilazione. Se tutto va come deve andare, alla fine apparirà la scritta:
*** successo ***

Se dovessero esserci problemi (errori di sintassi, librerie mancanti, ecc.) questa finestra sarà una delle nostre migliori alleate.

immagine_008

  • Ci siamo, dal menù Compila selezionare la voce Esegui programma principale (oppure premere Shift+F9)

immagine_009

Creazione dell’interfaccia grafica

Prima di procedere è necessario capire come si usano le interfacce grafiche in Qt4:

Si crea il file di interfaccia grafica con il Qt Designer (come abbiamo appena fatto). Quindi si compila il file .ui ottenuto in modo che venga tradotto in un file sorgente (.h). Quest’ultimo conterrà una classe i cui metodi si occuperanno di creare tutti i controlli (pulsanti, label, ecc.) e di impostarne le proprietà. Si crea infine una nuova classe che, attraverso l’ereditarietà multipla erediterà da quella risultante dalla compilazione del file .ui (in modo che contenga tutti i controlli definiti) e, ad esempio, da QDialog (in modo che si comporti come una finestra di dialogo e ne abbia le stesse proprietà e funzioni).

Confusi? Proviamo a farlo 😉

  • Dal menù File selezionare la voce Nuovo.
  • Specificare il nome per il file di interfaccia grafica (ad es. MioDialogoBase).
  • Selezionare Qt4 Dialog (.ui) come tipo di file.
  • Selezionare la casella Aggiungi al progetto, quindi cliccare su OK.

immagine_010

  • Il file appena creato verrà aperto in automatico con l’editor di interfaccia Qt Designer, trascinare due controlli di tipo Push Button ed un controllo di tipo Label sulla finestra di dialogo che stiamo creando. Spostare e ridimensionare i controlli e la finestra di dialogo per ottenere un risultato simile a quello dell’immagine seguente:

immagine_011

  • E’ buona norma dare dei nomi significati ai controlli, quindi modificare il valore della proprietà objectName nel Property Editor per ciascuno di essi in questo modo:
Oggetto         objectName
---------------------------------
Dialog          DlgMioDialogoBase
Label           lblCiaoMondo
pushButton      btnCiaoMondo
pushButton_2    btnChiudi

Da notare che il nome dell’oggetto Dialog (ad es. DlgMioDialogoBase) sarà anche il nome di una delle classi base per la classe dell’interfaccia grafica.

  • Impostare anche le seguenti proprietà dei controlli:
Oggetto             Proprietà                 Valore
------------------------------------------------------------------------
DlgMioDialogoBase   windowTitle               Programma di prova
lblCiaoMondo        alignment.Horizontal      AlignHCenter
lblCiaoMondo        alignment.Vertical        AlignVCenter
lblCiaoMondo        font.Family               Sans Serif
lblCiaoMondo        font.PointSize            36
lblCiaoMondo        text                      Non impostare nessun testo
btnCiaoMondo        text                      Saluta
btnChiudi           text                      Chiudi

immagine_012

  • Selezionare dal menù File la voce Save per salvare il layout dell’interfaccia grafica e chiudere il Qt Designer
  • Selezionare dal menù Compila la voce Compila progetto (oppure premere F8) per ricompilare il programma e far si che vengano generati i file sorgente relativi all’interfaccia grafica. Come prima è possibile vedere nella finestra Messaggi il risultato della compilazione ed il nome dei file generati (ad es. ui_MioDialogo.h).

A questo punto è stato ottenuto il file che fungerà da classe base per la classe dell’interfaccia vera e propria. Adesso è necessario creare quet’ultima:

  • Dal menù Progetto selezionare la voce Nuova classe.
  • Nel campo Nome specificare il nome per la classe (ad es. MioDialogo)
  • Nel riquadro Ereditarietà cliccare sul pulsante Aggiungi e specificare come classe base QDialog e specificando come file di itestazione QDialog (si senza il .h finale!)
  • Ripetere l’operazione e specificare come classe base il nome della finestra di dialogo definita nel Qt Designer (ad es. DlgMioDialogoBase) in quanto questo è anche il nome della classe base risultato della compilazione del file .ui ed il file sorgente dove tale classe è contenuta (ad es. ui_MioDialogoBase.h)
  • Per ora non preoccupiamoci di tutti gli altri settaggi che è possibile fare, limitiamoci a notare i nomi dei file di intestazione (ad es. miodialogo.h) e di implementazione (ad es. miodialogo.cpp) che verranno creati per la nuova classe. Cliccare su OK per creare la nuova classe.

immagine_013

  • Cliccare sul pulsante Classi per vedere l’albero delle classi contenute nel progetto.
  • Cliccare sul nome della classe (ad es. MioDialogo) per aprire il file di intestazione (.h)
  • Espandere il ramo della classe e cliccare sul nome di un metodo (ad es. sul costruttore MioDialogo) per aprire il file di implementazione (.cpp)

immagine_014a

Com’è possibile notare la classe eredita da QDialog e DlgMioDialogoBase e, pertanto, sono state aggiunte le direttive include necessarie. Notare anche che all’inizio di ogni file è stata aggiunta la nota di copyright in base al template ed alle informazioni inserite in fase di creazione del progetto.

  • Fare clic con il pulsante destro sul nome della classe (ad es. MioDialogo) e selezionare la voce Aggiungi metodo.
  • Nel campo Tipo da restituire specificare void.
  • Nel campo Dichiaratore specificare il nome della fuzione (ad es. btnCiaoMondo_clicked())
  • Nel campo Accesso selezionare Public Slots
  • Nel campo Memoria selezionare Virtual, fare clic su OK
  • Nel campo File implementazione verificare che il nome del file sia corretto (ad es. /home/crash/Progetti/CiaoMondo_Qt4/src/miodialogo.cpp) a me mancava il punto prima di cpp: dev’essere un bug di KDevelop 😦

immagine_015a

  • Ripetere gli ultimi cinque passi specificando btnChiudi_clicked() come nome della funzione.

Alla fine controllando il file di intestazione (.h) si avrà:

class MioDialogo : public QDialog, public DlgMioDialogoBase
{
   public:
      MioDialogo();
      ~MioDialogo();
   public slots:
      virtual void btnCiaoMondo_clicked();
      virtual void btnChiudi_clicked();
};
  • Aggiungere la macro Q_OBJECT e la definizione del namespace all’inizio della definizione della classe:
using namespace Ui;

class MioDialogo : public QDialog, public DlgMioDialogoBase
{
   Q_OBJECT
   public:
      MioDialogo();
      ~MioDialogo();
   public slots:
      virtual void btnCiaoMondo_clicked();
      virtual void btnChiudi_clicked();
};

senza di essa infatti gli slot non verrebbero riconosciuti in fase di esecuzione e non accadrebbe nulla quando si premono i pulsanti.

  • Aprire il file di implementazione della classe creata (ad es. miodialogo.cpp) e modificarne il costruttore aggiungendo le seguenti istruzioni:
setupUi( this );
connect(btnCiaoMondo, SIGNAL( clicked() ), this, SLOT( btnCiaoMondo_clicked() ) );
connect(btnChiudi, SIGNAL( clicked() ), this, SLOT( btnChiudi_clicked() ) );

la prima istruzione è contenuta nella classe base DlgMioDialogoBase e serve per far si che vengano creati tutti i controlli, mentre le altre permettono di richiamare rispettivamente la funzione btnCiaoMondo_clicked quando viene premuto il pulsante btnCiaoMondo e la fuzione btnChiudi_clicked quando viene premuto il pulsante btnChiudi.

  • Modificare il corpo delle due funzioni in questione:
/*!
   \fn MioDialogo::btnCiaoMondo_clicked()
*/
void MioDialogo::btnCiaoMondo_clicked()
{
   lblCiaoMondo->setText("Ciao mondo!");
}

/*!
   \fn MioDialogo::btnChiudi_clicked()
*/
void MioDialogo::btnChiudi_clicked()
{
   accept();
}

la funzione btnCiaoMondo_clicked, così modificata, imposta il testo della Label lblCiaoMondo uguale a “Ciao mondo!”, mentre la funzione btnChiudi_clicked causa la chiusura della finestra e la fine del programma.

Non resta che modificare il file main.cpp.

  • Aprire il file main.cpp cliccando su main nell’albero delle classi
  • Commentare o eliminare le righe:
#include "ciaomondo_qt4.h"
...
CiaoMondo_Qt4 * mw = new CiaoMondo_Qt4();
mw->show();

che servono per visualizzare la finestra di default creata dal wizard.

  • Aggiungere la direttiva include per la classe dell’interfaccia che abbiamo creato, la dichiarazione dell’oggetto finestra di dialogo e la sua esecuzione:
#include "miodialogo.h"
...
MioDialogo dlg;
dlg.exec();
  • Selezionare dal menù File la voce Salva
  • Selezionare dal menù Compila la voce Progetto dist-clean
  • Selezionare dal menù Compila la voce Compila progetto (oppure premere F8)
  • Dal menù Compila, selezionare la voce Esegui programma principale (oppure premere Shift+F9), cliccare sul pulsante Saluta e su Chiudi per ammirare la propria creatura funzionare!

immagine_016

Se qualcosa dovesse andare storto, controllare bene la sintassi dei comandi, accertarsi che non manchino parentesi, punti e virgola, controllare di aver incluso tutti i file necessari, verificare di aver rispettato maiuscole e minuscole, ecc. ecc.

Il file del progetto completo si trova nel Forziere di Morg4n

Buona programmazione a tutti!!! 😉

Annunci

~ di Morg4n su 5 luglio, 2009.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

 
%d blogger hanno fatto clic su Mi Piace per questo: