Ciao a tutti 🙂

Oggi vi presento Glade uno strumento interessante che permette agli sviluppatori Python (ma non solo) di creare facilmente interfacce per il toolkit GTK+2 e GTK+3 e per il desktop Gnome.

Dunque, linuxiani, ci mettiamo subito al lavoro:

sudo apt-get install glade
sudo apt-get install python-gtk2
sudo apt-get install python-gtk2-dev

se vi serve un buon editor (per evitare di usare nano o pluma):

sudo apt-get install geany

Eseguiamo glade e cominciamo a disegnare la nostra interfaccia nel nostro nuovo ambiente RAD (sviluppo rapido di applicazioni) un po’ come si faceva con il glorioso Visual Basic.

Realizzeremo un piccolo  semplice programma che visualizza una finestra con una barra dei menu e con una label ed una immagine.

Creiamo una window per il nostro programma. La troviamo nella finestra a sinistra, sotto Livelli principali: basta posizionare il puntatore sulla prima icona e vedremo apparire la tooltip Finestra.

Clicchiamoci sopra ed apparirà, nel riquadro centrale dell’ambiente di glade, la nostra window1.

Ora andiamo su casella, la prima icona che si trova sotto Contenitori, e premiamo crea sulla dialog-box.

Sotto Contenitori selezioniamo l’elemento col tooltip Barra dei Menu e portiamoci nella window1, all’altezza della prima delle tre caselle (il primo elemento partendo dall’alto). Clicchiamo per inserire la barra dei menu.

Nella finestra a destra, quella sopra le proprietà  (Inspector) modifichiamo il nome imagemenuitem5 che corrisponde al ‘quit’. Andiamo nella finestra delle proprieta’, che dovrebbe essere quella in basso a destra. Cliccando sulle frecce portiamoci sulla tab Generale e nel campo testo ID scriviamo gtk_quit.

Nel tab Segnali, presente nella finestra delle proprietà, espandiamo GtkMenuItem ed all’altezza di Activate clicchiamo su <Type here> in corrispondenza della colonna Gestore. Selezioniamo on_gtk_quit_activate e premiamo invio (fare attenzione nel premere invio, senza del quale la selezione
non sarà mai  considerata).

Creiamo ora anche l’evento per chiudere la finestra window1 cliccando sulla consueta X nell’angolo in alto. Clicchiamo su window1 nell’Inspector e scorriamo nella finestra delle proprietà  fino ad arrivare alla tab Segnali. Scorriamo giu’ fino a trovare GtkWidget, espandiamola e clicchiamo su destroy.
In corrispondenza della colonna Gestore, clicchiamo su <Type here> e selezioniamo on_window1_destroy, premendo invio (anche qui fare attenzione nel premere invio, senza del quale la selezione non sarà  considerata).

Sotto Controllo e Visualizzazione, nella finestra a sinistra, cerchiamo l’icona label e clicchiamoci sopra.
Portiamoci nella window1, all’altezza della seconda delle tre caselle (il secondo elemento partendo dall’alto). Clicchiamo per inserire la nostra label.
Clicchiamo ancora per selezionare la label (oppure, nella finestra a destra, quellasopra le proprietà , clicchiamo su label1).
Andiamo nella finestra delle proprieta’, che dovrebbe essere quella in basso a destra.
Cliccando sulle frecce portiamoci sulla tab Generale della finestra delle proprieta’.
All’altezza del campo testo etichetta (sotto Aspetto), inserire una frase (io ho scritto “Fab Lab Taranto”).

Ora, sotto Controllo e Visualizzazione, cerchiamo l’icona con l’immagine della casetta (quella con il tooltip immagine) e clicchiamoci sopra. Portiamoci nella window1, all’altezza della terza delle tre caselle
(il terzo elemento partendo dall’alto). Clicchiamo per inserire la nostra immagine.
Andiamo nella finestra delle proprieta’, e cliccando sulle frecce portiamoci sulla tab Generale della finestra delle proprieta’.
In corrispondenza della dicitura ID dell’oggetto nello stock (sotto Immagine), scrollare sotto fino a trovare la dicitura Nome file e selezionare il corrispondente radio button. Cliccare ora sul bottone a destra, dove c’è il simbolo di una cartella, e scegliere l’immagine da caricare  (l’immagine deve essere nella stessa cartella del progetto).

Adesso andiamo sul menu File dell’ambiente, andiamo su Salva con Nome e salviamo l’interfaccia come interfaccia.glade.

L’interfaccia che abbiamo disegnato viene salvata in un file XML che rende facile l’integrazione con moltissimi linguaggi e strumenti.

Nella prossima parte del tutorial vedremo come usarla con Python.

 

Ciaoo

by Vincenzo Quaranta

(tutorial aggiornato al mese di giugno 2017)