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:

[ftf w=”400″ h=”100″]

[/ftf]

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

[ftf w=”400″ h=”100″]package com.mif.as {
import mx.containers.VBox;

public class Ejemplo1 extends VBox {
}
}[/ftf]

¿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:

[ftf w=”400″ h=”100″]



[/ftf]

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

[ftf w=”400″ h=”100″]package com.mif.as {
import mx.containers.VBox;
import mx.controls.Label;

public class Ejemplo1 extends VBox {
public var lab1:Label;
public var lab2:Label;

public function Ejemplo1 () {
this.lab1.text = “texto de label1”;
this.lab2.text = “texto de label2”;

// Debido a que se trata de componentes visuales
// los tenemos que añadir a la DisplayList.
this.addChild (lab1);
this.addChild (lab2);
}
}
}[/ftf]

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:

[ftf w=”400″ h=”100″]


[/ftf]

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:

[ftf w=”400″ h=”100″]



[/ftf]

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:

[ftf w=”400″ h=”100″]package {
import mx.core.Application;

public class MiAplicacion extends Application {

public function Ejemplo1 () {
var ej1:com.mif.as.Ejemplo1 = new com.mif.as.Ejemplo1 ();
var ej2:com.mif.mxml.Ejemplo1 = new com.mif.mxml.Ejemplo1 ();

this.addChild (ej1);
this.addChild (ej2);
}
}
}[/ftf]

¿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.

[ftf w=”400″ h=”100″]




[/ftf]

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:

[ftf w=”400″ h=”100″]



[/ftf]

¿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

[ftf w=”400″ h=”100″]
package com.mif {
public interface MyInteface {
function sayHello():String;
}
}
[/ftf]

Fichero com/mif/mxml/Ejemplo1.mxml

[ftf w=”400″ h=”100″]





[/ftf]

Fichero com/mif/as/Ejemplo1.as

[ftf w=”400″ h=”100″]package com.mif.as {
import mx.containers.VBox;
import mx.controls.Label;

public class Ejemplo1 extends VBox
implements MyInterface{
public var lab1:Label;
public var lab2:Label;

public function Ejemplo1 () {
this.lab1.text = “texto de label1”;
this.lab2.text = “texto de label2”;

// Debido a que se trata de componentes visuales
// los tenemos que añadir a la DisplayList.
this.addChild (lab1);
this.addChild (lab2);
}

public function sayHello ():String {
return “HelloWorld desde Ejemplo1AS”;
}
}
}[/ftf]

[ftf w=”400″ h=”100″]




[/ftf]

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.

Xavi es un Technical Arquitect de Aplicaciones RIA basadas en la Plataforma Flash trabajando para Adobe en Londres. Especializado en aplicaciones colaborativas en tiempo real, e-learning y CMS (Content Management Systems) utiliza Flex, LCDS, BlazeDS, FMS y Java principalmente.

Sitio Web:http://www.code4net.com

7 Comentarios

  1. Tmeister

    Muy bueno el articulo.

    Pero..

    Yo no pondría como titulo MXML vs AS3.

    Realmente no es usar uno o usar otro, en cualquiera de los casos siempre se tendría que utilizar ambos, ya que se complementan.

    Como bien dices hay veces que sera mejor tener un control visual (MXML) y un control de lógica. (AS), algunas veces todo se podrá hacer desde el MXML eso dependerá del proyecto. Pero como todo, es mejor tratar de dominar ambas formas de trabajo y al final de día decidir cual conviene mas.

    Saludos!!

  2. Joan Garnet

    Muy revelador, sobretodo porque este artículo es una buena guía de conceptos básicos de Flex.
    Mucha gente en unn principio no acaba de ver la relación directa entre ActionScript y MXML, y como muy bien has explicado aquí al final son una misma cosa: Instancias de objetos con sus propiedades y métodos.

    Cuando yo empecé a trabajar con Flex también me planteé la misma duda: cuando utilizar y cuando no utilizar MXML. Inicialmente mi mentalidad de programador me hizo hacer el mismo razonamiento que tú: “solo utilizaré MXML para definir las interfaces gráficas y lo demás lo haré en AS3, que es lo que me mola…”.
    A dia de hoy todavía dudo en según qué contextos qué hacer, pero sin duda lo estoy utilizando muchísimo más de lo que en un principio pensé y claramente no sólo para definir interfaces gráficas.

    MXML es una gran cosa y hay que saber aprovecharla.
    Saludos!

  3. Edgar Parada

    No tengo mucho que complementar a lo que ya han dicho.
    El cuando usar MXML y AS3 es un tema que llega a despertar las pasiones de los programadores como en este ejemplo de un foro de Flashers.
    en lo particular coincido con que “MXML es una gran cosa y hay que saber apreovecharla”
    Saludos

  4. Alejandro

    Buena introducción, aunque creo que el uso de MXML y AS va marcado por el proceso de desarrollo que se lleve a cabo.

    Por ejemplo, si vamos a presentar un preview más o menos funcional de la aplicación al cliente, lo más práctico es utilizar MXML y lo mínimo en AS para que el preview no sea un power point.

    Simplemente la posibilidad de arrastrar componentes y darle al cliente un “funcional básico” para que juegue, nos ahorrará muchos quebraderos de cabeza. Surgirán modificaciones y se afinará el preview, como debe ser, no la aplicación final.

    Una vez superado ese trance, y con los objetos visuales sobre el tablero, la programación de los mismos es… simplemente más agradable, más directa. No nos deberíamos preocupar de cambios de lógica o estructura.

    Hacer comprender al cliente de qué va la aplicación es uno de los temas más peliagudos, pese a responder en teoría a sus especificaciones… pero tienden a malinterpretar, a no entender, a pedir cambios ilógicos, terminas volviendo al origen, generas un código indescifrable, etc… Creo que todos hemos pasado por esto alguna vez…

    Pero si lo que se presenta es un funcional haciendo uso de componentes ya creados… no tardamos nada en realizar esos cambios. Si lo que presentamos son las clases programadas a pelo, nos dan ganas de tirarnos por la ventana con algunos de esos cambios.

    Por tanto, creo que la verdadera ventaja de MXML es la de poder mostrar una rápida aproximación a la aplicación final, proporcionando las herramientas básicas para que los diseñadores la afinen, no marear a los desarrolladores y enfocar al cliente hacia los estándares… que ya toca 😉

    Sin olvidarnos de que estamos construyendo el esqueleto de la aplicación, de una forma clara y organizada.

    Con MXML han conseguido aunar diversos conceptos en uno solo, resolviendo varios problemas al mismo tiempo. OLE !

    Saludos.

  5. Angel Ernesto Anton Yebra

    el articulo es muy bueno y me ayudo mucho a entender la relacion entre MXML y AS3. Estuve probando el código y tengo dos dudas…
    Primero, en el ejemplo de componente hecho “directamente” en ActionScript creo que los labels (lab1 y lab2) se deben crear y luego asignarles un texto, al menos no me funciono hasta que no los instancié.

    Segundo, la clase que extiende de Application como la uso? Debo hacer un proyecto en ActionScript para luego correrlo?.

    un saludo !

  6. Pingback: Hidden Place Blog » Blog Archive » AS3 vs MXML

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acerca de Made In Flex

Made In Flex es una comunidad de desarrolladores de Apache Flex creada en 2006.

Apache Flex, anteriormente conocido como Adobe Flex, es un SDK (kit de desarrollo de software) para crear aplicaciones enriquecidas - multiplataforma basadas en Adobe Flash donado por Adobe a la fundación Apache in 2011 y promocionado a proyecto de primer nivel en Diciembre de 2012.

Actualmente estamos cambiando muchos aspectos del sitio web para ofrecer un sitio útil para toda la comunidad que tenga en cuenta las necesidades actuales.

Últimas Fotos

Instalador de Apache Flex

Entrar o Registrase