Discussion :

[toopac]

Bonjour,

Je veux afficher un toolTip de mon cru quand la souris passe sur une ligne d'un dataGrid.
(ici une image à gauche et un formulaire à droite rappelant les infos de la ligne)

Ça marche à peu près, mais juste la première fois.
Si je passe d'une ligne à une autre, j'ai toujours le même toolTip affiché.
En revanche si la souris quitte le datagrid et reviens sur celui ci, le bon toolTip est affiché.

Voici donc mon code :

TestCustomToolTipDatagrid.mxml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:Script>
    <![CDATA[			
      import mx.collections.ArrayCollection;
      import mx.events.ToolTipEvent;
      import mx.events.ListEvent
 
      [Bindable]
      private var elements : ArrayCollection = new ArrayCollection([
        {col1:"A1", col2:"A2",  col3:"A3", img:"../assets/A.png"},
        {col1:"B1", col2:"B2",  col3:"B3", img:"../assets/B.png"},
        {col1:"C1", col2:"C2",  col3:"C3", img:"../assets/C.png"},
      ]);
 
      private function onCreateCustomToolTip(event:ToolTipEvent):void
      {
        var customToolTip:CustomToolTip = new CustomToolTip();
        customToolTip.element = event.target.data;
        event.toolTip = customToolTip;
      }
 
      private function itemRollOver(event:ListEvent):void
      {
        event.target.data = event.itemRenderer.data;                
      }
 
      private function itemRollOut(event:ListEvent):void
      {
        event.target.data = event.itemRenderer.data;
        //event.target.toolTip = null;
      }
 
    ]]>
  </mx:Script>
  <mx:DataGrid id="grid" dataProvider="{elements}" 
    toolTip=" " toolTipCreate="onCreateCustomToolTip(event)"
    itemRollOver="itemRollOver(event)" itemRollOut="itemRollOut(event)">
      <mx:columns>
        <mx:DataGridColumn headerText="col1" dataField="col1"/>
        <mx:DataGridColumn headerText="col2" dataField="col2"/>
        <mx:DataGridColumn headerText="col3" dataField="col3"/>
      </mx:columns>
    </mx:DataGrid>
</mx:Application>

et CustomToolTip.mxml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
  implements="mx.core.IToolTip"
  alpha="0.9"
  borderThickness="5"
  backgroundColor="#FFFFFF"
  borderColor="black"
  borderStyle="solid"
  cornerRadius="10" horizontalAlign="center" 
  paddingTop="10" paddingBottom="10"
  paddingLeft="10" paddingRight="10">
 
  <mx:Script>
    <![CDATA[
      [Bindable]
      private var _element:Object;
 
      public function get element():Object
      {
        return _element;
      }
 
      public function set element(value:Object):void
      {
        _element = value;
      }
 
      public function get text():String
      {
        return null;
      }
 
      public function set text(value:String):void
      {
      } 			
    ]]>
  </mx:Script>
  <mx:Image source="{_element.img}" height="80" width="80"/>
  <mx:Form paddingBottom="10" paddingTop="10" 
    paddingLeft="10" paddingRight="10" >
    <mx:FormItem label="Col1 :">
      <mx:Label text="{_element.col1}"/>
    </mx:FormItem>
    <mx:FormItem label="Col2 :">
      <mx:Label text="{_element.col2}"/>
    </mx:FormItem>
    <mx:FormItem label="Col3 :">
      <mx:Label text="{_element.col3}"/>
    </mx:FormItem>	
  </mx:Form>
</mx:HBox>

Avez vous des idées pour résoudre mon problème?

Merci d'avance!

[Jim_Nastiq]

Salut,

peut être un updateDisplayList pourrait t'aider lors de l'affectation de nouvelles données.

[jylaxx]

Donc il semble que l'événement tooltipCreate ne soit pas déclenché lors d'un changement de ligne mais uniquement lorsque la souris arrive sur la grille.
Cela ne me semble pas anormal.
Et comme tu affectes tes données lors de cet événement...

Il suffit de créer ton instance toolTip lors du toolTipCreate et de l'affecter à une variable de ta classe.

Ensuite lors du rollOver tu affectes la propriété element de cette variable.

ça devrait fonctionner...

[toopac]

Merci pour vos réponses!!
J'ai corrigé mon problème en utilisant la solution de jyl@xx.

Je poste les modifs que j'ai apporté si à tout hasard ça peut intéresser quelqu'un:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
...
private var customToolTip:CustomToolTip = new CustomToolTip();
 
private function onCreateCustomToolTip(event:ToolTipEvent):void
{
  customToolTip = new CustomToolTip();
  customToolTip.element = event.target.data;
  event.toolTip = customToolTip;
}
 
private function itemRollOver(event:ListEvent):void
{
  event.target.data = event.itemRenderer.data;
  customToolTip.element = event.target.data;
}
...

Encore merci!!

[toopac]

en fait le problème n'est que partiellement résolu.
Quand je rentre dans le datagrid avec la souris, sans survoler une ligne, ça affiche mon toolTip vide...
Autre chose, quand je change de ligne le contenu du toolTip change (ça c'est bon), mais pas sa position (assez gênant pour un très gros tableau)

En fait il faudrait que je recrée le toolTip quand l'événement itemRollOver est déclenché.

Et c'est là que je sêche...


Edit :

J'obtiens aussi l'erreur

ypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.managers::ToolTipManagerImpl/http://www.adobe.com/2006/flex/mx/internal::positionTip()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\ToolTipManagerImpl.as:1003]
at mx.managers::ToolTipManagerImpl/http://www.adobe.com/2006/flex/mx/internal::targetChanged()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\ToolTipManagerImpl.as:778]
at mx.managers::ToolTipManagerImpl/http://www.adobe.com/2006/flex/mx/internal::checkIfTargetChanged()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\ToolTipManagerImpl.as:678]
at mx.managers::ToolTipManagerImpl/http://www.adobe.com/2006/flex/mx/internal::toolTipMouseOverHandler()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\ToolTipManagerImpl.as:1341]

dans certaines circonstances, probablement à cause d'u tooltip vide...

[jylaxx]

A ta place j'implémenterai mon propre mécanisme de "rowToolTip".
En effet le fait d'utiliser un toolTip niveau grille et de le détourner pour l'utiliser au niveau ligne est sans doute aussi compliqué sans en avoir tout le contrôle.

Un toolTip c'est juste un popUp qui s'affiche à une certaine position au bout d'un certain temps de présence constante de la souris à un emplacement.

En utilisant les événements itemRollOver et itemRollOut (peut-être mouseMove) et un timer tu dois pouvoir afficher ton popUp quand tu veux et où tu veux.