Empezando con Flex 2: Hola Mundo

Es una práctica habitual, al comenzar a utilizar un nuevo lenguaje de programación, crear un sencillo programa Hola Mundo que nos muestre como escribir y ejecutar un pequeño número de sentencias. Pensando en todos aquellos que se aproximen a Flex 2, he creido conveniente hacer un tutorial simple que muestre como crear un Hola Mundo en Flex 2 en unos pocos pasos claros y concisos.

El código como podeis comprobar, es muy sencillo:

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


[/ftf]

Al compilar, el resultado obtenido es el siguiente:

[swf]/img/entries/holamundo.swf,400,70,9,#FFFFFF,url_no[/swf]

Veamos que pasos tenemos que hacer para compilar este pequeño ejemplo y luego compliquemoslo un poco añadiendo algo más…Flex, como podría ser una funcionalidad Drag’n Drop…


Hola Mundo Simple

El ejemplo es realmente sencillo y con solo seis pasos podreis tener compilado vuestro SWF. He intentado hacerlo lo más simple posible usando el SDK de Flex 2, para más información podeis visitar el siguiente enlace. Relamente lo más fácil sería utilizar Flex Builder 2, el IDE de Flex 2, pero esto lo dejaremos para otro momento.

  1. Crea un fichero vacio llamado “HolaMundo.mxml” en la ruta que prefieras y copia el código anterior en el. Yo lo crearé en “c:\” para simplificar el ejemplo. Nota: El ejemplo lo haré desde Windows, pero el SDK es multiplataforma.
  2. Descarga el SDK de Flex 2. Recuerda que este SDK es gratis y que debes de tener Java instalado.
  3. Descomprímelo en la carpeta que creas conveniente. Yo voy a usar “c:\flex_sdk_2
  4. Abre una ventana de comandos y cambiate al directorio bin de tu instalación. En mi caso “c:\flex_sdk_2\bin
  5. Ejecuta el compilador mxmlc.exe pasandole como parametro el fichero creado en el paso uno. En mi caso la sentencia sería: “mxmlc c:\HolaMundo.mxml
  6. Ya está. En unos segundos tendrás un fichero creado en “c:\” llamado HolaMundo.swf que puedes usar en tu browser favorito.

Hola Mundo (con Drag’n drop)

Vayamos ahora con un ejemplo algo más complejo, los pasos a seguir son similares a los del apartado anterior. Solo tendreis que crear un fichero de texto .mxml con un nombre diferente y compilarlo. Yo lo he llamado “HolaMundo_dnd.mxml“. El código es el siguiente:

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




[/ftf]

Y el resultado es el swf que viene a continuación:

[swf]/img/entries/holamundo_dnd.swf,400,120,9,#FFFFFF,url_no[/swf]

Ahora arrastrando la etiqueta “Hola Mundo” sobre la caja de texto podreis añadir el texto “Hola Mundo” a dicha caja de texto y además aparecerá un dialogo de alerta con ese mismo texto.

En este segundo ejemplo estamos usando el evento mouseDown para iniciar el arrastre del Label con el texto “Hola Mundo”. Para ser capaz de recibir lo que estamos arrastrando, el TextInput debe definir un evento dragEnter. Por último, el TextInput también debe tener definido el evento dragDrop, donde le indicamos las acciones ha realizar siempre y cuando lo que arrastremos cumpla un formato predefinido(en nuestro caso “labelFormat“). Notad que labelProxy es una simple ayuda visual de cara a ver el texto que estamos arrastrando.

Conclusiones

Como podreis comprobar, Flex 2 es un framework que nos hace la vida más fácil a la vez que aumenta las posibilidades y herramientas a la hora de crear a la vez que simplifica mucho la programación gracias a una combinación inteligente de XML(mxml) con AS3.

Una consideración a tener en cuenta son los tamaños de los SWFs creados (115 y 138 ks respectivamente). Estos tamaños se deben a que estamos incluyendo el framework de Flex 2 en dicho SWF el cual nos aporta montones de controles, contenedores y funcionalidades listas para usar.

Apartir de aquí espero que os sea más sencillo empezar a explorar la inmensa cantidad de posibilidades que ofrece Flex 2.

38 Comentarios

  1. javier jaimes

    me gustariia desarrollar aplicaciones con el SDK de Flex 2, sin necesidad de utilizar Flex Builder, tengo entendido que existe un plugin gratuito para eclipse o me gustaria saber si ya existe algun otro IDE para Flex 2

    felicitaciones a todo el equipo de madeinflex

  2. Carlos Rovira

    Hola Javier,

    Ahora mismo la mejor opción para la programación seria es Flex Builder 2. No existen todavía otras opciones gratuitas para Eclipse. La mejor opción gratuita tengo entendido que es FlashDevelop, ya que dispone de plugins para AS3. Pero como te digo estamos muy al comienzo de esta tecnología.

  3. Bandini

    140 kbs para un Hola mundo está bastante bien; cuando haya que hacer una aplicación necesitaremos un par de teras de nada. 😉

  4. Carlos Rovira

    Hola Bandini,

    Con flex estás haciendo una descarga del framework. Conforme crees funcionalidades de tu aplicación, podrás comprobar que si no tuvieses el framework seguramente tu aplicativo sería todavía mas pesado. Estás pagando el coste de descarga una sola vez.

    Es evidente que si vas a crear una aplicación RIA, tendrás que usar varios controles, contenedores, validadores. Conforme tengas unas cuantas vistas, ese centernar de ks te parecerá muy bien empleado ya que tu código no aumentará mucho el SWF final.

    Es una cuestión de cambiar la mentalidad y pensar más …RIA 😉

  5. Tmeister

    Claro, ya lo dijo Carlos. Hay que pensar mas en RIA’s.

    Un ejemplo en desktoptwo la aplicacion mas liviana que tenemos en cuanto a KBs pasa los 200KB, pero en estos tiempos de conexiones de banda ancha a quien le importa. Me diras que en latinoamerica no todos tienen banda ancha, de cualquier forma, con moden de 56K aun es un tamaño aceptable.

  6. Carlos Rovira

    Ahora que lo apuntas Enrique, recuerdo un caso curioso en el que tuvimos que conectarnos a una RIA que hicimos vía modem de 56k. ¡Iba como un tiro!, La primera descarga (unos 500kb), le costó un poquito (tampoc mucho), pero luego iba muy bien. ¿El secreto? Que el tráfico con el servidor era solo de datos. Además estos datos viajaban en AMF (formato binario muy eficiente).

    Em principal problema de mucha gente que se acerca al concepto RIA intenta comprenderlo desde lo que ya conoce: Las Aplicaciones Web tradicionales y esto es causa de muchos problemas.

    Por poner un ejemplo típico, hablemos del concepto de sesión: En RIA la necesidad de tener una sesión es escasa o más bien nula (en la mayoría de casos) por que ya tenemos un cliente que mantiene el estado. Por tanto, el desarrollador web tradicional experimentado, intentará la manera de copiar ese comportamiento sin parar a pensar si es realmente necesario o no.

  7. José María Arce

    Para un inculto en esta tecnología ha sido un placer colaborar con Enrique y Carlos en algunas presentaciones en algunos de mis clientes. Tanto los clientes como yo hemos quedado fascinados por las capacidades que podeis llegar a ofrecer.

    Felicidades por la iniciativa, os deseo lo mejor…

    José María Arce.
    http://www.josemariaarce.es

  8. Juan Jose Tisnado

    cuando ejecuto el holamundo me aparece este error:
    Error: Invalid component name ‘hola-mundo’: component name must be legal ActionScript class name.

    alguien sabe que quiere decir esto????

  9. Juan Jose Tisnado

    ok. eso era mil gracias…. alguno de ud. sabe donde puedo encontrar mas ejemplos???? como alguien puso por ahi, se encuentra poco de este programa en la web.

  10. Aaron Cassorla

    Hola
    Junto con saludarles a todos ï?Š les cuento mi inquietud.
    asta ahora solo asía sitios Web en flash con PHP +XML + MySQL de PHP no se mucho solo formular para formular XML mi pregunta es la sigente es muy distinto hacer aplicación con flex que con solo flash
    Dejo un ejemplo de los que e echo
    http://www.vitaminlife.cl (Web entero pesa aprox 220K)
    http://www.gurgel.cl

    PD: muchas felicidades por el sitio Web que tienes esta buenísimo.

  11. Carlos Rovira

    Aaron, el objetivo de Flex es proporcionar la mejor linea de productos para la creación de Rich Internet Applications, es decir aplicaciones que corren en Internet, Intranet. Para crear sitios web impactantes podrías valerte de Flex conjuntamente con Flash. Quizá todo dependa de el caso concreto que vayas a desarrollar. Lo bueno es que puedes usar Flex, Flash o una combinación de ambos según creas oportuno.

  12. rocket

    Hola, hice los 2 HolaMundo, el primero me funciono pero en el segundo me aparece este error:

    C:\Documents and Settings\Ricardo García\Mis documentos\Flex2\HolaMundo_dnd.mxml(2): col: 77 Error: Unexpected end of token stream. The last token was: .

    ke puede ser??

  13. Ruben Aguilera

    Hola, la tecnología me parece reelmente sorprendente pero alguien ha pensado en la accesibilidad de los sitios web.

    Es decir, me gustaría saber como un navegador para ciegos puede leer una página que esta totalmente hecha en flash como es el ejemplo de la página de afiliación de CCOO.

  14. Carlos Rovira

    Hola Rubén,

    Flash tiene más posibilidades que HTML en ese aspecto. En el caso que me cuentas ¿Que te parecería poner audio guiando al invidente?.

    Como ya he respondido en otra parte en cuanto a la accesibilidad y usabilidad, bien usado, Flash tiene incluso más posibilidades que HTML ya que incluso disponemos de video (y audio como en el ejemplo anterior).

    Ahora bien si intentas validar contenido Flash por métodos creados para HTML (como AAA) fracasarás debido a que esos métodos son especificos de HTML y no pueden ser aplicados a Flash. Por tanto herramientas tenemos muchas más, solo falta que sean usadas de forma correcta por los desarrolladores.

    Quizá sea necesario un artículo al respecto para aclarar estos temas y que la gente conozca las posibilidades que tiene al alcance de la mano.

  15. Paul_Phoenix

    Yo he tenido el mismo problema y lo he solucionado agregando a la línea primera:

    y suprimiendo el signo de admiración “¡” de la palabra “¡ARRASTRAME!”

    Por cierto, donde podría buscar manuales, documentación, API’s, y un entorno de desarrollo gratuito??

    Muchas Gracias.
    Un saludo. Pablo

  16. chefo

    Hola,

    Estoy viendo flex por primera vez. Soy nuevo en java, y me gustaria saber si flex se puede usar ya directamente con eclipse, sin utilizar el Builder. Se que esta pregunta ya la han hecho, pero teniendo en cuenta que fue en septiembre pasado….a lo mejor han cambiado las cosas

    saludos.

  17. Carlos Rovira

    Para codificar de forma rápida y sin problemas sigue siendo necesario Flex Builder 2 (y pronto el 3). Eso no quita que exista gente usando eclipse sin este plugin y usando otras ayudas (scripts ANT,etc…), pero esto no es ni por asomo lo que se puede hacer con FB.

  18. nicolas

    Hola muy lindo el man, ahora donde puedo conseguir un tutorial completo? porque hay cosas que aun no tengo claras gracias

  19. Pingback: marcosdonoso.cl » Tutoriales de Flex

  20. Mon

    Pues a mi, por mas que lo reviso, el segundo “Hola Mundo” me da el error :

    Unexpected end of token stream. The
    last token was: .

  21. federico

    hola que tal me parecio barbaro el ejemplo qeu diste pero me gustaria saber como hacer para que en ves de que aparezca hola mundo el usuario pueda poner por ejemplo su nombre bueno espero me puedas ayudar en esa duda una abrazo

  22. Gabriela Trinidad

    Hola, estoy haciendo mi primer aplicación en Flex pero tengo un problema cuando utilizo el protocolo https en el HTTPService, el swf no me muestra los datos que le estoy pasando a un DataGrid

  23. Mariano

    Hola, soy nuevo en esto y digamos que me estoy desayunando acerca de este nuevo framework. Por lo que vi hasta ahora me parece una interesante forma de integrar a flash dentro de una plataforma web, al igual que lo hacen java con html.
    Una de las principales debilidades que tiene flash es que la ser cerrado su contenido carece de posibilidad de ser indexado por los buscadores, algo que tiene el viejo y conocido html, xhtml y sus derivados. ¿Es posible con flex además de enriquecer una aplicación mantener la misma capacidad de indexación de un simple html?
    saludos.

  24. Carlos Rovira

    Mariano, efectivamente los tiempos en los que Flash no era SEO pasaron a la historia. Hay muchos casos ya de webs flash o flex que son indexadas por google.

    El problema es que no es algo inmediato ya que se trata de una plataforma orientada al aplicativo. Por tanto en caso de estar interesado en algo así tienes que programarlo expresamente.

    Para que te hagas una idea una aplicación que mantenga un estado es complicado que sea indexable ya que puede depender de un usuario o de un estado que necesito de pasos previos para ser recreado. Pero hay otro tipo de aplicativos que si que se prestan a la indexación. Puedes programar este tema solo para esas partes.

    En nuestro caso usamos una técnica bastante depurada que nos permite integrar este tema en todos los proyectos que lo necesiten facilmente y funciona de maravilla. Buscas en Google y el enlace te lleva a la parte Flex exacta donde aparece la referencia buscada…. 🙂

  25. Mariano

    Muchas gracias por tu respuesta, voy a dedicarle mucho a Fx, sobre todo porque soy de los diseñadores o desarrolladores que piensan que la web tiene mucho por evolucionar. saluds

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