Programmatore fai da te, lesson 2.

Pubblicato: novembre 4, 2011 in Computer Music, Linux, Software Musicali
Tag:, ,


Nella scorsa puntata abbiamo installato nel nostro Pc gli strumenti necessari per lo sviluppo della nostra applicazione.
E il momento di prendere u po di mano con il Creator, gettare le basi e acquisire le conoscenze necessarie per lavorare con questo interessante strumento.
Il Qt Creator è fondamentalmente un programma fatto per “fare programmi”.
Appartiene alla categoria dei RAD ovvero a quell’insieme di applicazioni con le quali è possibile sviluppare rapidamente ( ed il più delle volte in modo visuale e grafico )  applicazioni e programmi.
Fate attenzione che ho scritto “rapidamente” e non “semplicemente”.
Gli ambienti RAD permetto di sviluppare le interfacce grafiche della applicazioni in modo visuale ( lavorando a colpi di mouse e Drag&Drop e senza scrivere righe e righe di codice) ma questo non significa ovviamente che lui fa tutto il lavoro da solo; la vera applicazione, ovvero quello che deve fare il programma, lo dobbiamo sempre scrivere noi!
Utilizzando il Creator ( o altri strumenti simili )  abbiamo una serie di oggetti e funzionalità di base pronte e già preparate per noi dagli ingegneri della Nokia.
Utilizzeremo questi ” oggetti” per costruire la nostra applicazione, almeno per la sua interfaccia grafica.
Avremo modo di parlare di classi , oggetti e  funzioni in seguito; per ora accontentiamoci di familiarizzare con l’ambiente di sviluppo.

Avvia Qt Creator, il programma mostra nella prima schermata  una serie di informazioni sui vari progetti e formati supportati.

Iniziamo subito a fare qualcosa.

Con il mouse clicca su menu File e poi seleziona  New file Or Project.

Nella finestra che si apre seleziona: Qt Widget Propject e Qt Gui Application.
Clica Choose per confermare.

Nella finestra che si apre, dai un nome al tuo progetto inserendolo nella casella Name.


Eventualmente con il tasto Browsers seleziona la cartella dove si andranno a salvare i files. Io di solito consiglio di creare una cartella MyPrograms dentro la directory QtSDK e li dentro andare a salvare i file del progetto in una omonima cartella.
In questo modo tutti i nostri programma saranno contenuti in cartelle dentro la cartella QtSDK.
Clicca su Next per andare avanti.

Nella successiva finestra spunta l’opzione Desktop e procedi con next.

Il Creator ci propone un nume di default per la finestra principale della nostra applicazione ( MainWindow ).
Lasciamo tutto così e procediamo con il tasto Next.

Ignoriamo per ora il controllo di versione, clicchiamo su Finish per terminare la fase di creazione del progetto.

Questo è quello che vi dovrebbe comparire al termine delle impostazioni.

Iniziamo subito d analizzare gli elementi principale del nostro ambiente di sviluppo.

Nella barra di sinistra troviamo una serie di icone cliccabli con il mouse che permettono di intervenire durante la fase di edit den nostro progetto e di avviare le compilazioni, il linker etc…
Analizziamo alcuni degli elementi principali:

Nella finestra Project vengono mostrati tutti i file presenti ne progetto.
chi ha un po di dimestichezza di programmazione sa che normalmente in c7c++ i file vanno a “coppia” Per ogni file .CPP, di solito esiste un file omonimo con estensione .h.
In parole semplici diciamo che nel file .h si trova una descrizione a grandi linee di cosa deve fare quella parte di programma, mentre nei file Cpp c’è l’effettivo e completo codice operativo.Dal nostro progetto notiamo anche che è presente un file .UI.
In questo file è contenuta l’interfaccia grafica del  nostro primo programma.

La parte principale dello schermo è occupata dall’Editor.

Questa è la parte dove vie visualizzato il codice ovvero le istruzione che forniamo al programma per il suo funzionamento.E’ fondamentalmente un Editor dio testo, quindi possiamo copiare, “draggare” e fare tutte le altre operazioni che si possono fare in questi casi.

Nella parte in basso dell’editor proviamo una barra con una serie di pulsanti.


Grazie ai pulsanti presenti n questa barra possiamo attivare delle finestre che consentono di visualizzare i risultati della compilazione o lo stato del programma.

La barra verticale sinistra contiene alcuni importantissimi comandi tra cui:

L’icona del martello ci permette di lanciare il Build del nostro programma ovvero quella procedura che controlla se il nostro codice( che abbiano scritto nell’edito) è corretto e nel caso lo trasforma i un linguaggio comprensibile dal nostro computer ( fase di compilazione e linker per i più esperti).
L’icona di Start ci permette di avviare il nostro programma.
 L’icona di Start Debugher ci permette di avviare il nostro programma ma in modalità tale da poter “vedere” come gira trovare eventuale malfunzionamenti.

Detto questo, iniziamo subito a fare qualcosa.

Facciamo un doppio click sul file mainWindow.ui;

vedremo che immediatamente si apre anche l’editor dell’intrerfaccia grafica e la barra degli strumenti.

Nella Barra Degli strumenti (quella più a sinistra troviamo una serie di “oggetti” ( in termini Qt Widget ) pronto all’uso mentre nella parte principale dello schermo troviamo un’anteprima di come si presenterà la finestra principale della nostra applicazione.

Dalla barra degli oggetti seleziona un PushButton e trascinalo con il mouse sulla finestra principale.

Posiziona e ridimensiona l’oggetto a tuo piacimento.

A questo punto mandiamo  esecuzione il nostro programma cliccando sul pulsante Run

L’applicazione si avvia e viene mostrata la finestra principale.

I programma non fa ovviamente nulla; dopo aver visualizzato al finestra, riman in attesa che qualcosa succeda.

Se ad esempio, clicchiamo sul pulsate,  vedrete che esso viene premuto, se ridimensionata la finestra essa viene ridimensionata, in poche parole tutte le operazioni standard vengono eseguite.

Ora andiamo a “collegare” un’azione al pulsante in modo tale che quando ci clicchiamo sopra, qualcosa succeda ed in particolare che venga visualizzata una finestra di seleziona dei file.
Visto che ci siamo aggiungiamo anche il classico menu File, con le voci open file e close per uscire dal programma senza dover cliccare sul pulsante X della finestra.

Dal Creato clicca sul pulsante e nella finestra sulla destra, in corrispondenza della proprietà text digita Open File; vedrai cambiare anche la scritta che compare sopra al pulsante.

Visto che ci siamo cambiamo anche nome all’oggetto.
Ogni cosa che “trasciniamo” sulla finestra ( bottone, barra di avanzamento etc…) ha un nome univoco.
No possono esistere due oggetti che hanno lo stesso nome.
Quando abbiamo inserito il bottone il Creator gli ha dato un nome di ufficio:  pushButton.
Clicca in corrispondenza della voce objectName e cambiamo in : pOpenFileBtn.
questo non è vitale ai fini del funzionamento dell’applicazione ma dare dei nomi “ricordabili” agli oggetti è sempre una cosa consigliabile.

A questo punto effettuiamo un doppio click sulla voce che compare in alto a sinistra “Type Here” e scriviamo “File”.
Ripetiamo l’operazione nelle sotto voci del menu e creiamo Open File e Close.
Al prossimo riavvio il nostro programma sarà quindi provvisto del menu File con due voci selezionabili : Open File e Close.

Ora dobbiamo dire al computer “cosa deve fare” quando si preme il bottone, quando si seleziona la voce Open File e quando si clicca su Close.

Prima di dare questo occorre spigare,  sempre a grandi linee il concetto dei segnali e degli slots.

Abbiamo già detto che un’interfaccia utente grafica ( GUI per i più scafati ), e’ composta da ‘widget’.
Il bottone che abbiamo trascinato nella nostra Form di prima è un widget ma, è un widget anche la Form (finestra) stessa sulla quale abbiamo posizionato il bottone; e chiaro quindi che alcuni widget possono essere composti ( nel senso che inglobano) altri widget. ( Questi ultimi vengono chiamati widget composti.

Come fa il programma a sapere cosa deve fare quando l’utente clicca su di un certo Widget ( o bottone come nel nostro caso) ?
Le azioni di risposta agli eventi ( click del mouse ad esempio ) vengono stabilite tramite una serie di Segnali e gli Slots.

Per farla semplice, quando si clicca su di un bottone si emette un segnale, che può essere collegato da uno  ( o anche più )  Slots nel quale ci sono le istruzioni che si debbono compiere quando l’utente clicca sul pulsante appunto.
In questo modo possiamo quindi decidere cosa deve succedere quando clicchiamo sul nostro bottone.

Clicca sul pulsante che attiva L’editor dei Segnali e degli slots e successivamente clicca sul pulsante e mentre tienei premuto il pulsante del mouse spostati in un ponto vuoto della finestra.

Vedrai Comparire una piccola linea rossa ed una nuova finestra.

Seleziona il segnale clicked() ( questo è il segnale che viene emesso dal bottone quando lo si clicca con il mouse) e successivamente premi il tasto EDIT per aggiungere lo slot al quale connettere il segnale.

Clicca sul pulsante + (add) degli slots e digita il nome ( openFileSlot () ) nell’editor. Conferma con OK.

Ora c’è da scrivere il codice ( ovvero le istruzioni) da eseguire.

Clicca sull’icona Edit e seleziona il file mainwindow.h.
Al termine aggiungi le righe di codice seguneti:

private slots:
void openFileSlot();


Clicca sul file mainwindow.cpp ed aggiungi le righe evidenziate nella figura seguente:

In testa al file aggiungiamo l’include:

#include <QFileDialog>

Ed in coda la segnete funzione:

void MainWindow::openFileSlot(){
QString fileName = QFileDialog::getOpenFileName(this, tr("Music File"));
}

Cerchiamo di spiegare cosa abbiamo fatto:

Ogni class in cpp è composta da almeno due file; un file con estensione .h ( o .hpp ) ed un file con estensione .cpp.

Quando si inserire una funzione ( ovvero un pezzo di codice ) è necessario prima “dichiarare il nome” del pezzo di codice ( e quindi della funzione)  nel file .h ( nel nostro caso mainwindow.h ),  e poi scriverlo per intero nel file .cpp.

La nostra funzione utilizza una fineistra di Dialogo stanrd per l’apertura dei file ( la QFileDialog ) la quale non è che un pezzo di codice scritto per noi da chi ha preparato il Creator ( o meglio le librerie Qt) .

La riga

#include <QFileDialog>

dice al nostro programma che andremo ad utilizzare la porzione di codice relativa al funzionamento della QFileDialog.

Per saperne qualcosa di più sulle regole e sui concetti base della programmazione vi consiglio di leggere il mio corso di programmazione alla velocità della luce che potrete trovare qui.

Ora avviamo il nostro programma cliccando sul pulsante di avvio

Se no si sono  commessi degli errori di battitura,  il nostro programma si avvia e alla pressione del pulsante viene mostrata una finestra di selezione dei files.

Ok ancora non è un granchè ma è pur sempre un inizio.

Per approfondire e capire meglio:

Video tutorial in Inglese ma be fatto e comprensibile:

Serie di tutorial sul sito Italiano Qt-Italia: QtItalia tutorial.

Tutorial In Italiano un po datato ma ben fatto: QtTutorial

Alla prossima.


Lascia un commento

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...