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. [ftf w=”400″ h=”140″]
    [/ftf]

  5. 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:

    [ftf w=”400″ h=”400″]function flexCompile(){
    var currentDocURL = dreamweaver.getDocumentPath(“document”);
    var i = currentDocURL.lastIndexOf(“/”);

    var parentDirectoryURL = currentDocURL.substring(0,i+1);
    var fileNameURL = currentDocURL.substring(0,currentDocURL.lastIndexOf(“.”));

    var parentDirectory = MMNotes.localURLToFilePath(parentDirectoryURL);
    var fileName = MMNotes.localURLToFilePath(fileNameURL);

    var currentDocFile = MMNotes.localURLToFilePath(currentDocURL);
    if(!currentDocFile){
    alert(“You must have an mxml document open to compile.”);
    }else{
    MM.createProcess(”, ‘C:\\flex_sdk_2\\bin\\mxmlc.exe “‘+currentDocFile+'” -output “‘+
    fileName+’.swf”‘, -1, true, parentDirectory ,parentDirectory+’flex-compiler-output.txt’);
    dreamweaver.openWithApp(fileNameURL+’.swf’,’file:///C:/flex_sdk_2/player/debug/SAFlashPlayer.exe’);
    }
    }

    function canAcceptCommand(){
    return dreamweaver.getDocumentPath(“document”).indexOf(“.mxml”) != -1;
    }
    [/ftf]

    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:

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


    Flex Compile





    [/ftf]

  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.

8 Comentarios

  1. Pingback: Monopolio Podcast .... el podcast más demandado

  2. deil

    Configurado dreamweaver e instalado flex sdk siguiendo las instrucciones de este tutorial, intente comprobar el correcto funcionamiento de un sencillo codigo flex en el que se incluye cierta funcionalidad basica en actionscript :

    Manejando eventos con actionscript 3.0

    he seguido todos los pasos de este magnifico tutorial para complilar archivos mxml desde dreamweaver empleando flex sdk y todo codigo que incluye actionscript no me compila.

    El player queda abierto con la pantalla en blanco y despues de unos segundos se lanza una ventana con un mensaje de error.

    He seguido lo pasos del tutorial y tengo instalada la ultima version de jre.

    Existe alguna limitacion ?? necesito instalar otros elementos ??

    solo podre crear aplicaciones con este metodo que no incluyan codigo actionscript?

    gracias.

  3. Edgar Parada

    He probado el código del Quickstart que mencionas y me ha funcionado sin problemas, solo que si haces copy paste desde la página te pone unos espacios en blanco antes de la apertura de xml, trata quitar esos espacios a ver si te funciona 🙂

  4. deil

    gracias Edgar, tal vez los nervios de poder utilizar flex desde mi maquetador web favorito sin necesidad de desembolsar mas dinero para una nueva licencia, hayan echo que estos pequeños detalles me hayan jugado una mala pasada, a los pocos minutos borre esos espacios en blanco y si funcionaba jajaja gracias, sinceramente tener algo tan potente y de forma totalmente gratuita y simplemente con una sola licencia de un producto oficial como es dreamweaver es algo sorprendente.

    Muchas gracias por la rapidez en la respuesta

  5. Giovanny

    Si quieren algo realmente gratis usen context, que es el mejor editor que existe, yo lo uso para compilar java y mxml y as, eso del autocompletado no me ayuda mucho ya quye vuelve mas inutil, y no recuerdo luego la forma correcta de escribir las sentencias. 🙂

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