Il componente Accordion può essere definito come un "contenitore" in grado di mostrare alternativamente determinati contenuti; questo componente è stato introdotto in Flash 8 ed è stato poi inserito anche in Flex, dove è disponibile nelle versioni 2 e 3.
In questo articolo vedremo come sfruttare questo componente in Flex 3, analizzando quali oggetti questo componente possa contenere al suo interno e in quali situazioni si possa rivelare particolarmente utile.
Posizionare il componente
Per prima cosa creiamo un nuovo progetto (File -> New -> Flex Project), quindi portiamoci nella visuale Design e apriamo la categoria Navigators del pannello Components: il primo componente della lista è il componente Accordion.
Selezioniamo il componente e trasciniamone un'istanza nell'area di lavoro: il componente apparirà inizialmente con una sola sezione, con nome Accordion Pane 1. Possiamo notare che quando selezioniamo il componente, sopra di esso appaiono i simboli + e - : questi ci permettono di aggiungere o rimuovere sezioni dal componente.
Selezionando la sezione Accordion Pane 1, dal pannello Proprietà sarà possibile cambiarne l'etichetta; dallo stesso pannello possiamo notare che la sezione principale dell'Accordion è di tipo mx:Canvas.
Aggiunta e rimozione di sezioni
Come abbiamo visto, il componente Accordion, quando selezionato, mostra i segni + e -, che consentono l'aggiunta e la rimozione di una o più sezioni all'interno del componente: ogni sezione verrà visualizzata singolarmente, mentre le altre risulteranno "chiuse" e sarà visibile solamente la loro etichetta.
Per aggiungere una sezione al componente Accordion sarà sufficiente selezionarlo e cliccare sul pulsante "+": apparirà il pannello visibile in figura, dove potremo indificare l'etichetta della nuova sezione e il tipo di contenitore, che può essere un Canvas (opzione di default) o uno dei molteplici tipi di contenitore offerti da Flex, tra cui Form, Panel, Tile, TitleWindow e altri ancora. Il tipo di contenitore scelto influenzerà l'aspetto visivo della sezione creata nel componente.
Prestiamo attenzione alla sezione attualmente selezionata prima di aggiungerne una nuova: quest'ultima, infatti, verrà aggiunta immediatamente sotto a quella selezionata; sarà comunque possibile modificare l'ordine delle sezioni tramite codice (ma non tramite la modalità design).
In figura è possibile vedere un Accordion con al suo interno 4 sezioni: come vediamo Sezione 3 risulta aperta, mentre le altre sono ridotte solo all'etichetta.
Possiamo facilmente intuire che per rimuovere una sezione basterà selezionare la sua etichetta e quindi premere il bottone "-": le sezioni precedenti quella eliminata rimarranno invariate, mentre quelle successive scaleranno di una posizione.
Inserire e modificare contenuti in una sezione
La modifica di ogni sezione del componente Accordion è molto semplice: nella modalità Design basta un click sul titolo della sezione per poterla visualizzare e modificare. La disposizione e l'aspetto degli elementi può variare in base al tipo di contenitore scelto quando è stata creata la sezione, per esempio se il contenitore è di tipo Form, quando aggiungiamo un elemento gli verrà associata automaticamente una label.
In modalità design è possibile inserire gli elementi semplicemente trascinandoli all'interno della sezione aperta sullo stage, in alternativa si può agire tramite codice (modalità Source), ecco come appare, per esempio, il codice di un componente Accordion con al suo interno alcune sezioni popolate da diversi componenti:
Listato 1. Esempio codice di un componente Accordion
<mx:Accordion x="72" y="72" selectedIndex="1" resizeToContent="true" width="200" height="300">
//Prima sezione
<mx:Canvas label="Etichetta sezione 1">
<mx:HSlider x="3.5" y="4"/>
</mx:Canvas>
//Seconda sezione
<mx:Form label="Form" width="100%" height="100%">
<mx:FormItem label="Label">
<mx:Button label="Button"/>
</mx:FormItem>
<mx:FormItem label="Label">
<mx:ComboBox></mx:ComboBox>
</mx:FormItem>
</mx:Form>
//Terza sezione
<mx:Canvas label="Sezione " width="100%" height="100%">
<mx:Panel x="3" y="8" width="250" height="200" layout="absolute" title="Pannello">
</mx:Panel>
</mx:Canvas>
//Quarta sezione
<mx:Canvas label="Sezione 2" width="100%" height="100%">
<mx:DataGrid x="10" y="10" width="357">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
</mx:Accordion>
Come possiamo vedere, ogni sezione ha il suo "blocco" di codice MXML e all'interno di ogni blocco di codice vi sono i tag per i componenti di ogni sezione: possiamo facilmente aggiungere, modificare o rimuovere elementi e sezioni agendo sui rispettivi tag.
Impostare la sezione aperta
Testando il filmato possiamo notare come per impostazione predefinita il componente Accordion apra la prima sezione.
Esempio di funzionamento del componente Accordion
Supponiamo di voler aprire un'altra sezione: sarà necessario usare la proprieta selectedIndex. Questa proprietà permette di aprire una sezione a scelta tra quelle presenti nel componente Accordion; la proprietà selectedIndex richiede un valore numerico: 0 corrisponde alla prima sezione, 1 alla seconda sezione, 2 alla terza e così via. Qualora impostassimo un valore superiore al numero di sezioni presenti nel componente, verrà aperta l'ultima sezione disponibile.
Possiamo impostare il selectedIndex dalla modalità Source, modificando il codice relativo al componente in questo modo:
<mx:Accordion x="72" y="72" width="200" height="300" selectedIndex="2">
<mx:Canvas label="Etichetta sezione 1">
<mx:HSlider x="3.5" y="4"/>
</mx:Canvas>
<mx:Form label="Form" width="100%" height="100%">
<mx:FormItem label="Label">
<mx:Button label="Button"/>
</mx:FormItem>
<mx:FormItem label="Label">
<mx:ComboBox></mx:ComboBox>
</mx:FormItem>
</mx:Form>
<mx:Canvas label="Sezione " width="100%" height="100%">
<mx:Panel x="3" y="8" width="250" height="200" layout="absolute" title="Pannello">
</mx:Panel>
</mx:Canvas>
<mx:Canvas label="Sezione 2" width="100%" height="100%">
<mx:DataGrid x="10" y="10" width="357">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
</mx:Accordion>
Ecco il risultato:
Esempio di funzionamento del componente Accordion con aperta di default la terza sezione
La proprietà selectedIndex può anche essere controllata da altri componenti, per esempio potremmo impostare dei pulsanti che aprano una determinata sezione del componente Accordion. Altra caratteristica molto utile è la possibilità di leggere la proprietà selectedIndex, così da sapere in ogni momento quale sezione è mostrata nel componente: con il codice proposto di seguito creiamo due pulsanti esterni al componente Accordion che permetteranno di aprire le sezioni "Sezione" o "Sezione 2" e un componente Label dove mostreremo, ad ogni cambio di sezione, il valore della proprietà selectedIndex.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="334" height="488">
<mx:Script>
<![CDATA[
public function quale():void{
lbl.text = String(accord.selectedIndex)
}
public function apri(chi:int):void{
accord.selectedIndex = chi
quale()
}
]]>
</mx:Script>
<mx:Accordion id="accord" x="72" y="72" width="200" height="300" selectedIndex="2" change="quale()">
<mx:Canvas label="Etichetta sezione 1">
<mx:HSlider x="3.5" y="4"/>
</mx:Canvas>
<mx:Form label="Form" width="100%" height="100%">
<mx:FormItem label="Label">
<mx:Button label="Button"/>
</mx:FormItem>
<mx:FormItem label="Label">
<mx:ComboBox></mx:ComboBox>
</mx:FormItem>
</mx:Form>
<mx:Canvas label="Sezione " width="100%" height="100%">
<mx:Panel x="3" y="8" width="250" height="200" layout="absolute" title="Pannello">
</mx:Panel>
</mx:Canvas>
<mx:Canvas label="Sezione 2" width="100%" height="100%">
<mx:DataGrid x="10" y="10" width="357">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
</mx:Accordion>
<mx:Button x="63" y="393" label="Apri Sezione" click="apri(2)" />
<mx:Button x="177" y="393" label="Apri Sezione 2" click="apri(3)" />
<mx:Label id="lbl" x="50" y="437" text="Label" width="234" textAlign="center"/>
</mx:Application>
Il risultato sarà quello visibile di seguito:
Uso della proprietà selectedIndex per controllare il componente con elementi esterni e conoscere la sezione aperta
Rendere il componente auto-ridimensionante
Una caratteristica molto utile del componente Accordion è la possibilità di ridimensionarlo in base alla sezione aperta, così da non avere delle sezioni magari molto ampie con pochi contenuti o, viceversa, non trovarsi con elementi che richiedano uno scrolling esagerato. Prendiamo l'esempio visto poco fa: Sezione 2 contiene un componente DataGrid che risulta più largo dell'Accordion, richiedendo quindi lo scroll orizzontale, mentre Sezione contiene un Panel e richiede scroll orizzontale e verticale. Per mostrare interamente queste sezioni è possibile sfruttare la proprietà resizeToContent, abbinandola alla rimozione delle proprietà width e height del componente. Ecco il codice:
<mx:Accordion id="accord" x="10" y="44" resizeToContent="true" selectedIndex="2">
<mx:Canvas label="Etichetta sezione 1">
<mx:HSlider x="3.5" y="4"/>
</mx:Canvas>
<mx:Form label="Form" width="100%" height="100%">
<mx:FormItem label="Label">
<mx:Button label="Button"/>
</mx:FormItem>
<mx:FormItem label="Label">
<mx:ComboBox></mx:ComboBox>
</mx:FormItem>
</mx:Form>
<mx:Canvas label="Sezione " width="100%" height="100%">
<mx:Panel x="3" y="8" width="250" height="200" layout="absolute" title="Pannello">
</mx:Panel>
</mx:Canvas>
<mx:Canvas label="Sezione 2" width="100%" height="100%">
<mx:DataGrid x="10" y="10" width="293">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
</mx:Accordion>
Ed ecco il risultato: notiamo come l'Accordion cambi altezza e larghezza in base alla sezione attualmente aperta.
Uso della proprietà resizeToContent per il ridimensionamento automatico del componente
Nell'esempio abbiamo fatto variare sia la larghezza che l'altezza: è anche possibile mantenere fissa una di queste due proprietà (mantenendo variabile l'altra) impostandone il relativo parametro: per esempio se associamo al componente la larghezza 350 (e nessuna altezza) il ridimensionamento automatico avverrà solo in l'altezza, viceversa assegnando un'altezza di 400 (e nessuna larghezza) il ridimensionamento automatico avverrà solo in larghezza.
Annidare più componenti Accordion
Abbiamo visto che ogni "sezione" del componente Accordion può contenere diversi componenti ed elementi: un aspetto interessante è il fatto che ogni sezione possa contenere a sua volta dei componenti Accordion, dando quindi la possibilità di creare strutture di navigazione si più livelli.
Nell'esempio seguente è possibile vedere (all'interno di Sezione 2) un componente Accordion, contenente a sua volta un altro Accordion nella sezione Accordion Pane 1.
Esempio di componenti Accordion annidati
