RadioButton - componente di Flash CS3

[Flep]

Buongiorno a tutti !
Un altro articolo che riguarda la serie dei componenti built-in ( cioè già esistenti ) di Flash CS3.

Dopo aver visto il ComboBox o il DataGrid , questa volta è tempo di dare un' occhita al RadioButton.
Nell' esempio seguente, vedremo come sviluppare una semplice aplicazione che ' interroga ' l' utente.
Potrebbe essere un buon punto di partenza per creare un sondaggio o delle statistiche, oppure semplicemente per implementare delle opzioni in una form registrazione o altro...

Vediamo l' esempio...*

Creo un FLA che salvo con nome ' main.fla '.
Al suo interno trascino un componente RadioButton dal pannello Componenti alla libreria.

Creo la Document Class di main.fla, un file AS che salvo cone nome ' Main.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	import flash.text.TextField;
	import fl.controls.RadioButton;
	import fl.controls.RadioButtonGroup;
	import flash.events.MouseEvent;
	
	public class Main extends MovieClip
	{
		var job:RadioButtonGroup=new RadioButtonGroup('My job');
		var age:RadioButtonGroup=new RadioButtonGroup('My age');
		var sex:RadioButtonGroup=new RadioButtonGroup('My sex');
		
		private var result_txt:TextField;
		
		private var first_step:int=3;
		private var second_step:int=6;
		private var third_step:int=4;
		
		private var job_result:String;
		private var age_result:String;
		private var sex_result:String;
		
		public function Main()
		{
			firstStep();
			secondStep();
			thirdStep();
			createTextResult();
			initResult();
		}
		
		private function firstStep():void
		{
			var field:TextField=new TextField();
			field.text=job.name;
			field.x=30;
			field.y=30;
			addChild(field);
			
			for(var i:int=0;i < first_step;i++)
			{
				var rb:RadioButton=new RadioButton();
				rb.move(field.x,field.y*2+30*i);
				addChild(rb);
				
				rb.group=job;
				
				if(!i)
					rb.label='Developer';
				if(i==1)
				{
					rb.label='Designer';
					rb.selected=true;
				}
				if(i==2)
					rb.label='SEO';
					
				rb.addEventListener(MouseEvent.CLICK,reportResult);
			}
		}
		
		private function secondStep():void
		{
			var field:TextField=new TextField();
			field.text=age.name;
			field.x=150;
			field.y=30;
			addChild(field);
			
			for(var i:int=0;i < second_step;i++)
			{
				var rb:RadioButton=new RadioButton();
				rb.move(field.x,field.y*2+30*i);
				addChild(rb);
				
				rb.group=age;
				
				if(!i)
					rb.label='18-30';
				if(i==1)
					rb.label='30-40';
				if(i==2)
					rb.label='40-50';
				if(i==3)
					rb.label='50-60';
				if(i==4)
					rb.label='60-70';
				if(i==5)
				{
					rb.label='Foot in coffin';
					rb.selected=true;
				}
					
				rb.addEventListener(MouseEvent.CLICK,reportResult);
			}
		}
		
		private function thirdStep():void
		{
			var field:TextField=new TextField();
			field.text=sex.name;
			field.x=270;
			field.y=30;
			addChild(field);
			
			for(var i:int=0;i < third_step;i++)
			{
				var rb:RadioButton=new RadioButton();
				rb.move(field.x,field.y*2+30*i);
				addChild(rb);
				
				rb.group=sex;
				
				if(!i)
					rb.label='male';
				if(i==1)
					rb.label='female';
				if(i==2)
					rb.label='shemale';
				if(i==3)
				{
					rb.label='bOh';
					rb.selected=true;
				}
					
				rb.addEventListener(MouseEvent.CLICK,reportResult);
			}
		}
		
		private function createTextResult():void
		{
			result_txt=new TextField();
			result_txt.width=200;
			result_txt.x=stage.stageWidth-result_txt.width;
			result_txt.y=30;
			result_txt.textColor=0x0066FF;
			addChild(result_txt);
		}
		
		private function reportResult(evt:MouseEvent):void
		{
			switch(evt.target.group)
			{
				case job:
				job_result=evt.target.label;
				break;
				
				case age:
				age_result=evt.target.label;
				break;
				
				case sex:
				sex_result=evt.target.label;
				break;
			}
				
			fixTextResult();
		}
		
		private function initResult():void
		{
			job_result='Designer';
			age_result='Foot in coffin';
			sex_result='bOh';
			
			fixTextResult();
		}
		
		private function fixTextResult():void
		{
			result_txt.text='My chosen:'+'\n'+'\n'+job_result+'\n'+age_result+'\n'+sex_result;
		}
	}
}

Risultato:

Analizziamo il codice

Proprietà
tre RadioButtonGroup per assegnare un gruppo ad ogni RadioButton che istanzierò
var job:RadioButtonGroup=new RadioButtonGroup('My job');
var age:RadioButtonGroup=new RadioButtonGroup('My age');
var sex:RadioButtonGroup=new RadioButtonGroup('My sex');
un campo di testo che visualizzerà le scelte / selezioni
private var result_txt:TextField;
tre variabili numeriche che contengono ciascuna il numero di RadioButton presenti in ogni sezione
private var first_step:int=3;
private var second_step:int=6;
private var third_step:int=4;
tre variabili stringa che conterranno il valore della scelta fatta in ogni sezione
private var job_result:String;
private var age_result:String;
private var sex_result:String;

Funzione Costruttrice
chiamo 5 metodi in successione
firstStep();
secondStep();
thirdStep();
createTextResult();
initResult();

Metodi
firstStep();
creo un campo di testo che visualizzerà il testo del titolo della prima sezione
var field:TextField=new TextField();
gli assegno il testo della proprietà name di job, la prima istanza di RadioButtonGroup
field.text=job.name;
posiziono il campo di testo
field.x=30;
field.y=30;
aggiungo il campo di testo allo stage ( altrimenti non sarebbe visibile )
addChild(field);
creo un ciclo con massima iterazione il valore della variabile ( si chiamerebbe proprietà, dato che siamo all' interno di una classe ) first_step
for(var i:int=0;i < first_step;i++)
{
istanzio un RadioButton ( tanti quanto è il valore di first_step )
var rb:RadioButton=new RadioButton();
lo posiziono
rb.move(field.x,field.y*2+30*i);
lo aggiungo allo stage
addChild(rb);
assegno un gruppo alla proprietà group del radioButton utilizzando l' istanza RadioButtonGroup ( job )
rb.group=job;
in base al valore della ' i ' assegno una etichetta ( label ) al RadioButton
if(!i)
rb.label='Developer';
if(i==1)
{
rb.label='Designer';
rb.selected=true;
}
if(i==2)
rb.label='SEO';
aggiungo un listener in ascolto dell' evento CLICK della classe mouseEvent. Quando il radioButton verrà selezionato/cliccato, verrà chiamato il metodo reportResult()
rb.addEventListener(MouseEvent.CLICK,reportResult) ;
}

secondStep();
stesse cose di firstStep

thirdStep();
stesse cose di firstStep

createTextResult();
creo il campo di testo... diciamo... generale
result_txt=new TextField();
gli assegno una larghezza e lo posiziono
result_txt.width=200;
result_txt.x=stage.stageWidth-result_txt.width;
result_txt.y=30;
gli assegno un colore al testo
result_txt.textColor=0x0066FF;
lo aggiungo allo stage
addChild(result_txt);

reportResult();
questo metodo viene chiamato ogni volta che un RadioButton è cliccato e aggiorna il testo di result_txt.
Controllo il gruppo a cui è assegnato il RadioButton cliccato tramite uno switch e in base appunto al gruppo di appartenza del RadioButton, assegno un valore ad una delle tre variabili stringa ( job_result, age_result, sex_result )
switch(evt.target.group)
{
case job:
job_result=evt.target.label;
break;

case age:
age_result=evt.target.label;
break;

case sex:
sex_result=evt.target.label;
break;
}
chiamo il metodo fixTextResult
fixTextResult();

fixTextResult();
questo metodo assegna il testo al campo di testo result_txt ogni volta che l' utente clicca un RadioButton. Viene assegnato in base ai valori delle tre proprietà String: job_result, age_result, sex_result
result_txt.text='My chosen:'+'\n'+'\n'+job_result+'\n'+age_result+'\n' +sex_result;

Alla prossima !