L’utilizzo della GtkLabel e l’applicazione degli stili

Interfaccia per l'uso delle GtkLabelAbbiamo introdotto l’ultima volta la funzionalità delle GtkLabel per la visualizzazione di un testo, anticipandone le potenzialità, presentando le loro proprietà nell’editor Glade. Realizzeremo adesso un semplice progetto per testare le principali funzionalità offrendo la possibilità di modificarle liberamente agendo su alcuni pulsanti.

Realizzeremo inizialmente una semplice interfaccia grafica dotata di una singola GtkLabel e tanti pulsanti per attivare un’opzione sull’etichetta sovrastante.

Aperto Glade, inserire una nuova finestra e al suo interno una Casella verticale (GtkVBox) di 5 elementi, all’interno del primo inseriremo una GtkLabel di nome lblTesto con il testo “Questo è un testo multiriga a cui verranno applicati gli effetti cliccando uno dei pulsanti in basso. In questo esempio verrà applicato soltanto un effetto per volta e il precedente sarà rimosso“. Aggiungere le proprietà Usa i marcatori per permettere l’uso di Pango e A capo automatico per portare il testo su più righe automaticamente.

Sulla seconda riga della casella verticale inserire una Casella orizzontale (GtkHBox) di 4 elementi per far posto ai 4 pulsanti al suo interno. I pulsanti saranno chiamati btnAllineaSinistra, btnAllineaCentro, btnAllineaDestra e btnAllineaGiustificato tutti di tipo Stock con le relative icone.

Sulla terza riga inserire un’altra Casella orizzontale sempre di 4 elementi per 4 pulsanti: btnGrassetto, btnCorsivo, btnSottolineato e btnSbarrato, tutti di tipo Stock con le relative icone.

Sulla quarta riga inserire l’ennesima Casella orizzontale, stavolta di due soli elementi: due pulsanti di nome btnRiduci e btnAumenta e ovviamente le loro icone Stock.

Sull’ultima riga inserire l’ultima Casella orizzontale di 4 elementi, per quattro pulsanti di nome btnSu, btnGiu (senza accento), btnConverti e btnRipristina con le relative icone.

Per fare un po’ d’ordine e posto si è scelto anche di modificare la proprietà Posizione immagine di tutti i pulsanti assegnando il valore Alto in modo che l’icona apparisse sopra il testo e per tutte le caselle orizzontali assegnata la proprietà Omogeneo in modo che i pulsanti avessero la stessa dimensione.

La finestra per l'uso della LabelLa finestra si presenterà come nella figura sopra, adesso quindi per tutti i pulsanti, dalla scheda Segnali, al segnale clicked scegliere dall’elenco il nome predefinito on_Nome_clicked, ad esempio on_btnAllineaSinistra_clicked. Questi nomi saranno poi da riportare all’interno del programma Python, per cui applicare la massima cura altrimenti il programma non funzionerà correttamente. Assegnare anche il nome predefinito on_window1_destroy per il segnale destroy della finestra. Terminato ciò salvare il progetto Glade col nome label.glade e passare al progetto Python.

import gtk
import gtk.glade
import pygtk
pygtk.require("2.0")

gladeFile = gtk.glade.XML('label.glade')
window1 = gladeFile.get_widget('window1')
lblTesto = gladeFile.get_widget('lblTesto')
testo = lblTesto.get_text()

def on_window1_destroy(widget, data=None):
  gtk.main_quit()

Si inizia con le solite importazioni, l’apertura del file label.glade e l’assegnazione delle variabili window1 per la finestra e lblTesto per la GtkLabel dal file Glade. La riga successiva salverà all’interno della variabile testo la stringa contenuta all’interno della label inizialmente, per non doverla digitare ad ogni modifica, vedremo più giù la sua utilità. Segue quindi la funzione che permette la chiusura del programma dalla X di chiusura della finestra, già vista tante volte.

def on_btnAllineaSinistra_clicked(widget, data=None):
  lblTesto.set_justify(gtk.JUSTIFY_LEFT)

def on_btnAllineaCentrato_clicked(widget, data=None):
  lblTesto.set_justify(gtk.JUSTIFY_CENTER)

def on_btnAllineaDestra_clicked(widget, data=None):
  lblTesto.set_justify(gtk.JUSTIFY_RIGHT)

def on_btnAllineaGiustificato_clicked(widget, data=None):
  lblTesto.set_justify(gtk.JUSTIFY_FILL)

Seguono le funzioni di callback per la gestione della prima fila di pulsanti, che regolano l’allineamento del testo. Tutte svolgono una funzione similare, richiamare il metodo set_justify di lblTesto passandovi le costanti di allineamento: gtk.JUSTIFY_LEFT e così via.

def on_btnGrassetto_clicked(widget, data=None):
  lblTesto.set_label('<b>%s</b>' % testo)

def on_btnCorsivo_clicked(widget, data=None):
  lblTesto.set_label('<i>%s</i>' % testo)

def on_btnSottolineato_clicked(widget, data=None):
  lblTesto.set_label('<u>%s</u>' % testo)

def on_btnSbarrato_clicked(widget, data=None):
  lblTesto.set_label('<s>%s</s>' % testo)

La seconda fila di pulsanti si presta alla formattazione dello stile del carattere e l’operazione viene svolta mediante l’uso dei marcatori Pango. In linea generale, racchiudendo tra <b> e </b> un testo questo verrà reso col grassetto; in maniera analoga il tag <i> si occuperà del corsivo, <u> per la sottolineatura e <s> per la sbarratura.

Le funzioni sopra si limitano ad assegnare all’etichetta il valore di testo (salvato all’inizio del programma) racchiuso con i tag Pango desiderati semplicemente richiamando il metodo set_label.

def on_btnRiduci_clicked(widget, data=None):
  lblTesto.set_label('<small>%s</small>' % testo)

def on_btnAumenta_clicked(widget, data=None):
  lblTesto.set_label('<big>%s</big>' % testo)

I due pulsanti per ridurre e aumentare la dimensione del carattere svolgeranno una funzione simile ai precedenti: i tag <small> e <big> consentiranno di ridurre e aumentare la dimensione del carattere del testo dell’etichetta.

def on_btnSu_clicked(widget, data=None):
  lblTesto.set_label('%s <sup>%s</sup>' % (testo, 'Testo apice'))

def on_btnGiu_clicked(widget, data=None):
  lblTesto.set_label('%s <sub>%s</sub>' % (testo, 'Testo pedice'))

I pulsanti Su e Giù consentiranno di rendere un testo apice o pedice rispetto un altro e affinché sia visibile la loro posizione è stato aggiunto un testo a quello preesistente, utilizzando i tag <sup> per apice e <sub> per il pedice.

def on_btnConverti_clicked(widget, data=None):
  lblTesto.set_label('<tt>%s</tt>' % testo)

def on_btnRipristina_clicked(widget, data=None):
  lblTesto.set_label(testo)

Gli ultimi due pulsanti consentiranno di rendere il testo con un carattere monospazio e rimuovere ogni formattazione esistente. Il primo si eseguirà racchiudendo il testo col tag <tt> mentre il secondo semplicemente riscriverà il testo senza nessun tag aggiuntivo.

segnali = {
  'on_window1_destroy': on_window1_destroy,
  'on_btnAllineaSinistra_clicked': on_btnAllineaSinistra_clicked,
  'on_btnAllineaCentrato_clicked': on_btnAllineaCentrato_clicked,
  'on_btnAllineaDestra_clicked': on_btnAllineaDestra_clicked,
  'on_btnAllineaGiustificato_clicked': on_btnAllineaGiustificato_clicked,
  'on_btnGrassetto_clicked': on_btnGrassetto_clicked,
  'on_btnCorsivo_clicked': on_btnCorsivo_clicked,
  'on_btnSottolineato_clicked': on_btnSottolineato_clicked,
  'on_btnSbarrato_clicked': on_btnSbarrato_clicked,
  'on_btnRiduci_clicked': on_btnRiduci_clicked,
  'on_btnAumenta_clicked': on_btnAumenta_clicked,
  'on_btnSu_clicked': on_btnSu_clicked,
  'on_btnGiu_clicked': on_btnGiu_clicked,
  'on_btnConverti_clicked': on_btnConverti_clicked,
  'on_btnRipristina_clicked': on_btnRipristina_clicked
}

gladeFile.signal_autoconnect(segnali)

if window1:
  window1.show()
  gtk.main()

Si completa il codice assegnando tutte le funzioni di callback al dizionario segnali che verrà poi passato al metodo autoconnect, già visto tante altre volte in passato e quindi verrà mostrata la finestra e avviato il ciclo principale del programma.

Interfaccia per l'uso delle GtkLabelEseguendo il programma saranno visibili le modifiche sul contenuto dell’etichetta semplicemente cliccando uno qualsiasi dei pulsanti dell’interfaccia. Nella figura sopra è mostrato il testo sottolineato e allineato al centro. Tutto il lavoro di formattazione è svolto dai marcatori Pango, qui usati nella loro forma più semplice, applicati all’intero testo, uno per volta.

E’ possibile scaricare sia il progetto Glade che il sorgente Python.

About these ads

2 Responses to “L’utilizzo della GtkLabel e l’applicazione degli stili”


  1. 1 danilo novembre 18, 2008 alle 3:09 pm

    Una domanda: sai per caso se si può cambiare l’etichetta di testo all’interno dei bottoni con l’immagine stock??

    grazie, ciao

    ps. Ottimo howto.. ;)

  2. 2 Muflone novembre 18, 2008 alle 11:36 pm

    grazie danilo

    e` in scaletta l’articolo per il cambio dell’etichetta a un pulsante stock. in generale dato un pulsante btnOk:
    btnOk = gladeFile.get_widget('btnOk')
    alignment = btnOk.get_children()[0]
    hbox = alignment.get_children()[0]
    image, label = hbox.get_children()
    label.set_text('testo personalizzato')

    se non ti interessano i particolari all’interno del pulsante puoi anche sintetizzarlo cosi`:
    btnOk.get_children()[0].get_children()[0].get_children()[1].set_text('Pulsante personalizzato')

    Ciao


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




Indice degli argomenti


Iscriviti

Ricevi al tuo indirizzo email tutti i nuovi post del sito.

%d blogger cliccano Mi Piace per questo: