Dispensa sugli automi a stati finiti e Pagine Web

Automi a stati finiti e Pagine Web Dinamiche
Introduzione
In questa dispensa si vuole descrivere un modello di automa a stati finiti, applicabile alla
progettazione e realizzazione di pagine Web dinamiche.
Prima di introdurre l’applicazione di questo modello alle pagine web, diamo una breve descrizione
di cosa si intenda per automa a stati finiti.
L’automa a stati finiti e’ un modello di rappresentazione di una situazione in cui una entita’ si trovi
in vari stati possibili, determinati dal verificarsi di eventi, a partire da una situazione iniziale.
Esempi di rappresentazioni di entita’ cosi’ descrivibili sono innumerevoli, ma per chiarire bene il
concetto, basta pensare a una situazione che si verifica comunemente nelle nostre case e alla quale
siamo talmente abituati, tanto da non pensare che essa e’ un modello di automa a stati finiti.
L’esempio e’ il televisore in uno stato iniziale che e’ comunemente chiamato Stand-By. Come tutti
siamo abituati, e’ sufficiente premere i tasti del telecomando per provocare eventi che modifichino
lo stato. Premendo il tasto “1” normalmente il televisore si accende e sintonizza il canale
memorizzato sulla memoria 1, premendo altri tasti si determinano altri eventi che possono
modificare lo stato.
Per rappresentare questo tipo di macchine a stati si possono usare varie notazioni, dal grafo alla
tabella stati eventi. Per i nostri scopi, spesso e’ piu’ comoda la notazione tabellare, esemplifichiamo
dando una rappresentazione del televisore.
Sulla prima colonna in verticale sono descritti gli stati e sulla prima riga gli eventi, ovviamente
l’abbreviazione Prog n sta per visualizza il programma n e l’esemplificazione degli eventi e’ il
corrispondente tasto del telecomando, all’incrocio riga/colonna c’e’ il nuovo stato.
Off
Stand By
Prog 1
Prog 2
Prog 3
Prog 4
Prog 5
Prog 6
Prog 7
Stand By
Stand By
Stand By
Stand By
Stand By
Stand By
Stand By
1
2
Prog 1 Prog 2
Prog 2
Prog 1
Prog 1 Prog 2
Prog 1 Prog 2
Prog 1 Prog 2
Prog 1 Prog 2
Prog 1 Prog 2
3
Prog 3
Prog 3
Prog 3
4
Prog 4
Prog 4
Prog 4
Prog 4
5
Prog 5
Prog 5
Prog 5
Prog 5
Prog 5
6
Prog 6
Prog 6
Prog 6
Prog 6
Prog 6
Prog 6
Prog 3
Prog 3 Prog 4
Prog 3 Prog 4 Prog 5
Prog 3 Prog 4 Prog 5 Prog 6
7
Prog 7
Prog 7
Prog 7
Prog 7
Prog 7
Prog 7
Prog 7
L’esempio e’ forse banale, ma e’ il primo passo per capire, infatti la macchina o automa ha un
numero fisso di stati e puo’ spostarsi da uno stato all’altro sulla base di eventi, in assenza di questi
ultimi il sistema rimane nello stato in cui e’; ovviamente la casella vuota indica evento ininfluente
sullo stato.
Sempre basandoci sul televisore, diamo un esempio un po’ piu’ complesso, ma sempre
significativo.
Gli stati sono in questo caso:
Stand By
Prog n
TLV i
TLV x
TLV xx
TLV xxx
Cerca xxx
TLV nnn
: attesa
: visualizza programma n
: Televideo pagina 100
: Televideo impostata prima cifra pagina
: Televideo impostata seconda cifra pagina
: Televideo impostata terza cifra pagina
: Ricerca pagina
: Visualizza pagina nnn
Off
Stand By
Prog n
Stand By
TLV i
TLV x
TLV xx
Cerca xxx
Key 1-9
Prog n
Prog n
TLV x
TLV xx
TLV xxx
TLV x
TeleVideo Cerca XXX OK
TLV i
Prog n
Prog n
Prog n
Prog n
TLV nnn
TLV x
Prog n
Se pagina trovata
TLV nnn
altrimenti
Cerca xxx
diamo ora la legenda degli eventi:
Off
Key 1-9
Tele Video
: premuto tasto Off
: premuto uno dei tasti 1…9
: premuto tasto televideo
L’evento Cerca xxx OK, in questo caso, non corrisponde ad un tasto, ma ad un evento interno al
sistema.
Se analizziamo bene questa macchina, possiamo scoprire che non e’ possibile spegnere il televisore
se siamo in modalita’ televideo !!!
Come si puo’ ben intuire questa rappresentazione dei fatti e’ applicabile a moltissimi altri casi
pratici, come ad esempio i distributori automatici di caffe’ e bevande, i cancelli automatici …
Anche nel mondo della programmazione delle pagine attive Web questo modello si presta bene
allorquando la pagina assume connotazioni diverse in funzione degli eventi che possono
determinarsi.
Applicazione del modello ad una Pagina Web Attiva
Supponiamo di voler progettare una pagina attiva che presenti due ComboBox di scelta correlati,
ovvero la selezione sul secondo e’ dipendente dalla prima. Quest’esempio e’ molto generale, basta
pensare alla selezione di una provincia all’interno di una regione, per cui il primo ComboBox serve
per scegliere la regione, il secondo per scegliere la provincia.
Vediamo come un modello di automa a stati finiti risolva brillantemente il problema.
Disegniamo la matrice stati/eventi:
Combo 1 Change
Se Combo 1 Scelta Valida
Combo 1 Scelta Valida
altrimenti
Iniziale
2 Combo 1 Scelta Valida Se Combo 1 Scelta Valida
Combo 1 Scelta Valida
altrimenti
Iniziale
3 Combo 2 Scelta Valida Se Combo 1 Scelta Valida
Combo 1 Scelta Valida
altrimenti
Iniziale
Combo2 Change
1 Iniziale
Se Combo 2 Scelta Valida
Combo 2 Scelta Valida
altrimenti
Combo 1 Scelta Valida
Se Combo 2 Scelta Valida
Combo 2 Scelta Valida
altrimenti
Combo 1 Scelta Valida
Descriviamo ora gli stati:
Iniziale:
Combo 1 Scelta Valida:
Combo 2 Scelta Valida:
la pagina presenta il Combo 1 popolato e impostato su scelta nulla e il
Combo 2 nascosto
la pagina presenta il Combo 1 popolato e impostato sulla scelta fatta;
il Combo 2 e’ popolato e impostato su scelta nulla
la pagina presenta il Combo 1 popolato e impostato sulla scelta fatta;
il Combo 2 e’ popolato e impostato su sulla scelta fatta
per semplicita’ sulla prima colonna si e’ associato un numero intero ad indicare lo stato.
Vediamo ora di applicare questo automa ad una pagina attiva, tenendo presente che l’esempio
seguente e’ VBScript per ASP, ma il concetto e’ applicabile a qualunque tipo di linguaggio di
sviluppo, l’importante e’ capire il meccanismo e ricordarsi sempre che il server non ha memoria
della pagina.
<HTML>
<HEAD>
<SCRIPT language =”javascript”>
function RegioneChange()
{
Event.value = 1;
Form.submit();
}
function ProvinciaChange()
{
Event.value = 2;
Form.submit();
}
function EventClear()
{
Event.value = 0;
}
function ChangeState(s)
{
Stato.value = s;
if ( s == 1 ) Form.
}
</SCRIPT>
</HEAD>
<BODY>
<%
‘ recupero delle variabili dell’automa
‘ se nulle vuol dire che si tratta della
‘ prima visualizzazione
Stato = Request.Form(“Stato”)
If Stato is null Then Stato = 1
Event = Request.Form(“Event”)
If Event is null Then Event = 0
Regione = Request.Form(“Regione”)
Provincia = Request.Form(“Provincia”)
%>
<FORM method=POST>
<INPUT Type=”hidden” name=”Stato” value=”<%=Stato%> >
<INPUT Type=”hidden” name=”Event” value=”<%=Event%> >
<%
‘ gestione della macchina
If Stato = 1 Then ‘Iniziale o Combo 1 scelta nulla
If Event = 1 Then
%>
<SELECT name=”Regione” onChange=”return RegioneChange();”>
<OPTION value=””>Scegli Regione</OPTION>
<%
If Regione = “Regione 1” Then
%>
<OPTION value=”Regione 1” SELECTED>Regione 1</OPTION>
<%
Else
%>
<OPTION value=”Regione 1”>Regione 1</OPTION>
<%
End if
.
.
.
If Regione = “Regione n” Then
%>
<OPTION value=”Regione 1” SELECTED>Regione n</OPTION>
<%
Else
%>
<OPTION value=”Regione n”>Regione n</OPTION>
<%
End if
%>
</SELECT>
<SCRIPT language=”javascript”>
EventClear() ;
ChangeState(2) ;
</SCRIPT>
<%
Else
%>
<SELECT name=”Regione” onChange=”return RegioneChange();”>
<OPTION value=”” SELECTED>Scegli Regione</OPTION>
<OPTION value=”Regione 1”>Regione 1</OPTION>
.
.
.
<OPTION value=”Regione n”>Regione n</OPTION>
</SELECT>
<%
End if ‘Evento 1
Else If Stato = 2 Then ‘Combo 1 Scelta Valida
If Event = 1 Then
If Regione = “” Then
%>
<SCRIPT language=”javascript”>
EventClear();
ChangeState(1);
Form.submit();
</SCRIPT>
<%
Else
‘ Costruisco Combo 1 come Stato 1 Evento 1
‘ ovvero recupero il valore selezionato
‘ e inizializzo il valore scelto in precedenza
‘ Costruisco Combo 2
‘ in maniera analoga a Combo 1 Stato 1 Evento 1
‘ ma solo per la provincia selezionata inizializzato a scelta nulla
End If
Else If Event = 2 then
‘ Costruisco Combo 1 come Stato 1 Evento 1
‘ ovvero recupero il valore selezionato
‘ e inizializzo il valore scelto in precedenza
‘ Costruisco Combo 2
If Regione = “Regione 1” Then
‘ Provincie Regione 1
%>
<SELECT name=”Provincia” onChange=”return ProvinciaChange();”>
<OPTION value=”” SELECTED>Scegli Provincia</OPTION>
<OPTION value=”Provincia 1”>Provincia 1</OPTION>
.
.
.
<OPTION value=”Provincia n”>Provincia n</OPTION>
</SELECT>
<%
.
.
.
Else If Regione = “Regione n” Then
‘ Provincie Regione n
%>
<SELECT name=”Provincia” onChange=”return ProvinciaChange();”>
<OPTION value=”” SELECTED>Scegli Provincia</OPTION>
<OPTION value=”Provincia 1”>Provincia 1</OPTION>
.
.
.
<OPTION value=”Provincia n”>Provincia n</OPTION>
</SELECT>
<%
End If
%>
<SCRIPT language=”javascript”>
EventClear();
ChangeState(2);
</SCRIPT>
<%
Else
‘ qui non si dovrebbe mai passare
‘ Errore Interno
%>
<p> Internal Error Stato 2 Evento sconosciuto </p> “
<%
End if
Else If Stato = 3 Then ‘Combo 2 Scelta Valida
If Event = 1 Then
If Regione = “” Then
%>
<SCRIPT language=”javascript”>
EventClear();
ChangeState(1);
Form.submit();
</SCRIPT>
<%
Else
‘ Costruisco Combo 1 come Stato 1 Evento 1
‘ ovvero recupero il valore selezionato
‘ e inizializzo il valore scelto in precedenza
‘ Costruisco Combo 2
‘ in maniera analoga a Combo 1 Stato 1 Evento 1
‘ ma solo per la provincia selezionata inizializzato a scelta nulla
End If
Else If Event = 2 Then
If Provincia = “” Then
%>
<SCRIPT language=”javascript”>
EventClear();
ChangeState(1);
Form.submit();
</SCRIPT>
<%
Else
‘ Costruisco Combo 1 come Stato 1 Evento 1
‘ ovvero recupero il valore selezionato
‘ e inizializzo il valore scelto in precedenza
‘ Costruisco Combo 2 come Stato 1 Evento 1
‘ ovvero recupero il valore selezionato
‘ e inizializzo il valore scelto in precedenza
End If
End If
Else
‘ qui non si dovrebbe mai passare
‘ Errore Interno
%>
<p> Internal Error </p> “
<%
End If
%>
</FORM>
</BODY>
</HTML>

Download Report