Conociendo Flex III

.

Mientras estudio este framework sigo utilizando este blog como un block de notas de lo que voy viendo.

Como vimos  Flex es un framework de adobe orientado a la creación de aplicaciones web del tipo Rich Internet Applications (RIA). Las aplicaciones Flex corren de forma autónoma o en un browser que tiene el plugin "Flash Player", al ejecutarse un programa puede interactuar con facilidades o servicios remotos tales como bases de datos, web services y objetos en otros lenguajes  entre otros. En Flex se usan dos lenguajes de programación  MXML y ActionScript. Donde  MXML es un lenguaje de marcas XML utilizado para definir la interfase de usuario, provee una serie de etiquetas que ayudan a esta tarea tales como grillas, manejadores de pestañas, menues y botones.  Por otro lado ActionScript es un lenguaje de programación orientado a objetos que se usa para escribir la lógica de negocios de la aplicación.

Observe la siguiente aplicación 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" pageTitle="Hello World!"  >

    <mx:Label text="Hello World!"/>
    <mx:Label text="Hello World!" color="#003366" fontSize="40"/>


</mx:Application>


Es un simple y clásico "Hola Mundo!" donde se ve claramente el uso de el lenguaje de marcas MXML. Todo programa se escribe entre la marca "mx:application", allí se definen una serie de parámetros adicionales como ser el título de la ventana por ejemplo. Luego se usaron las etiquetas mx:Label que permiten mostrar texto formateado por pantalla. Ahora se presenta un ejemplo más ccompleto, donde se usa la llamada a una función escrita en ActionScript


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  pageTitle="Conversor de Grados Fahrenheit a Celsius"  >

   <mx:Script>
       function convert() : void { celsius.text=frmt.format((Number(fahrenheit.text)-32)/1.8); }
   </mx:Script>

   <mx:NumberFormatter id="frmt" precision="2"/>
   <mx:Label text="Temperatura en Fahrenheit:" fontSize="24" color="#003366" />
   <mx:TextInput id="fahrenheit" width="200" fontSize="24" />
   <mx:Button label="Convertir" click="convert()" fontSize="24" />
   <mx:Label text="Temperatura en Celsius:" fontSize="24" />
   <mx:Label id="celsius" width="250" fontSize="24" color="#003366" />

</mx:Application>


Nótese que hay un ingreso de datos con la etiqueta "mx:TextInput" y luego se define un botón con "mx:Button" que al ser clickeado se llama a la función de conversión escrita en ActionScript.

 El siguiente programa muestra el uso de botones en Flex, donde claramente se observa que a cada definición de botón se le asocia un ID que servirá para identificarlo posteriormente.


<?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;
            private function buttonClick(event:Event):void
            {
                if(event.target.id == "buno")
                { Alert.show("Se clickeo el boton 1") }
                else
                { Alert.show("Se clickeo el boton 2") }
            }
        ]]>
    </mx:Script>

<mx:HBox width="300" height="300">
     <mx:Button click="buttonClick(event)" label="BOTON 1" id="buno"/>
     <mx:Button click="buttonClick(event)" label="BOTON 2" id="bdos"/>
</mx:HBox>

</mx:Application>