Qt Tutorial - QToDo

È già da un po' che pensavo a un piccolo programmino da fare per poter esplorare le librerie Qt stimolato da qualcosa. Quel giorno è arrivato.

Ho pensato a un piccolo programmino che consenta di gestire il ToDo. Non solo per i programmatori, ma una sorta di organizzazione per tutti i gusti.
Per lo sviluppo di questa piccola applicazione utilizzeremo QtCreator 1.1.0 che fornisce tutti gli strumenti utili.
È possibile scaricare l'IDE da qua.

Comiciamo con il creare la form come avevo già mostrato tempo fa sempre su questo blog.

Creiamo una form con i seguenti componenti:

1. QTreeWidget lista todo
   
   
   
   1. è possibile creare una QTreeView e poi trasformarla in QTreeWidget con il tasto destro e poi cliccando su change into-> tree widget
   
   
   2. Nome dell'oggetto: todoList


2. PushButton con label Aggiungi e objectName add_bt


3. PushButton con label Rimuovi e objectName remove_bt


4. Horizontal separator da posizionare alla sinistra del pulsante "Rimuovi"

Dopo aver inserito tutti questi componenti sistemiamo il layout selezionando i due bottoni e il separator e poi cliccando su Layout Horizzontally in alto.

Poi fare click sulla form e cliccare su Grid Layout sempre nella solita barra.
Si otterrà pressochè il seguente risultato:

Ora andiamo a creare gli slots per gli eventi dei due pulsanti.
Nel file mainwindow.h modifichiamo il codice portandolo nelle seguente forma:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QtGui/QMainWindow>
#include <QtGui/QTreeWidgetItem>
#include <QtGui/QInputDialog>

namespace Ui
{
    class MainWindowClass;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = 0);
    ~MainWindow();

private slots:
    void on_add_bt_clicked();
    void on_remove_bt_clicked();

private:
    Ui::MainWindowClass *ui;
};

#endif // MAINWINDOW_H

Innanzitutto occorre modificare il costruttore per fare in modo che il treewidget abbia una sola colonna che si chiama "Activity".
Lo si fa con il codice presentato di seguito da inserire nel costruttore.

 ui->todoList->setObjectName(QString::fromUtf8("treeWidget"));
    ui->todoList->setColumnCount( 1 );

    ui->todoList->headerItem()->setText( 0, QApplication::translate( "widget", "Activity",
       0, QApplication::UnicodeUTF8 ) );

Ora andiamo a creare le due funzioni nel file mainwindow.cpp

Per prima cosa creiamo la funzione che aggiunge un item sotto a quello selezionato nell'albero.
Lo facciamo salvandoci nella variabile selected la selezione dell'utente e poi richiamando una QInputDialog che farà inserire all'utente una stringa tramite la funzione getText().
Dopo di che creiamo un QTreeWidgetItem e gli assegnamo come parent la root del widget se non è selezionato alcun item, altrimenti gli assegnamo come parent il primo elemento che si trova nella selezione, selected[0].

Ecco il codice che fa tutto questo.

void MainWindow::on_add_bt_clicked()
{
    QList<QTreeWidgetItem *> selected = ui->todoList->selectedItems();
    bool ok;
    QString text = QInputDialog::getText(this,QString("Inserisci attività"),QString("Inserisci nuovo ToDo nella lista:"),QLineEdit::Normal,QString(""),&ok);
    QTreeWidgetItem * i;
    if(selected.length() > 0)
        i = new QTreeWidgetItem(selected[0],0);
    else
        i = new QTreeWidgetItem(ui->todoList,0);

    i->setText(0,text);
}

Andiamo ora a scrivere la seconda funzione, quella che rimuove l'item selezionato nell'albero.
Ovviamente se non ci sono item selezionati non si fa nulla. Se invece si ha un item selezionato lo si rimuove semplicemente invocando il suo distruttore come mostrato sotto.

{
    QList <QTreeWidgetItem *> selected = ui->todoList->selectedItems();

    if(selected.length() > 0)
        selected[0]->~QTreeWidgetItem();

}

Se ora si prova a compilare ed eseguire si avrà più o meno il risultato che segue.


Sicuramente avrete notato che nella grafica finale c'è anche il menù file nella barra dei menu. Ma di questo parliamo la prossima volta ;)