Una particolare categoria di componenti presente in Flex è quella denominata Layout; scopo principale di questi componenti è separare i vari elementi dell'interfaccia della propria applicazione, andando a creare una struttura "a blocchi" e quindi facilmente adattabile e modificabile. I componenti della categoria Layout solitamente non risultano direttamente visibili nel filmato finale, ma servono come contenitori per altri elementi (bottoni, combobox, ecc) e ne consentono eventualmente particolari posizionamenti.
In questo articolo tratteremo il componente Control Bar, pensato per inserire dei controlli e opzioni all'interno dei pannelli, infatti il suo uso consigliato è quello all'interno di un componente Panel o di un componente TitleWindow. Questo componente permette di disporre verticalmente o orizzontalmente diversi elementi, allineandoli in vari modi in entrambe le direzioni.
Control Bar nella propria applicazione
Per prima cosa vediamo come sia possibile inserire un'istanza del componente Control Bar nel proprio file: i metodi principali sono due:
- trascinamento del componente (dal pannello Components, categoria Layout) sullo stage;
- creazione dell'istanza tramite Actionscript 3.
Control Bar dal pannello Components
Una Control Bar deve essere inserita all'interno di un componente Panel o TitleWindow, quindi trasciniamo un'istanza del componente Panel (anch'esso appartenente alla categoria Layout) sullo stage e poi posizioniamo al suo interno un'istanza del componente Control Bar: la control bar apparirà inizialmente vuota.
Ora all'interno della Control Bar sarà possibile trascinare diversi elementi, per esempio nella figura sottostante possiamo vedere come vengono disposti un bottone, una combobox e una checkbox; l'impostazione di default è per la disposizione in orizzontale degli elementi, vedremo in seguito come cambiarla.
Il codice MXML di questa struttura è molto semplice e come possiamo vedere è diviso in "blocchi": i tag relativi a bottone, combobox e checkbox sono figli del tag relativo alla Control Bar, che è a sua volta figlio del Panel.
Listato 1. Codice MXML della struttura
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel width="250" height="200" layout="absolute" title="Pannello">
<mx:ControlBar>
<mx:Button label="Button"/>
<mx:ComboBox width="73"></mx:ComboBox>
<mx:CheckBox label="Checkbox"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
Questa divisione ci permette di agire facilmente su un gruppo di elementi, infatti potremo cambiare la disposizione di pulsante, combobox e checkbox semplicemente agendo sulle proprietà del componente Control Bar.
Control Bar tramite Actionscript
Un'altra via per inserire nel nostro filmato un componente Control Bar è l'utilizzo di Actionscript: anche in questo caso è necessario creare un componente Panel o TitleWindow.
Supponiamo di voler ricreare la situazione vista nell'esempio precedente usando però solo Actionscript, dovremmo utilizzare un codice come il seguente:
Listato 2. Control Bar tramite ActionScript
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init()">
<mx:Script>
<![CDATA[
// importiamo i package per la creazione degli elementi
import mx.controls.ComboBox;
import mx.controls.CheckBox;
import mx.controls.Button;
import mx.controls.Text;
import mx.containers.ControlBar;
import mx.containers.Panel;
// impostiamo le variabili per gli elementi da creare
private var pannello:Panel;
private var chk:CheckBox;
private var cmb:ComboBox;
private var cBar:ControlBar;
private var btn:Button;
// dichiariamo la funzione
private function init():void {
// creiamo il bottone
btn = new Button();
btn.label = "Button";
// creiamo la checkbox
chk = new CheckBox();
// creiamo la combobox
cmb = new ComboBox();
cmb.width = 73
// creiamo la ControlBar
cBar = new ControlBar();
// inseriamo bottone, combobox e checkbox nella controlbar
cBar.addChild(btn);
cBar.addChild(cmb);
cBar.addChild(chk);
// Creiamo un'istanza del componente Panel
pannello = new Panel();
pannello.title = "Pannello";
pannello.width = 300;
pannello.height = 250;
// inseriamo la controlBar nell'istanza del componente Panel
pannello.addChild(cBar);
// aggiungiamo il componente Panel allo stage
addChild(pannello);
}
]]>
</mx:Script>
</mx:Application>
Come possiamo notare vengono importati alcuni package, fondamentali per poter creare dinamicamente tramite Actionscript i vari elementi, quindi vengono dichiarate le variabili che faranno da riferimento per le varie istanze che andremo a creare e nella funzione init (che viene richiamata una volta completato il caricamento dell'applicazione) abbiamo inserito il codice necessario per creare un bottone, una combobox e una checkbox, che andiamo a inserire all'interno di una ControlBar che è sua volta inserita all'interno di un Panel, ricreando quindi la stessa struttura creata trascinando i componenti sullo stage.
Lo svantaggio principale che abbiamo creando gli elementi con Actionscript è che sarà necessario testare ogni volta nel browser il risultato anche solo per vedere la disposizione grafica degli elementi, infatti, con il codice proposto sopra, lo stage della nostra applicazione risulterebbe completamente vuoto, mentre usando il trascinamento dei componenti potremo disporre molto più facilmente i vari elementi.
È quindi consigliabile posizionare gli elementi manualmente, usando il trascinamento sullo stage, e poi agire eventualmente sulle proprietà degli oggetti andando a modificare il codice MXML (specialmente qualora non fossero parametri impostabili dal pannello Properties).
Impostare la direzione degli elementi
La ControlBar permette principalmente di agire sulla direzione degli elementi (orizzontale o verticale) e sul loro allineamento. Per prima cosa vediamo come impostare la direzione e come questo parametro influisce sulla disposizione degli elementi.
La proprietà principale con cui variare il senso di disposizione degli elementi è direction, che può essere impostato su horizontal (valore di default) o vertical. Nell'esempio precedente abbiamo lasciato la proprietà di default, mentre cambiandola in vertical gli elementi si sarebbero disposti in questo modo:
La proprietà direction di una ControlBar si può impostare direttamente nel codice MXML, in questo modo:
Listato 3. Imposta la direction di una ControlBar
<mx:ControlBar direction="vertical">
<mx:Button label="Button"/>
<mx:ComboBox width="73"></mx:ComboBox>
<mx:CheckBox label="Checkbox"/>
</mx:ControlBar>
È anche possibile controllare questa proprietà tramite Actionscript, ad esempio potremmo far decidere all'utente se visualizzare la direzione orizzontale o quella verticale.
Cambio di direzione della ControlBar tramite click dell'utente
Possiamo notare come l'altezza complessiva del pannello non subisce variazioni, ma viene ridimensionata l'area utilizzata per i contenuti del pannello.
Il codice per l'esempio appena visto è molto semplice:
Listato 4. Permette il cambio di direction all'utente
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">
<mx:Script>
<![CDATA[
public function allinea(come:String):void{
if(come == "h"){
cbar.direction = "horizontal"
}else{
cbar.direction = "vertical"
}
}
]]>
</mx:Script>
<mx:Button label="Orizzontale" x="86" click="allinea('h')" y="10"/>
<mx:Button label="Verticale" x="186.5" click="allinea('v')" y="10"/>
<mx:Panel width="250" height="200" title="Pannello" verticalAlign="middle" x="86" y="54">
<mx:ControlBar id="cbar">
<mx:Button label="Button"/>
<mx:ComboBox width="73"></mx:ComboBox>
<mx:CheckBox label="Checkbox"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
Notiamo l'uso della proprietà id, fondamentale per controllare le proprietà di un oggetto tramite Actionscript, e il richiamo per i due bottoni alla funzione allinea, passando un parametro testuale per stabilire la direzione da dare alla ControlBar.
Impostare l'allineamento degli elementi
All'interno di una ControlBar è possibile impostare l'allineamento orizzontale e verticale degli elementi, indipendentemente dalla direzione utilizzata. È possibile assegnare i valori left, center e right (sinistra, centro e destra) per l'allineamento orizzontale e top, middle e bottom (alto, medio e basso) per l'allineamento verticale; le proprietà da utilizzare tramite MXML per impostare questi valori sono horizontalAlign e verticalAlign, ma è possibile impostarle anche dal pannello Properties.
Possiamo quindi decidere se impostare le proprietà dal pannello oppure operare direttamente sul codice, ad esempio così:
Listato 5. Allinea gli elementi direttamente dal codice
<mx:Panel width="369" height="256" title="Pannello" verticalAlign="middle" x="18" y="70">
<mx:ControlBar verticalAlign="top" horizontalAlign="center" height="174">
<mx:Button label="Button"/>
<mx:ComboBox width="73"></mx:ComboBox>
<mx:CheckBox label="Checkbox"/>
</mx:ControlBar>
</mx:Panel>
Perché si possano notare gli effetti di queste impostazioni la ControlBar dovrà essere più alta e/o più larga degli oggetti contenuti al suo interno, così da poter verificare l'effettivo spostamento in base alle impostazioni indicate.
Volendo è anche possibile cambiare l'allineamento verticale e orizzontale sfruttando Actionscript, in questo caso però dovremo usare il comando setStyle. Con il seguente codice possiamo creare un esempio che ci consentirà di controllare completamente sia l'allineamento che la direzione degli elementi all'interno della ControlBar:
Listato 6. Cambio dell'allineamento sfruttando ActionScript
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="350" applicationComplete="init()">
<mx:Script>
<![CDATA[
public function init():void{
opz1.addEventListener(MouseEvent.CLICK,posizionaH)
opz2.addEventListener(MouseEvent.CLICK,posizionaH)
opz3.addEventListener(MouseEvent.CLICK,posizionaH)
opz4.addEventListener(MouseEvent.CLICK,posizionaV)
opz5.addEventListener(MouseEvent.CLICK,posizionaV)
opz6.addEventListener(MouseEvent.CLICK,posizionaV)
}
public function allinea(come:String):void{
if(come == "h"){
cbar.direction = "horizontal"
}else{
cbar.direction = "vertical"
}
}
public function posizionaH(evt:Event):void{
cbar.setStyle("horizontalAlign",evt.target.label)
}
public function posizionaV(evt:Event):void{
cbar.setStyle("verticalAlign",evt.target.label)
}
]]>
</mx:Script>
<mx:Button label="Orizzontale" x="108.25" click="allinea('h')" y="10"/>
<mx:Button label="Verticale" x="208.75" click="allinea('v')" y="10"/>
<mx:Panel width="369" height="232" title="Pannello" verticalAlign="middle" x="18" y="94">
<mx:ControlBar id="cbar" verticalAlign="top" horizontalAlign="center" height="174">
<mx:Button label="Button"/>
<mx:ComboBox width="73"></mx:ComboBox>
<mx:CheckBox label="Checkbox"/>
</mx:ControlBar>
</mx:Panel>
<mx:Button x="86" y="40" label="left" id="opz1"/>
<mx:Button x="159" y="40" label="center" id="opz2"/>
<mx:Button x="241.5" y="40" label="right" id="opz3"/>
<mx:Button x="86" y="64" label="top" id="opz4"/>
<mx:Button x="159" y="64" label="middle" id="opz5"/>
<mx:Button x="233.5" y="64" label="bottom" id="opz6"/>
</mx:Application>
Notiamo come nelle funzioni posizionaH e posizionaV venga usato il comando setStyle per impostare le proprietà horizontalAlign e verticalAlign; il risultato del codice visto sopra è il seguente SWF:
Controllo dell'allineamento e della direzione degli elementi interni alla Controlbar
Notiamo come le distanze vengano calcolate automaticamente sia con la direzione orizzontale che con quella verticale, aspetto che ci permette di risparmiare molto tempo in quanto è il componente ad occuparsi automaticamente di calcolare lo spazio occupato dai vari elementi e la loro conseguente disposizione con il corretto allineamento.
