Es muy recomendable que si no lo has hecho revises los capítulos anteriores de la guía donde hablamos de los Fundamentos de Desarrollo Flex para PlayBook y donde paso a paso fuimos configurando nuestro ambiente de desarrollo para probar nuestras aplicaciones en el Emulador de Dispositivos y en el Simulador de PlayBook.

ActionScript 3.0

ActionScript 3.0 es un lenguaje orientado a objetos, muy similar a Java en cuanto a la sintaxis y al ser un dialecto ECMAScript su base es la misma utilizada en Javascript hoy en día uno de los lenguajes de programación más populares del mundo. Existen muy buenos libros de ActionScript 3.0, como Essential ActionScript 3.0 de Colin Moock o tutoriales en Adobe Devnet y recursos de referencia en la red, así que trataremos de abordar los conceptos más relevantes para alguien que esta aprendiendo el lenguaje siempre teniendo en cuenta el contexto del desarrollo de aplicaciones móviles.

ActionScript 3.0

ActionScript 3.0 utiliza static typing de forma opcional, sin embargo a pesar de ser opcional es una buena práctica declarar los tipos de datos porque le permite a herramientas como Flash Builder ejecutar tareas importantes en cuanto al autocompletado y para revisar algunos errores en tiempo de compilación, de igual manera provee de información importante a la máquina virtual de Flash AVM2 para ejecutar las aplicaciones de forma más eficiente.

Revisemos una simple línea de código de ActionScript para declarar una variable:

var palabra:String;

Un poco diferente a Java o C# puesto que el tipo de datos aparece después del nombre de la variable y separados por el signo de dos puntos, sin embargo al igual que estos otros lenguajes esto crea una referencia, inclusive podríamos tener las siguientes variantes para asignar un String:

//Primer variante
var palabra1:String = “Maestros del Web”
//Segunda variante
var palabra2:String = new String(“120 Segundos”);

Usualmente crearemos objetos utilizando la segunda variante y los argumentos para el constructor irán dentro de los paréntesis. Al principio de este capítulo mencionamos que Flex es un framework que esta escrito en ActionScript 3.0 sin embargo la mayoría de los ejemplos que hemos revisado hasta el momento incluyen más código MXML que ActionScript, esto se debe a la sencillez de este otro lenguaje para declarar componentes mediante el uso de etiquetas pero a partir de ahora será común que los combinemos de igual manera para crear aplicaciones con más funcionalidades.

Para utilizar ActionScript junto con MXML, basta con escribir un bloque de etiquetas de de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
private var palabra1:String = "Maestros del Web";
private var palabra2:String = new String("120 Segundos");
</fx:Script>
</s:Application>

NOTA: De forma automática cuando insertamos un bloque de Script, Flash Builder agrega un bloque de <![CDATA[ ]]> sin embargo este bloque solo es necesario cuando utilizamos código de XML dentro, por ejemplo <, >, &

Aunque los modificadores de acceso, en nuestro caso private son opcionales, es una buena práctica declararlos. Al declarar las variables de esta manera es lo mismo que si hubieramos utilizado la etiqueta String en MXML y asignado un id, inclusive podemos utilizar los bindings con los demás componentes pero para hacerlo es necesario agregar un metadata de tipo [Bindable] lo que genera el código necesario para que la expresión de binding actualice el valor cuando este cambie.

Para revisar más a detalle lo que esta haciendo etiqueta [Bindable] podríamos revisar el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
[Bindable]
private var contador:Number = 0;
</fx:Script>
<s:Label text="{contador}" updateComplete="contador++" />
</s:Application>

De entrada si ejecutamos esta aplicación veremos que el valor del texto en el Label se va incrementando rápidamente, debido a que la variable contador esta ligada a la propiedad text del Label, ahora si intentan quitar la etiqueta [Bindable] y ejecutar de nuevo la aplicación verán que a pesar de que Flash Builder manda algunas advertencias, la aplicación compila y se ejecuta sin embargo el valor de la etiqueta continua intacto debido a que el mecanismo completo del binding no se declaro de forma correcta. También es de notarse que la única forma en que los objetos de MXML pueden acceder al código de ActionScript es mediante los data bindings.

Relación entre ActionScript 3.0 y MXML

Si recuerdan el ejemplo que desarrollamos en el capítulo de Hola Mundo no teníamos más que un simple Label reflejando el texto “Hola Mundo” gracias a la siguiente línea de código:

<s:Label text="Hola Mundo" />

Lo mismo se puede desarrollar utilizando ActionScript con el siguiente bloque de código:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:creationComplete>
import spark.components.Label;
var etiqueta:Label = new Label();
etiqueta.text = "120 Segundos";
this.addElement(etiqueta);
</s:creationComplete>
</s:Application>

Al revisar detenidamente lo que esta sucediendo se puede entender gran parte de la relación que existe entre MXML y ActionScript y de cierta forma se puede deducir el propósito de cada uno de estos lenguajes. El bloque de creationComplete es otra forma de expresar un evento en Flex, de hecho cualquier función para manejar eventos (event handler) es en si un bloque de script por lo que no es necesario escribir Script

La primera línea de código que vemos es una sentencia de import que esta presente para decirle al compilador que incluya datos sobre la clase Label dentro del paquete spark.components, si no incluyeramos dicha sentencia de inmediato Flash Builder nos arrojaría algún error de no poder encontrar el tipo de datos dentro de la aplicación; esto último solo es necesario con ActionScript puesto que al utilizar un componente mediante MXML se realiza una importación implícita.

Después de importar la clase, creamos un objeto de tipo Label y utilizando la sintaxis de punto accedemos a la propiedad text para asignar la cadena “120 segundos” a esa variable. La última parte es muy importante ya que el objeto ha sido creado pero no podremos verlo en pantalla porque no se encuentra asociado al Display List, para lograrlo utilizamos la referencia a la aplicación mediante la palabra this y después utilizamos el método addElement(etiqueta) hubieron algunos cambios en la forma de agregar elementos con respecto a Flex 3 y Flex 4 que recomendamos revisar en el siguiente enlace.

En síntesis se puede ver que MXML es un lenguaje muy poderoso para declarar componentes y vamos a utilizarlo dentro de nuestra aplicaciones para cumplir dicho propósito, sin embargo ActionScript es un lenguaje mejor indicado para crear la lógica de negocio de la aplicación por lo que utilizaremos una combinación de ambos lenguajes cuando desarrollemos aplicaciones Flex para BlackBerry PlayBook.

Manipulación de Eventos

Durante la ejecución de una aplicación Flash ocurren un sinfín de eventos en todo momento, algunas de estas situaciones simplemente son ignoradas pero hay veces que nos interesa responder a estos eventos para realizar alguna función dentro de nuestra aplicación.

Una de las formas más simples de entender el sistema de eventos de Flash es utilizando conceptos básicos de teoría de comunicación: emisor, receptor y mensaje. Donde frecuentemente el emisor será un componente que notifica mensajes (eventos) a una función receptora (event handler).

Emisor, Receptor y Mensaje

Cuando sucede un evento en Flex siempre se crea un objeto de tipo Event y es posible acceder a este objeto para obtener mayor información de lo que esta sucediendo, por ejemplo en el caso de un evento de click podríamos saber en que coordenada se esta realizando el contacto con el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" click="manejoClick(event)">
<fx:Script> 
protected function manejoClick(event:MouseEvent):void
{
trace(event.stageX + " , " + event.stageY); 
}
</fx:Script>
</s:Application>

Una de las situaciones más interesantes en cuanto a eventos para dispositivos móviles como BlackBerry PlayBook es que podemos interactuar con la aplicación a través de gestos sobre la pantalla táctil, para ello utilizaremos un par de clases GestureEvent y TransformGesture diseñadas para escuchar este tipo eventos:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
creationComplete="init()" gestureSwipe="gestoSwipe(event)">
<fx:Script>
[Bindable] private var direccion:String;
[Bindable] private var cantidad:int;

protected function init():void {
Multitouch.inputMode = MultitouchInputMode.GESTURE; 
cantidad = 0;
}

protected function gestoSwipe(event:TransformGestureEvent):void {
if(event.offsetX == 1) {
direccion = "derecha";
cantidad++; 
} else if(event.offsetX == -1) {
direccion = "izquierda";
cantidad--; 
}
}
</fx:Script>
<s:Label text="{cantidad}" />
</s:Application>

En el ejemplo anterior al hacer un swipe hacia la derecha la cantidad reflejada en la propiedad text del Label se va a incrementar y al hacer un swipe hacia el lado contrario iría disminuyendo.

NOTA: Para probar eventos de gestos es necesario hacerlo sobre un dispositivo BlackBerry PlayBook ya que hasta el momento de escribir esta guía el simulador no soporta este tipo de eventos dentro de nuestras aplicaciones.

Tip de Experto

  • Es posible declarar todas nuestras funciones de tipo event handler en un archivo externo con extensión .as esto nos permitirá programar respuestas más complejas asociadas a eventos y reutilizar nuestro código a los largo de diferentes aplicaciones.
  • Los eventos también pueden registrarse utilizando la función addEventListener() de forma muy similar a Javascript y de hecho es una buena práctica porque esto nos permitirá controlar cuando deseamos dejar de escuchar al evento con la función removeEventListener() para optimizar el desempeño de nuestra aplicación. Hay que ser cuidadosos con esta técnica puesto que no es posible quitar funciones de tipo event handler asociadas mediante MXML.