Posts Tagged Básico

ActionScript dentro de Flex (mxml)

La posibilidad del manejo de código ActionScript dentro de un archivo .mxml es una de las posibilidades que hacen de Flex una herramienta tan versátil. Si bien podemos manejar nuestro código de manera externa en archivos .as, el poder ingresar código e interactuar con los objetos que declaramos en .mxml es una posibilidad de por si, muy productiva.

Para esto simplemente trabajamos con el tag <mx:Script> el cual es generado automáticamente por el Builder, luego de cerrar el tag como tal. Esta es la estructura básica:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:Script>
		<![CDATA[

		]]>
	</mx:Script>

</mx:Application>

El siguiente código, ejecuta una función de Alerta definida en ActioScript desde una instancia de un botón declarada en MXML.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;

			public function alerta():void{
				Alert.show("Hola Mundo","Mi Alerta");
			}
		]]>
	</mx:Script>

	<mx:Button id="miBoton" label="Mi Boton" click="alerta()"/>

</mx:Application>

Y de la misma forma, podemos referirnos a la instancia “miBoton” desde ActionScript. El siguiente código tiene exactamente la misma funcionalidad que el anterior. Se agregó la función init que es ejecutada con el controlador de evento creationComplete y que a su vez agrega el listener de click al boton “miBoton”.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="init()">

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;

			public function init():void{
				miBoton.addEventListener(MouseEvent.CLICK,alerta)
			}
			public function alerta(e:MouseEvent):void{
				Alert.show("Hola Mundo","Mi Alerta");
			}
		]]>
	</mx:Script>

	<mx:Button id="miBoton" label="Mi Boton" />

</mx:Application>

, ,

1 Comentario

Tutorial – Introducción a Flex Builder 3

Este primer tutorial es de familiarización con la herramienta. Será un poco básico, sin embargo no sobra comenzar totalmente de cero para quienes no la conocen.

Con el proyecto creado podemos darnos cuenta de la estructura que genera automáticamente el FlexBuilder, la carpeta “src” que contiene nuestro código fuente que luego será compilado y puesto en la carpeta “bin” que será donde queden almacenados los archivos ejecutables.

Con esto ya sabemos crear nuestro entorno de trabajo. Los invito entonces a explorar y probar todos los componentes que tiene flex para ustedes.

, ,

2 Comentarios