PROBANDO COMPONENTES FLEX 4: CheckBox y RadioButton En este tutorial vamos a probar algunos componentes Flex en un proyecto Flex que

crearemos previamente. 1.- CheckBox Si en el MXML introducimos: ? 1<mx:VBox> <mx:CheckBox width="100" label="Registrado?"/> 2 3</mx:VBox> Obtendremos un resultado como el de la imagen:

Tambin podemos mostrarlo chequeado y/o desactivado, para ello en el MXML introduciremos: ? 1<mx:VBox> 2 <mx:CheckBox width="100" label="Registrado?" selected="true" enabled="false"/> 3 </mx:VBox> 4 Obtendremos un resultado como el de la imagen:

2.- RadioButton Si en el MXML introducimos: ? 1 <mx:RadioButton groupName="cardtype" 2 id="americanExpress" 3 label="American Express" width="150"/> 4 <mx:RadioButton groupName="cardtype" 5 id="masterCard" 6 label="MasterCard" 7 width="150"/> <mx:RadioButton groupName="cardtype" 8 id="visa" 9 label="Visa" 10 width="150"/> 11 Obtendremos un resultado como el de la imagen:

En cada radio podriamos definir un listener usando el atributo "click" del tag "mx:RadioButton", para ello en el MXML introduciremos: ? 1 <mx:Script> <![CDATA[ 2 3 import flash.events.Event; 4 5 private function handleAmEx(event:Event):void { 6 // Handle event. myTA.text="Elegiste American Express"; 7 } 8 9 private function handleMC(event:Event):void { 10 // Handle event. 11 myTA.text="Elegiste MasterCard"; } 12 13 private function handleVisa(event:Event):void { 14 // Handle event. 15 myTA.text="Elegiste Visa"; 16 } 17 ]]> 18</mx:Script> 19 20<mx:RadioButton groupName="cardtype" id="americanExpress" 21 label="American Express" 22 width="150" click="handleAmEx(event);"/> 23 <mx:RadioButton groupName="cardtype" 24 id="masterCard" 25 label="MasterCard" 26 width="150" 27 click="handleMC(event);"/>

28<mx:RadioButton groupName="cardtype" id="visa" 29 label="Visa" 30 width="150" 31 click="handleVisa(event);"/> 32 33<mx:TextArea id="myTA"/> Si todo va bien, al darle a "Run" llegaras a una pgina como esta. En vez de en cada radio, podriamos definir un listener para un grupo de radios con el tag "mx:RadioButtonGroup", para ello en el MXML introduciremos: ? 1 <mx:Script> 2 <![CDATA[ 3 import mx.controls.Alert; 4 import mx.events.ItemClickEvent; 5 6 private function handleCard(event:ItemClickEvent):void { 7 if (event.currentTarget.selectedValue == "AmEx") { 8 Alert.show("Elegiste American Express."); } else if (event.currentTarget.selectedValue == "MC") { 9 Alert.show("Elegiste MasterCard."); 10 } else { 11 Alert.show("Elegiste Visa."); 12 } 13 } ]]> 14 </mx:Script> 15 16 <mx:RadioButtonGroup id="cardtype" 17 itemClick="handleCard(event);"/> 18<mx:RadioButton groupName="cardtype" id="americanExpress" 19 value="AmEx" 20 label="American Express" 21 width="150"/> 22<mx:RadioButton groupName="cardtype" 23 id="masterCard" value="MC" 24 label="MasterCard" 25 width="150"/> 26<mx:RadioButton groupName="cardtype" 27 id="visa" value="Visa" 28 label="Visa" 29 width="150"/> 30 Si todo va bien, al darle a "Run" llegaras a una pgina como esta. Como se puede ver, para cada radio al que queramos asociar el listener solo tendremos que usar el atributo "groupName" al que le indicaremos el id del tag "mx:RadioButtonGroup" que hemos creado.

3.- A practicar...