Récuper le ContentPane Actif

Version imprimable

Bonjour, aprés avoir essayé de nombreuses solutions, je commence à desespérer d'arriver à trouver comment savoir lequel des onglets est actif:

Voila mon Script qui me crée les ContentPane

Code:

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
//Initialisation des modules
	function initModulesTabs(){
		var tabContainer = dijit.byId("mainTabContainer");
		//console.debug("Suppression des tabs");
		reinitTC = true;
		var children = tabContainer.getChildren();                         
        for (k=0; k<children.length; k++){
                if(children[k].id != "toolTipContentPane")
                	tabContainer.closeChild(children[k]);
        }
        reinitTC = false;
 
		// on itere pr trouver les modules à ajouter pour l'utilisateur et le widget en cours
		for(i=0; i<modules.length; i++){
			//console.debug("Ajout du module " + modules[i].id);
			//console.debug(modules[i]);
 
			if(!modules[i].masquer){
				console.debug("Le contentpane n'existe pas, on le créee");
				// on crée un objet module
				var moduleTab = new dijit.layout.ContentPane({
					id : modules[i].id,	
					title : modules[i].titre,
					closable:true,
					onClose:supprimer
				});	
 
				//Le contenu du Module
				moduleTab.attr("content",modules[i].titre);
				//
 
				modules[i].contentPane = moduleTab;
				//on ajoute le module au main tabcontainer
				tabContainer.addChild(moduleTab);
			}
		}
	}

Voila mon TabContainer:

Code:

1
2
	<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 400; height: 250"></div>
	</div>

Dans l'idéal j'aimerai avoir le numéro du module actif dans une alert lorsque je change d'onglet...

merci d'avance pour votre aide

je m'autorépond ^^:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
var moduleTab = new dijit.layout.ContentPane({
					id : modules[i].id,	
					title : modules[i].titre,
					closable:true,
					onClose:supprimer,
					onShow:function(){			
						var widget=dijit.byId("mainTabContainer");			
						var child = widget.selectedChildWidget;
						alert(child);				
					}
				});

Seulement, le child que j'affiche ne correspond pas au module qui devient actif mais à celui qui l'étais auparavant :oops::calim2:

Une idée ?

29/07/2009, 12h20
emmanuel.remy

Salut,

Code:

tabContainer1.selectedChildWidget

ou bien tu peux souscrire à l'événement publié tabContainer1-selectChild

ERE

EDIT: Grillé ! :lol:
----
29/07/2009, 12h33
Jere3110

Salut,

Malheursement, le selectedChildWidget me ramène pas la bonne valeur dans le alert mais celle correspondant au contentPane qui était actif... je sèche un peu

Salut,

Si tu veux que le tab ajouté devienne celui actif:
Code:

1 2 3 4 5 6 7 8 var moduleTab = new dijit.layout.ContentPane({ id : modules[i].id, title : modules[i].titre, closable:true, onClose:supprimer }); dijit.byId("mainTabContainer").selectChild(moduleTab );
Ou alors c'est que je ne comprends pas ce que tu veux faire :?
ERE

29/07/2009, 12h39
Jere3110

Non en fait j'ai du mal m'expliqué, désolé.

En fait, la méthode initModulesTabs() sert à permettre le rafraichissement d'un widget. Par exemple, quand un module est supprimé, la méthode est appellé et permet d'afficher les changements. Ce système ne doit pas être le meilleur mais fonctionne convenablement.

Actuellement mon problème est de savoir quel est le module actif (celui qui est affiché) pendant l'utilisation.

En gros, quand je clique sur l'onglet j'aimerai avoir une belle alert box m'affichant l'id du Tab qui devient actif.

Edit: des screen pour essayer de me faire comprendre :
Ici, on a l'état initial
http://img30.imageshack.us/img30/2990/46842860.jpg

Ici je clique sur l'onglet Sport24, et l'alert m'affiche que le module onShow est le module 5 alors que ça devrait être le 4.
http://img22.imageshack.us/img22/9660/88918797.jpg
29/07/2009, 13h03
emmanuel.remy
Re,

Citation:

Envoyé par Jere3110

Non en fait j'ai du mal m'expliqué, désolé.

En fait, la méthode initModulesTabs() sert à permettre le rafraichissement d'un widget. Par exemple, quand un module est supprimé, la méthode est appellé et permet d'afficher les changements. Ce système ne doit pas être le meilleur mais fonctionne convenablement.

Actuellement mon problème est de savoir quel est le module actif (celui qui est affiché) pendant l'utilisation.

En gros, quand je clique sur l'onglet j'aimerai avoir une belle alert box m'affichant l'id du Tab qui devient actif.

Ok. Ton souci provinet du fait que quand onShow est généré, selectedChildWidget n'a pas encore été affecté. Par contre ton contentPane a déjà son attribut selected à true. Une solution est donc de passer en revue les contentPane et de regarder lequel a .selected==true.
Mais ce n'est pas très pratique. On en revient à ma seconde solution de d'taleur: souscrire un abonnement:
Code:

1 2 3 4 5 6 dojo.subscribe("mainTabContainer-selectChild", null, function(page) { alert(page.id); });
ERE
29/07/2009, 13h09
Jere3110

Re et merci pour ta réponse rapide:

j'ai du mal à comprendre le fonctionnement du dojo.sucribe.

A quel moment intervient t'il dans le code ?
29/07/2009, 14h03
emmanuel.remy

Citation:

j'ai du mal à comprendre le fonctionnement du dojo.sucribe.

Dojo propose un mécanisme de file de messages, sur le principe de la publication-souscription. Tu définis un topic (file de message) et tu envoies des informations vers ce topic (c'est fait via dojo.publish(topic, infos)). L'avantage c'est que tu envoies des infos à personne en particulier, uniquement à ceux qui se sont abonnés au topic (via la fonction réciproque dojo.subscribe(topic,context,fonction)).

Dans ton cas, plutôt que de générer un événement onClick c'est une info widget-page-selectionnée qui est envoyée vers le topic mainTabContainer-selectChild. tu dois donc t'y abonner pour recevoir l'info.

Je vois venir ta question: "pourquoi avoir choisir ici cette technique de publish-subscribe alors qu'un onClick déclenché sur l'onglet fait l'affaire ?".
Tout simplement parce que le TabContainer ne sait pas qu'un clic a lieu sur un onglet... Il hérite de StackContainer (une simple pile de div, utilisé pour d'autres widgets) qui lui ne gère pas d'onglet ou autre; StackContainer ne connaissant pas le contexte de son utilisation envoie donc des messages vers des topics.
Il en est de même pour les ajouts-suppression dans les Tree et autres DnD.

Enfin, cela permet de découpler ton code: imagine que tu souhaites utiliser une zone où afficher de l'information (car formulaire mal rempli, mail qui arrive...). En mode "normal" tu créeras un composant avec une fonction displayInfo(msg) et à chaque fois que tu voudras faire afficher une info ton code devra appeler composantInfo.displayInfo("message à afficher");. Mais deux soucis: il faut que ton code (ou les composants) qui souhaite afficher une info instancie ton composant composantInfo et ensuite le code est rendu dépendant de composantInfo, ce qui est assez nul s'il est exécuté au sein d'une class, d'un widget etc... :aie:
Pour résoudre cela: tu crées ton composant composantInfo qui informera écouter sur le topic "information". Dès lors quiconque veut afficher de l'info peut appeler dojo.publish("information", ["Message à afficher"]); sans se préoccuper de savoir qui traite et comment.
Ton composant composantInfo implémentera lui de son côté dojo.subscribe("information, contexte,function(msg) {...});". Il ne saura pas qui lui envoie de l'info mais ce n'est pas sa vocation !
Il n'y a plus de lien entre les deux côtés éléments, le découplage est réalisé.

Donc en bref: publish-subscribe pour gérer les contraintes de conception d'héritage et découpler ton code.

C'est tout simplement géant, mais très peu et très mal utilisé ! :mouarf:

Citation:

A quel moment intervient t'il dans le code ?

Tu auras compris que tout est asynchrone et donc que tu mets ton code (dojo.publish et dojo.subscribe) où tu veux, c'est dojo qui joue au chef d'orchestre :ccool:

ERE