Composant personnalisé ToolTip

**magoer** · 05/10/2010, 13h01

Bonjour,

Je débute en Flex. Voici mon problème : j'ai créé un ToolTip personnalisé dont voici le code

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<?xml version="1.0"?>
<!-- tooltips/ToolTipComponents/PanelToolTip.mxml -->
    <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:flexer="com.flexer.*"
    implements="mx.core.IToolTip" 
    alpha=".8" 
    borderThickness="2"
    backgroundColor="0xCCCCCC"
    dropShadowEnabled="true" 
    borderColor="black"
    borderStyle="solid"
    minWidth="400"
    creationComplete="contenuService.send();">
    <mx:Script>
    <![CDATA[
        [Bindable]
        public function get text():String 
        { 
            return null;
        } 
        public function set text(value:String):void 
        {
        } 
    ]]>
    </mx:Script>
    <mx:HTTPService id="contenuService" url="data/contenu.xml" resultFormat="e4x"/>    
    <mx:Form width="100%">
        <mx:Repeater id="rp" 
            dataProvider="{contenuService.lastResult.accueil.identification.donnee}">
            <mx:FormItem data="{rp.currentItem}" label="{rp.currentItem.terme}"
                 width="100%">
                <flexer:AutoResizeableTextArea id="respText"  
                    x="10" y="219" width="222" 
                    autoResize="true"
                    text="{rp.currentItem.definition}"/>
            </mx:FormItem>
        </mx:Repeater>        
    </mx:Form>
</mx:VBox>
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.events.ToolTipEvent;
            import mx.managers.ToolTipManager;
            import mx.controls.Alert;
            import mx.rpc.http.HTTPService;
            import ToolTipComponents.PanelToolTip;
            private function init():void
            {
                /* génération du tooltip HTML */
                ToolTipManager.showDelay = 0;
                ToolTipManager.hideDelay = Infinity;
                /* requete sur le fichier coordonnees.xml */
                coordonnees.send();    
                contenu.send();    
            }
            private function createCustomTip(event:ToolTipEvent):void 
            {
                   var ptt:PanelToolTip = new PanelToolTip();
                   event.toolTip = ptt;
            }
        ]]>
    </mx:Script>
 
    <mx:HTTPService id="contenu" url="data/contenu.xml" resultFormat="e4x"/>    
    <mx:HTTPService id="coordonnees" url="data/coordonnees.xml" resultFormat="e4x"/>
 
    <mx:VBox width="100%">
        <mx:HBox backgroundColor="white" width="100%">
            <!-- LOGO -->
            <mx:Image source="img/logo.png" />
            <mx:Label text="Aide pour l'administrateur" fontSize="18" paddingTop="22" />
        </mx:HBox>
        <!-- BARRE DE MENU HORIZONTAL -->
        <mx:TabNavigator id="menuHorizontal" width="100%">
            <mx:Panel minHeight="700" width="100%" label="PREAMBULE">
                <mx:Label id="preambule" height="100%" width="100%" 
                    htmlText="{contenu.lastResult.preambule}"
                    textIndent="0"/>                        
            </mx:Panel>            
            <mx:Panel title="Vous êtes ici : Accueil" label="ACCUEIL" layout="absolute">                        
                <mx:Image x="150" y="0" source="img/accueil.jpg" />
                    <mx:Canvas id="identification"
                        borderColor="red" 
                        borderStyle="solid" borderThickness="3"
                        x="{coordonnees.lastResult.accueil.identification.x}" 
                        y="{coordonnees.lastResult.accueil.identification.y}" 
                        width="{coordonnees.lastResult.accueil.identification.width}" 
                        height="{coordonnees.lastResult.accueil.identification.height}" 
                        toolTip=" " 
                        toolTipCreate="createCustomTip(event)"/>
            </mx:Panel>
        </mx:TabNavigator>
    </mx:VBox>
</mx:Application>

Cela fonctionne sauf que dans la creation du tooltip (PanelToolTip.mxml) j'ai mis une valeur du dataprovider en dur et que j'aimerais qu'elle soit paramétrable. Par exemple à la place de {contenuService.lastResult.accueil.identification.donnee}
ce puisse être {contenuService.lastResult.accueil.messagerie.donnee}

Merci par avance.
Cordialement.

**luilui** · 05/10/2010, 13h26

la paramétrer a quel moment ?

Il faut mettre une variable _myVar intermédiaire et cette variable sera la dataprovider de "Repeater"

ensuite il faut mettre le contenu de contenuService.lastResult.accueil.identification.donnee dans _myVar ou dans contenuService.lastResult.accueil.messagerie.donnee

**magoer** · 05/10/2010, 14h57

Re,

Merci. J'avais essayé cela mais sans succès.
En fait j'ai corrigé mon code comme ceci :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
<?xml version="1.0"?>
<!-- tooltips/ToolTipComponents/PanelToolTip2.mxml -->
    <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:flexer="com.flexer.*"
    implements="mx.core.IToolTip" 
    alpha=".8" 
    borderThickness="2"
    backgroundColor="0xCCCCCC"
    dropShadowEnabled="true" 
    borderColor="black"
    borderStyle="solid"
    minWidth="400">
    <mx:Script>
    <![CDATA[
        [Bindable]
        public function get text():String 
        { 
            return null;
        } 
        public function set text(value:String):void 
        {
        } 
    ]]>
    </mx:Script>
    <mx:Form width="100%">
        <mx:Repeater id="rp" >
            <mx:FormItem id="fi" width="100%">
                <flexer:AutoResizeableTextArea id="respText"  
                    x="10" y="219" width="222" 
                    autoResize="true"/>
            </mx:FormItem>
        </mx:Repeater>        
    </mx:Form>
</mx:VBox>
 
 
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.events.ToolTipEvent;
            import mx.managers.ToolTipManager;
            import mx.controls.Alert;
            import mx.rpc.http.HTTPService;
            import ToolTipComponents.PanelToolTip2;
            private function init():void
            {
                /* génération du tooltip HTML */
                ToolTipManager.showDelay = 0;
                ToolTipManager.hideDelay = Infinity;
                /* requete sur le fichier coordonnees.xml */
                coordonnees.send();    
                contenu.send();    
            }
            private function createCustomTip(event:ToolTipEvent):void 
            {
                   var ptt:PanelToolTip2 = new PanelToolTip2();
                   ptt.rp.dataProvider = contenu.lastResult.accueil.identification.donnee;
                   ptt.fi.label = ptt.rp.currentItem.terme;
                   ptt.fi.data = ptt.rp.currentItem;
                   ptt.respText.text = ptt.rp.currentItem.definition;
                   event.toolTip = ptt;
            }
        ]]>
    </mx:Script>
 
    <mx:HTTPService id="contenu" url="data/contenu.xml" resultFormat="e4x"/>    
    <mx:HTTPService id="coordonnees" url="data/coordonnees.xml" resultFormat="e4x"/>
 
    <mx:VBox width="100%">
        <mx:HBox backgroundColor="white" width="100%">
            <!-- LOGO -->
            <mx:Image source="img/logo.png" />
            <mx:Label text="Aide pour l'administrateur" fontSize="18" paddingTop="22" />
        </mx:HBox>
        <!-- BARRE DE MENU HORIZONTAL -->
        <mx:TabNavigator id="menuHorizontal" width="100%">
            <mx:Panel minHeight="700" width="100%" label="PREAMBULE">
                <mx:Label id="preambule" height="100%" width="100%" 
                    htmlText="{contenu.lastResult.preambule}"
                    textIndent="0"/>                        
            </mx:Panel>            
            <mx:Panel title="Vous êtes ici : Accueil" label="ACCUEIL" layout="absolute">                        
                <mx:Image x="150" y="0" source="img/accueil.jpg" />
                    <mx:Canvas id="identification"
                        borderColor="red" 
                        borderStyle="solid" borderThickness="3"
                        x="{coordonnees.lastResult.accueil.identification.x}" 
                        y="{coordonnees.lastResult.accueil.identification.y}" 
                        width="{coordonnees.lastResult.accueil.identification.width}" 
                        height="{coordonnees.lastResult.accueil.identification.height}" 
                        toolTip=" " 
                        toolTipCreate="createCustomTip(event)"/>
<!--                    <mx:Canvas id="messagerie" 
                        x="{coordonnees.lastResult.accueil.messagerie.x}" 
                        y="{coordonnees.lastResult.accueil.messagerie.y}" 
                        width="{coordonnees.lastResult.accueil.messagerie.width}" 
                        height="{coordonnees.lastResult.accueil.messagerie.height}" 
                        toolTip=" " 
                        borderColor="red" 
                        borderStyle="solid" borderThickness="3"
                        toolTipCreate="createCustomTip(event,'')"/>    -->
            </mx:Panel>
        </mx:TabNavigator>
    </mx:VBox>
</mx:Application>

et maintenant j'ai l'erreur :

Code :

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

1
2
3
4
5
6
7
8
9
10
TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.
    at main2/createCustomTip()[G:\PROFESSIONNEL\PROJETS FLEX\Aide_en_ligne\src\main2.mxml:26]
    at main2/__identification_toolTipCreate()[G:\PROFESSIONNEL\PROJETS FLEX\Aide_en_ligne\src\main2.mxml:61]
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.core::UIComponent/dispatchEvent()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:9298]
    at mx.managers::ToolTipManagerImpl/http://www.adobe.com/2006/flex/mx/internal::createTip()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\ToolTipManagerImpl.as:822]
    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:776]
    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]

Qu'est ce qui n'est pas correct ?

**magoer** · 05/10/2010, 17h28

Voici mon fichier XML :

Code XML :

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
<contenu>
	<preambule>
		<![CDATA[
			<b>Présentation</b>
			xxxxxx est une solution informatique  ....
			<b>Pré-requis</b>
			Sur le(s) poste(s) Windows installer :
			- une imprimante,
			- Acrobat Reader©,
			- une connexion ADSL,
			- un raccourci vers l’adresse Internet du site ...
		]]>
	</preambule>	
	<accueil>
		<identification>
			<donnee>
				<terme>Groupe</terme>			
				<definition>désignation du ...</definition>
			</donnee>
			<donnee>
				<terme>Utilisateur</terme>
				<definition>identifiant de l'utilisateur connecté.</definition>
			</donnee>
			<donnee>
				<terme>Support</terme>
				<definition>Un click sur ce bouton, vous permet d'interroger le support technique ...</definition>
			</donnee>
		</identification>
		<messagerie>
			Messagerie interne ...
		</messagerie>
	</accueil>
</contenu>

Le problème se situe au niveau de la balise <mx:FormItem> sur sa propriété label qui est vide, je ne comprend pas pourquoi.

Composant personnalisé ToolTip

Flex

Vue hybride

Discussions similaires

Partager

Partager