Al di là di quelli che possono essere i risultati finali, in fase di sviluppo di un software, una parte decisamente importante del ciclo di creazione la troviamo fin da subito. Nel caso di prodotti leggermente più complessi del solito, infatti, molti programmatori preferiscono creare dei prototipi dei prodotti finali che vogliono realizzare. Facciamo un esempio.
Stiamo realizzando un motore per creare un gioco. Non abbiamo ancora creato il gioco, ma vogliamo mostrare in giro cosa è capace di fare il nostro prodotto, per cercare magari qualche sponsor disposto a darci una mano nel creare qualcosa di migliore. Prepariamo la nostra demo e decidiamo di implementare un'interfaccia, magari per permettere a coloro che utilizzeranno la demo di avere a che fare con un sistema di input più veloce, immediato, forse generico ma comunque molto comprensibile.
Ed è proprio di interfacce che, oggi, andiamo a parlare: MinimalComps è un comodissimo insieme di componenti, disegnati per creare delle interfacce avanzate con molte delle features oggi più richieste e popolari. Scritte da Keith Peters in Actionscript 3.0, a detta del sito stesso sono “ideali per la prototipizzazione e per la sperimentazione". Al momento in cui scriviamo, MinimalComps presenta la bellezza di trentadue componenti, tutti utilizzabili in maniera pressoché immediata e compatibili con Flash/Flex Builder e ovviamente Adobe Flash CS. Anche a livello di dimensioni non ci si può lamentare: l'archivio dei componenti completo pesa poco meno di 300kb.
Le dimensioni, inoltre, diminuiscono una volta che si crea il file .swf finale del nostro prodotto. Dando un'occhiata al sito ufficiale del progetto, si può scoprire infatti che pesa solo 60kb, nonostante sia realizzato tutto in Flash e presenti varie pagine oltre, ovviamente, a tutti gli esempi per ogni componente della raccolta. A livello di varietà, inoltre, ci sono molti componenti consueti: le Label, TextBox, ComboBox, ListBox. Nomi sicuramente familiari. Il tutto non si esaurisce a questo però: dai calendari per eseguire il picking di date a grafici, progress bar e slider per indicare valori più complessi, non manca davvero niente.
Per quanto riguarda la documentazione è decisamente completa (considerando comunque che l'implementazione della raccolta di componenti stessa è piuttosto semplice) ed è sempre consultabile all'indirizzo dedicato http://www.minimalcomps.com/documentation/. Si divide in due parti: nella prima, “Charts" si possono trovare tutte le informazioni necessarie a lavorare con gli strumenti di creazione di grafici che MinimalComps ci mette a disposizione. L'altra sezione, denominata “Components" ci proietta nei dettagli di ogni singolo componente, spiegandoci il significato di membri e metodi delle varie classi contemplate.
Insomma, sicuramente un insieme di strumenti degni di nota ed interessanti. Prima di vedere nel dettaglio l'installazione e l'uso di alcuni dei componenti, rimandiamo ad alcuni casi d'uso riportati anche dal sito ufficiale. Il primo esempio è un terrain editor; il secondo un interessante Particle Editor, che consente anche di visualizzare in tempo reale le modifiche apportate. Non perdiamo altro tempo però, vediamo come usare MinimalComps.
Download ed installazione
Scaricare la raccolta di componenti è molto, molto semplice. Basta andare all'indirizzo www.minimalcomps.com, quindi cliccare sul pulsante “Download". Verrete rimandati alla pagina ufficiale del progetto su Sourceforge. A questo punto basterà selezionare la versione da scaricare nel formato desiderato: attualmente la versione più recente è la 0.9.9, disponibile nel formato SWC oppure come codici sorgenti direttamente. Per quanto riguarda il file SWC, nell'uso con Adobe Flash CS3 si deve aggiungere manualmente l'incorporamento del font che troviamo nel pacchetto, pf_ronda_seven.ttf. Nel caso di Adobe Flash CS4 e successivi, invece, il problema non si pone: il file del carattere viene incorporato in maniera automatizzata e non ci dovrebbero essere problemi.
Sembra piuttosto chiaro quali sono le modalità di aggiunta dei componenti: si agisce con il file SWC o in alternativa con l'inclusione dei codici sorgenti forniti nel download del file .zip. Altrimenti, è possibile utilizzare l'aggiunta al progetto successivamente ad un checkout con SVN. Nel nostro articolo non ci occuperemo dell'uso di SVN, per cui osserveremo più da vicino le prime due modalità. Per prima cosa cercheremo di arrivare ad un risultato base analizzando entrambi i metodi, dopodiché vedremo con più calma i vari componenti più importanti e degni di nota.
Iniziamo con il vedere da dove partire nel caso abbiamo scaricato il componente SWC.
Appena terminato il download, apriamo il nostro IDE e creiamo un nuovo progetto Actionscript. A questo punto, una volta che il wizard avrà creato con successo i file di partenza sui quali lavorare, bisognerà cliccare su “Properties" dal menù “Project". Si aprirà una finestra molto simile a questa di seguito:
Nella finestra che apparirà cerchiamo il file appena salvato e clicchiamo su “Ok". Automaticamente l'IDE includerà nel progetto il file swc, e senza altri passi ci ritroveremo, nel Package Explorer, ad avere una situazione del genere.
A questo punto non bisogna fare altro: basta scrivere il codice della nostra applicazione di prova (che vedremo a breve, subito dopo l'analisi dell'altro metodo di aggiunta) senza altri passi specifici per l'inclusione.
Vediamo ora invece cosa fare nel caso abbiamo scelto il file .zip con i codici sorgenti dei componenti. Nell'archivio appena scaricato troviamo una cartella denominata 'src'. Al suo interno altre due cartelle: “assets" con il file del carattere utilizzato dal sistema, pf_ronda_seven.ttf, e “com" dove troviamo i sorgenti veri e propri. Per comodità, le cartelle sono state successivamente suddivise in base all'uso dei componenti che ci vengono forniti. Nello specifico, le cartelle sono: “charts", “components", “utils". Esattamente come avevamo visto, precedentemente, esaminando la guida di reference che viene fornita sul sito ufficiale del progetto.
Ricordiamo che per le prove effettuate abbiamo utilizzato Flash Builder 4. Apriamo il programma e creiamo un nuovo progetto ActionScript. Una volta creato, nel Project Explorer avremo una schermata simile alla seguente:
Per prima cosa dobbiamo includere i file che ci servono: clicchiamo con il pulsante destro del mouse sull'elemento principale del nostro “albero" nel Package Explorer e selezioniamo “Import". Selezioniamo il tipo “File System", quindi ci verrà chiesto di selezionare la cartella da importare nel nostro progetto: scegliamo quella che abbiamo già definito come contenitore dei nostri file. Per un uso più immediato e semplice è consigliato avere un punto di riferimento ben preciso. Ad esempio, nell'unita del disco fisso abbiamo creato una cartella “libs" con tutte le varie librerie che mi possono servire.
Ecco come apparirà ora il Package Explorer: il pacchetto è stato aggiunto con successo ed è pronto all'uso. “com.bit101" è il nome che è stato attribuito al pacchetto, per cui ci siamo:
Adesso non rimane altro che creare, esattamente come prima, il nostro pulsante con su scritto “Hello HTML.IT". Il codice, tra l'altro, non cambia. Copiate il seguente listato, dopodiché compilate il progetto ed avviatelo. Il risultato sarà quello desiderato:
package
{
import com.bit101.components.PushButton;
import flash.display.Sprite;
public class testswc extends Sprite
{
public function testswc()
{
var b:PushButton;
b = new PushButton(this, 10, 10, "Hello HTML.IT");
}
}
}
Diamo uno sguardo alle istruzioni del listato. Anzi, per essere più precisi, l'istruzione, dato che praticamente ne abbiamo una sola, ovvero la fase di creazione dell'istanza dell'oggetto. Come da codice, il metodo costruttore della classe prende in input cinque argomenti. Il primo è il “luogo" dove deve essere disegnato il controllo (tecnicamente parlando, il DisplayObjectContainer da usare). Dato che stiamo lavorando sul filmato in Flash stavolta basterà mettere this senza altri accorgimenti. Il secondo e il terzo sono rispettivamente le coordinate x ed y di disegno, corrispondenti come di consueto al punto più in alto e più a sinistra del controllo. Il quarto parametro, di tipo stringa, identifica invece il testo da visualizzare sul controllo. Infine, come quinto parametro passiamo il nome del metodo da utilizzare nel caso il pulsante venga premuto. In questo caso il metodo si chiama onBtnClick. Per avere le idee chiare su ogni componente, poi, basta guardare la reference e tutto è più chiaro: in questo caso basta andare su questa pagina per vedere la reference completa del componente PushButton.
Prima di continuare è doverosa una nota. Nel listato poco precedente abbiamo usato una variabile per contenere il controllo che ci interessava. Sappiate, però, che non è indispensabile con MinimalComps. Basta infatti scrivere nel nostro listato:
new PushButton(this, 10, 10, “Hello HTML.IT", onBtnClick);
al posto di
var b:PushButton; b = new PushButton(this, 10, 10, “Hello HTML.IT", onBtnClick);
e il risultato sarà esattamente lo stesso, evitando però di coinvolgere variabili inutili. Usatele solamente nel caso i risultati o i contenuti dei controlli implementati debbano essere usati anche altrove o in modi più “avanzati".
Abbiamo visto quanto è facile installare il pacchetto ed utilizzarlo in entrambi i modi contemplati. Ora che abbiamo delle basi più solide, possiamo dare uno sguardo al resto dei componenti facendo una rassegna veloce del loro utilizzo.
Rassegna dei componenti
I componenti che MinimalComps ci offre sono molti: non è il caso, quindi, di affrontarli uno ad uno. Sicuramente, però, è necessario dare uno sguardo a tutti quei componenti più “particolari", dato che ce ne sono sicuramente di utili. Successivamente, inoltre, daremo uno sguardo anche al mondo dei grafici realizzati con il pacchetto.
Uno dei componenti più interessanti è sicuramente il Color Chooser, comoda interfaccia che consente di selezionare un colore inserendo i valori esadecimali corrispondenti, visualizzando immediatamente l'anteprima del colore stesso nel piccolo quadrato posto a lato. Un esempio di utilizzo veloce di questo componente, a livello di costruttore, può essere il seguente:
new ColorChooser(this, 0, 0, c, defHandler);
I primi tre parametri sono sempre gli stessi, quelli già visti per gli altri componenti: il DisplayObjectContainer da utilizzare per il disegno dell'interfaccia e i valori x ed y dai quali partire per effettuare il rendering del componente. Il quarto valore, c, serve a contenere il colore iniziale da mostrare, ovviamente in formato esadecimale (il valore di default, infatti, è 0xff0000, il colore rosso). Infine, quindi, troviamo il metodo dal nome generico defHandler che come di consueto rappresenta il metodo da richiamare nel caso il controllo sia utilizzato. Nello specifico di questo componente, stavolta si parla del cambio di colore avvenuto.
Inutile dire quale grande ventaglio di usi può avere un controllo simile: personalizzazione delle pagine immediata, ma anche uso dei colori in sistemi veri e propri. Si veda il sistema particellare prima presentato.
Altro componente che cattura l'attenzione è il WheelMenu. Un tipo di menu (a forma di ruota, come il nome suggerisce) che viene mostrato quando si tiene premuto il pulsante sinistro del mouse. Particolarmente utile quindi nelle situazioni in cui abbiamo bisogno sicuramente di un menu, ma magari vogliamo avere più spazio possibile per mostrare un risultato o un altro componente. Per tutti coloro che programmano giochi, potrebbe essere un valido aiuto per sistemare dei menu intuitivi per giochi di ruolo o strategici in tempo reale.
Dalla reference del componente notiamo che il metodo costruttore, stavolta, presenta degli argomenti diversi. Tenendo conto che non abbiamo bisogno più di una coordinata iniziale x,y (disegneremo il controllo infatti solo quando richiesto, in corrispondenza del cursore del mouse) ecco come si presenta la sintassi stavolta:
new WheelMenu(parent, numButtons, outerRadius, iconRadius, innerRadius, defHandler);
Ovviamente non manca mai l'oggetto parent che indica il DisplayObjectContainer dove verrà renderizzato il WheelMenu. Troviamo quindi numButtons, un intero che indica il numero di pulsanti che il menu deve avere. outerRadius si occupa invece di definire il raggio del cerchio più esterno del menu, ovvero al limite “estremo" dell'area di disegno. Abbiamo quindi iconRadius e innerRadius, che contrariamente a outerRadius si occupa di definire il raggio corrispondente alla circonferenza più “interno". Inutile dire che per un uso logico del componente l'innerRadius deve essere sempre minore dell'outerRadius. Per concludere, come sempre, troviamo defHandler, che si occupa di gestire l'uso del componente nel caso previsto (stavolta parliamo della selezione di un elemento del menu).
Continuando la rassegna dei componenti, non può mancare “Window", che rappresenta un vero e proprio contenitore simile ad una finestra del nostro sistema operativo, con funzionalità simili e, all'occorrenza, trascinabile. Il metodo costruttore, stavolta, non prevede accorgimenti particolari: non lo riportiamo nemmeno data la sua estrema semplicità, uguale a quella di un comune PushButton con una sola eccezione. Come logico, infatti, manca in questo caso un EventHandler per la gestione di un qualsiasi cambiamento, dato che qui abbiamo a che fare con un semplice contenitore e non altro. Ciò che però è necessario dire riguarda il disegno di altri componenti nella finestra stessa: d'altronde, è stata concepita per questo motivo.
Chi vorrà sperimentare il disegno di un PushButton dentro una finestra che, ad esempio, chiameremo 'w1', utilizzerà intuitivamente questo codice:
new PushButton(w1, 10, 10, “testo di prova", defHandler);
Un codice simile restituisce un errore: anziché disegnare in 'w1', infatti, dovremo disegnare nel membro content (in inglese “contenuto") dell'oggetto w1. Il codice quindi cambia leggermente, presentando una sintassi quale:
new PushButton(w1.content, 10, 10, “testo di prova", defHandler);
Il RotarySelector è un componente singolare, molto simile ad una manopola, utilizzabile quindi per effettuare delle scelte: si pensi anche ad un semplice selettore di volume diverso dal solito per una radio online. Anche in questo caso il costruttore non è diverso dal semplice PushButton. Per definire al meglio l'uso che se ne deve fare bisogna lavorare su alcuni membri pubblici messi a disposizione dalla classe: parlo di choise, intero che rappresenta la scelta attuale, numChoises che segna il numero di valori tra cui selezionare quello interessato (fino a un massimo di dieci).
Nel caso un controllo così “a scatti" non ci sia sufficiente, ma abbiamo bisogno di qualcosa di più preciso nello stesso stile, ecco che ci si presenta il “Knob". La grafica è molto simile a quella del RotarySelector, con l'eccezione dell'assenza di un numero “finito" di valori selezionabili. A livello di metodo costruttore non ci sono segnalazioni importanti da fare e tutto si svolge lavorando con i membri pubblici della classe, dai nomi tra l'altro, piuttosto eloquenti: minimum e maximum per dare dei range precisi di lavoro, value per memorizzare il valore attuale del controllo, radius per definire la grandezza del controllo stesso, o la booleana showValue che consente di decidere se si deve o non si deve mostrare il valore attuale vicino al controllo.
Concludendo la rassegna dei controlli arriviamo al “Meter", la cui grafica richiama un misuratore analogico di correnti elettriche. Sicuramente un'idea simpatica che rientra nella categoria di componenti “alternativi" per una GUI di un proprio progetto. Anche in questo caso il costruttore rimane molto semplice da comprendere (semplice passaggio di DisplayObjectContainter, coordinate (x,y) e label di presentazione. Si lavora molto con i valori dei membri della classe: minimum e maximum che definiscono i valori di picco basso e alto, value che invece memorizza il valore attuale del componente.
Prima di concludere diamo un'occhiata più approfondita ai sistemi di creazione di grafici che ci vengono messi a disposizione.
Il PieChart è un tipo di grafico molto usato, utile in svariate situazioni: per illustrare dei grafici di statistiche del proprio sito, o magari per indicare con precisione un insieme di target nel contesto delle vendite di un'azienda. Fortunatamente, creare è configurare un grafico di questo tipo con MinimalComps è veramente semplice. I passi da fare, essenzialmente, sono due: in primo luogo istanziare l'oggetto tramite il metodo costruttore.
new PieChart(parent, xpos, ypos, data);
parent ovviamente rappresenta il DisplayObjectContainer dove verrà renderizzato il grafico. xpos e ypos sono invece le coordinate di partenza del disegno. data rappresenta un array con tutti i valori che dobbiamo utilizzare nel grafico. Il nostro grafico è pronto all'uso. Manca solo il secondo passo (ovviamente facoltativo) che si occupa di definire i colori da usare per ogni singola sezione del grafico stesso: stiamo parlando della proprietà colors, consistente in un array di valori esadecimali rappresentanti i colori corrispondenti.
Le altri tipologie di grafico, nonostante presentino degli output visuali totalmente diversi (il BarChart, che lavora con delle barre, e il LineChart, che lavora con un insieme di linee spezzate) hanno lo stesso identico metodo costruttore e non hanno bisogno di accorgimenti particolari, oltre a quelli specifici del tipo ma dallo stampo prettamente estetico (si veda lo spacing tra le barre del BarChart o il lineWidth delle linee del LineChart).
Possiamo quindi concludere questa analisi di MinimalComps confermando tutto il bene che si è detto riguardo alla sua indiscutibile utilità come sistema di interfaccia grafica alternativa, ottima nel suo funzionamento, varia e a volte particolare nel suo presentarsi, ma anche semplice nel suo utilizzo. Tre fattori, questi, che a volte è difficile trovare al primo colpo.
