Se trovi utile il mio blog sostienimi con una piccola donazione. GRAZIE

15 – La prima applicazione PyQt

INDICE ARTICOLI

A questo punto, se avete letto le lezioni precedenti, dovreste avere abbastanza padronanza del linguaggio da poter affrontare la stesura della prima applicazione grafica in Python utilizzando le librerie QT.

Per prima cosa dovremo avviare eric, che avrete preventivamente installato come riportato nella sezione 1 di questo tutorial .

Una volta che la IDE sarà avviata dal menu Project scegliete New (nuovo progetto)

Vi apparirà la finestra per la gestione del vostro nuovo progetto che nel nostro caso si chiamerà primo come potete veder sotto :

Quando darete l’OK , dopo aver impostato la directory dove volete creare il vostro programma , il progetto verrà generato e vi troverete già un file con nome “__ini__.py” che per il momento ignoreremo.

Siccome vogliamo separare la parte di progettazione grafica della form dal resto del programma (vi spiegherò il perché più avanti) selezionando prima la tab dei sorgenti (area di sinistra di eric) e facendo poi un click destro in una zona vuota di quest’area selezioneremo dal menù contestuale la voce “New package” come si può vedere nell’immagine sotto.

A questo punto si aprirà una finestra che ci chiederà di introdurre il nome del package che vogliamo creare e noi sceglieremo “ui” .

Quando confermeremo l’albero dei sorgenti si modificherà come sotto riportato .

In pratica abbiamo creato una directory dove metteremo tutto il codice relativo all’interfaccia utente.

A questo punto dovremo spostarci sulla TAB di gestione delle form (la seconda) e cliccando in un punto vuoto della stessa si aprirà un menù contestuale dove andremo a scegliere la voce “New form”

Ora ci verrà chiesto il tipo di form che vogliamo creare e siccome si tratta della form principale dell’applicazione sceglieremo Main Window.

A questo punto dovremo scegliere il nome del nostro file che sarà “mainwindow” e lo salveremo nella cartella ui, come viene riportato sotto :

Dopo aver scelto il pulsante salva l’albero della nostra applicazione , nella sezione form , diverrà come quella sotto :

Ora non dovremo far altro che fare un doppio clik sul file della form appena generato per ritrovarvi lo stesso aperto nell’editor grafico “Qt Designer”.

Questo editor è decisamente amichevole se non per l’uso di un’oggetto che in windows non si usa molto , ovvero i layout.

Questo oggetto serve a ridimensionare automaticamente i vari oggetti che metteremo al suo interno.

Inizialmente l’approccio potra sembrare difficile ma vedrete che una volta capito il meccanismo troverete molto comodo riuscire a creare una form che si autoridimensionano senza la necessità di scrivere una sola riga di codice.

Ora trascineremo sulla form un PushButton, che posizioneremo in alto , ed una label che posizioneremo un po’ più in basso, non impazzite a ridimensionare questi controlli posateli sulla form e basta.

Ora dovrete fare un click destro in una zona vuota della form e dal menù contestuale scegliete la voce “Layout” e poi la voce “Layout Vertically”

Ora selezionate il pulsante e nella sezione geometry delle proprietà (quella gialla a destra) moficate le voci Horizont.. e VerticalP.. (sezione sizePolicy) in “Expanding”.

Ripetete la stessa operazione per la Label.

Questo sarà il risultato finale che otterrete :

Non male vero ? Provate a ridimensionare la finestra e ……

Ora dovremo generare la classe della nostra finestra ma non temete la procedura è completamente automatica.

Dopo aver salvato e chiuso il “Designer” fate un click destro sul nome della vostra form e dal menu contestuale scegliete la voce “Compile form” come nell’immagine sotto .

Questa operazione genererà il file con la nuova classe per la nostra form.

Ora se modificassimo questa classe per implementare gli eventi e programmarne il comportamento, alla prima modifica della stessa perderemmo tutto il nostro lavoro.

Questo non è esattamente quello che vorremmo quindi adotteremo un’altra tecnica, ovvero espanderemo la nostra classe creandone una derivata da quella principale della form.

Per eseguire questa operazione dovremo , cliccando con il pulsante destro del mouse sul nome del file della form, scegliere dal menu contestuale la voce “Generate Dialog Code” come sotto.

Si aprira una finestra dove dovremo scegliere il nome della nostra nuova classe che espanderà quella originale della nostra form e , in base alle voci che andremo a spuntare, implementerà le reazioni agli eventi che ci serviranno.

Nel nostro caso implementerà l’evento “on_pushButton_clicked()”.

Successivamente potremo rigenerare il codice aggiungendo o rimuovendo altri eventi senza perdere nulla del nostro lavoro.

Ora dovremo creare lo script di avvio della nostra applicazione utilizzando il menù “File” e selezionando “New” (nuovo).

Il file appena creato (per ora vuoto) andrà salvato con nome “Primo.py”

Ora dovremmo configurare il nostro progetto in che eric sappia che lo script principale è appunto “Primo.py”.

Per fare questo dal menù “Project” dovremo selezionare la voce “Properties” e come main script dovremo selezione appunto “Primo.py” come sotto :

Ora non ci resta che modificare lo script come segue :

 

from PyQt4 import QtCore ,  QtGui
from ui.mainwindow import MainWindow

if __name__=="__main__":
    import sys
    app=QtGui.QApplication(sys.argv)
    ui = MainWindow()
    ui.show()
    sys.exit(app.exec_())

Ora, dopo aver salvato tutto , se dal menu “Start” sceglieremo “Project” la nostra applicazione si avvierà e si aprira anche una finestra di shell dove ad ogni pressione del pulsante che abbiamo creato sul nostro form verrà scritto qualcosa .

Se vedrete il messaggio sopra significa che la vostra applicazione fà quello che deve e quindi funziona.

Nella prossima sezione vedremo di modificare l’evento del pulsante in modo che esegua qualcosa di più interessante e soprattutto cercheremo di capire cosa abbiamo scritto all’interno del file Primo.py

INDICE ARTICOLI