CRaZy TeaM » Flex http://www.crazyteam.es Artículos sobre noticias de informática, programación y juegos en red Mon, 08 Mar 2010 20:21:45 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Mis primeros pasos en Flex y Action Script 3 http://www.crazyteam.es/flash/mis-primeros-pasos-en-flex-y-action-script-3/ http://www.crazyteam.es/flash/mis-primeros-pasos-en-flex-y-action-script-3/#comments Tue, 19 May 2009 00:04:17 +0000 Ignacio Sánchez http://www.crazyteam.es/?p=403 Hoy mismo he empezado un curso de Flex y Action Script 3 en CREA Formación. Lo primero es darle las gracias a mis compañeros de Indra que han hecho posible que vaya a este curso, y no es ninguna coña. Lo voy a aprovechar todo lo que pueda y más.

Yo vengo con conocimiento 0 en MXML y AS3, los dos lenguajes principales.

Flex divide el contenido que va a mostrar (paneles, imágenes, campos de texto, botones, …)  del que hace dinámica la aplicación (eventos, acciones, cambios de comportamiento, …). Para el primero utiliza, según la estructura de XML, el lenguaje MXML; muy parecido a XAML, el símil de Silverlight. Para el comportamiento dinámico utiliza Action Script, una forma de escribir scripts algo peculiar.

El primer día, como es lógico, para los que empezamos nos enseñan un poquillo cómo va el lenguaje, los clásicos “Hello World”, alerts, etc etc. Como ejercicio de final de día hemos hecho algo parecido a esto: mi primer programa en flex. El código fuente está en el repositorio SVN de CRaZyTeaM, en el Ejemplo 1.

Para ello he escrito un código muy muy simple de MXML, que me recuerda mucho a el XAML de Silverlight:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="iniciar()">
       
        <mx:Script source="colores.as"/>
       
        <mx:Panel x="69" y="49" width="550" height="352" layout="absolute" id="panel1">
                <mx:Button x="171.5" y="49" id="btnVerde" label="Verde" />
                <mx:Button x="239.5" y="49" id="btnRojo" label="Rojo"/>
                <mx:Button x="299.5" y="49" id="btnAzul" label="Azul"/>
                <mx:TextArea x="171.5" y="98" width="179" height="97" text="Cambia de color" id="capaColor"/>
        </mx:Panel>
       
</mx:Application>

Y su correspondiente fichero de scripts:

private function iniciar():void{
btnVerde.addEventListener(
MouseEvent.CLICK,
function(e : MouseEvent) : void{
cambiaColor(e, "green")
},
false , 0 , false);
btnRojo.addEventListener(
MouseEvent.CLICK,
function(e : MouseEvent) : void{
cambiaColor(e, "red")
},
false , 0 , false);
btnAzul.addEventListener(
MouseEvent.CLICK,
function(e : MouseEvent) : void{
cambiaColor(e, "blue")
},
false , 0 , false);
}

private function cambiaColor(e : MouseEvent, c:String):void{
capaColor.setStyle("backgroundColor",c);
}

De entre este poquillo de código, lo que más aprendimos es al ejecutar cosas al inicio del programa, con el “creationComplete” en el mx:Application y al tratamiento de eventos.

Uno de losproblemas que me encontré es que realmente los addEventListener nos los han enseñado sin poder pasar parámetros a cambiaColor de la forma:

btnRojo.addEventListener(MouseEvent.CLICK,cambiaColor);

Y la verdad es que no me parece nada útil. Mucho código para tan poca cosa, aunque tendrá alguna razón.

Respecto al código HTML que genera el propio Flex Builder y el SDK del Flex pues… sin comentarios…

Por el resto, una visión de los lenguajes que no había visto, pero bastante parecida a C# y que me gusta bastante.

¡Gracias chicos por darme este curso!

No hay artículos relacionados. Echa un ojo a estos:

]]> http://www.crazyteam.es/flash/mis-primeros-pasos-en-flex-y-action-script-3/feed/ 0