Cómo mostrar tooltips dentro de componentes List de Flex

Posted by admin | Flex,Tutoriales | Wednesday 30 July 2008 7:13 pm

Este es un =http://www.cristalab.com/tipstip[/url] muy sencillito que consiste en cómo añadir tooltips a cada uno de los elementos de un componente List en Flex.

Primero de todo supongamos que tenemos un compomente list en nuestra aplicación que nos muestra un listado. En este caso tenemos un listado de usuarios de Clab dentro de un Array registrando el nombre y el clablevel.

PLAIN TEXT
CODE:
  1. <mx:List id="listado"
  2.     horizontalCenter="0" verticalCenter="0"
  3.     width="200" height="200">
  4.    
  5.     <mx:dataProvider>
  6.     <mx:Array>
  7.             <mx:Object label="Freddie" level="43458"/>
  8.             <mx:Object label="Elecash" level="7289"/>
  9.             <mx:Object label="_Conejo" level="7203"/>
  10.             <mx:Object label="XKlibur" level="4713"/>
  11.             <mx:Object label="Zguillez" level="4120"/>
  12.             <mx:Object label="Eldervaz" level="3123"/>
  13.             <mx:Object label="Mariux" level="2921"/>
  14.             <mx:Object label="Zah" level="2906"/>
  15.             <mx:Object label="Bleend" level="2016"/>
  16.             <mx:Object label="Carmen Vivas" level="610"/>
  17.         </mx:Array>
  18.     </mx:dataProvider> 
  19. </mx:List>

En este punto el componente List nos muestra los nombres que corresponden al parámetro "label" de los objetos del Array.

Ahora queremos que al pasar el cursor sobre los nombres nos muestre el valor del parámetro "level" a modo de tooltip. Para realizar esto añadiremos el parámetro showDataTips y showDataTips al componente List..

PLAIN TEXT
CODE:
  1. <mx:List id="listado"
  2.     horizontalCenter="0"
  3.     verticalCenter="0"
  4.     width="200" height="200"
  5.     showDataTips="true"
  6.     dataTipFunction="showTip">

La función showTip asignada al parámetro dataTipFunction es la definirá el contenido del tooltip a mostrar según cada objeto del Array.

PLAIN TEXT
CODE:
  1. <mx:Script>
  2.     <![CDATA[            
  3.         public function showTip(i:Object):String
  4.         {
  5.             return i.level;
  6.         }
  7.     ]]>
  8. </mx:Script>

Este es el resultado:

El inconveniente de este sistema es que el tooltip se situa sobre la misma linea del item al que se le hace rollover. Si no nos interesa esto y queremos que el tooltip quede situado al lado del cursor deberemos utilizar otro sistema, la clase ToolTipManager.

Para utilizar la clase ToolTipManager tendremos que utilizar un itemRenderer que sea el que muestre los elementos del componente List.

Este será nuestro itemRenderer, un simple label:

PLAIN TEXT
CODE:
  1. <mx:itemRenderer>
  2.     <mx:Component>
  3.         <mx:Label text="{data.label}" toolTip="{data.level}"/>
  4.     </mx:Component>
  5. </mx:itemRenderer>

Aqui directamente definimos el tooltip directamente al Label, visualizándose directamente para todos los elementos del listado. Permitiendonos utilizar todas las caráteristicas que nos permite la clase ToolTipManager. En este caso eliminaremos la función showTip ya que aqui no la estamos utilizando.

Los códigos completos de las dos versiones serían estos:

PLAIN TEXT
CODE:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.    
  4.     <mx:Script>
  5.         <![CDATA[         
  6.             public function showTip(i:Object):String
  7.             {
  8.                 return i.level;
  9.             }
  10.         ]]>
  11.     </mx:Script>
  12.  
  13.     <mx:List id="listado"
  14.         horizontalCenter="0"
  15.         verticalCenter="0"
  16.         width="200" height="200"
  17.         showDataTips="true"
  18.         dataTipFunction="showTip">
  19.        
  20.         <mx:dataProvider>
  21.             <mx:Array>
  22.                 <mx:Object label="Freddie" level="43458"/>
  23.                 <mx:Object label="Elecash" level="7289"/>
  24.                 <mx:Object label="_Conejo" level="7203"/>
  25.                 <mx:Object label="XKlibur" level="4713"/>
  26.                 <mx:Object label="Zguillez" level="4120"/>
  27.                 <mx:Object label="Eldervaz" level="3123"/>
  28.                 <mx:Object label="Mariux" level="2921"/>
  29.                 <mx:Object label="Zah" level="2906"/>
  30.                 <mx:Object label="Bleend" level="2016"/>
  31.                 <mx:Object label="Carmen Vivas" level="610"/>
  32.             </mx:Array>
  33.         </mx:dataProvider>   
  34.     </mx:List> 
  35. </mx:Application>

PLAIN TEXT
CODE:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.  
  4.     <mx:List id="listado"
  5.         horizontalCenter="0"
  6.         verticalCenter="0"
  7.         width="200" height="200">
  8.        
  9.         <mx:itemRenderer>
  10.             <mx:Component>
  11.                 <mx:Label text="{data.label}" toolTip="{data.level}"/>
  12.             </mx:Component>
  13.         </mx:itemRenderer>
  14.  
  15.         <mx:dataProvider>
  16.             <mx:Array>
  17.                 <mx:Object label="Freddie" level="43458"/>
  18.                 <mx:Object label="Elecash" level="7289"/>
  19.                 <mx:Object label="_Conejo" level="7203"/>
  20.                 <mx:Object label="XKlibur" level="4713"/>
  21.                 <mx:Object label="Zguillez" level="4120"/>
  22.                 <mx:Object label="Eldervaz" level="3123"/>
  23.                 <mx:Object label="Mariux" level="2921"/>
  24.                 <mx:Object label="Zah" level="2906"/>
  25.                 <mx:Object label="Bleend" level="2016"/>
  26.                 <mx:Object label="Carmen Vivas" level="610"/>
  27.             </mx:Array>
  28.         </mx:dataProvider>   
  29.     </mx:List> 
  30. </mx:Application>

Be Sociable, Share!

Post relacinonados:

  1. Modificar datos en componentes Flex con ItemEditors
  2. Cómo personalizar los iconos en componentes Tree de Flex
  3. Personalizar la tipografía en componentes Flex
  4. AdobeTV: Videotutorial de creacion de componentes en Flex
  5. Cargar XML en un componente List en Actionscript 3

2 Comments »

  1. Comment by pisosdecordoba — 20 October, 2008 @ 6:15 am

    ToolTipManager es una clase de as3? o es una clase personal?

    Gracias

  2. Comment by admin — 20 October, 2008 @ 6:32 am

    La clase ToolTipManager es una clase de Flex 2.
    Aqui puedes ver la referencia:
    http://livedocs.adobe.com/flex/2/langref/mx/managers/ToolTipManager.html

RSS feed for comments on this post. TrackBack URI

Leave a comment

Get Adobe Flash playerPlugin by wpburn.com wordpress themes