Nell'ambito dello sviluppo delle RIA, Flash sta offrendo sempre più ottimi strumenti di sviluppo. Molti programmatori, per esempio, conoscono il versatile DataGrid, componente realizzato per consentire una veloce rappresentazione dei dati su più colonne. Scelta ideale, quindi, per rappresentare con semplicità informazioni provenienti da una base di dati. Oltre ad un'indubbia efficienza sotto questo punto di vista, il controllo DataGrid ha sempre fornito anche delle buone possibilità di personalizzazione in termini di aspetto: massima flessibilità per quanto riguarda la rappresentazione (possibilità di nascondere una o più colonne, ordinamento automatizzato degli elementi) e personalizzazione dello stile degli headers (le intestazioni delle colonne). Senza parlare ovviamente della possibilità di paginazione tra gli elementi e così via.
Tuttavia, ad un certo punto dello sviluppo, è stato necessario fare un ulteriore passo avanti, nonostante le buone possibilità offerte dal componente. Questo passo successivo ha trovato la sua definizione nell'AdvancedDataGrid.
In figura 1 l'AdvancedDataGrid nel nostro ambiente di sviluppo, appena inserito. Qui di seguito, invece, il codice utilizzato.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:AdvancedDataGrid id="adg1" designViewDataType="tree" width="530" height="247" horizontalCenter="0" verticalCenter="0" fontFamily="Arial" fontWeight="normal" themeColor="#2A404E" textAlign="left" borderStyle="outset">
<mx:groupedColumns>
<mx:AdvancedDataGridColumn headerText="Colonna 1" dataField="col1"/>
<mx:AdvancedDataGridColumn headerText="Colonna 2" dataField="col2"/>
<mx:AdvancedDataGridColumn headerText="Colonna 3" dataField="col3"/>
<mx:AdvancedDataGridColumnGroup headerText="Colonna Madre 1">
<mx:AdvancedDataGridColumn headerText="Colonna Figlia 1" dataField="col4"/>
<mx:AdvancedDataGridColumn headerText="Colonna Figlia 2" dataField="col5"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</mx:Application>AdvancedDataGrid nasce da svariate esigenze: innanzitutto, la possibilità di ordinare i dati secondo più colonne come criterio. O ancora personalizzare, sotto il punto di vista “estetico”, sia le righe che le colonne, non limitandosi più alle sole intestazioni. Come se tutto questo non fosse sufficiente, AdvancedDataGrid presenta anche la possibilità di “raggruppare” i dati secondo una struttura ad albero, o gerarchica che dir si voglia. Inoltre, permette di raggruppare più “sotto-colonne” all'interno di una colonna principale. Utile magari a suddividere dati che appartengono ad una stesso ambito ma tenendo comunque tutto molto chiaro, senza sacrificare nessuna opportunità.
Per prima cosa occorre parlare della personalizzazione del controllo. Non solo è possibile modificare a proprio piacimento lo stile del componente, ma con l'ambiente di sviluppo Adobe il tutto è ancora più semplice del previsto. Una volta creato il controllo, infatti, cliccando su di esso con il pulsante sinistro del mouse viene mostrata, al lato destro dello schermo, una scheda dalla quale si può accedere alle varie opzioni di personalizzazione. Precisamente, le schede sono tre: Common, Style e Layout.
La scheda Common raggruppa tutte quelle impostazioni e valori comuni, appunto. Stiamo parlando di sorgente dei dati, larghezza di default delle colonne, tipologia di selezione da usare nel controllo e ovviamente l'Enable, da impostare su True o False, più gli event handler del caso (figura 2).
Style gestisce tutto quello che riguarda la personalizzazione del componente. Font da utilizzare, dimensione del font stesso e stile (grassetto, corsivo o sottolineato), fino ad arrivare alla completa customizzazione dei bordi (stile, larghezza, colore, tipologia), passando ovviamente per le impostazioni relative ai canali alpha (trasparenza) delle varie parti del componente. Piccola nota: sono contemplati anche i bordi arrotondati, impostati tramite la voce Corner Radius (raggio dell'angolo). Per i più esigenti, nel caso tutto questo non fosse sufficiente, è possibile selezionare un file CSS esterno da utilizzare come riferimento per le impostazioni stilistiche del controllo (si parla del pulsante Convert to CSS... in alto (figura 3).
Infine, la scheda Layout. Attraverso essa è possibile scegliere, in maniera piuttosto veloce, tutte le preferenze relative alla posizione del controllo nello spazio in cui operiamo. Allineamento verticale, orizzontale e così via. Oltre questo possiamo anche decidere larghezza e altezza.
L'altro aspetto importantissimo di questo controllo è la gestione della rappresentazione: si parla delle colonne raggruppate e la cosiddetta rappresentazione gerarchica dei contenuti (figura 4).
Creare dei raggruppamenti di colonne è veramente semplice, qui di seguito un listato con tutti i tag da usare.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var dati_prova:ArrayCollection = new ArrayCollection([
{Regione:"Zona1", Nazione:"Italia",
Utente:"Utente 1", Vendite: 200},
{Regione:"Zona1", Nazione:"Germania",
Utente:"Utente 1", Vendite: 300},
{Regione:"Zona1", Nazione:"Francia",
Utente:"Utente 1", Vendite: 400},
{Regione:"Zona1", Nazione:"Portogallo",
Utente:"Utente 1", Vendite: 450},
{Regione:"Zona1", Nazione:"Spagna",
Utente:"Utente 1", Vendite: 120},
{Regione:"Zona1", Nazione:"Inghilterra",
Utente:"Utente 1", Vendite: 220},
{Regione:"Zona1", Nazione:"Irlanda",
Utente:"Utente 1", Vendite: 345},
{Regione:"Zona1", Nazione:"Belgio",
Utente:"Utente 1", Vendite: 780}
]);
]]>
</mx:Script>
<mx:AdvancedDataGrid id="adg1" designViewDataType="flat" width="530" height="247" horizontalCenter="0" verticalCenter="0" fontFamily="Arial" fontWeight="normal" themeColor="#2A404E" textAlign="left" borderStyle="outset" initialize="gruppo.refresh();">
<mx:dataProvider>
<mx:GroupingCollection id="gruppo" source="{dati_prova}">
<mx:Grouping>
<mx:GroupingField name="Regione" />
<mx:GroupingField name="Nazione" />
</mx:Grouping>
</mx:GroupingCollection>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Regione"/>
<mx:AdvancedDataGridColumn dataField="Nazione"/>
<mx:AdvancedDataGridColumn dataField="Utente"/>
<mx:AdvancedDataGridColumn dataField="Vendite"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>Subito salta all'occhio l'insieme dei tag chiave utilizzati. <mx:AdvancedDataGrid> indica il componente. <mx:groupedColumns> segna invece l'inizio del primo raggruppamento di colonne. Successivamente troviamo quindi <mx:AdvancedDataGridColumn /> che identifica una colonna del raggruppamento. L'attributo headerText serve a definire il titolo da visualizzare per quella colonna. Ed ecco che incontriamo il raggruppamento di secondo livello: il tag <mx:AdvancedDataGridColumnGroup>, che ovviamente presenta anche l'attributo headerText. All'interno dell'AdvancedDataGridColumnGroup, quindi, vengono utilizzati altri tag AdvancedDataGridColumn, per denotare le colonne “figlie” di quella più grande, generalmente chiamata “madre”. Il risultato del codice presentato nel listato precedente lo potete osservare qui di seguito (figura 5).
Ovviamente è possibile creare più di un raggruppamento di questo tipo, Flash non mette limiti. È inoltre possibile creare raggruppamenti su più di due livelli, arrivando tranquillamente a coprire tutte le necessità che si possono presentare. Tramite il controllo AdvancedDataGrid, inoltre, è possibile scambiare a run-time la posizione delle colonne, semplicemente trascinando orizzontalmente le colonne nella posizione desiderata con il mouse. Nel caso le colonne che vogliamo spostare facciano parte di un raggruppamento, allora sarà possibile spostarle solo all'interno del raggruppamento di appartenenza.
Infine bisogna trattare la rappresentazione gerarchica dei dati, feature che sicuramente avrà attirato l'attenzione di tanti sviluppatori dato il livello che fa raggiungere all'AdvancedDataGrid, con tutte le varie innovazioni implementate. Per capire come impostare il componente, bisogna sapere prima di tutto che ad essere ben strutturati devono essere i dati di partenza: un esempio molto comune nell'uso di questa feature del componente è infatti la struttura dei dati già “ad albero”, in modo tale che una volta caricati nel componente l'interpretazione sia automatica.
Successivamente, una volta entrati in ambiente di sviluppo, bisognerà aggiungere il codice adatto al nostro componente. Eccolo qui:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.GroupingField;
import mx.collections.Grouping;
import mx.collections.GroupingCollection;
import mx.collections.ArrayCollection;
private var dati_prova:ArrayCollection = new ArrayCollection([
{Regione:"Zona1", Nazione:"Italia",
Utente:"Utente 1", Vendite: 200},
{Regione:"Zona1", Nazione:"Germania",
Utente:"Utente 1", Vendite: 300},
{Regione:"Zona1", Nazione:"Francia",
Utente:"Utente 1", Vendite: 400},
{Regione:"Zona1", Nazione:"Portogallo",
Utente:"Utente 1", Vendite: 450},
{Regione:"Zona1", Nazione:"Spagna",
Utente:"Utente 1", Vendite: 120},
{Regione:"Zona1", Nazione:"Inghilterra",
Utente:"Utente 1", Vendite: 220},
{Regione:"Zona1", Nazione:"Irlanda",
Utente:"Utente 1", Vendite: 345},
{Regione:"Zona1", Nazione:"Belgio",
Utente:"Utente 1", Vendite: 780}
]);
public var coll1:GroupingCollection = new GroupingCollection();
private var group1:Grouping = new Grouping();
private function initDG():void {
coll1.source = dati_prova;
group1.fields = [new GroupingField("Regione"), new GroupingField("Nazione")];
coll1.grouping = group1;
adg1.dataProvider = coll1;
coll1.refresh();
}
]]>
</mx:Script>
<mx:AdvancedDataGrid id="adg1" designViewDataType="flat" width="530" height="247" horizontalCenter="0" verticalCenter="0" fontFamily="Arial" fontWeight="normal" themeColor="#2A404E" textAlign="left" borderStyle="outset" creationComplete="initDG();" >
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Regione"/>
<mx:AdvancedDataGridColumn dataField="Nazione"/>
<mx:AdvancedDataGridColumn dataField="Utente"/>
<mx:AdvancedDataGridColumn dataField="Vendite"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>Rispetto all'esempio precedente le cose sono un po' cambiate. Innanzitutto osservate la struttura dei dati: abbiamo memorizzato alcune informazioni d'esempio in un ArrayCollection, rispecchiandoci con la struttura finale che vogliamo ottenere. Una volta creata la collezione di array possiamo passare al codice vero e proprio. Proprio come prima, ogni colonna della tabella corrisponde ad un tag AdvancedDataGridColumn. La vera differenza sta nelle istruzioni immediatamente precedenti: si può notare infatti la presenza di nuovi tag. Per primo troviamo dataProvider che rappresenta la fonte dei dati. Al suo interno quindi vi è GroupingCollection, che a sua volta contiene il tag Grouping. All'interno del tag Grouping basteranno inserire i tag da “annidare” e il gioco è fatto. Nell'esempio qui riportato i due campi interessati sono Regione e Nazione.
La presenza di un tag GroupingCollection è importante, in quanto permette di effettuare più raggruppamenti gerarchici in base alle proprie necessità, a testimonianza dell'ottima flessibilità e resa del componente. Il risultato di tutto questo procedimento è il seguente:
In fase di scrittura del codice non bisogna assolutamente scordarsi di richiamare il metodo GroupingCollection.refresh() dall'attributo initialize del tag AdvancedDataGrid principale. Nel caso il programmatore si scordi questo passo allora le preferenze di annidamento degli elementi non saranno prese in considerazione.
Nonostante il discorso fatto finora, qualcuno potrebbe chiedersi: "E se volessi decidere i raggruppamenti tramite Actionscript, a run-time?". Non c'è nessun problema, basta utilizzare i metodi giusti. Ecco quindi come modifichiamo il nostro codice, ottenendo lo stesso identico risultato dell'esempio precedente.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.GroupingField;
import mx.collections.Grouping;
import mx.collections.GroupingCollection;
import mx.collections.ArrayCollection;
private var dati_prova:ArrayCollection = new ArrayCollection([
{Regione:"Zona1", Nazione:"Italia",
Utente:"Utente 1", Vendite: 200},
{Regione:"Zona1", Nazione:"Germania",
Utente:"Utente 1", Vendite: 300},
{Regione:"Zona1", Nazione:"Francia",
Utente:"Utente 1", Vendite: 400},
{Regione:"Zona1", Nazione:"Portogallo",
Utente:"Utente 1", Vendite: 450},
{Regione:"Zona1", Nazione:"Spagna",
Utente:"Utente 1", Vendite: 120},
{Regione:"Zona1", Nazione:"Inghilterra",
Utente:"Utente 1", Vendite: 220},
{Regione:"Zona1", Nazione:"Irlanda",
Utente:"Utente 1", Vendite: 345},
{Regione:"Zona1", Nazione:"Belgio",
Utente:"Utente 1", Vendite: 780}
]);
public var coll1:GroupingCollection = new GroupingCollection();
private var group1:Grouping = new Grouping();
private function initDG():void {
coll1.source = dati_prova;
group1.fields = [new GroupingField("Regione"), new GroupingField("Nazione")];
coll1.grouping = group1;
adg1.dataProvider = coll1;
coll1.refresh();
}
]]>
</mx:Script>
<mx:AdvancedDataGrid id="adg1" designViewDataType="flat" width="530" height="247" horizontalCenter="0" verticalCenter="0" fontFamily="Arial" fontWeight="normal" themeColor="#2A404E" textAlign="left" borderStyle="outset" creationComplete="initDG();" >
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Regione"/>
<mx:AdvancedDataGridColumn dataField="Nazione"/>
<mx:AdvancedDataGridColumn dataField="Utente"/>
<mx:AdvancedDataGridColumn dataField="Vendite"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>Qui le modifiche sono fatte via Actionscript, alleggerendo quindi la struttura dei tag in maniera significativa. Le istruzioni sono molto semplici: creiamo un oggetto per rappresentare la collezione di raggruppamenti, un altro per rappresentare il raggruppamento stesso (rispettivamente coll1 e group1) e usiamo il riferimento dell'AdvancedDataGrid per richiamarlo dal codice (nel nostro caso è adg1).
Per prima cosa determiniamo la sorgente dei dati, memorizzata in coll1.source. Dopo aver definito la fonte dei dati provvediamo a scrivere le regole per il raggruppamento: questo avviene grazie alle istruzioni fornite a group1.fields. Una volta fornite le istruzioni non si deve fare altro che un lavoro di assegnamento (coll1.grouping = group1 e quindi adg1.dataProvider = coll1;) per terminare la procedura con un richiamo del metodo di refresh della collezione interessata (coll1.refresh();).
Sono disponibili per il download due demo che sfruttano la potenza di questo componente.
Abbiamo visto quindi quali sono le funzionalità principali di questo componente: è uno strumento senza dubbio utile e che da allo sviluppatore una buona libertà di movimento, oltre che di personalizzazione. Alla prossima!
