FLEX 3: creazione di un componente personalizzato - Parte 1
Passare variabili e creare metodi setter personalizzati
In questo esercizio creeremo un componente personalizzato in MXML e dimostreremo come sia possibile passargli variabili, creare metodi setters e getters ed effettuare il dispatch (anche con parametri) di eventi personalizzati. Infine, realizzeremo lo stesso componente completamente in ActionScript 3.0, evitando l’ausilio dell’MXML.
Tralasceremo infatti le basi e in questo primo esercizio focalizzeremo l’attenzione sulla creazione di metodi personalizzati e sul passaggio di variabili dal file principale al componente, in modo da differenziarne l’output a seconda dei valori che andremo ad inserire nel momento in cui creeremo le varie istanze MXML.
Il componente che creeremo, probabilmente poco utile nella realtà ma efficace per comprendere le funzionalità che andremo a spiegare, avrà lo scopo di visualizzazione in un comboBox le regioni di Italia a seconda dell’area geografica (Nord, Centro e SUD) definita nel momento in cui si istanzia il prodotto e supportata da un metodo setter ’setRegione()’ creato all’interno del componente.
Creeremo inoltre una variabile, ‘labelValue’, che servirà a personalizzare il contenuto della Label situata accanto al comboBox.
Il risultato finale:
Innanzitutto create un nuovo progetto Flex, il cui nome è indifferente.
All’interno della cartella ‘src’, create una nuova cartella chiamata ‘Views’. In questa cartella posizioneremo il file MXML del nuovo componente che sarà creato cliccando il pulsante destro sulla cartella Views e selezionando NEW -> MXML Component.(vedi immagine seguente)
Affinché gli script funzionino correttamente è invece necessario che il nome del componente sia ‘RegioniComboBox’, che dovrà essere impostato su HBOX (vedi immagine seguente)
Di seguito trovate il codice completo del componente, commentato passo-passo (Views/RegioniComboBox.mxml):
<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ // Contenuto della Label posizionata a sinistra del ComboBox [Bindable] public var labelValue:String; // Array delle regioni (ovvero il dataProvider del comboBox) // Sarà popolato nel metodo setRegione() [Bindable] private var dp:Array = new Array(); // Definiamo le regioni da visualizzare public function set setRegione(area:String):void { // Se l'area non è definita possiamo bloccare lo script if(area == "" ) return; // PRIMA RIGA di default del COMBOBOX dp.push({label: "Regioni del " + area, data:null}) // ELENCO REGIONI // La variabile 'area' passato dal codice MXML definisce // 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> <!-- Label descrittiva posizionata a sinistra del combobox --> <mx:Label text="{labelValue}"/> <!-- ComboBox delle regioni: verrà popolato assegnando i valori al dataProvider nel metodo setRegione()--> <mx:ComboBox dataProvider="{dp}" /> </mx:HBox>
TIP: il metatag BINDABLE:
una proprietà definita ‘Bindable’ fa in modo che il componente a cui è abbinata aggiorni automaticamente il contenuto non appena il valore della variabile cambia.
Di seguito il codice per istanziare il componente, definito nel file principale dell’applicazione ‘main.mxml’. Da notare l’utilità della funzionalità code hint gestita da Eclipse per la che velocizza notevolmente lo sviluppatore nel processo di scrittura del codice.
(main.mxml)
<?xml version="1.0" encoding="utf-8"?> <mx:Application layout="vertical" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:Views="Views.*" > <Views:RegioniComboBox setRegione="Nord" labelValue="Seleziona: "/> <Views:RegioniComboBox setRegione="Centro" labelValue="Seleziona una regione:"/> <Views:RegioniComboBox setRegione="Sud" labelValue="-->"/> <Views:RegioniComboBox /> </mx:Application>
Nel tutorial seguente vedremo come effettuare il processo inverso, ovvero passare variabili dal componente al file principale, attraverso la tecnica del Dispatch.
