Flex 3: Creazione di un componente personalizzato - Parte 4
Conversione di un componente MXML in Actionscript 3.0
In questo esercizio convertiremo il codice MXML utilizzato in precedenza per realizzare
il componente in ActionScript 3.0.
Per procedere consiglio di duplicare il progetto realizzato finora e cancellare il file RegioniComboBox.mxml. In alternativa effettuate il download del codice allegato al tutorial.
Al posto del componente MXML creeremo quindi unclasse interamente in AS 3 che replicherà esattamente le funzionalità implementate nella parte 3 del tutorial. Per farlo, premere il tasto destro sulla cartella Views –> NEW –> New ActionScript Class e chiamate il file ‘RegioniComboBox.as’).
Il file principale (main.mxml) rimarrà invariato. Le istanze del componente verranno create come nei precedenti esercizi, anche se ora il componente sarà una classe Actionscript invece di
un file MXML.
E’ bene ricordare, infatti, che tuttò ciò che è scrivibile in linguaggio MXML può essere convertito in Actionscript 3.0, il quale permette una flessibilità maggiore e diventa spesso necessario in determinate circostanze.
Di seguito il codice completo della classe Actionscript del componente ‘RegioniComboBox’ commentato passo-passo:
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 | package Views { import Events.CustomEvent; import mx.containers.HBox; import mx.controls.ComboBox; import mx.controls.Label; import mx.events.ListEvent; [Event(name="changeRegion", type="Events.CustomEvent")] public class RegioniComboBox extends HBox { // Array delle regioni (ovvero il dataProvider del comboBox) [Bindable] private var dp:Array = new Array(); // Istanza componente Label private var lbl:Label = new Label() // Istanza componente Combobox private var cmb:ComboBox = new ComboBox() // Costruttore public function RegioniComboBox() { // Visualizziamo i componenti addChild(lbl) addChild(cmb) // Popoliamo il combobox sfruttando il dataProvider cmb.dataProvider = dp; // Visualizziamo il primo elemento del comboBox cmb.selectedIndex = 0; // Definiamo l'evento CHANGE per il combobox cmb.addEventListener(ListEvent.CHANGE, changeEvt) } // Evento invocato ad ogni cambio regione private function changeEvt(event:Event):void { // Dispatch dell'evento changeRegion. // Sfruttiamo la stessa classe 'CustomEvent' realizzata in precedenza var e:CustomEvent = new CustomEvent(event.currentTarget.selectedItem.data, event.currentTarget.selectedItem.label, "changeRegion"); this.dispatchEvent(e); } // Definiamo le regioni da visualizzare public function set setRegione(area:String):void { dp.push({label: "Regioni del " + area, data:null}) 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; } } // Metodo Setter: settiamo il valore del componente Label public function set setLabel(val:String):void { lbl.text = val; } } } |
Leave your response!