Flex 3: Creazione di un componente personalizzato - Parte 2
Dispatch di Eventi dal component al file principale
In questo esercizio sfruttiamo la tecnica del dispatch per notificare al file principale che una nuova
regione è stata selezionata nel component personalizzato.
Creeremo inoltre dei metodi getters (selectedId() e selectedRegion() utili per recupare i valori della
nuova selezione (id e nome regione).
Per svolgere l’esercizio potete modificare i files utilizzati nella prima parte oppure creare un nuovo progetto Flex. Sono inoltre disponibili i files sorgenti completi in allegato a questo articolo.
Di seguito il codice del componente (Views/RegioniComboBox.mxml)
con l’integrazione del dispatch().
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | <?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 il nuovo evento. --> <mx:Metadata> [Event(name="changeRegion", type="flash.events.Event")] </mx:Metadata> <mx:Script> <![CDATA[ // Label a sinistra [Bindable] public var labelValue:String; // Array delle regioni (ovvero il dataProvider del comboBox) [Bindable] private var dp:Array = new Array(); // L'ID della regione selezionata private var selectedIdValue:uint; // Il nome della regione selezionata private var selectedRegionValue:String; // Evento invocato ad ogni cambio regione private function changeEvt(event:Event):void { // L'ID della regione selezionata selectedIdValue = event.currentTarget.selectedItem.data; // Il Nome della regione selezionata selectedRegionValue = event.currentTarget.selectedItem.label; // Dispatch dell'evento changeRegion. // Avvertiamo il file principale che una nuova regione è stata selezionata dispatchEvent(new Event("changeRegion")); } // Metodo GetteR: Restituisce l'id della regione selezionata public function get selectedId():uint { return selectedIdValue; } // Metodo Getter: restituisce il nome della regione selezionata public function get selectedRegion():String { return selectedRegionValue; } // 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> |
Di seguito il codice del file principale (main.mxml):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <?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 mx.controls.Alert; // ALERT Popup con ID e il NOME della regione selezionata. private function outputRegione():void { // Per recupare il valore delle variabili sfruttiamo i metodi GETTERS // definiti all'interno del component Alert.show(String("ID: " + regioniCmb.selectedId + " - NOME: " + regioniCmb.selectedRegion), "Regione selezionata" , Alert.OK); } ]]> </mx:Script> <!-- L'evento 'changeRegion' viene invocato dal component ogni qualvolta viene selezionata una nuova regione --> <Views:RegioniComboBox id="regioniCmb" setRegione="Nord" labelValue="Seleziona: " changeRegion="outputRegione()" /> </mx:Application> |
Anche in questo caso, come è possibile notare dall’immagine seguente, la funzionalità del code hinting sarà molto utile per integrare agevolmente il nuovo evento all’interno del codice, evidenziando con un simbolo a forma di fulmine (anziché dei cerchi verdi) che si tratta di un evento e non di una proprietà di tipo public.
Leave your response!