Flexeando - Flex, Air, RIA, UIX, AS3... » Código http://flexeando.com Blog de Flex, Air, RIA, UIX, AS3... Wed, 01 Feb 2012 10:00:00 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Múltiples Item Renderers en un DataGroup http://flexeando.com/2010/10/18/multiples-item-renderers-en-un-datagroup/ http://flexeando.com/2010/10/18/multiples-item-renderers-en-un-datagroup/#comments Tue, 19 Oct 2010 04:12:07 +0000 admin http://flexeando.com/?p=743 Interesante receta que me encontré en el Cookbook, pongan atención en la propiedad itemRendererFunction del DataGroup.

NOTA: Útil para renders más complejos.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 creationComplete="init()">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<fx:Script>
		<![CDATA[
			import com.flexeando.multipleitemrenderers.render.FemeninoItemRender;
			import com.flexeando.multipleitemrenderers.render.MasculinoItemRender;
 
			import mx.collections.ArrayCollection;
			import mx.utils.ObjectProxy;
 
			[Bindable]
			private var arrDataProvider:ArrayCollection = new ArrayCollection();
 
			private var object:ObjectProxy;
 
			private function init():void
			{
				for (var i:uint = 0; i < 20; i++)
				{
					object = new ObjectProxy();
					object.name = "Nombre + " + i;
					object.lastName = "Apellido + " + i;
 
					if (i % 2 == 0)
						object.sexo = "H";
					else			
						object.sexo = "M";
 
					arrDataProvider.addItem(object);
				}
			}
 
			private function getItemRender(o:Object):IFactory
			{
				var clazz:Class;
 
				switch (o.sexo)
				{
					case "M":
						clazz = FemeninoItemRender;
						break;
					case "H":
						clazz = MasculinoItemRender;
						break;
				}
 
				return new ClassFactory(clazz);
			}
 
		]]>
	</fx:Script>
 
	<s:DataGroup height="600" width="100" 
				 dataProvider="{arrDataProvider}"
				 itemRenderer="com.flexeando.multipleitemrenderers.render.FemeninoItemRender"
				 itemRendererFunction="getItemRender">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
	</s:DataGroup>
</s:Group>


FemeninoItemRender.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" 
				autoDrawBackground="true">
 
	<s:states>
		<s:State name="nomal" />
		<s:State name="inactive" />
	</s:states>
 
	<s:Rect height="100%" width="100%">
		<s:fill>
			<s:SolidColor color="0xFFB6C1"/>
		</s:fill>
	</s:Rect>
 
	<s:Group>
		<s:layout>
			<s:HorizontalLayout />
		</s:layout>
		<s:Label text="{data.name}"/>
		<s:Label text="{data.lastName}"/>
		<s:Label text="{data.sexo}"/>
	</s:Group>
 
</s:ItemRenderer>

MasculinoItemRender.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" 
				autoDrawBackground="true">
 
	<s:states>
		<s:State name="nomal" />
		<s:State name="inactive" />
	</s:states>
 
	<s:Rect height="100%" width="100%">
		<s:fill>
			<s:SolidColor color="0x00FFFF"/>
		</s:fill>
	</s:Rect>
 
	<s:Group>
		<s:layout>
			<s:HorizontalLayout verticalAlign="middle" />
		</s:layout>
		<s:Label text="{data.name}"/>
		<s:Label text="{data.lastName}"/>
		<s:Label text="{data.sexo}"/>
	</s:Group>
 
</s:ItemRenderer>

Resultado:

]]> http://flexeando.com/2010/10/18/multiples-item-renderers-en-un-datagroup/feed/ 0 Componente de búsqueda estilo Grooveshark http://flexeando.com/2010/09/10/componente-de-busqueda-estilo-grooveshark/ http://flexeando.com/2010/09/10/componente-de-busqueda-estilo-grooveshark/#comments Fri, 10 Sep 2010 22:17:44 +0000 admin http://flexeando.com/?p=724 Me he vuelto muy fanático de Grooveshark, me gusta mucho su interfaz y la experiencia de usuario que brinda. Tiene componentes sencillos e interesantes que no es muy común ver en otras aplicaciones.

Me ha llamado mucho la atención uno de los campos de búsqueda (esquina superior izquierda), me agrada que esté ahí: es muy útil y su comportamiento esta muy bien solucionado.

Me tomé un tiempo para hacer el componente, tiene varias cosas que mejorar pero ya esta funcional, sin duda lo usaré en alguno de mis proyectos. Agrega una búsqueda y presiona enter ;-)


Aquí esta el código fuente y descarga

]]> http://flexeando.com/2010/09/10/componente-de-busqueda-estilo-grooveshark/feed/ 0 Encontrar propiedad de objeto en un ArrayCollection http://flexeando.com/2010/01/11/encontrar-propiedad-de-un-objeto-en-un-arraycollection/ http://flexeando.com/2010/01/11/encontrar-propiedad-de-un-objeto-en-un-arraycollection/#comments Mon, 11 Jan 2010 18:18:33 +0000 admin http://flexeando.com/?p=198 
private function findPropertyAtArrayCollection(arrayCollection:ArrayCollection, object:Object):Number
{
	var n:Number = arrayCollection.length;
	var index:Number = -1;
 
	for(var i:uint = 0; i < n; i++)
	{
		if(object["uri"] == arrayCollection[i].uri)
			index = i;
	}
 
	return index;
}
]]> http://flexeando.com/2010/01/11/encontrar-propiedad-de-un-objeto-en-un-arraycollection/feed/ 1 Función para invertir una cadena http://flexeando.com/2009/11/17/funcion-para-invertir-una-cadena/ http://flexeando.com/2009/11/17/funcion-para-invertir-una-cadena/#comments Tue, 17 Nov 2009 16:51:20 +0000 admin http://flexeando.com/?p=24 
private function invertirCadena(cadena:String):String
{
      // split("") : separa la cadena y la convierte en un array.
      // reverse() : invierte el array de manera automática.
     // join("") : Úne nuevamente la cadena para retornarla.
 
     return cadena.split("").reverse().join("");
}
]]> http://flexeando.com/2009/11/17/funcion-para-invertir-una-cadena/feed/ 0