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
Il menu View Show Proprerties Show Methods
Arriva quindi il menù Window
Il menu Help
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:
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
Nella scheda Live Application Inspector Traces Monitor
Nel codice sorgente dell'applicativo di prova, inoltre, è stato incluso un metodo piuttosto semplice: testFunction
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.
