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:

Código :

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

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

Código :

<mx:VBox width="25%" horizontalCenter="0" verticalCenter="0">
<mx:Label text="Claber más Popular" fontWeight="bold" fontSize="18"/>
<mx:HBox width="100%" height="100%">
   <mx:Legend id="legend1" dataProvider="{pie1}"/>
   <mx:PieChart id="pie1" dataProvider="{premioPopular}" showDataTips="true" width="150" height="150">
      <mx:series>
         <mx:PieSeries field="votos" nameField="claber"/>
      </mx:series>
   </mx:PieChart>
      </mx:HBox>
</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.

Código :

var sortField:SortField = new SortField();
sortField.name = "votos";
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).

Código :

var sort:Sort = new Sort();
sort.fields = [sortField];
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.

Código :

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

Todo este código anterior estaría metido en una función llamada, por ejemplo, sortArray. Esta función la ejecutoriamos en el initialize de la aplicación. Lo haremos en el initialize y no en el applicationComplete ya que de hacerlo una ver la aplicación está creada visualizaríamos por un instante la gráfica inicial y el refresco a la gráfica ordenada. Con initialize ordenamos el Array antes de visualizar la aplicación.

Código :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="sortArray()">

Este es es resultado:



Y aquí, el código completo:

Código :

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

    <mx:Script>
    <![CDATA[
       import mx.collections.ArrayCollection;
      import mx.collections.SortField;
      import mx.collections.Sort;
       //----------------------------------------------------------------
       [Bindable]
       public var premioPopular:ArrayCollection = new ArrayCollection([
         {claber: "Eldervaz", votos: 6},
         {claber: "Freddie", votos: 13},
         {claber: "XKlibur", votos: 3},
         {claber: "TheParrot", votos: 7},
         {claber: "M@U", votos: 1},
         {claber: "Mariux", votos: 4},
         {claber: "JaLeRu", votos: 1},
         {claber: "Pley", votos: 1},
       ]);
       //----------------------------------------------------------------
       public function sortArray():void
       {         
         var sortField:SortField = new SortField();
         sortField.name = "votos";
         sortField.numeric = true;
         var sort:Sort = new Sort();
         sort.fields = [sortField];
         sort.reverse();

         premioPopular.sort = sort;
         premioPopular.refresh();
       }
   ]]>
    </mx:Script>

   <mx:VBox width="25%" horizontalCenter="0" verticalCenter="0">
   <mx:Label text="Claber más Popular" fontWeight="bold" fontSize="18"/>
   <mx:HBox width="100%" height="100%">
      <mx:Legend id="legend1" dataProvider="{pie1}"/>
      <mx:PieChart id="pie1" dataProvider="{premioPopular}" showDataTips="true" width="150" height="150">
         <mx:series>
            <mx:PieSeries field="votos" nameField="claber"/>
         </mx:series>
      </mx:PieChart>
         </mx:HBox>
   </mx:VBox>
   
</mx:Application>

PD: Los que no lo hayan hecho aun, recuerden que aun están a tiempo de votar en los premios Cristalab 2008.

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