Le precedenti istruzioni per la costruzione di un progetto wxWidgets, sono disponibili nel Tutorial "Hello World" di wxSmith, che propone di impiegarle per costruire il primo programma basato sulla libreria wxWidgets.
Di regola ogni progetto deve trovarsi in una cartella. Creare la cartella CodeBlocks/Progetti nella quale, in seguito, si salverà ogni progetto in un'altra sottocartella, che verrą creata automaticamente con lo stesso nome del progetto.
Si assume che sono stati seguiti i passi da 1 a 9 precedenti.
Al centro della parte destra della finestra, sotto il titolo (Nome Progetto)frame.wxs della scheda, c'è un pannello con due icone quadrate; La prima da sinistra porta all'editor della barra dei menu dell'applicazione, la seconda porta all'editor della barra di stato.
Al di sotto di questo pannello, caratterizzata da una griglia di puntini, c'è la finestra Editor quella dove si vedono sia i form della GUI sia il codice C++.
Nella zona inferiore a sinistra della finestra c'è il pannello Properties/Events, che consente di modificare le proprietà dei componenti su cui si sta lavorando. Per visualizzare la scheda delle proprietà cliccare sull'icona di sinistra, per visualizzare l'elenco degli eventi cliccare sull'icona {}.
Sopra la scheda "Properties/Events" c'è il pannello di gestione del progetto, su cui ci sono tre linguette: "Projects", "Symbols", e "Resources". Se queste linguette non dovessero essere visibili trascinare verso destra il bordo destro della finestra. Sopra il riquadro di gestione del progetto c'è un pannello con alcune icone:
Build the program,
Run it,
Build and run it,
Rebuild it,
Abort it.
Passando il cursore del mouse su ciascuna di queste icone compare il suggerimento che ricorda la funzione svolta.
La finestra Editor può essere configurata per definire gli attributi del carattere da utilizzare. Questa impostazione avviene tramite la voce Editor, del menu "Settings ..."
L'area dell'editor è circondata dalle maniglie di ridimensionamento, per scegliere la grandezza del form.
Il programmatore esperto sa che a questa operazione è associato un codice del programma. Per vedere il codice che esegue le azioni corrispondenti al ridimensionamento del form tramite le maniglie, fare doppio clic sull'area punteggiata del form. Il codice corripondente (contenuto in un file con estensione .cpp) viene mostrato in una nuova scheda.
Un programma in C++ è composto da molte classi, ognuna delle quali viene definita in un proprio file, quindi per trovare una particolare funzione si può ricorrere al menu Search, e scegliere il comando Find in Files. Nel riquadro di dialogo scrivere, nella casella "testo da cercare", OnInit e spuntare il pulsante "Project files", nella sezione Scope (regione di ricerca). Nell'area Editor, si apre una nuova scheda che mostra il codice in cui è stata trovata la parola cercata.
La finestra di un'applicazione possiede il pulsante di chiusura in alto a sinistra, sulla barra del titolo. Quando si preme questo pulsante la finestra dovrebbe chiudere, ed eventualmente fare delle azioni (ad esempio ricordare di salvare i dati). Se si esegue quest'applicazione, la finestra non si chiude perchè manca il codice. Il gestore dell'evento onClose c'è, ma il suo corpo è vuoto. Cercare onClose. Raggiungere la sezione del codice contenenti le seguenti linee:
void HelloFrame::OnClose(wxCloseEvent& event)
{
}
Aggiungere la chiamata alla funzione Close()
void PlainFrame::OnClose(wxCloseEvent& event)
{
Close();
}
Questa operazione deve essere compiuta per ogni nuovo progetto.
Aggiungere un componente WxPanel sul form: nella tavolozza dei componenti, aprire la linguetta Standard e cliccare sul pulsante WxPanel. A questo punto, portando il cursore del mouse sul form, si nota che l'area del form cambia colore. Quest'effetto ha lo scopo di evidenziare il punto in cui verrà collocato il componente precedentemente selezionato.
Dopo aver fatto clic in un punto qualsiasi del form si nota che l'area è diventata di colore grigio chiaro. Si deve anche osservare che l'elemento selezionato non è più il form, ma è il pannello aggiunto. Questo ha la stessa dimensione del form.
In casi come questo, quando i componenti del form sono sovrapposti, per assicurasi di quale sia l'elemento selezionato si può utilizzare la scheda Resources del pannello di gestione del progetto.
La scheda resource è divisa in due parti: in quella superiore si vede la gerarchia dei componenti presenti sul form, la seconda contiene le proprietà dei componenti. L'albero delle risorse evidenzia l'elemento attualmente selezionato. In questo caso è la classe wxPanel, appena aggiunta. Il componente selezionato mostra anche il nome di questo elemento: Panel1. Questo è il nome della variabile che consente di far riferimento, nel programma, al componente.
Esiste ancora un altro metodo per aggiungere componenti al form. Il nuovo componente viene aggiunto dopo aver fatto clic sulla relativa icona nella tavolozza. La posizione di questo elemento è relativa alla selezione corrente. Il punto di inserimento del nuovo componente sul form, rispetto al componente selezionato, può essere: Prima del componente selezionato, dopo il componente selezionato, dentro il componente selezionato.
Per scegliere il modo di inserimento usare una delle icone disponibili sul lato destro della finestra Editor.
L'icona più in alto mostra il suggerimento "point by mouse". La seconda "add into", la terza "add before", e l'ultima "add after". Il modo correntemente valido è indicato da un triangolino rosso sull'icona.
Le modalità di inserimento non sono sempre tutte valide per l'elemento selezionato. Ad esempio non si può aggiungere un componente in un wxButton, in quanto non può avere componenti discendenti. Per lo stesso motivo, quando la finestra è selezionata, non è possibile aggiungere niente prima e niente dopo.
Il pulsante con la X rossa, al di sotto dei pulsanti di scelta del modo di inserimento, cancella il componente selezionato. Selezionare il pannello e cliccare sul pulsante con la X rossa, il pannello deve scomparire.
Prima di scrivere l'applicazione che mostra "Hello, World!", bisogna conoscere i sizer.
WxWidgets sceglie automaticamente la posizione e la dimensione dei componenti collocati sul frame. I sizer hanno un vantaggio, rispetto al posizionamento e al dimensionamento esplicito dei componenti sul form: Un'applicazione eseguita su sistemi operativi diversi potrebbe usare font, pulsanti, caselle, ecc. di una misura tale da presentarsi con un aspetto indesiderato. L'uso dei sizer permette al programmatore di superare questo problema. In particolare i sizer possono seguire il ridimensionamento della finestra e, di conseguenza, adattare il contenuto.
Adesso si inserirà un sizer sul form e si posizionerà un Pannello in esso. I sizer sono disponibili nella scheda Layout del pannello degli strumenti. In questo pannello cliccare sul componente wxBoxSizer. Questo componente ha lo scopo di allineare, orizzontalmente o verticalmente, i componenti che contiene. Il default è orizzontale.
Dopo aver aggiunto il sizer, si sono verificati due cambiamenti. Il primo effetto è la finestra ha assunto un bordo rosso, per indicare che le è stato aggiunto un sizer. Anche la scheda resources evidenzia la presenza del sizer e ne indica la dipendenza. Il secondo effetto è che la finestra si è ristretta in un piccolo quadrato. La nuova dimensione della finestra è stata determinata dal sizer, perchè questo ha lo scopo di creare una finestra grande quanto basta per mostrare il suo contenuto.
Adesso si aggiunga, all'interno del sizer, un wxPanel. Assicurarsi che venga aggiunto dentro il sizer, non dentro il frame.
Il pannello viene mostrato con le sue maniglie di ridimensionamento ed un bordo grigio. Ogni componente inserito nel sizer può essere circondato da tale bordo, ciò è utile per mantenere una spaziatura tra i componenti. Per cambiare lo spessore di questo bordo, cercare, nel pannello delle proprietà la voce border e modificarla da 5 a 0.
Siccome si useranno i sizer per gestire gli elementi aggiunti nel wxPanel, bisogna ripetere l'inserimento di un wxBoxSizer nel wxPanel. Dopo aver posizionato il sizer, tornare alla scheda Standard del pannello degli strumenti e aggiungere un componente wxStaticText.
Si aggiunga, adesso, un pulsante accanto al componente wxStaticText. Clic su wxButton. Assicurarsi che sia attivo il modo di inserimento "point by mouse", e portare il mouse sul componente wxStaticText, si osserva che metà componente viene colorato in blu chiaro. Quando viene evidenziata la metà del testo, il nuovo componente sarà aggiunto prima del componente esistente, mentre quando viene evidenziata la metà destra, il nuovo componente verrà aggiunto dopo quello esistente. Si aggiunga il pulsante dopo il testo.
Il testo di default dei componenti wxStaticText è "Label". Accedendo al pannello delle proprietà (dopo aver selezionato il componente), cercare la riga Label e modificarne il valore in "Hello, World!".
Se si vuole che il componente wxStaticText contenga un testo su più linee, cliccare sul pulsante "..." a destra della linea "Label" oppure usare "\n" all'interno del testo.
Premendo il pulsante "Build and run", compare la finestra dell'applicazione. Si deve però fornire una funzionalità al pulsante.
Ci si potrebbe chiedere il motivo per cui si è aggiunto un sizer sulla finestra principale, poi si è aggiunto un wxPanel al suo interno poi si è inserito ancora un altro sizer nel pannello. Per quale ragione i componenti non sono stati inseriti direttamente nel primo sizer, eliminando così il pannello e l'altro sizer? Il motivo è che il pannello consente di controllare lo sfondo. Anche se questo controllo non è stato applicato, è comunque utile avere la possibilità di utilizzarlo in seguito.
Si consiglia, quindi, di strutturare così la finestra di ogni applicazione:
Inserire un sizer sulla finestra
inserire un pannello nel sizer
Inserire un opportuno sizer sul pannello.
Si esaminerà come descrivere l'azione richiesta dopo la pressione del pulsante sulla finestra. Si decide di far chiudere la finestra.
Per prima cosa si modifichi la didascalia sul pulsante: Selezionare il pulsante, nel pannello delle proprietà cercare la linea "Label" e modificare il valore in "Chiudi".
La seconda cosa da fare è di assegnare un gestore al pulsante. I gestori di evento sono funzioni richiamate dal verificarsi di un evento. In questo caso l'evento è "è stato premuto il pulsante". Il codice per tale gestore può essere preparato automaticamente. Per fare questo passare al pannello dei gestori di evento, cliccando l'icona con una coppia di parentesi graffe sopra il pannello delle proprietà.
In questo pannello sono riepilogati tutti gli eventi disponibili per il componente selezionato. La classe wxButton conosce un solo evento: EVT_BUTTON. Cliccando sulla casella a discesa vengono mostrate tutte le opzioni disponibili per questo evento.
La selezione -- None -- comporta che il gestore venga, eventualmente, aggiunto manualmente. La selezione -- Add new handler -- genera l'intestazione della funzione per scrivere l'appropriato codice. Poi vengono mostrati gli altri gestori di evento che si possono scegliere (OnQuit e OnAbout). Scegliere l'opzione Add new handler. Viene richiesto di scegliere un nome da assegnare alla funzione di gestione dell'evento e che verrà richiamata quando si preme il pulsante. Si accetti il suggerimento OnButton1Click.
A questo punto nell'area dell'Editor compare la parte di codice contenente il gestore da completare. Raggiungere l'intestazione della funzione creata (onButton1Clicked). Questa è una funzione membro della classe che è stata costruita, quindi ha la visibilità di tutte le funzioni della classe. compreso quella chiamata Close(). Completare il gestore di evento in questo modo:
void SalutoFrame::OnButton1Click(wxCommandEvent& event)
{
Close();
}
Compilare, richiamare il builder ed eseguire l'applicazione. Premendo il pulsante sulla finestra, l'applicazione si chiude.