Un poco de MXML en Dreamweaver

Antes de comenzar quiero dejar muy claro que el editor por excelencia para Flex se llama Flex Builder 2, el cual actualmente esta basado en Eclipse. No es la intención que para proyectos grandes utilicemos Dreamweaver como un reemplazo de Flex Builder, pero en la línea de un primer acercamiento con Flex, Dreamweaver nos basta y nos sobra, gracias a que permite interpretar código XML, manejo de CSS, javascript y demás características que ya conocemos de esta potente herramienta.

Previo a configurar Dreamweaver para trabajar con MXML, hay que tener instalado el SDK de Flex 2, si aún no lo has hecho recomiendo leer la documentación al respecto en el sitio oficial. Si estás utilizando Dreamweaver para Mac OS X, será mejor leer al final del tutorial.

Manejo de archivos MXML en Dreamweaver

Los pasos a seguir son:

1. Crear un archivo con extensión MXML, puede ser el HolaMundo.mxml del tutorial de Carlos Rovira, y forzar al sistema operativo a abrirlo con Dreamweaver. Un clic derecho > Abrir con > Elegir programa… será suficiente. Si es que el archivo anteriormente no tenía un icono de algún programa, quizá sea necesario utilizar el comando abrir, en lugar de abrir con.
   

   NOTA: Si tienes Flex Builder instalado, este paso asociará los archivos MXML con Dreamweaver en lugar de Flex Builder a menos que desmarquemos la opción “Utilizar siempre el programa seleccionado para abrir este tipo de archivos�.

2. Para activar el resaltado de código para archivos MXML, hay que editar un archivo de la configuración de Dreamweaver. La ruta específica (en un SO en español) para la instalación tradicional de Dreamweaver es: C:\Archivos de programa\Macromedia\Dreamweaver 8\Configuration\DocumentTypes\ MMDocumentTypes.xml
3. Abrir el archivo MMDocumentTypes.xml, ubicar y modificar la línea de código siguiente (es la línea 150 aproximadamente):
4. Guardar el archivo y reiniciar.

Compilar desde Dreamweaver

Ahora que ya podemos configurar un sitio y empezar a trabajar con archivos con la extensión MXML dentro de Dreamweaver, lo interesante viene cuando además de poder editar archivos podemos compilarlos directamente.

Para ello, crearemos un comando que nos permita compilar los MXML directamente:

1. Crear un archivo JS nuevo y escribir el siguiente código:

   Nota: este código contempla que el Flex 2 SDK se encuentra a nivel raíz en disco duro (C:\)

2. Crear un archivo HTML Nuevo y agregar el siguiente código:

3. Guardar estos archivos en la carpeta "Commands" de Dreamweaver (C:\Archivos de Programa\Macromedia\Dreamweaver 8\Configuration\Commands) como Flex Compile.js y Flex Compile.htm, respectivamente.
4. Reiniciar Dreamweaver. Ahora existe una nueva opción en el menú "Commands" llamado "Flex Compile" que compilará el documento MXML activo con el compilador de Flex 2, abrirá el reproductor standalone, y guardará un archivo de texto de la salida del compilador.
   

Este código esta basado en un post de Tom Lee con autorización previa del autor, si buscas una explicación más profunda de lo que hace el script y de cómo se comunica con la API de Dreamweaver, es recomendable consultar la entrada en su blog, así mismo ya existe una versión del script para sistema Mac OS X.

Conclusión

En este sencillo ejemplo se muestra un poco de lo que está por venir en el mundo Flex, IDE’s, editores de código, comandos, todo ello para facilitarnos el trabajo. Como beneficio extra al usar una herramienta que de cierta manera no tiene un soporte tan completo en cuanto a auto completar código, desarrollo en modo visual, paneles de componentes, etcétera se refiere, nos obligará a aprender un poco más acerca de MXML y por ende a reconocer sus ventajas.