FLEX: Creando e invocando componentes MXML...

(Inspirado en el libro de Marco Casario, "Flex solutions")

Nosotros podemos crear componentes usando MXML y AS, y por supuesto, esto tiene sus ventajas.

Como primer práctica, podemos aprender como crear un "MXML component".

Según los que manejan muy bien Flex, crear estos componentes "es muy facil", y solo hay que seguir algunas reglas para definir un componente...
El componente que crearemos se debe definir en un MXML separado y luego instanciado en el tag
Application.
Los componentes MXML seran invocados e importados en nuestro main.

Como ejemplo, un componente MXML para manejar un login, con etrada de usuario y password.

Luego de crear un proyecto flex, que lo llamaremos FlexComponents1, creamos un "MXML component", y vemos que el cuadro de dialogo es un poco distinto:




Le ponemos un nombre "unLogin" en el campo "filename", y en el combo llamado "Based on:",
seleccionamos "Panel". Hacemos click en "Finish" y vemos el siguiente codigo.



<mx:panel mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">
</mx:panel>


Ahora vamos a agregar la interfaz de usuario en un MXML component nuevo.
Agergamos un titulo al panel con la propiedad "title", y lo llamamos "Sign in", quedando de la siguiente manera


<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="400" height="300"
title="Sign in">
</mx:Panel>


Ahora, una vez hecho esto, tenemos que insertar nuestro formulario, que contendrá algunao Labels, un botón, un checkbox y un par de textInput. Esto dentro de nuestro panel.

Todo se puede hacer con la vista de diseño.

el código de esto es:


<mx:Form x="10" y="10" width="360" height="240">
<mx:FormHeading label="Insert your information:"/>
<mx:FormItem label="User">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Password">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Remember me">
<mx:CheckBox label="CheckBox"/>
</mx:FormItem>
<mx:FormItem>
<mx:Button label="button"/>
</mx:FormItem>
</mx:Form>


El tag Form contiene a nuestro formulario, el resto de los tags son cabecera, y los componentes que dijimos antes que ibamos a poner.

Todavia no lo corremos...

Cuando creamos el proyecto FlexComponents1, creó automaticamente el FlexComponents1.mxml, que es nuestro main aplication.(mxml application)

Desde ahí ahora debemos invocar a nuestro componente. Para ello, es necesario declarar un nuevo nameSpace, con el punto del paquete que contiene el MXML component... en codigo:


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

</mx:Application>


El namespace "comp" es nuestro namespace customizado (puede ser cualquier nombre), define el paquete en donde se encuentra nuestro componente, o los componentes a importar.
Usamos el *, porque nuestro componente se halla en el root de nuestro proyecto.
El tag que contiene el nombre de nuestro namespace "comp" lleva como valor el nombre de nuestro componente si la extension "mxml".

Ahora si... corramos nuestra nueva aplicacion y nos debe quedar algo como esto:





Bueno... voy a seguir aprendiendo un poco mas sobre esto... espero para la proxima poder usar metodos

y demas cositas para poder usar nuestro login...

Mariano.-