MouseOverMenu - Componente de Flex

Despues de no publicar una entrada por mas de dos meses (Por razones de fuerza mayor, ya que me estaba graduando :) ) voy a empezar a publicar bastantes cosas que he venido aprendiendo y he venido trabajando para ustedes.

En este oportunidad decidí crear un componente de flex que permite colocar botones sobre otros componentes de flex cuando el usuario coloque el mouse sobre ellos, es decir, supongan que ustedes tienen un DataGrid de una lista de productos, si el usuario quiere agregar un nuevo producto tendrá que hacer click sobre un botón de agregar nuevo producto. Aqui es donde aparece la magia del componente, veamos el ejemplo:



El componente MouseOverMenu puede ser aplicado a cualquier objeto que herede de la clase DisplayObject y para utilizarlo solo debemos decirle en la propiedad dispatcherObject a que objeto se le va a plicar, en este caso cree un Datagrid llamado "personas".

Es muy importante tener en cuenta que el objetoMouseOverMenu debe ser instanciado siempre despues del objeto al que le va a aplicar, ya que de lo contrario dará un error.

Si un un botón es presionado un evento de tipo OptionClickedEvent es disparado, la propiedad optionClicked de este ecento contendrá el nombre del boton que fue presionado.

Configurando el componente

Para definir los botones del menu debemos pasale al componente un xml en la propiedad menuData que contenga lo siguiente:

1. nombre: Es el nombre del boton que se usará para diferenciar cual boton es precionado en el futuro.
2. icono: El url de la fotografia que se utilizará para representar el boton.
3. position: Puede ser Top, Bottom, Left o Right y dice la ubicacion del botón dentro sobre el componente dispatcherObject.
4. width: dice el ancho del botón.
5. height: dice el alto del botón.

El siguiente es un XML de configuracion:

<options>

 <option
   nombre="Agregar usuario"
   icono="http://aalejo.googlepages.com/add.png"
   position="Top"
   width="20"
   height="20"
   />

  <option
      nombre="Eliminar usuario"
     icono="http://aalejo.googlepages.com/delete2.gif"
     position="Top"
     width="20"
     height="20"
   />

  <option
      nombre="Modificar usuario"
      icono="http://aalejo.googlepages.com/Waterolor-Brush-48x48.png"
      position="Bottom"
      width="20"
      height="20"
   />
</options>

A continuación una aplicacion ejemplo, donde muestro la utilización del componente, tambien esta disponible su descarga junto con el código fuente del componente.

Código:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:component="org.component.*" borderColor="#FFFFFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" width="319" height="159">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.IList;
import org.events.OptionClickedEvent;
import mx.controls.Alert;

private var stockDataAC:ArrayCollection = new ArrayCollection( [
{ name: "Alejandro", phone: 2456798,  email: "alejandro@mail.com" },
{ name: "Emilio", phone: 4572164,  email: "emilio@mail.com" },
{ name: "Jose", phone: 7986435,  email: "jose@mail.com" },
{ name: "Ramon", phone: 1234567,  email: "ramon@mail.com" } ]);

public function clickHandler(e : OptionClickedEvent) : void
{
if(personas.selectedIndex>-1 && e.optionClicked=="Eliminar usuario") IList(stockDataAC).removeItemAt(personas.selectedIndex);
else
{
Alert.show("Hiciste click en: " + e.optionClicked);
}
}

public var menudata : XML = <options>
<option nombre="Agregar usuario" icono="http://aalejo.googlepages.com/add.png" position="Top" width="20" height="20"/>
<option nombre="Eliminar usuario" icono="http://aalejo.googlepages.com/delete2.gif" position="Top" width="20" height="20"/>
<option nombre="Modificar usuario" icono="http://aalejo.googlepages.com/Waterolor-Brush-48x48.png" position="Bottom" width="20" height="20"/>
</options>;
public var menudata2 : XML = <options>
<option nombre="Guardar Data Grid" icono="org/assets/floppy-48x48.png" position="bottom" width="48" height="48"/>                    </options>;
]]>
</mx:Script>

<mx:DataGrid x="0" y="0" id="personas" dataProvider="{stockDataAC}">
<mx:columns>
<mx:DataGridColumn headerText="name" dataField="name"/>
<mx:DataGridColumn headerText="phone" dataField="phone"/>
<mx:DataGridColumn headerText="email" dataField="email"/>
</mx:columns>
</mx:DataGrid>
<component:MouseOverMenu menuData="{menudata}" dispatcherObject="{personas}" optionClicked="clickHandler(event)"/>
</mx:Application>

Continuar leyendo...