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