AutoIT Sesta Lezione: GUI e Skin (parte 1)

Benvenuti alla sesta lezione di AutoIT…

Ecco arrivata la lezione con cui finalmente inizieremo a fare il primo vero programma d’esempio, che si svilupperà nelle
prossime lezioni. Per capire questa lezione è ESSENZIALE avere letto (e capito) le lezioni da 1 a 4.

Intanto cominciamo con una distinzione:

GUI = Graphical User Interface, interfaccia grafica per facilitare l’uso di un programma (prima era tutto come il prompt dei comandi)

Skin = “Tema” da applicare ad una GUI.

Il programma di esempio sarà una calcolatrice, che alla fine potrete installare al posto di quella di Windows…
Sarà simile a questa:

Sembra una cosa stupida una calcolatrice, infatti lo è per chi programma da tempo. Ma per chi è agli inizi può essere difficile.

(EDIT 24/05/2010): Inizialmente la parte sulle GUI era stata “concepita” per essere divisa in 3 parti, ma visto che Anubi, cioè colui che doveva scrivere la guida con me, da

questa lezione in poi, non si è fatto vivo, dicendo di aver finito di scrivere la guida (dopo 1 mese e mezzo non me l’aveva comunque ancora mandata… Inizialmente mi
sono anche arrabbiato, perché si è preso una responsabilità e mi ha pure raccontato una balla… Poi ho lasciato perdere e basta… Quindi la parte sulle skin non ci sarà.

Comunque non vi perdete niente di eccezionale, perché alla fine ho scoperto che l’idea di “skin” di Anubi, era una semplice immagine di sfondo sulla GUI .

Vi lascio alla guida:

Passiamo a come si crea una GUI:

Due vie: quella facile e quella difficile. Quella facile varrà trattata nella prossima lezione, per incoraggiare a imparare.

L’altra via, quella difficile, con cui sicuramente si impara di più a programmare:

Primo passo: includiamo le costanti (per capirci quelle variabili che non possono essere variate) per creare una GUI, servono perché altrimenti Windows ci sputa fuori il
programma…

Aprite SciTE e scrivete queste due righe:

#include <GUIConstants.au3>
#include <WindowsConstants.au3>

Sono le famose costanti…

Ecco le funzioni per creare una GUI. Non le spegherò nel dettaglio più minimo, sappiate che per vari approfondimenti puoi
guardare su autoitscript.com.

La funzione essenziale: GUICreate()

Sintassi:

GUICreate(“titolo”[, larghezza[, altezza[, left[, top[, style[, exStyle[, parent]]]]]]])

“titolo” = ovviamente il titolo, sempre tra virgolette perchè una stringa

larghezza = larghezza in pixel
altezza = altezza in pixel
left = distanza dalla sinistra dello schermo dopo cui si troverà la gui
top = come left, solo che la distanza è dall’alto
style, exstyle, parent non le spiego per ora.
Quindi andate su SciTE e aggiungete questa riga per la calcolatrice (sotto le altre 2 di prima):

$gui = GUICreate(“La calcolatrice in AutoIT”, 522, 218, 192, 124)

Ok, perché “$gui = eccetera”? Perché in seguito vedremo che per mostrare la GUI, modificarla e altre cose si agirà sulla variabile, così se vuoi modificarla non devi cancellarla e
rifarla da capo, poi capirete più avanti.

Eseguite il programma: non esce niente… Perché??

Perché manca qualcosa, ma prima di vedere cosa vedremo come creare una inputbox.
Ecco la funzione:

GUICtrlCreateInpux(“valore di default”, left, top [, width [, height [, style [, exStyle]]]])

Una volta spiegato GUICreate sicuramente avrete già capito anche questo.
Comunque aggiungete la seguente riga alla calcolatrice:
$ris = GUICtrlCreateInput(“0″, 160, 24, 345, 21)
“$ris sta per risultato”.

Eseguite il programma… Ancora niente… Ma perché???

Ecco qui la funzione GUISetState.
Si usa così nella forma più breve (anche se non consgliata)
GUISetState()
Oppute una forma più usata
GUISetState(@SW_SHOW)
Oppure la forma completa, consiglio di usare questa!
GUISetState(@SW_SHOW, $gui)
E infatti ecco che ci viene in aiuto la variabile $gui definita prima!

Eseguite il programma: ancora niente…

UFFA!!! Ma perché?????
Molto semplice, eseguite le operazioni scritte (includi quello, crea la gui eccetera) AutoIT non ha più niente da fare e
chiude il programma.
Ecco che ci vengono in aiuto i cicli. Di solito si utilizza il “While infinito”:

While 1
$a=1
WEnd

Così AutoIT continua a fare le operazioni del While ($a=1 è solo un esempio, perché comunque qualcosa dovete mettere nel While), e il programma non si chiude… Provate!

Uffa, un altro problema! Se clicco sulla crocetta non si chiude! Soluzione:

Quando clicchi sulla crocetta generi un evento che deve essere catturato con GUIGetMsg(), quindi il nostro While diventa così:

While 1
$evento = GUIGetMsg()
If $evento = $GUI_EVENT_CLOSE Then Exit
WEnd

$GUI_EVENT_CLOSE è una delle famose costanti. Funziona così:

Ad ogni ciclo del While, viene controllato se il messaggio (o evento) della GUI è uguale a $GUI_EVENT_CLOSE (il click sulla crocetta di una finestra per capirci), e se è
uguale esce dal programma.

Ok, adesso il nostro codice è così:

#include <GUIConstants.au3>
#include <WindowsConstants.au3>
$gui = GUICreate(“La calcolatrice in AutoIT”, 522, 218, 192, 124)
$ris = GUICtrlCreateInput(“0 ″, 160, 24, 345, 21)
While 1
$evento = GUIGetMsg()
If $evento = $GUI_EVENT_CLOSE Then Exit
WEnd

Eseguitelo, e finalmente funziona tutto, anche la crocetta per uscire! Evvai!

Alla prossima lezione! Ciao!

AutoIT Sesta Lezione: GUI e Skin (parte 2)
AutoIT sesta lezione: GUI e Skin parte 2

Eccoci alla seconda parte delle GUI e delle Skin.

In questa lezione spegheremo come interagire con i controlli e spiegheremo altri controlli.

Verranno spiegati menu, context menu, radio, checkbox, edit, label, button. In futuro poi, ne verranno spiegati altri (ma tra un po’ di lezioni).

Questa guida avrebbe dovuto essere fatta da me e Anubi, “mi ha fatto capire” che non la vuole fare.

Cominciamo con i controlli che utilizzeremo nella calcolatrice (solo button in effetti!):
Button: i bottoni. Molto semplici e facili da capire. Eccone la sintassi:

GUICtrlCreateButton(“testo”, left, top [,width [, height]])

Per sapere cosa vogliono dire “left”, “top” e gli altri vedi la lezione precedente.
Lo stile dei bottoni (applicabile anche a label, group, edit e in tutti quei controlli dove sono presenti scritte, tranne i menu):
Come stile spiegherò solo come settare la font (con colore e grandezza).

GUICtrlSetFont($id, size [,weight [,attribute [,fontname]]])

$id è la variabile del controllo a cui cambiare font.
Weight consiglio di lasciarlo su 400, attribute potete scriverlo come stringa vuota, cioè “”, il resto è intuibile dai nomi.

GUICtrlSetColor($id, colore)
Il colore va messo in esadecimale, se volete sapere i colori in esadecimale potete cercare i “colori in html” su Google, ai codici di 6 cifre che troverete dovete aggiungere davanti
uno “0x”.
Ad esempio il rosso in HEX (=esadecimale) è FF0000, in AutoIT va scritto 0xFF0000, il nero che è 000000 in HEX in AutoIT va scritto 0×000000, il bianco FFFFFF ->
0xFFFFFF, il grigio 888888 -> 0×888888.

Quando create un controllo, anche per motivi che vedremo dopo, bisogna “immagazzinarlo” in una variabile come per GUICreate().
Vi svelo un trucco: se create un controllo, e nella riga appena sotto volete settare già lo stile, al posto della variabile in cui è immagazzinato il controllo, è possibile utilizzare “-
1″.
Ora riaprite lo script della calcolatrice e aggiungete i bottoni che pazientemente ho scritto per voi (vanno inseriti PRIMA del While e prima del GUISetState(), appena dopo la
funzione GUICreate():

[Visto che WordPress sostituisce le virgolette, per il codice cliccate qui (nuova scheda) o qui (stessa scheda), vi si aprirà direttamente nel browser per comodità!]

Eseguite lo script e vedete il risultato.

Ok, abbiamo la GUI. Ora spiego gli altri controlli e poi come interagire con loro.

I Label:
Servono solo per scrivere sulla GUI, si creano con
GUICtrlCreateLabel(“testo”, left, top)

Poi potete usare tutte le funzioni “GUICtrlSet*” spiegate sopra.

I Menu:
Sono i menu che troviamo in alto alle finestre, e sono molto semplici:
$menu = GUICtrlCreateMenu(“testo”)
$sottomenu = GUICtrlCreateMenuItem(“testo”, $menu)
Penso che abbiate capito no? Il menu è il tasto in alto, tipo “File”, “Modifica”… e il sottomenu è quello che premi per compiere la vera e propria azione (“Nuovo”, “Salva”)…

I ContextMenu:
Sono i menu che appaiono quando cliccate la freccietta che a volte c’è di fianco ai button.
$contextmenu = GUICtrlCreateContextMenu($variabile_del_button)
$scelta = GUICtrlCreateMenuItem($contextmenu, “testo”)

Edit:
E’ il controllo usato anche dal Blocco Note di Windows.
Per ora spiego due funzioni, poi magari ne spiegherò altre:

$edit = GUICtrlCreateEdit(“testo iniziale”, left, top[, larghezza[, altezza]])

Crea l’edit.

$contenuto_edit = GUICtrlRead($edit)
Legge il testo dell’edit. Valido anche per gli altri controlli!
Radio e CheckBox:
I Radio sono i cerchietti (quelli di cui ne puoi selezionare uno solo) e i CheckBox sono i quadratini.
Sono molto semplici:
GUICtrlCreateCheckBox(“testo”, left, top)
GUICtrlCreateRadio(“testo”, left, top)

Per leggere lo stato:

GUICtrlRead($id)
che restituisce una di queste tre costanti:
$GUI_CHECKED se è crocettato
$GUI_UNCHECKED se non è crocettato
$GUI_UNDETERMINATE se è disattivato

Per settare lo stato:

GUICtrlSetState($id, stato)
dove “stato” può essere una di quelle tre costanti che è possibile ottenere con GUICtrlRead(), che ho scritto qui sopra.

Come interagire con i controlli:

Comincio con il solito esempio:

#include <GUIConstants.au3>
#include <WindowsConstants.au3>

$gui = GUICreate(“ Esempio”, 400, 400)

$input = GUICtrlCreateInput(“Scrivi qui il tuo nome!”, 2, 102, 396, 21)
$bottone = GUICtrlCreateButton(“Cliccami!”, 2, 125, 396, 59)

While 1
Switch GUIGetMsg()
Case $GUI_EVENT_CLOSE
Exit
Case $bottone
MsgBox(0, “Il tuo nome”, “Il tuo nome è: ” & GUICtrlRead($input))
EndSwitch
WEnd

Scommetto che tutti avranno già capito, ma spiego comunque. Viene letto il messaggio della GUI, e con uno switch si eseguie una diversa operazione a seconda di cosa viene
cliccato (o la crocetta, o il bottone).

Questo perché quando si clicca su un bottone, su una label, su un radio o un checkbox, quando si modifica un edit o un input… viene generato un evento che viene letto da
GUIGetMsg.

Semplice no?

Ovviamente se non avete capito qualcosa commentate!

Compiti:
Modificare la calcolatrice in modo che per ogni pulsante schiacciato venga mostrato un MsgBox a piacere, e anche quando viene modificato un Input.

Creare una GUI con un bottone che quando viene premuto mostra un MsgBox con un numero casuale (che si genera con Random(minimo, massimo, intero) dove intero è un
valore boleano)

Ciao!