Home » Avanzado »Flex » Currently Reading:

Ordenar los elementos de un ArrayCollection en Flex

enero 10, 2009 Avanzado, Flex 3 Comments
Ordenar los elementos de un ArrayCollection en Flex

En el siguiente tip mostraré como ordenar un ArrayCollection en Flex. Esto nos puede ser necesario a la hora de mostrar su contenido. Para mostrar esto utilizaré como ejemplo los resultados (hasta este momento) de las votaciones de los premios Cristalab 2008.

Supongamos que tenemos este ArrayCollection:

  1. public var premioPopular:ArrayCollection = new ArrayCollection([
  2.         {claber: "Eldervaz", votos: 6},
  3.     {claber: "Freddie", votos: 13},
  4.     {claber: "XKlibur", votos: 3},
  5.     {claber: "TheParrot", votos: 7},
  6.     {claber: "M@U", votos: 1},
  7.     {claber: "Mariux", votos: 4},
  8.     {claber: "JaLeRu", votos: 1},
  9.     {claber: "Pley", votos: 1},
  10. ]);

Y asignamos este ArrayCollection a un componente PieChart para mostrar los resultados:

  1. <mx:VBox width="25%" horizontalCenter="0" verticalCenter="0">
  2. <mx:Label text="Claber más Popular" fontWeight="bold" fontSize="18"/>
  3. <mx:HBox width="100%" height="100%">
  4.     <mx:Legend id="legend1" dataProvider="{pie1}"/>
  5.     <mx:PieChart id="pie1" dataProvider="{premioPopular}" showDataTips="true" width="150" height="150">
  6.         <mx:series>
  7.             <mx:PieSeries field="votos" nameField="claber"/>
  8.         </mx:series>
  9.     </mx:PieChart>
  10.       </mx:HBox>
  11. </mx:VBox>

Daría este resultado:

Como podemos ver, los resultados aparecen en el orden en que están colocados dentro del ArrayCollection. Pero de esta manera en el Legend no sabemos quien es el que obtuvo más votos.

En este caso podríamos haber ordenado el ArrayCollection manualmente, pero para casos más complejos nos resultaría más fácil ordenarlo por código. Para ello utilizaremos la clase SortField y la clase Sort.

Crearemos una instancia de la clase SortField, y le pasaremos como propiedad el nombre del parámetro que queremos ordenar del ArrayCollection. También indicaremos si el parámetro a ordenar es un dato numérico o no.

  1. var sortField:SortField = new SortField();
  2. sortField.name = "votos";
  3. sortField.numeric = true;

También crearemos una instancia de la clase Sort y le pasaremos referencia del objeto SortField creado. Aqui ejecutaremos el método reverse() para que la ordenación de elementos sea de mayor a menor (por defecto es de nemor a mayor).

  1. var sort:Sort = new Sort();
  2. sort.fields = [sortField];
  3. sort.reverse();

Ahora pasaremos este objeto al ArrayCollection, y ejecutaremos el método refresh() que hará que el Array se ordene segun los parámetros indicados.

  1. premioPopular.sort = sort;
  2. premioPopular.refresh();

Este es es resultado:

Compártelo:

Ordenar los elementos de un ArrayCollection en Flex
Visto 9.789 veces

Currently there are "3 comments" on this Article:

  1. Bleend dice:

    Mmm… Los objetos SWF están embebidos en un tamaño mas pequeño o algo, porque salen las barras de desplazamiento U_U

  2. XKlibur dice:

    Muy sencillo y práctico :)

  3. JaLeRu dice:

    Fíjate que me senté a ver tu tutorial (Por cierto muy útil) y me encontré con mi Nick. No sabia que alguien había votado por mi en los premios Clab. :O

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email

Post destacado

AdobeTV: Videotutorial de creacion de componentes en Flex

15 ene 2009

Videotutorial “Creating New Components in Flex 3” por Deepa Subramaniam Post relacinonados: Ordenar elementos de un Vector en Actionscript 3 Modificar datos en componentes Flex con ItemEditors Cómo personalizar los iconos en componentes Tree de Flex



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com