Como crear componentes en Flex 2

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.

• Tutorial de Flex 2 con PHP (WebORB)
  
• Primeros pasos en Flex 2: Lector RSS
  
• Bitmap a array de imagenes con Actionscript 3 en Flex 2
  
• Hola mundo en Flex 2
  
• MXML vs AS3

Creando la librería

Para la creación de un componente redistribuible es necesario crear un proyecto de librería. Para esto debe de seleccionar:
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).

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:

Hacemos lo mismo para crear controllers y 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.

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:


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.

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" title="Opciones">
   <mx:Label x="71" y="51" text="Seleccione una opción:"/>
   <mx:RadioButtonGroup id="rg"/>
   <mx:RadioButton x="95" y="93" label="Opción 1" groupName="rg"/>
   <mx:RadioButton x="95" y="117" label="Opción 2" groupName="rg"/>
   <mx:RadioButton x="95" y="143" label="Opción 3" groupName="rg"/>
   <mx:Button x="144.5" y="183" label="Seleccionar"/>
</mx:TitleWindow>

Creando el archivo SWC

Selecciona el menú:

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.

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ú:

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.*"

De tal manera que el tag quedaría así:

Código :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:danonino="comun.*">

Este es un ejemplo de un MXML usando el componente que creamos:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:danonino="comun.*">
 <danonino:MyComponent>
    
 </danonino:MyComponent>
</mx:Application>

Espero que este aporte sea de tu agrado, nos vemos en la próxima entrega.

PD. Si tienen alguna sugerencia/petición de cual debe ser mi próximo artículo no duden en comentarla.

 

Tweet