MXML vs AS3

Las aplicaciones desarrollados en Flex permiten el desarrollo híbrido con ActionScript y MXML. La opción basada en Actionscript es la opción tradicional, la de un lenguaje de programación con sintaxis muy parecida a muchos otros. El MXML, sin embargo, es un lenguaje descriptivo basado en XML que permite, entre otras cosas, construir interfaces visuales de una forma muy intuitiva y ordenada, crear y extender componentes visuales, hacer composites y widgets a partir de estructuras más simples, implementar interfaces, etc.

La primera vez que empezé a trabajar con MXML me dije a mi mismo que no lo usaría mucho, que yo era programador y que como tal usaría la mayor parte del tiempo ActionScript. Paradójicamente esta primera impresión ha cambiando drásticamente. El motivo del cambio de opinión ha sido que poco a poco he ido entendiendo la lógica interna que esconde el MXML y las grandes ventajas que, en determinadas situaciones, introduce frente la desarrollo íntegro con Action Script.

En un gran número de situaciones los desarrollos basados en MXML y AS son intercambiables. A continuación veremos cómo se traducen los conceptos de orientación a objetos en MXML y en qué situaciones es práctico y/o aconsejable el usar una solución u otra.

¿Cómo crear una clase?

Al crear un fichero .mxml lo que estamos haciendo realmente es el equivalente a crear una nueva clase. La ruta de carpetas donde se encuentre este mxml será la que marque su package. De esta forma si creo un fichero Ejemplo1.mxml en com/mif/mxml/ lo que realmente estará sucediendo es que estaré creando una clase con nombre Ejemplo1 y package com.mif.mxml.

Como decía antes, el mxml es xml compliant y como tal debe ser well-formed. Esto implica que en el mxml sólo pueda existir un único tag principal. Dicho tag marcará cuál es la superclase de nuestra nueva clase. En el siguiente ejemplo (com/mif/mxml/Ejemplo1.mxml) lo que estaríamos haciendo sería crear una nueva clase que heredase de la clase VBox:

Código que equivaldría a (com/mif/as/Ejemplo1.as):

¿Cómo añadir una nueva propiedad instanciada?

Cada uno de los sub-nodos hijos que declaremos en el mxml se traducirá como un atributo de la clase declarada. En el siguiente ejemplo (com/mif/mxml/Ejemplo1.mxml) lo que estaríamos haciendo es declarar dos atributos de clase: lab1 y lab2 de tipo mx:Label a la vez que estaríamos inicializando sus propiedades text:

El código equivalente en ActionScript podría ser (com/mif/as/Ejemplo1.as) :

El atributo id de cualquier tag en el mxml sirve para indicar que dicho elemento es un atributo de clase y que por lo tanto será referenciable. Sino indicásemos el id, dicho elemento no sería referenciable y por lo tanto no podríamos acceder a él posteriormente.

De la misma forma que una clase tradicional implementada en ActionScript, una clase implementada en MXML también es instanciable desde cualquier otro punto. Si creamos un nuevo fichero MiAplicacion.mxml que extienda de mx:Application, podremos instanciar la clase Ejemplo1.mxml que acabamos de crear:

Si intentamos ejecutar este código no funcionará debido a que el namespace, mif, indicado para la clase Ejemplo1 no está declarado. De hecho actualmente tenemos dos clases con el mismo nombre pero en packages distintos. Un namespace es el equivalente en el mundo MXML al concepto de package en ActionScript. Normalmente se declaran todos los necesarios en el tag root del mxml:

De esta forma estamos indicando que el namespace mifAS es equivalente al package com.mif.as. y que mifMXML equivale al package com.mif.mxml. Por otro lado estamos instanciando y añadiendo a la displayList una instancia de cada clase. El código equivalente en ActionScript sería:

¿Cómo declarar métodos?

Una clase puede tener tanto atributos como métodos. Para declarar los métodos a través de mxml usamos el tag especial mx: Script en el cual podemos introducir código con sintaxis ActionScript.

En el código anterior hemos declarado dos métodos públicos en la clase Ejemplo1 (com/mif/mxml/Ejemplo1.mxml). Ahora por ejemplo podríamos invocarlos desde la clase MiAplicacion.mxml:

¿Cómo implementar una interface?

En muchísimos casos la arquitectura de nuestra aplicación impondrá el uso de interfaces para llevar a cabo polimorfismo. El hecho de que usemos mxml no es una limitación frente a ActionScript. Como vemos en el siguiente ejemplo, esto también es posible.

Fichero com/mif/MyInterface.as

Fichero com/mif/mxml/Ejemplo1.mxml

Fichero com/mif/as/Ejemplo1.as

Sin ningún tipo de duda el mxml aporta muchos beneficios a la programación orientada a componente visual, a composites, al desarrollo de widgets reutilizables y mejora mucho el time to market. Aunque también sirve en determinadas situaciones para otro tipo de componentes, en muchos de esos casos es mejor ActionScript. Este tipo de decisiones las marcarán los requisitos individuales de cada caso.

Paralelamente a todo lo dicho respecto a ActionScript, el mxml introduce una ventaja muy importante respeto a los .fla tradicionales. Aunque no sean ni de cerca lo mismo, ambos formatos permiten crear interfaces visuales (con muchas salvedades), pero el mxml al tratarse de texto plano permite utilizar funcionalidades como el merge en sistemas de versionado como cvs, svn, etc. imprescindibles para el trabajo en equipo.