[CS4] Tooltip avec image sur survol lignes datagrid

[granchef]

Bonjour!

Je n'arrive pas à afficher une image dans l'infobulle qui s'affiche sur survol des lignes du datagrid.
Voici mon code mxml:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<mx:DataGrid id="dg1" click="selecPub(event)" >
		<mx:columns>
			<mx:DataGridColumn headerText="Type de publication"  dataField="@categorie"/>
		</mx:columns>
	</mx:DataGrid>
 
	<mx:DataGrid id="dg2" x="175" y="36" width="290" height="318" click="selectTitre(event)"
				 itemRollOver="toolTipCreate(event)" rollOut="suppBull()"
				 >
		<mx:columns>
			<mx:DataGridColumn headerText="Titre"  dataField="@titre"  showDataTips="true" />
			<mx:DataGridColumn headerText="Année pub."  dataField="@dateP" showDataTips="true"/>
			<mx:DataGridColumn visible="false" headerText="pdf associé"  dataField="@NomPdf"/>
		</mx:columns>
	</mx:DataGrid>

selecPub sert à afficher les titres de publication pour la catégorie choisie,
selectTitre affiche le document Pdf associé à la fiche choisie.
tootTipCreate, sur survol souris, créé une infobulle (code ci-dessous) par utilisation de ToolTipManager.createToolTip
suppBull, sur perte focus du datagrid, supprime l'infobulle : ToolTipManager.destroyToolTip
Voici le code lié aux deux dernières fonctions:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
private function toolTipCreate(e:ListEvent):void {
 
				if (tt) {
					ToolTipManager.destroyToolTip(tt);
				}
				var myString:String =docXml.publication.(@id==toto).fiche.(@idFic==e.rowIndex+1).@desc;
				tt = ToolTipManager.createToolTip(myString,500,36);
 
			}
			private function suppBull():void {
				if (tt) {
					ToolTipManager.destroyToolTip(tt);
					tt = null;
				}
			}

Le texte affiché est donc une ligne de la balise desc d'un fichier xml.

En regardant sur le web, je m'aperçois que 2 méthodes sont utilisées : celle avec le ToolTipManager et une autre basée sur l'événement : toolTipCreate
Avec cette dernière on peut aisément personnaliser l'infobulle mais mon événement déclencheur est le rollOver... Le ToolTipManager créé une instance de la classe ToolTip, l'unique solution est-elle donc d'étendre cette classe?

J'espère être clair...
Bien à vous,

Anthony.

[granchef]

Bonjour, après moult pérégrinations, je sens que je m'approche (en catimini ceci dit!)

La méthode adoptée : extension de la classe ToolTip permettant de transformer la propriété text en htmtText. Ainsi il est aisé d'insérer une image dans le ToolTip. Voici le code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package persoBulle
{
	import mx.controls.ToolTip;
 
	public class HTMLToolTip extends ToolTip
	{
		public function HTMLToolTip()
		{
			super();
		}
		override protected function commitProperties():void{
			super.commitProperties();
			textField.htmlText = text;
		}
 
	}
}

Ensuite on importe le package persoBulle

Code :

import persoBulle.*;

Puis on demande au ToolTipManager d'utiliser la nouvelle classe : HTMLToolTip

Code :

1
2
 
ToolTipManager.toolTipClass=HTMLToolTip;

Maintenant, on définie une variable String qui contient l'image et est affectée au ToolTip créé :

Code :

1
2
3
4
5
6
 
                                var tip1:String;
				tip1 ="aaaaaaaaaaa<img src='assets/infoBulle.png' width='10' height='10'/>";
				btn1.toolTip = tip1;//Fonctionne
                                tt=ToolTipManager.createToolTip("",500,36) as ToolTip;
				tt.text=tip1;//Ne fonctionne pas

Dans le premier cas, on utilise la propriété ToolTip d'un bouton.
Dans le second, la propriété text du ToolTip créé via le ToolTipoManager.
Comment dois-je faire?

[granchef]

Bonjour,
finalement mon problème se résume à :
comment pointer une ligne de datagrid avec l'objet event.target?

Code :

1
2
itemRollOver="toolTipCreate(event)"
private function toolTipCreate(e:ListEvent):void {

Pourquoi e.target.toolTip=monCodeHtml ne fonctionne pas?