Comunidad de diseño web y desarrollo en internet

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.

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

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ú:
Project -> Properties -> Flex Library Build Path

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

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.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate