Programmare da zero con Xojo: rappresentare i dati sul Canvas

Una volta che nel capitolo precedente abbiamo imparato a leggere e salvare i file, è il momento di aggiungere una nuova funzionalità alla nostra applicazione di esempio: creare un grafico che ci permetta di vedere visivamente le spese effettuate in ciascuna delle categorie.

Per questo utilizzeremo una classe davvero potente tra quelle disponibili nella libreria Xojo: Canvas.

Come indica il nome, il Canvas è un tipo di controllo molto speciale poiché ci fornisce una «tela» su cui possiamo disegnare liberamente ciò che ciascuna delle nostre applicazioni richiede, non solo attraverso le proprietà disponibili nella classe stessa ma anche utilizzando tutti le funzioni fornite da un’altra delle classi che è strettamente legata a questa: Grafica.

Nello specifico, il disegno sul Canvas viene effettuato tramite il codice scritto nel suo gestore di eventi Paint, che può essere richiamato automaticamente dal sistema operativo ogni volta che è necessario aggiornare il contenuto del canvas (ricordiamo che Xojo è nativo multipiattaforma), oppure O siamo noi a forzare il ridisegno invocando i metodi Refresh (immediato) o Invalidate (delegando il refresh del controllo quando è più appropriato per il sistema operativo).

Durante tutto il tutorial creeremo anche una classe ausiliaria che ci permetterà di disegnare i grafici statistici (accumulati spese per categoria) con maggiore flessibilità.

Inoltre, il fatto di creare questa classe ausiliaria ci permette anche di astrarre il tipo di valori da rappresentare. Cioè in questo caso sappiamo che si tratta di rappresentare valori corrispondenti alle spese personali utilizzando il grafico a barre, ma fornendo questo livello di astrazione significa che si può continuare ad utilizzare le nuove classi discusse in questo capitolo anche per rappresentare eventuali altro tipo di valore numerico in altre applicazioni che puoi creare.

D’altra parte, e per vedere in una certa misura la flessibilità fornita dalla classe Graphics, creeremo il nostro oggetto grafici statistici in modo che sia davvero facile controllare come vogliamo presentare le barre: usando colori solidi o gradienti di colore, anche decidere i colori che vogliamo assegnare a ciascuna barra, e anche se vogliamo applicare un effetto ombra a ciascuna di esse o meno; così come la larghezza con cui vogliamo disegnare ciascuna delle barre.

Il codice di disegno avrà anche il compito di calcolare proporzionalmente l’altezza di disegno per ciascuna delle barre, non solo sul valore presentato dal resto, ma anche sull’altezza massima disponibile nella finestra o pannello che includerà il controllo della grafica.

Ciò significa che, modificando la dimensione della finestra, vedrai come il controllo grafico ricalcola e ridisegna ciascuna delle barre in tempo reale, mantenendo sempre la proporzione corrispondente al valore rappresentato da ciascuna di esse.

E se in questo esempio usiamo il controllo Canvas per disegnare grafici, è molto interessante che tu sappia che questo è anche il controllo che devi usare quando devi creare, da zero, un controllo UI completamente personalizzato.

Infatti, i gestori di eventi disponibili ti permetteranno di controllare tutti gli aspetti solitamente associati all’interazione dell’utente: quando il cursore entra o esce dalla superficie, quando viene cliccato, quando gli oggetti vengono trascinati o rilasciati sulla sua superficie, oltre a rispondere a eventi della tastiera.

In breve, tramite Canvas puoi creare qualsiasi widget di controllo o interfaccia utente che puoi immaginare e che desideri aggiungere alla tua applicazione.

Ti invito non solo a riprodurre il tutorial nell’IDE Xojo (ovviamente puoi anche scaricare il progetto Xojo utilizzato nell’esempio, ma a provare a fare i tuoi primi passi con la classe Graphics in abbinamento a Canvas.

Se hai domande o problemi, i commenti sono aperti,