miércoles, 14 de enero de 2009

03 - Introdución a MXML

¿Qué es MXML?

MXML uno de los dos lenguajes que utiliza Flex para la creación de aplicaciones. Se trata de un lenguaje de programación jerárquico. Esto quiere decir que existe un nodo principal y de este nodo van a ir colgando nuevos nodos. A su vez, cada uno de los nodos descendientes del primero, pueden tener otros nodos descendientes.

Si el lector no comprende el concepto de nodo, tal vez lo mejor es que vallamos más despacio.

¿Qué es una estructura jerárquica y qué es un nodo?

Un nodo es la unidad que se utiliza cuando se trabaja con jerarquías de elementos. Tal vez convenga verlo con un pequeño gráfico. (ver imagen 01)

Imagen 01: Jerarquía de Nodos

En la imagen 01 se puede ver un árbol o grafo. Como se puede observar, los nodos (las unidades dentro del árbol) tienen cierta jerarquía. Veremos dentro en la imagen 01 lo siguiente:
  • El Nodo A tiene dos hijos: El Nodo B y el Nodo C.
  • El Nodo A no tiene un nodo padre.
  • El Nodo B no tiene nodos hijos.
  • El Nodo B tiene como padre al Nodo A.
  • El Nodo C tiene 2 hijos: El Nodo D y el Nodo E.
  • El Nodo C tiene como padre al Nodo A.
  • El Nodo D no tiene nodos hijos.
  • El Nodo D tiene como padre al Nodo C.
  • El Nodo E no tiene nodos hijos.
  • El Nodo E tiene como padre al Nodo C.

Tal vez existan más observaciones pero con estas alcanza.

Definiciones:
  • Del Nodo A cuelgan todos los nodos. Esto quiere decir que el Nodo A es la Raíz del árbol. Un árbol jerárquico no puede tener 2 raíces.
  • Los Nodos B, D y E no tienen hijos, por ello es que son llamados Hojas.

Volvamos a leer la definición de MXML a ver si nos queda más clara ahora.

Pero entonces ¿Cómo se crea una aplicación utilizando la jerarquía de MXML?

Todas las aplicaciones MXML comienzan con un nodo de la misma forma los árboles empiezan por su raíz. En este caso, en MXML el nodo raíz que determina que se va a crear una aplicación se llama Application. Del nodo Application van a descender todos los nodos hijos que para el caso serán los componentes (Botones, Listas desplegables, campos de texto, etc.).

La porción de código que verán a continuación se corresponde con la aplicación que se creó en el post titulado “Conocer el entorno de trabajo (IDE)”. En ese capítulo se ha creado una aplicación que contenía una etiqueta titulada “Primer Etiqueta”. Sólo eso.

Código 01: Primer Aplicación

Analizaremos un poco el código creado a continuación pero antes hay que hablar un poco de la sintaxis (poquito nomás).

Los nodos dentro de MXML, sintácticamente, se llaman tags. Un tag comienza con el símbolo < y finaliza con el signo >. Viendo el código notaremos que hay 4 tags en total:


  1. <?xml version=”1.0” encoding=”utf-8”?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3. <mx:Label text="Primer Etiqueta"/>
  4. </mx:Application>

Los nodos que tienen nodos hijos, como lo es el nodo Application, funcionan con un par de tags: uno de apertura y otro de cierre. En nodo raíz de la aplicación es Application, por ende, tiene un par de tags para indicar que tiene hijos.
El tag de apertura comienza con el símbolo < y finaliza con > pero el tag de cierre empieza con el símbolo < / y finaliza con >.

Todos los tags que se encuentren entre el tag de apertura y tag de cierre de un tag específico se convertirán en hijos de este. Es por ello que el tag Label es hijo del nodo Application. El tag Label se encuentra entre el tag de apertura y el tag de cierre del tag Application.

Sin embargo, si un nodo es hoja del árbol, este será representado por un único tag que comenzará con el símbolo < y finalizará con el símbol />. Este es el caso del tag Label. El tag en cuestión es una hoja de la aplicación ya que este no contiene un par de tags de apertura y de cierre.

De esta manera se va armando nuestra aplicación. Se van anidando componentes al nodo raíz.

Sé que surgen muchas dudas en esta instancia pero nos queda ser pacientes para responderlas a todas. Si bien la siguiente pregunta obvia sería (o por lo menos para mí) “Si tengo más de un componente ¿cómo es que se ordenan como yo quiera?”, bueno, eso será respondido en breve, primero hay que saber algo más.

Atributos de los nodos

Los nodos, además de tener un nombre (Application, Label), tienen atributos. Los atributos indican propiedades propias de los componentes. El ejemplo más claro a la vista es el atributo Text del componente Label. (Ver código 02)

Código 02: Componente Label

La propiedad text del componente Label nos permite modificar el texto que muestra el componente Label.
De la misma manera el componente Application tiene atributos. En el código 03 se puede ver que Application tiene un atributo layout y otro xmlns.

Código 03: Application

El valor del atributo o propiedad layout es “absolute” y el del atributo xmlns es “http://www.adobe.com/2006/mxml”.

Es posible que el atributo xmlns del componente Application sea un poco confuso. Por ahora, ignorémoslo. La mayoría de los atributos que veamos serán más bien parecidos al atributo text de Label. Es decir: atributo=”valor”.

Los atributos nos sirven para modificar cualquier comportamiento, forma, tamaño, posición, etc. del componente.

Ahora si estamos en condiciones de responder la siguiente pregunta:

Si tengo más de un componente ¿cómo es que se ordenan como yo quiera?

Vamos a continuar con el ejemplo anterior para mostrar como se agregan más componentes y se ubican dentro de la aplicación.
  1. Si no hemos seguido el los diferentes tutoriales del curso hasta el momento podemos descargarnos el proyecto haciendo click aquí: Introducción a MXML
  2. Para saber como importar el proyecto ver el capítulo: Importar Proyectos
  3. Una vez importado el proyecto abriremos la aplicación FlexAr.mxml y entraremos al modo “Source”.
  4. Entre el Label y la etiqueta de cierre de la aplicación, agregar una etiqueta TextInput que tenga la propiedad "x" igual a 100 (ver código 04). Esto hará que la etiqueta se sitúe a 100 píxeles a la derecha de la esquina superior derecha de la aplicación. La posición es relativa a la posición del nodo padre.
  5. Debajo del TextInput agregar un tag Label con el atributo "text" igual a "Segunda Etiqueta" y el atributo "y" igual a 25. (ver código 05)
  6. Debajo de este último agregar un TextInput con el atributo "x" igual a "100" y el atributo "y" con un valor de "25". (ver código 05)
  7. Ejecutar la aplicación. Veremos como se fueron situando los componentes.

Código 04



Código 05

¿Y la palabra a la izquierda de los ":" de cada tag de MXML?

Tenemos, en cada tag de MXML, una sintaxis parecida a esta: "mx:TextInput". Sabemos que TextInput hace referencia al componente que sirve para el ingreso de texto pero... ¿qué es la palabra que está a la izquierda?

La respuesta es Namespace o nombre de espacio. En flex podemos crear nuestros propios componentes. Es decir que podemos tener un componente llamado "MiTextInput". Suponiendo que a nuestro componente personalizado no queremos llamarlo "MiTextInput" sino, simplemente, "TextInput". ¿Como haría la aplicación para saber a que componente se está haciendo referencia?

La respuesta es el namespace. Podemos tener 2 componentes con el mismo nombre gracias a los nombres de espacio. Es decir que, en nuestro proyecto podemos tener "mx:TextInput" y podemos tener "pepe:TextInput".

En la segunda línea del código que hicimos vemos lo siguiente: xmlns:mx="http://www.adobe.com/2006/mxml".

xmlns es XML Name Space
mx es el nombre que le ponemos al namespace
http://www.adobe.com/2006/mxml es la ubicación de los componentes con ese nombre de espacio

Por lo general, cuando nosotros creemos nuestra propia estructura de carpetas dentro del proyecto tendremos algo parecido a esto:

xmlns:pepe="com.miproyecto.componentes.*"

Con esto definimos que cuando se escriba "pepe:" la aplicación buscará todos los componentes que se encuentren en la estructura creada por nosotros: com.miproyecto.componentes.*


Una última pregunta para resolver en este post...

¿De que va la primer línea de la aplicación?

La primer línea de la aplicación es la siguiente:


Esta línea nos indica que versión de XML que tiene que interpretar el browser y que codificación de los caracteres se está utilizando.

Es obligatoria escribirla cada vez que se crea una aplicación. Mucho no hay que decir de ella, podemos llamarla burocrácia. Aún así no debemos preocuparnos por ella ya que el Flex Builder 3 se encarga de escribirla por nosotros.

En fin! Todas estas simples tareas nos habrán dado una pequeña noción de lo que se trata MXML. Espero que les haya servido y como dije anteriormente, si hay algo que no queda claro, avisar!!!

10 comentarios:

  1. Muy buen tutorial, en mi caso tengo que partir de algunos diseños ya creados, y esto me sirvió para entender en donde estaba parado. Gracias!

    ResponderEliminar
  2. Gracias Hernán! Espero reactivar en algún momento los post. Demandaban bastante tiempo hacerlos así que lo dejé un poco de lado.

    Saludos y cualquier cosa preguntame que intento darte una mano.

    Éxitos

    Giancarlo

    ResponderEliminar
  3. Hola nuevamente Giancarlo!
    Estaría bueno si en algún post podés explicar a qué refieren las palabras o siglas que se encuentran antes de los 2 puntos, por ejemplo:
    mx,fx,s, xmlns...
    Me parece que refieren a los tipos de objeto, no? Es algo que estoy buscando por todos lados y no termino de cerrar la idea...
    Saludos, Hernán!

    ResponderEliminar
  4. Hola hernán! por pedido tuyo, completé este Post con la información que me pedís. Decime por favor, si es claro. Si queda alguna duda, avisame que lo completo mejor.

    Saludos y gracias por contactarte.

    Giancarlo

    ResponderEliminar
  5. Bien ahí! Por fin encontré la respuesta, es algo que no encontraba en ningún tutorial... Ahora quedó bastante completito como para una introducción a Flex.
    Muchas gracias Giancarlo, saludos!

    ResponderEliminar
  6. Un placer señor.

    Cualquier cosa en la que pueda darte una mano, avisame.

    Saludos!

    Giancarlo

    ResponderEliminar
  7. Buen día Giancarlo:
    Tengo una consulta específica al respecto, a ver si me podes dar una mano.
    Resulta que tengo un paquete con archivos ActionScript, que lo referimos dentro de los MXML como xmlns:mir="mir.component.*
    El programa anterior funcionó lo más bien. En el programa que estoy haciendo ahora, tengo que agregar un nuevo archivo .as; lo agrego pero el Flex no me lo encuentra con la misma referencia anterior.
    Mi consulta sería ¿Hay que actualizar alguna referencia o algo por el estilo luego de tocar los paquetes que responden a las etiquetas personalizadas?
    Espero se haya entendido lo que te quise preguntar.
    Desde ya, muchas gracias!

    ResponderEliminar
  8. Hernán

    El nuevo archivo ActionScript estás ubicándolo en la mirma ruta que los anteriores? (El archivo debería estar en la ruta "mir/component.NuevaClase.as")

    Pasame tu email que hablamos por ese medio.

    Abrazo.

    ResponderEliminar
  9. Hola Giancarlo! Te comento que ya encontré el problema... Estaba todo bien ubicado, tenía que ir a una opción que dice "incluir todas las librerías", destildarla y volver a tildarla... Es como que al hacer eso vuelve a comprobar todo... Si querés mandame un mail a sifunes@gmail.com y mañana te paso bien lo que hice, por si querés agregarlo al blog como un TIP... Saludos!

    ResponderEliminar
  10. hola.
    a mi me queda:

    Primera etiqueta (y un recuadro)
    Segunda etiqueta (otro recuadro)

    no se si era asi como tenia que quedar..
    saludos

    ResponderEliminar