Cómo personalizar los iconos en componentes Tree de Flex

En este tip mostraré como podemos personalizar los iconos de las carpetas y de los objetos que se visualizan en un componente Tree en Flex.

Para empezar veremos que automáticamente Flex coloca unos iconos por defecto al visualizar un componente Tree. Un icono de carpete abierta o cerrada segun sea el caso, y una hoja de papel en blanco para los objetos:

Ahora veremos cómo podemos utilizar nuestros propios iconos.

Para este ejemplo he utilizado el siguiente dataProvider de base, que consta de un XMLList que coloca a los diferentes Claber en nodos según su grupo.

Código :

<mx:XMLList id="listado">
   <group name="admin">
      <claber name="Freddie" level="43458"/>
   </group>
   <group name="Bofh">
      <claber name="_Conejo" level="7203"/>
      <claber name="Zguillez" level="4120"/>
      <claber name="Mariux" level="2921"/>
   </group>
   <group name="swat">
      <claber name="Eldervaz" level="3123"/>
      <claber name="Zah" level="2906"/>
   </group>
   <group name="pda">
      <claber name="XKlibur" level="4713"/>
   </group>
   <group name="claber">
      <claber name="Elecash" level="7289"/>
      <claber name="Bleend" level="2016"/>
      <claber name="Carmen Vivas" level="610"/>
   </group>
</mx:XMLList>

Este XMLList añadido a un componente Tree daría el resultado estándar.

Código :

<mx:Tree id="listadoClabers"
   horizontalCenter="0" verticalCenter="0" 
   width="200" height="200" 
   dataProvider="{listado}"
   labelField="@name">
</mx:Tree>

Para poder asignarle unos nuevos iconos al componente lo primero que hay que hacer es incorporar a la aplicación los archivos bitmap de los iconos e incluirlos como Clases. Para ello crearemos las variables dentro del tag <mx:script>, embederemos los bitmaps y haremos las variables Blindables.

Código :

<mx:Script>
   <![CDATA[
      [Bindable]
      [Embed(source="img/ico1.png")]
      private var ico1:Class;      
      
      [Bindable]
      [Embed(source="img/ico2.png")]
      private var ico2:Class;
      
      [Bindable]
      [Embed(source="img/ico3.png")]
      private var ico3:Class;
   ]]>
</mx:Script>

Ahora asignaremos estas clases que contienen los bitmaps a los iconos personalizados del componente. Para ello utilizaremos las propiedades del componente folderClosedIcon, folderOpenIcon, defaultLeafIcon para los diferentes casos.

Código :

<mx:Tree id="listadoClabers"
   horizontalCenter="0" verticalCenter="0" 
   width="200" height="200" 
   dataProvider="{listado}"
   labelField="@name"
   folderClosedIcon="{ico1}"
   folderOpenIcon="{ico2}"
   defaultLeafIcon="{ico3}">
</mx:Tree>

Solo con esto al publicar la aplicación ya hemos personalizado los iconos:



Ahora vamos a ver un caso algo más complejo, imaginemos que necesitamos un icono diferente para diferentes grupos de objetos, por ejemplo un icono para los clabers hombre y otro para las clabers mujeres. para realizar esto ya deberemos echar mano de actionscript.

lo primero será asignar una función que controlará los iconos el componente. Si realizamos esta acción podemos eliminar las propiedades de iconos personalizados ya que esos valores se sobreescribirán con los de la función actionscript. En este caso crearemos una función llamada setGeneroIcon.

Código :

<mx:Tree id="listadoClabers"
   horizontalCenter="0" verticalCenter="0" 
   width="200" height="200" 
   dataProvider="{listado}"
   labelField="@name"
   iconFunction="setGeneroIcon">
</mx:Tree>

Ahora bien, para conseguir el mismo efecto de iconos de carpeta abierta y cerrada, y el nuevo icono diferenciado segun el genero del claber, deberemos modificar un poco el XMLList, añadiéndole unos parámetros a los nodos. Añadiremos un parametro que nos indique que el nodo en cuestión es una carpeta (folder="true"), y añadiremos un parámetro a los nodos de los clabers que nos indique su genero (genero="M" o genero="F").

Código :

<mx:XMLList id="listado">
   <group name="admin" folder="true">
      <claber name="Freddie" level="43458" genero="M"/>
   </group>
   <group name="Both" folder="true">
      <claber name="_Conejo" level="7203" genero="M"/>
      <claber name="Zguillez" level="4120" genero="M"/>
      <claber name="Mariux" level="2921" genero="F"/>
   </group>
   <group name="swat" folder="true">
      <claber name="Eldervaz" level="3123" genero="M"/>
      <claber name="Zah" level="2906" genero="M"/>
   </group>
   <group name="pda" folder="true">
      <claber name="XKlibur" level="4713" genero="F"/>
   </group>
   <group name="claber" folder="true">
      <claber name="Elecash" level="7289" genero="M"/>
      <claber name="Bleend" level="2016" genero="M"/>
      <claber name="Carmen Vivas" level="610" genero="F"/>
   </group>
</mx:XMLList>

Ahora toca crear la función que asigne los iconos según corresponda.

Empezaremos por los iconos de carpeta abierta o cerrada. Para ello realizaremos una comprobación según si el nodo corresponde a una carpeta, y en tal caso realizaremos una segunda comprobación según si la carpeta está abierta o cerrada (isItemOpen).

Código :

private function setGeneroIcon(i:Object):Class
{
   var isFolder:String = String(i.@folder);            
   if (isFolder == "true")
   {
      if (listadoClabers.isItemOpen(i))
      {
         return ico2;
      }
      else
      {
         return ico1;
      }
   }

En caso de no tratarse de una carpeta realizaremos la comprobación de la propiedad genero de los nodos y según sea uno u otro colocaremos el icono que le corresponda.

Código :

   else
   {
      var genero:String = String(i.@genero);
      if (genero == "M")
      {
         return ico3;
      }
      else if (genero == "F")
      {
         return ico4;
      }
      else
      {
         return null;
      }
   }
}
]]>
</mx:Script>

NOTA: el icono ico4 es un icono nuevo para los clabers mujeres que deberemos haber creado de la misma manera que los vistos anteriormente.

Este es el resultado:



Este es el código completo y el swf funcional:

Código :

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

   <mx:Script>
      <![CDATA[
         [Bindable]
         [Embed(source="img/ico1.png")]
         private var ico1:Class;         
         
         [Bindable]
         [Embed(source="img/ico2.png")]
         private var ico2:Class;
         
         [Bindable]
         [Embed(source="img/ico3.png")]
         private var ico3:Class;

         [Bindable]
         [Embed(source="img/ico4.png")]
         private var ico4:Class;
         
         private function setGeneroIcon(i:Object):Class
         {
            var isFolder:String = String(i.@folder);            
            if (isFolder == "true")
            {
               if (listadoClabers.isItemOpen(i))
               {
                  return ico2;
               }
               else
               {
                  return ico1;
               }
            }
            else
            {
               var genero:String = String(i.@genero);
               if (genero == "M")
               {
                  return ico3;
               }
               else if (genero == "F")
               {
                  return ico4;
               }
               else
               {
                  return null;
               }
            }
         }
      ]]>
   </mx:Script>
   
   <mx:XMLList id="listado">
      <group name="admin" folder="true">
         <claber name="Freddie" level="43458" genero="M"/>
      </group>
      <group name="Both" folder="true">
         <claber name="_Conejo" level="7203" genero="M"/>
         <claber name="Zguillez" level="4120" genero="M"/>
         <claber name="Mariux" level="2921" genero="F"/>
      </group>
      <group name="swat" folder="true">
         <claber name="Eldervaz" level="3123" genero="M"/>
         <claber name="Zah" level="2906" genero="M"/>
      </group>
      <group name="pda" folder="true">
         <claber name="XKlibur" level="4713" genero="F"/>
      </group>
      <group name="claber" folder="true">
         <claber name="Elecash" level="7289" genero="M"/>
         <claber name="Bleend" level="2016" genero="M"/>
         <claber name="Carmen Vivas" level="610" genero="F"/>
      </group>
   </mx:XMLList>
   
   <mx:Tree id="listadoClabers"
      horizontalCenter="0" verticalCenter="0" 
      width="200" height="200" 
      dataProvider="{listado}"
      labelField="@name"
      folderClosedIcon="{ico1}"
      folderOpenIcon="{ico2}"
      defaultLeafIcon="{ico3}"
      iconFunction="setGeneroIcon">
   </mx:Tree>
   
</mx:Application>

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