In questo articolo scopriremo uno dei modi per organizzare il codice in maniera efficace ed efficiente.
Per fare questo sfrutteremo il Modello Architetturale MVC (Model-View-Controller).
Modello Architetturale MVC
In pratica ciò che occorre fare per seguire questo schema di progettazione è raccogliere logicamente i moduli del nostro codice nelle 3 componenti del modello MVC che differiscono per scopo e logica di funzionamento. Vediamole in sintesi:
- Il componente Modello – che rappresenta il cuore del nostro programma – è quella parte del codice che contiene tutte quelle procedure (subroutines e funzioni) per la gestione delle informazioni secondo le regole e la logica decise dal programmatore. In pratica è questo componente che determina il vero e proprio comportamento del programma.
- Il componente Vista contiene tutta quella parte del codice concepita per la gestione della grafica e del testo. Questo modulo si occupa sia della visualizzazione dei risultati delle elaborazioni avvenute nel componente Modello (output), sia della visualizzazione di quegli elementi grafici e testuali che permettono all’utilizzatore di interagire con il programma (input).
- Il componente Controllore si occupa invece della fasi di interlavoro con le altre due componenti: una parte del suo codice permette a questo componente di mettersi in ascolto degli input dell’utilizzatore provenienti dal componente Vista, per poi attivare le relative procedure del componente Modulo, da cui raccoglierà i risultati elaborati per attivare le relative procedure del componente Vista che si occuperà infine di trasformare i dati elaborati in oggetti grafici o testuali.
Forse uno schema può aiutarci a capire ancora meglio ciò che abbiamo provato a descrivere più sopra.
Schema del Modello Architetturale MVC
Per non lasciare tutto questo soltanto ad un livello teorico, scriveremo un programma per disegnare dei quadrati rossi, selezionarli o deselezionarli, e spostarli a video.
Programma di esempio
Volendo seguire lo schema di progettazione MVC, scriveremo un modulo per ciascun componente di questo Modello Architetturale. In aggiunta prepareremo anche un file di intestazione per organizzare meglio le dichiarazioni delle procedure e del tipo di dato creato ad hoc per l’occasione, così come si usa fare in FreeBASIC.
Una volta preparati e salvati i 4 files, si dovrà compilare il file sorgente modulo_controllore.bas e quindi eseguire il file compilato.
File di intestazione
''nome file: intestazione.bas ''sito web: https://ciucoinformatico.home.blog/ ''ultimo aggiornamento: 04/08/2019 /' DESCRIZIONE File di intestazione per la dichiarazione del tipo di dato creato ad hoc e delle procedure contenute negli altri moduli. '/ ''definizione del tipo di dato figura type figura tipo as string coord_x as integer coord_y as integer dimensione as integer colore(1 to 3) as integer selezione as boolean selezione_x as integer selezione_y as integer end type ''dimensiona un array fisso del tipo figura dim figure(1 to 10) as figura /' Componente VISTA '/ ''procedura per stampare a video il menu declare sub stampa_menu() ''procedura per visualizzare le informazioni del mouse declare sub info_mouse(x as integer, y as integer, r as integer) ''procedura per visualizzare il numero delle figure create declare sub stampa_tot_figure(n as integer) ''procedura per disegnare le figure declare sub disegna_figura(f() as figura) /' Componente MODELLO '/ ''procedura per la creazione di una figure geometrica declare sub crea_figura(x as integer, y as integer, r as integer, n as integer, f() as figura) ''procedura per la selezione di una o più figure declare sub seleziona(x as integer, y as integer, f() as figura) ''procedura per lo spostamento delle figure declare function sposta(x as integer, y as integer, f() as figura) as boolean
Modulo Controllore
''nome file: controllore.bas ''architettura MVC (Model-View-Controller): componente CONTROLLORE ''sito web: https://ciucoinformatico.home.blog/ ''ultimo aggiornamento: 04/08/2019 /' DESCRIZIONE Componente CONTROLLO: modulo per l'ascolto degli input dell'utilizzatore che tramite il mouse interagisce con lo schermo, e dispaccio degli eventi generati dall'utilizzatore alle procedure del componente MODELLO e chiamata alle procedure di visualizzazione del componente VISTA. '/ #include once "file_intestazione.bi" #include once "modulo_vista.bas" #include once "modulo_modello.bas" ''dimensiona una variabile per ricevere il valore ''restituito dalla funzione getmouse dim as long verifica_mouse ''dimensiona quattro variabili per ricevere le ''informazioni provenienti dal mouse dim as integer mouse_x, mouse_y, mouse_ruota, mouse_pulsante ''variabile per il conteggio delle figure dim num_figura as integer num_figura = 0 ''Visualizza il menu stampa_menu() ''ciclo per l'ascolto degli input (informazioni dal mouse) do verifica_mouse = getmouse(mouse_x, mouse_y, mouse_ruota, mouse_pulsante) if verifica_mouse = 0 then ''visualizza a video le informazioni del mouse info_mouse(mouse_x, mouse_y, mouse_ruota) else ''non fare nulla end if if mouse_pulsante = 1 then ''tasto sinistro del mouse seleziona(mouse_x, mouse_y, figure()) disegna_figura(figure()) stampa_menu() stampa_tot_figure(num_figura) elseif mouse_pulsante = 4 then ''tasto centrale del mouse if sposta(mouse_x, mouse_y, figure()) then disegna_figura(figure()) stampa_menu() stampa_tot_figure(num_figura) sleep 200 else end if elseif mouse_pulsante = 2 then ''tasto destro del mouse if num_figura < 10 then num_figura = num_figura + 1 crea_figura(mouse_x, mouse_y, mouse_ruota, num_figura, figure()) disegna_figura(figure()) stampa_menu() stampa_tot_figure(num_figura) sleep 200 else beep end if else ''non fare nulla end if loop until verifica_mouse = 1
Modulo Vista
''nome file: vista.bas ''architettura MVC (Model-View-Controller): componente VISTA ''sito web: https://ciucoinformatico.home.blog/ ''ultimo aggiornamento: 03/08/2019 /' DESCRIZIONE Componente VISTA: modulo per la rappresentazione a video del testo e delle figure. '/ ''Imposta una pagina video con la modalità grafica 19 per ''una risoluzione dello schermo di 800x600 pixels, una ''dimenzione testuale di 100 colonne x 37 righe e ''una profondità di colore a 32bpp. screen 19, 32, 1 ''posiziona il mouse al centro setmouse 400, 300 ''procedura per stampare a video il menu sub stampa_menu() locate 1,1: print "Mouse:" locate 2, 1: print "tasto sinistro = seleziona le figure" locate 3, 1: print "tasto centrale = sposta le figure selezionate" locate 4, 1: print "tasto destro = crea una figura" locate 5, 1: print "Nota:" locate 6, 1: print "Per ingrandire o rimpicciolire la figura, prima" locate 7, 1: print "di crearla, usa la ruota." locate 36, 1: print "Per uscire dal programma porta il puntatore del"; print " mouse fuori dalla finestra grafica." end sub ''procedura per visualizzare il numero delle figure create sub stampa_tot_figure(n as integer) locate 8, 1: print "Totale figure create:"; n; _ " (al massimo ne puoi creare 10)" end sub ''procedura per visualizzare le informazioni del mouse sub info_mouse(x as integer, y as integer, r as integer) locate 9, 1 print "x:"; x; " y:"; y; " ruota:"; r end sub ''procedura per disegnare le figure sub disegna_figura(f() as figura) cls 1 ''itera gli elementi del contenitore delle figure for i as integer = lbound(f) to ubound(f) if f(i).tipo = "quadrato" then line(f(i).coord_x, f(i).coord_y)-(f(i).coord_x + f(i).dimensione, f(i).coord_y), rgb(f(i).colore(1),f(i).colore(2),f(1).colore(3)) line(f(i).coord_x + f(i).dimensione, f(i).coord_y)-(f(i).coord_x + f(i).dimensione, f(i).coord_y + f(i).dimensione), rgb(f(i).colore(1),f(i).colore(2),f(i).colore(3)) line(f(i).coord_x + f(i).dimensione, f(i).coord_y + f(i).dimensione)-(f(i).coord_x, f(i).coord_y + f(i).dimensione), rgb(f(i).colore(1),f(i).colore(2),f(i).colore(3)) line(f(i).coord_x, f(i).coord_y + f(i).dimensione)-(f(i).coord_x, f(i).coord_y), rgb(f(i).colore(1),f(i).colore(2),f(1).colore(3)) end if next i end sub
Modulo Modello
''nome file: modello.bas ''architettura MVC (Model-View-Controller): componente MODELLO ''sito web: https://ciucoinformatico.home.blog/ ''ultimo aggiornamento: 03/08/2019 /' DESCRIZIONE Modulo contenente le procedure per la gestione dei dati e la logica di funzionamento del programma. '/ ''procedura per la creazione di una figure geometrica sub crea_figura(x as integer, y as integer, r as integer, n as integer, f() as figura) f(n).tipo = "quadrato" f(n).coord_x = x f(n).coord_y = y f(n).dimensione = 80 + r f(n).colore(1) = 255 f(n).colore(2) = 0 f(n).colore(3) = 0 f(n).selezione = false end sub ''procedura per la selezione di una o più figure sub seleziona(x as integer, y as integer, f() as figura) ''itera gli elementi del contenitore delle figure for i as integer = lbound(f) to ubound(f) if x >= f(i).coord_x and x <= (f(i).coord_x + f(i).dimensione) and y >= f(i).coord_y and y <= (f(i).coord_y + f(i).dimensione) then f(i).colore(2) = 255 f(i).selezione = true f(i).selezione_x = x - f(i).coord_x f(i).selezione_y = y - f(i).coord_y else f(i).colore(2) = 0 f(i).selezione = false f(i).selezione_x = 0 f(i).selezione_y = 0 end if next i end sub ''procedura per lo spostamento delle figure function sposta(x as integer, y as integer, f() as figura) as boolean dim controllo as boolean controllo = false ''itera gli elementi del contenitore delle figure for i as integer = lbound(f) to ubound(f) if f(i).selezione = true then f(i).coord_x = x - f(i).selezione_x f(i).coord_y = y - f(i).selezione_y ''deselezione f(i).colore(2) = 0 f(i).selezione = false f(i).selezione_x = 0 f(i).selezione_y = 0 controllo = true else ''non fare nulla end if next i return controllo end function
Bene. Per oggi ci fermiamo qui.
A rileggerci tra circa una settimana. 🙂