FreeBASIC – Modello MVC

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

Di Wdror-wsu-ap and Regis Frey – Opera propria, Pubblico dominio, Collegamento

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

FreeBASIC – mouse

Nei precedenti articoli abbiamo appreso come lavorare con le finestre grafiche e come disegnare una semplice figura geometrica.

Proviamo ora a fare un piccolo passo in avanti per cercare di interagire prima con la finestra grafica e poi con le figure geometriche che disegneremo su questa.

Il primo obiettivo sarà raggiunto con questo articolo, il secondo con il prossimo.

Per interagire con la finestra grafica dovremo trovare il modo di fornire degli input che ci serviranno per far accadere delle cose. Benvenuti nella programmazione a eventi!

La libreria grafica del compilatore FreeBASIC ci mette a disposizione una serie di funzioni per gestire gli input dell’utente. Tra queste ci sono quelle per lavorare con due strumenti esterni (external devices):

  • il mouse
  • la tastiera (keyboard)

In questo articolo ci concentreremo sul mouse.

Gestire il mouse

Il compilatore FreeBASIC ci permette sia di recuperare le informazioni dal mouse, sia di impostare, per esempio, la sua posizione.

Come recuperare le informazioni dal mouse

Per intercettare lo spostamento del mouse e la pressione di uno dei tre pulsanti che vi si trovano normalmente, dobbiamo utilizzare la funzione getmouse.

La funzione getmouse ritorna un valore di tipo long che può assumere due soli valori:

  • 0 (zero) se dal mouse arrivano correttamente le informazioni
  • 1 se invece non arriva nulla (per esempio perché il puntatore è uscito fuori dai bordi della finestra grafica)

Questa funzione però non si limita soltanto a questo, ma permette di recuperare la posizione del puntatore del mouse in coordinate espresse in pixels e lo stato dei suoi pulsanti. Per farlo occorre passarle delle variabili i cui valori saranno restituiti per riferimento.

Se per qualche motivo alcune o tutte queste informazioni non vengono recuperate, le variabili coinvolte assumeranno valore -1.

Come impostare la posizione del mouse

Può essere molto utile fare in modo che all’avvio del nostro programma il puntatore del mouse si trovi in un punto specifico all’interno della finestra grafica.

Per farlo si utilizza la funzione setmouse.

Programma di esempio

Vediamo un piccolo esempio per provare queste due funzioni:

'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 x, y, ruota, pulsante

'imposta la finestra grafica con risoluzione dello
'schermo 800x600 pixels e dimensioni testuali 100x37
screen 19

'posiziona il puntatore del mouse al centro della
'finestra grafica
setmouse 400, 300

'ciclo per gestire le informazioni dal mouse
do
  verifica_mouse = getmouse(x, y, ruota, pulsante)
  if verifica_mouse = 0 then
    locate 1, 1
    print "Riesco a ricevere le informazioni dal mouse."
    locate 3, 1
    print "x:"; x; " y:"; y
    locate 4, 1
    print "ruota:"; ruota; " pulsante:"; pulsante
    locate 6, 1
    print "Per uscire dal ciclo porta il puntatore"
    print "del mouse fuori dai bordi della finestra grafica."
  else
    cls
    locate 1, 1
    print "Il puntatore del mouse e' fuori dai"
    print "bordi della finestra grafica."
    locate 36, 1
    print "Premi il tasto INVIO per uscire dal programma."
    sleep
  end if
loop until verifica_mouse = 1

Istruzione locate

Come avrete notato per posizionare il testo nei punti voluti è stata utilizzata l’istruzione locate che definisce la posizione del cursore attraverso il numero di riga e di colonna del primo carattere della stringa che si vuole stampare con l’istruzione print.

Bene. Per oggi possiamo dirci soddisfatti.

Nel prossimo articolo vedremo come gestire le informazioni della tastiera. 🙂