PROBANDO COMPONENTES FLEX 1: Button y PopUpButton En este tutorial vamos a probar algunos componentes Flex en un proyecto Flex que

crearemos previamente. 1.- Button Si en el MXML introducimos: ? 1<mx:Button id="button1" label="Hello world!" width="100"/> Obtendremos un resultado como el de la imagen:

A continuacin vamos a mostrar un icono en el botn, para ello en el MXML introduciremos: ? 1<mx:Button label="Icon Button" 2icon="@Embed(source='calculator.png')" 3height="36"/> Obtendremos un resultado como el de la imagen:

Algunos de los atributos del tag "mx:Button" como id, x, y, width, heigth y label no necesitan muchas explicaciones. Del uso de Embed debo comentar que solo pueden embeberse imgenes en tiempo de compilacin y algunos formatos permitidos son: GIF, JPEG, PNG, SVG, o SWF. Cuando un usuario pincha en un botn, el controlador del botn dispara un evento "click". Veamosl con un ejemplo, en el Flash Builder crea una nueva "MXML Application" con el nombre que quieras y despues que quede como este MXML. Si todo va bien, al darle a "Run" llegaras a una pgina como esta. ? 1 <!-- controls\button\ButtonClick.mxml --> 2 <mx:Application 3 xmlns:mx="http://www.adobe.com/2006/mxml" 4 width="400"> 5 <!-- Input field. --> 6 <mx:TextInput id="myInput" 7 width="150" text=""/> 8 9 <!-- Button control that triggers the copy. --> <mx:Button id="myButton" 10 label="Copy Text" 11 click="myText.text=myInput.text;"/> 12 13 <!-- Output text box. -->
<?xml version="1.0"?>

<mx:TextArea id="myText" 14 text="" width="150" height="20"/> 15 </mx:Application> 16 17 18 19 20

Si nos fijamos, el secreto de este ejemplo esta en el atributo "click" del tag "mx:Button" que ser el codigo ActionScript que se ejecute cuando el evento sea disparado por el click del usuario. En este caso vemos que lo nico que hace es asignarle el texto que tiene la caja de texto de la parte superior. Otras propiedades interesantes que se pueden usar son: upSkin, overSkin, downSkin, disabledSkin con las que podemos cambiar la imagen (usando Embed) del botn en funcin de su estado. MXML. 2.- PopUpButton Si en el MXML introducimos: ? 1<mx:PopUpButton id="popB" label="Edit" width="135"/> Obtendremos un resultado como el de la imagen:

El PopUpButton es una subclase de Button y hereda todas sus propiedades, estilos, eventos y mtodos, con la excepcin de la propiedad toggle y los estilos utilizados para un botn seleccionado. Tiene las siguientes caractersticas:

La propiedad popUp especifica el pop-up (por ejemplo, una lista o men). Los mtodos open () y close () le permite abrir y cerrar el elemento emergente programticamente, en lugar de utilizar el botn desplegable. Los eventos open y close se disparan cuando el pop-up se abre y se cierra. Se utiliza las propiedades de estilo popUpSkin y arrowButtonWidth para definir la apariencia del PopUpButton.

A continuacin os dejo el MXML del siguiente ejemplo. ? 1 <?xml version="1.0"?> 2 <!-- controls\button\PopUpButtonMenu.mxml --> 3 <mx:Application 4 xmlns:mx="http://www.adobe.com/2006/mxml" height="600" width="600"> 5 6 <mx:Script> 7 <![CDATA[ 8 import mx.controls.*; import mx.events.*; 9 10 private var myMenu:Menu; 11 12 // Initialize the Menu control, 13 // and specify it as the pop up object 14 // of the PopUpButton control. 15 private function initMenu():void { myMenu = new Menu(); 16 var dp:Object = [ 17 {label: "Mazda"}, 18 {label: "Bugati"}, 19 {label: "Ford"} 20 ]; myMenu.dataProvider = dp; 21 myMenu.addEventListener("itemClick", 22 changeHandler); 23 popB.popUp = myMenu; 24 } 25 26 // Define the event listener // for the Menu control's change event. 27 private function changeHandler 28 (event:MenuEvent):void { 29 var label:String = event.label; 30 popTypeB.text=String("Elegido " + label); popB.label = label; 31 popB.close(); 32 } 33 ]]> 34 </mx:Script> 35 36 <mx:VBox> <mx:Label text="Eliga un marca de coche."/> 37 <mx:PopUpButton id="popB" 38 label="Seleccione" 39 width="135" 40 creationComplete="initMenu();"/> 41 42 <mx:Spacer height="50"/> <mx:TextInput id="popTypeB"/> 43 </mx:VBox> 44 </mx:Application> 45

Si todo va bien, al darle a "Run" llegaras a una pgina como esta. En este ejemplo, lo importante es fijarse en como en la inicializacin del PopUpButton mediante el atributo "creationComplete", dentro de esta se le aade un listener "itemClick" que no es mas que una referencia a una funcin que se ejecutar cada vez que el evento sea disparado por la accin del usuario. 3.- A practicar...