Chi lavora con Flash sa bene quanto possa essere fastidioso, in certi casi, il debug. Per quanto riguarda gli altri linguaggi di programmazione, infatti, ci sono svariati tool (di solito interni all'IDE) per svolgere con tranquillità questo compito. Sia chiaro, anche gli ambienti di sviluppo per Flash ne sono dotati, ma comunque non hanno mai avuto quella marcia in più. Partendo da questa base, DeMonsters, un innovativo studio di design e sviluppo tedesco, ha voluto dare il suo contributo alla scena Open Source, realizzando un prodotto davvero utile: il DeMonsterDebugger.
DeMonsterDebugger è un debugger che può essere usato con Flash, ma anche con Flex ed AIR. Originariamente è stato creato in Flex ed AIR. La filosofia di sviluppo che i progettisti hanno voluto seguire è semplice: aggiungere quel qualcosa in più che prima mancava. Un debugger semplice da usare, ma allo stesso tempo decisamente flessibile e pronto ad adattarsi a qualsiasi richiesta dell'utente sviluppatore. Tutto questo ovviamente e rigorosamente Open Source, per permettere a chiunque di adattare il tool alle proprie necessità.
Entrando nel dettaglio è possibile subito capire le sue potenzialità: come già detto, può essere usato senza nessun problema con Adobe AIR, Adobe Flex e le applicazioni Adobe Flash. Permette il trace di qualsiasi oggetto: stringhe, numeri, array, file xml e ovviamente qualsiasi classe personalizzata. Tramite un concept intuitivo e flessibile, inoltre, rileva automaticamente le varie dipendenze e le strutture multi-livello. Una delle proprietà più interessanti, inoltre, è la possibilità di modificare durante l'esecuzione il valore delle proprietà e delle variabili in gioco. In fase di testing tutto questo è molto importante. Senza considerare, inoltre, che è possibile testare in maniera isolata i metodi da noi realizzati. Questo vuol dire che, per testare una porzione di codice, non dovremo necessariamente avviare tutto. Una soluzione decisamente utile, specie quando abbiamo a che fare con prototipi e progetti molto grandi. Come se tutto questo non dovesse bastare, gli sviluppatori sono voluti rimanere vicini al look and feel che ha sempre caratterizzato le applicazioni Adobe, in modo tale da realizzare un design coerente con lo stile degli altri programmi più utilizzati da web designer e programmatori.
Download, installazione, interfaccia
Dopo questa breve introduzione, vediamo come scaricarlo. Per prima cosa dobbiamo andare sul sito ufficiale del progetto, raggiungibile all'indirizzo http://demonsterdebugger.com/. Cliccando sul pulsante in alto, nella home page, inizieremo a scaricare il pacchetto di installazione del programma.
Dopo aver scaricato il file, l'installazione sarà piuttosto veloce e intuitiva. Come per ogni programma, dovremo selezionare il percorso d'installazione e attendere la fine del processo. Non saranno necessari altri accorgimenti e, a fine installazione, si aprirà automaticamente la finestra con il programma in esecuzione.
Nello screenshot qui sopra, ogni finestra è ancora vuota. Prima di andare a vedere un caso pratico d'utilizzo, tuttavia, soffermiamoci ancora nell'esplorazione dell'interfaccia.
Iniziamo con il primo menu, forse il più interessante: File. Da qui troviamo svariate istruzioni che ci permettono di esportare. Esportare delle classi client per il nostro debugger, oppure esportare direttamente degli esempi, in modo tale da avere più chiaro il funzionamento del programma dal punto di vista meramente pratico. Gli esempi di funzionamento, inoltre, vengono esportati in un formato compatibile sia con Flash CS3 che con Flash CS4. Per quanto riguarda l'esportazione della classe, invece, c'è da dire che è un qualcosa che utilizzeremo tutte le volte, in quanto questa classe che noi esportiamo verrà agganciata al progetto al quale stiamo lavorando, facendo da ponte tra l'applicazione e il debugger stesso.
Il menu View, invece, permette di gestire a livello visivo tutti i vari aspetti generici dell'interfaccia. Le prime voci di menu, infatti, serviranno a richiamare il focus su alcune proprietà, mentre le voci Show Proprerties e Show Methods saranno un modo alternativo di navigare nell'Inspector (la finestra laterale con tutte le informazioni, a destra). Vi saranno inoltre alcune voci legate al refresh di particolari sezioni. Per concludere, quindi, troveremo i comandi di pulizia nel caso volessimo fare un po' di ordine.
Arriva quindi il menù Window: a riguardo c'è ben poco da dire, dato che alla fine serve solo a decidere quali finestre e sezioni tenere su schermo e quali, invece, nascondere.
Il menu Help si dimostra utile: oltre ai canonici About e Product Website che non staremo qui a trattare, presenta dei collegamenti veloci alle Reference, Runtime Errors e Reference (iPhone) di Actionscript 3. Si sa, sono cose che possono sempre servire e che è utile tenere sotto mano in qualsiasi occasione.
Dopo questa doverosa e lunga introduzione occorre andare avanti, cercando di capire come funziona in pratica tutto il procedimento. Inutile dire che dobbiamo avere Adobe AIR installato per permettere l'esecuzione del Debugger.
Funzionamento del programma
Una volta installato e avviato il programma, come già detto precedentemente, dobbiamo esportare la classe da usare come collegamento. Anche in questo caso le cose sono molto semplici: basta un click sul menu File e uno su Export Client Class. A questo punto dovremo decidere il percorso di destinazione dei file da esportare e dare l'OK.
A quel punto dobbiamo tornare al nostro progetto e importare in esso la classe appena esportata. Qui di seguito riportiamo i codici (molto chiari) di due progetti d'esempio: uno in Flash e l'altro in Flex.
Progetto in Flash:
package {
import flash.display.Sprite;
import nl.demonsters.debugger.MonsterDebugger;
public class Main extends Sprite {
// Variable to hold the debugger
private var debugger:MonsterDebugger;
public function Main() {
// Init the debugger
debugger = new MonsterDebugger(this);
// Send a simple trace
MonsterDebugger.trace(this, "Hello World!")
}
}
}
Progetto in Flex:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
<mx:Script>
<![CDATA[
// Import the debugger
import nl.demonsters.debugger.MonsterDebugger;
// Variable to hold the debugger
private var debugger:MonsterDebugger;
private function onInit():void
{
// Init the debugger
debugger = new MonsterDebugger(this);
// Send a simple trace
MonsterDebugger.trace(this, "Hello World!");
}
]]>
</mx:Script>
</mx:Application>In entrambi gli esempi, gli sviluppatori hanno voluto integrare un esempio di tracing. Come se tutto non fosse abbastanza semplice già di suo, è opportuno sapere che non è necessaria neanche quell'istruzione, se vogliamo semplicemente entrare nella nostra applicazione ed esplorarla in lungo ed in largo.
Nell'esempio che segue si è utilizzato Flex Builder, nella sua versione 3, con un progetto Actionscript. Di seguito, il codice dell'unica classe inclusa nel progetto, nel file testProject1.as.
package {
import flash.display.Sprite;
import nl.demonsters.debugger.MonsterDebugger;
public class testProject1 extends Sprite
{
var i:int;
var debugger:MonsterDebugger;
public function testProject1()
{
debugger = new MonsterDebugger(this);
i = 0;
}
public function testFunction(x:int):int
{
if(x < 0)
{
return 0;
}
else return 1;
}
}
}
L'unica istruzione relativa al Debugger è la più semplice: l'inizializzazione. Una volta che viene eseguita questa istruzione e abbiamo il DeMonsterDebugger in esecuzione, viene automaticamente popolato con tutti i dati relativi al nostro progetto. Proprio facendo la prova con il codice esposto poco più sopra, subito la schermata del programma cambia.
Nella scheda Live Application possiamo esplorare, tramite un comodo sistema ad albero, tutti i metodi e le proprietà della nostra applicazione, suddivisi per oggetto. Nel caso non fosse sufficiente, possiamo comunque dividerli ulteriormente (metodi e proprietà) per visualizzarli nella scheda laterale, l'Inspector. Più in basso, ad occupare la fascia centrale, abbiamo la scheda Traces che in questo caso non mostra nulla, in quanto non abbiamo mandato nessun messaggio dal codice sorgente del nostro progetto. Infine troviamo, in fondo, la scheda Monitor, a mio avviso particolarmente utile per tutti quei progetti che caricano un po' di più l'hardware. Un gioco, ma anche un applicativo destinato all'ambiente ufficio: tutte tipologie che hanno bisogno di una buona ottimizzazione e quindi di un costante sguardo sulle performance e sul dispendio di risorse.
Nel codice sorgente dell'applicativo di prova, inoltre, è stato incluso un metodo piuttosto semplice: testFunction. Prende come argomento un intero ed esegue un veloce controllo: se maggiore di zero allora restituisce 1, altrimenti fa ritornare come risultato 0. Quale migliore esempio, per iniziare a comprendere la funzionalità di testing isolato dei metodi?
Diamo un'occhiata all'Inspector, dopo aver avviato il nostro progetto e quindi vedendo le informazioni nel debugger. Dalla scheda Live Application clicchiamo con il pulsante sinistro del mouse sulla prima voce, testProject1, come per selezionarla.
Automaticamente, l'Inspector a lato si riempirà con tutti i dati relativi al nostro progetto. Selezionando la scheda Show Methods cerchiamo, in fondo, il nostro metodo testFunction.
A questo punto basterà un semplice doppio click sul metodo, per aprire la finestra di testing dei metodi. Il DeMonsterDebugger capirà automaticamente quali sono gli argomenti del metodo, facendo in modo tale da creare dei moduli di input di conseguenza. Specificati gli argomenti, cliccate su Run per avviare il test. Nella sezione a lato troverete il valore di ritorno del vostro metodo. Come è possibile notare, l'uso di tutte le feature del programma è veramente semplice e veloce da apprendere. Con circa dieci minuti potete avere sotto controllo ogni singolo aspetto del programma al quale state lavorando.
Concludendo, si può dire che lo studio DeMonster ha svolto un lavoro eccellente, mettendolo tra l'altro a totale disposizione della community. Un tool veloce da trovare, scaricare ed interfacciare col proprio progetto (due istruzioni). Al momento in cui l'articolo viene scritto la versione attuale è la 2.5.1, ma già è stata annunciata una versione 3.0 che migliorerà ancora di più un prodotto già di per se ottimo.
