Flex 3: Creazione di un componente personalizzato – Parte 3
Dispatch di eventi con passaggio di parametri
Sfruttiamo nuovamente la tecnica del dispatch per notificare al file principale che una nuova
regione è stata selezionata dal component personalizzato ma questa volta, i valori della regione selezionata (ID e NOME), invece di essere recuperati utilizzando dei metodi getters, saranno passati direttamente come parametri dell’evento di cui effettuaiamo il dispatch.
Anche in questo caso potete riutilizzare e modificare i files creati in precedenza o scaricare lo Zip Allegato.
Il file principale (main.mxml) rimarrà invariato. Per verificare che l’esempio funziona in tutte le circostanze inseriamo però tre istanze del componente differenziandoli per area e label.
<?xml version="1.0" encoding="utf-8"?> <mx:Application layout="vertical" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:Views="Views.*" > <mx:Script> <![CDATA[ import Events.CustomEvent; import mx.controls.Alert; // Output dell'id e il nome della regione selezionata private function outputRegione(e:CustomEvent):void { Alert.show(String("ID: " + e.idx + " - NOME: " + e.name), "Regione selezionata" , Alert.OK); } ]]> </mx:Script> <views:RegioniComboBox setRegione="Nord" labelValue="NORD: " changeRegion="outputRegione(event)" /> <views:RegioniComboBox setRegione="Centro" labelValue="CENTRO: " changeRegion="outputRegione(event)" /> <views:RegioniComboBox setRegione="Centro" labelValue="SUD: " changeRegion="outputRegione(event)" /> </mx:Application>
Creiamo ora una nuova cartella ‘Events’ e inseriamo una nuova classe chiamata ‘CustomEvents’ (Tasto Destro –> New ActionScript Class)
Il metodo dispatchEvent usato in precedenza non permette infatti di passare parametri del momento del dispatch. Sarà perciò necessario estendere la classe ‘Event’ e creare un proprio metodo personalizzato che sopperisca questa “mancanza”.
Nel costruttore della nostra classe utilizzeremo il metodo super() per chiamare il costruttore
della superclasse, passando il pamaretro ‘type’, per definire il nome del nuovo evento.
Settiamo poi i valori dei parametri dell’evento (‘idx’ e ‘name’)
IL METODO clone() sovrascrive invece lo stesso metodo presente nella superclasse
e la sua unica funzione è quella di restituire una copia del nuovo evento
con le rispettive proprietà. E’ un’operazione indispensabile affinché l’evento funzioni.
Di seguito il codice completo del file ‘Events/CustomEvent.as’:
package Events { import flash.events.Event; public class CustomEvent extends Event { public var idx:uint; public var name:String; public function CustomEvent( _idx:uint, _name:String, _type:*):void { super(_type); this.idx = _idx; this.name = _name; } override public function clone():Event { return new CustomEvent(idx, name,type); } } }
Modifichiamo infine il componente RegioniComboBox.mxml affinché effettui il dispatch utilizzando il nostro nuovo evento personalizzato passando i parametri corretti.
<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"> <!-- Definiamo gli eventi di cui effettueremo il dispatch in questo component Questa operazione è indispensabile affinché il file principale possa gestire l'evento personalizzato. --> <mx:Metadata> [Event(name="changeRegion", type="Events.CustomEvent")] </mx:Metadata> <mx:Script> <![CDATA[ // Importiamo la classe dell'evento personalizzato import Events.CustomEvent; // Label a sinistra [Bindable] public var labelValue:String; // Array delle regioni (ovvero il dataProvider del comboBox) [Bindable] private var dp:Array = new Array(); // Evento invocato ad ogni cambio regione private function changeEvt(event:Event):void { // Creiamo un'istanza del nuovo evento 'changeRegion' // Avvertiamo il file principale che una nuova regione è stata selezionata, // ma questa volta passiamo dei parametri. // Tali parametri sono gestiti dalla classe CustomEvent, disponibile nella // cartella 'Events', il cui codice è commentato passo-passo. var e:CustomEvent = new CustomEvent(event.currentTarget.selectedItem.data, event.currentTarget.selectedItem.label, "changeRegion"); // Dispatch dell'evento this.dispatchEvent(e); } // Definiamo le regioni da visualizzare public function set setRegione(area:String):void { // PRIMA RIGA del COMBOBOX dp.push({label: "Regioni del " + area, data:null}) // ELENCO REGIONI // La variabile 'area' passato dal codice MXML serve a definire // le regioni da visualizzare nel combobox switch(area) { case "Nord": dp.push({label:"Friuli Venezia Giulia", data:"1"}); dp.push({label:"Veneto", data:"2"}); dp.push({label:"Trentino", data:"3"}); dp.push({label:"Lombardia", data:"4"}); dp.push({label:"Piemonte", data:"5"}); dp.push({label:"Valle d'aosta", data:"6"}); dp.push({label:"Liguria", data:"7"}); dp.push({label:"Emilia Romagna", data:"8"}); break; case "Centro": dp.push({label:"Toscana", data:"9"}); dp.push({label:"Umbria", data:"10"}); dp.push({label:"Marche", data:"11"}); dp.push({label:"Lazio", data:"12"}); dp.push({label:"Abruzzi", data:"13"}); break; case "Sud": dp.push({label:"Campania", data:"14"}); dp.push({label:"molise", data:"15"}); dp.push({label:"Puglia", data:"16"}); dp.push({label:"Basilicata", data:"17"}); dp.push({label:"Calabria", data:"18"}); dp.push({label:"Sicilia", data:"19"}); dp.push({label:"Sardegna", data:"20"}); break; } } ]]> </mx:Script> <mx:Label text="{labelValue}"/> <mx:ComboBox dataProvider="{dp}" change="changeEvt(event)" /> </mx:HBox>
