Este es el primero de 12 artículos que publicaré a lo largo del 2007 acerca de Adobe Flex 2. Una de las mejores herramientas para creación de aplicaciones ricas en medios para Internet. En este artículo mostraremos los pasos para crear un componente redistribuible de Flex (MXML ).
Conocimientos requeridos para entender el artículo:
Saber crear proyectos(de cualquier tipo) en Flex
Nociones básicas de patrones de diseño
Es recomendado que antes de continuar leas algunos de estos enlaces.
Para la creación de un componente redistribuible es necesario crear un proyecto de librería. Para esto debe de seleccionar:
File -> New -> Flex Library Project
A continuación se abre una ventana donde le solicita el nombre del proyecto y la localización del mismo.
Nombre del proyecto: En ese espacio introducimos el nombre que daremos a la librería. En mi caso, la llamaré "danonino"*. En la localización del proyecto podemos dejar la ruta default. Presionar el botón siguiente(next).
*Nota: Para el nombre de librerías y carpetas contenidas en la librería se recomienda el uso exclusivo de minúsculas.
En la siguiente ventana tenemos cuatro pestañas: Clases, Assets, Ubicaciones adicionales y Ubicaciones de las librerías. Básicamente son definiciones de clases a usar, y las rutas que necesitamos(donde se encuentran clases o componentes adicionales, necesarios para compilar nuestra librería). Por ser esta nuestra primer librería no es necesario realizar alguna modificación adicional en esa ventana. Presione el botón finalizar.
Definiendo la estructura de la librería
Crearemos una estructura basándonos en el patrón MVC. ** En nuestro navegador de proyectos (Navigator) aparecerá nuestra librería "danonino". Damos click con el botón secundario del mouse y elegimos:
New -> Folder -> comun
Hacemos lo mismo para crear controllers y data
New -> Folder -> controllers
New -> Folder -> data
Tenemos nuestra estructura definida. Es momento de agregar componentes. Si eres nuevo en esto del MVC, puedes leer la entrada de la wikipedia al respecto.
**Nota: Realmente en Flex, por ahora, no podemos tener una capa de acceso a datos. No hasta que no se generen clientes MySQL, Oracle, SQL Server, ya que técnicamente y gracias a los Sockets binarios, sería posible crearlos.
Agregando componentes a la librería
Para agregar un componente que forme parte de danonino.comun, daremos click con el botón secundario del mouse sobre la carpeta común y seleccionar:
New -> MXML Component
En la ventana de creación de componente, ingresaremos el nombre de su componente (Filename), que es el mismo que el nombre del archivo. Para este ejemplo llamé a su componente "MyComponent". Como este componente estará basado en "TitleWindow" elegiremos esa opción en "Based on". Por ultimo, como layout, escogeremos "Absolute". Luego, presiona el botón Finalizar.
Abre la vista diseño del nuevo componente "MyComponent" y agrega componentes a tu elección. El objetivo de este artículo es mostrar como crear un componente MXML, mas no una funcionalidad en concreto. Puedes, por ejemplo, copiar y pegar el código siguiente como ejemplo de MyComponent.mxml.
En la ventana abierta selecciona la pestaña Clases. Elije las clases que deseas incluir en el archivo SWC. En este caso activé "MyComponent". Tal como se muestra a continuación:
En output folder, seleccionamos la carpeta donde exportaremos el archivo SWC (Es importante memorizar esta ubicación). En mi caso para compartir mis SWC con mi grupo de trabajo la publicaré en mi servidor web.
C:\wamp\www\Danonino\Flex\lib
Y damos "OK". Abrimos la carpeta que definimos como destino y verificamos que el archivo SWC ha sido creado.
Si ves un archivo SWC, felicidades, has creado tu primer componente redistribuible.
Probando el componente
Para probar tus componentes puedes crear un proyecto para pruebas unitarias. Para esto selecciona el menú:
File -> New -> Flex Project
Selecciona la opción de "Basic" (proyecto básico) y presiona siguiente (Next). Asigna el nombre de FlexUnit y presione siguiente (Next).
El siguiente paso es muy importante, selecciona la pestaña "library path". Posteriormente presiona el botón Add SWC, selecciona su nuevo archivo SWC y presiona OK.
En la ventana de creación del proyecto clickea "Finalizar".
Para usar nuestro componente, en el mxml del proyecto "FlexUnit" (main.mxml, flexunit.mxml o como llamaste a tu archivo principal) agrega esto en el tag de la aplicación (mx:Application): xmlns:danonino="comun.*"
Si me parece una buena opción la que comentas zah, no se si especificamente el segundo artículo hable de MVC, pero definitivamente uno de los artículos será dedicado a ello.
Bien explicado. Saludos Isra Por:Israel Gaytán_blog
Hola! Yo ya he montado unos cuantos componentes, pero siempre que pruebo despues la pelicula SWF me sale con un fondo azul degradado, porque? se puede cambiar? Comentaros que estoy usando Eclipse con el Plugin para Flex... Tambien estoy empezando un blog, que me dedicare a temas de Flex, AS, y cosas divertidas y varias, asi que una ayudita pleaseeeee Por:Chema
He comenzado a desarrollar en flex, me parece que es excelente a la hora de crear aplicaciones para internet. Seria posible que dentro de las entregas que vas a realizar expliques (si es posible) como interactuar con datos que residen en un servidor con MS Sql Server? La verdad no tengo ni idea de como hacerlo. Saludos, Excelente aporte. Por:john17_blog
Hola,
Chema,lo del color de fondo, deberías probar cambiar el css.
Respecto al manejo de datos con M. SQL Server, es buena tu sugerencia, pero no me centrarlisaré en un controlador de BD en especifico, tal vez hacer un DAL(Data Access Layer por sus siglas en inglés), que trabaje con SQL Server, Oracle y MySQL.
Excelente eso seria aún mejor, ya que solo seria necesario interactuar con esa capa que de fondo haria todo el trabajo devolviendo los datos por ejemplo en formato XML. Buscando en el WEB consegui un buen articulo de como consumir servicios WEB realizados en ASP.NET y obtener la información en formato XML, es bien sencillo, ya que solo devuelve una cadena el articulo pero es una gran aproximación. En ese mismo articulo se explica como obtener los resultados del servicio desde Flex. Lo que nose es como seria si los datos correspondieran a diferentes consultas, por ejemplo, de clientes, ventas, etc. Que suerte haber encontrado este blog, excelentes artículos, saludos. Por:John17_blog
me gustaria saber como creo repetidamente radiogroups con sus diferentes opciones y despues acceder a sus valores gracias Por:Ivanruva_blog
disculpa estoy interesado en aprender flex no domino el ingles donde podria encontrar en internet un curso en español de flex gracias Por:pacha_blog
de mucha ayuda y muy completo su artículo.
Estoy iniciando el estudio en flex y sigieró que el próximo artículo pueda ser en el diseño de componentes dinámicos, es decir, que pueda enviar paramentros en el momento de llamar el componente para que me devuelva el componente con esas características. Por:gutierrez_blog
Hola Amigos, soy nuevo en Flex y veo que es una herramienta fabulosa, ya hice una aplicacion que me esta sirve mucho. lo que quisiera saber si los archivos swf se pueden reducir mas
Saludos Amigos Flexeros Por:stryker_blog
como se crean menues en Adobe flex ????? Por:Erika_blog
Que haríamos los mortales ojeadores sin los ilustrativos ejemplos de las mentes privilegiadas como la tuya Dano! Fantástico tip! Por:Sisco
muchachos tengo un problema en primer lugar de programación y desarrollo no se mucho aunque hago el esfuerzo hace buen tiempo ando buscando un controlador (.swc) para .swf pero ke no tenga publicidad como el camtasia o el de captive buscando conoci el flex como se ke me llevaria tiempo aprender a desarrollar en este me preguntaba si es que podian decirme donde encontrar lo que busco sea el controlador mismo o un tutorial para hacerlo (vluceroguevara@gmail.com) Por:victorlugue_blog
Hola soy de venezuela y psss un saludo a la gente de cristalab hacen un exelente trabajo... gracias por abrirme los ojos flex es lo mejor que he utilizado... Por:K5_blog
Disculpen mis abreviaciones... ley el articulo "IMPORTANTE" un poco tarde Por:K5_blog
Hola a todos ..hasta ahora estoy indagando respecto aa adobe flex..me gustaría conocer donde encuentro ejemploe de la aplicabilidad de este software..ya que me interesa aprenderlo.....y aplicarlo en el diseño de las interfaces que diseño. Por:luis fabian_blog
hola soy nuevo en esto y necesito de algun tutorial completo de flex en español que me recomiendes, ya que flex es excelente y quisiera aprenderlo Por:FLX_blog
