Discussion :

[cmail]

Un problème autour de ma page de test et de la gestion du bouton qui se trouve en haut droit de l'api:
Je n'arrive pas à alterner mes deux images (draw_line_on.png et draw_line_off.png ) sur le bouton suivant l'activité ou non de l' "item". A chaque clic, je souhaite que suivant l'activité du bouton j'affiche alternativement l'une ou l'autre des images en respectant la manière déjà retenue autour de la reconnaissance de ...ItemActive ou ...ItemInactive des autres boutons de l'api.

[lowzonenose]

Bonjour,
je vous renvoie vers cette url :
http://openlayers.org/dev/examples/t...ton-panel.html

Le truc intéressant pour la gestion des différents états du bouton est dans la propriété 'displayClass' (hérité de OpenLayers.Control).

Ex.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var b = new OpenLayers.Control.Button(
      {
          displayClass: 'button', 
          type: OpenLayers.Control.TYPE_TOGGLE, 
          
          eventListeners: {
              'activate': function(){console.log('activate')},
              'deactivate': function(){console.log('deactivate')}              
          }
      }
  );

avec une CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.buttonItemInactive {
    background: color:rgb(0,255,0);
    border: 1px solid color:rgb(255,255,255);
    width: 20px;
    height: 20px;
}

.buttonItemActive {
    background: color:rgb(255,0,0);
    border: 2px solid color:rgb(128,128,128);
    width: 20px;
    height: 20px;
}

[jrenard]

Bonjour Christian,

Dans l'idée, tu as le bon fonctionnement, avec les noms de classe se terminant en ...ItemActive ou ...ItemInactive selon l'état du bouton. Ce qui est curieux, c'est que quel que soit l'état de ton bouton, il reste tout le temps en ...ItemInactive. Ce qui explique que les propriétés CSS du bouton actif ne soient jamais appliquées.

Je vais étudier le code pour comprendre où ça coince.

[jrenard]

Après analyse, le comportement décrit n'est pas incohérent, et il semble que les noms de classe en ...ItemActive ne soient pas affectés aux boutons génériques créés via OpenLayers, et qu'ils restent toujours en ...ItemInactive. Pas de problème de codage en soi de ton coté.

Pour en arriver au résultat souhaité, le mieux est d'étoffer ta méthode déclenchée au clic bouton en rajoutant comme premières instructions un test de l'image de fond du bouton : si l'image est draw_line_off.png, la changer pour draw_line_on.png, et vice-versa. Je te propose d'effectuer le test via la fonction indexOf qui cherche l'index d'une sous-chaîne de caractères dans une autre chaîne et renvoie -1 si la sous-chaîne n'est pas trouvée.

Code :

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

1
2
3
4
5
6
7
8
trigger: function() {
	var btnEssai = document.getElementsByClassName('cmBoutonEssaiItemInactive')[0];
	if (btnEssai.style.backgroundImage.indexOf("draw_line_on" == -1) {
		btnEssai.style.backgroundImage == 'url("http://essai.obs43.fr/image/draw_line_on.png")';
	} else {
		btnEssai.style.backgroundImage == 'url("http://essai.obs43.fr/image/draw_line_off.png")';
	}
	... // Suite de la fonction trigger

[cmail]

Merci Jeremy (et à lowzonenose )

Je reçois bien ta réponse

...ItemActive ne soient pas affectés aux boutons génériques créés via OpenLayers, et qu'ils restent toujours en ...ItemInactive.

qui expliquerait mes problèmes.

Cependant, je reste aussi avec les derniers commentaires de Trukker, dgrichard dans http://www.developpez.net/forums/d11...personnalisee/ qui semblent montrer le contraire????

Faute d'élément probant, je vais appliquer une alternative comme celle que tu proposes

[cmail]

Je reviens sur la question avec une nouvelle page de test plus simple où je teste la création de deux boutons suivant des recommandations différentes:

1/ Bouton0 (en haut milieu de la barre d'outil) suivant les conseils de dgrichard . Résultat : la fonction trigger est bien appelée, mais le bouton ne bascule pas en ....itemactive, comme déjà vu avec Jérémy. En appliquant son codage je suis confronté à un nouveau problème lié au niveau !important de l'url image déclarée dans le css. Ce niveau semble nécessaire pour afficher l'image par défaut. Mais ensuite comme je n'arrive pas à l'ajouter (cela me semble pas possible) dans .style.backgroundImage = 'url("http://essai.obs43.fr/image/draw_line_on.png") !important'; le nouveau css n'est pas naturellement pris en compte puisque de rang inférieur. Et l'apparence du bouton ne bascule pas. Est-ce que je dis des bêtises?

2/ Bouton1 (en bas droite de la barre d'outil) suivant les recommandations classique de OL (rappelées par lowzonenose). Résultat : Le bouton bascule bien en ....itemactive mais la fonction trigger n'est plus appelée??????

L'expertise de jeremy me sera utile....

[cmail]

Pour 1/, j'ai vu mon erreur un background:transparent; appelé après background-image qui impose donc !important pour afficher l'image.

Mais sur le bouton 2, pourquoi la fonction trigger n'est pas active?

[cmail]

Une fois ce bouton créé (avec sa fonction associée), comment l'introduire correctement dans la barre de mesure (measurebar) et que son fonctionnement (activation/désactivation) agisse sur l'état des 3 autres boutons (mesure, polygon, azimuth), c'est-à-dire que l'activation de l'un entraine la désactivation des 3 autres?

Je pars sur :

Code :

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

1
2
3
4
5
6
7
8
9
10
var toolBox= viewer1.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];var measurebar = new Geoportal.Control.MeasureToolbar(
	{		div: OpenLayers.Util.getElement(toolBox.id+'_measure'),
				targetElement: OpenLayers.Util.getElement(toolBox.id+'_meares')
	}
);
viewer1.getMap().addControl(measurebar);    	  
var newBouton = new OpenLayers.Control.Button({
....
trigger: function(){.....}
})

Actuellement, je controle tant bien que mal le clic sur les différents boutons. Mais ce n'est pas très correct et la bonne pratique doit être ailleurs...
Bref, comment s'y prendre pour ajouter un quatrième bouton dans cette barre primitive d'outils?

[jrenard]

Pour 1/, j'ai vu mon erreur un background:transparent; appelé après background-image qui impose donc !important pour afficher l'image.

Concernant ce problème, bien qu'il soit résolu, une précision qui pourra te rassurer quant à tes développements futurs. La précision "!important" sur une propriété CSS précise qu'elle doit être affectée en priorité si jamais la même propriété est affectée au même élément via une autre feuille CSS. Mais à partir du moment où tu redéfinis un style directement via le Javascript, ce nouveau style écrasera systématiquement tous les styles existant provenant de fichiers CSS, tant bien même l'un de ces styles serait marqué "!important". Tu peux donc être tranquille sur ce point

Pour le reste, je vais regarder.

[jrenard]

Mais sur le bouton 2, pourquoi la fonction trigger n'est pas active?

J'avoue avoir un peu de mal à comprendre le pourquoi du comment. Il s'agit de comportements dus à OpenLayers, et la doc ne m'avance pas beaucoup plus à ce sujet...

A défaut, il existe une solution de contournement très simple (à laquelle tu as sûrement déjà dû penser) : définir après création du contrôle et ajout à la carte une fonction onclick sur l'élément HTML concerné.

Code :

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

1
2
3
document.getElementsByClassName('cmBouton1ItemInactive')[0].onclick = function() {
	console.log("bouton 1 ok");
}

Et avec ça, tu attribues un comportement au clic sur le bouton.

[jrenard]

Une fois ce bouton créé (avec sa fonction associée), comment l'introduire correctement dans la barre de mesure (measurebar) et que son fonctionnement (activation/désactivation) agisse sur l'état des 3 autres boutons (mesure, polygon, azimuth), c'est-à-dire que l'activation de l'un entraine la désactivation des 3 autres?

Une solution pour arriver au résultat que tu souhaites va consister non pas à intégrer directement le bouton créé dans la barre de mesure (qui est un peu une barre d'outils native à laquelle il peut être périlleux de toucher), mais à créer une div englobant d'une part la div measurebar et d'autre part une nouvelle div dans laquelle on va intégrer le nouveau bouton. C'est un peu le même fonctionnement que ce qu'on avait fait ici: http://www.developpez.net/forums/d14...easurebar-div/

Dans ta nouvelle div tu vas copier le code HTML du bouton que tu as créé via une ligne de JQuery en tous points similaire à ce que l'on avait fait dans la discussion en question. Puis tu vas gérer la mise en forme de tes deux div enfants et de ta div parent pour donner l'impression que tu as fait une seule et unique barre de mesure "réunifiée" avec différents outils, même si en pratique ce sont bien deux div séparées qu'il y a dessous.

Enfin, pour simuler le fait que les boutons soient "groupés" et que l'activation de l'un désactive les autres s'il y en a un autre de sélectionné, tu vas forcer une fonction onclick sur chaque bouton de ta barre "réunifiée". Pour chaque bouton, cette fonction onclick consistera à récupérer les autres contrôles de la barre "réunifiée" un par un, et à les désactiver un par un.

Es-tu OK avec le principe ou bien faut-il que je détaille un peu plus ?

[cmail]

En fait ma question portait essentiellement sur

la barre d'outils native à laquelle il peut être périlleux de toucher

. Je me demandais s'il était faisable facilement de surcharger Geoportal.Control.MeasureToolbar pour y associer un quatrième bouton. Et comme je suis assez novice sur ce point (et tant d'autres d'ailleurs!), je demandais conseils...


Sinon, comme je le disais, j'ai ma solution perso en bidouillant css, .click() et autres .hide() .... tout à fait en accord avec tes principes.

Donc pour moi, pas la peine de t'étendre sur le sujet. Je garde ma solution bricolo, mais totalement opérationnelle aujourd'hui.

[jrenard]

Je garde ma solution bricolo, mais totalement opérationnelle aujourd'hui.

C'est bien là l'essentiel Et c'est toujours le travail d'un développeur : bricoler (proprement si possible !) à partir des outils dont il dispose pour arriver à un ensemble cohérent.

[cmail]

J'avoue avoir un peu de mal à comprendre le pourquoi du comment.....

Je pense que c'est parce que la fonction "trigger" est créée avec la création du bouton, mais avant l'ajout de ce bouton dans la toolbarPerso et son ajout dans le viewer. La fonction "trigger" n'est pas transmise au viewer... Mais comment faire autrement?

[gcebelieu]

Bonjour,

je m'insère dans votre discussion car je viens de comprendre pourquoi la fonction trigger n'est pas appelée :

le mécanisme d'appel de la fonction trigger ne fonctionne que pour les boutons de type "OpenLayers.Control.TYPE_BUTTON" (en gros, les boutons sur lesquels on appuie pour déclencher une action et c'est tout).

Or, dans ta page, Christian, tu déclares un bouton de type "OpenLayers.Control.TYPE_TOGGLE" (les boutons qui permettent de faire basculer un contrôle d'un état actif à un état inactif et vice versa). Dans ce cas, l'appui sur le bouton déclenchera un appel à la fonction activate() si le contrôle associé est inactif ou deactivate() s'il est actif.

Il faut donc que tu écrives :

Code :

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

1
2
3
4
5
6
7
8
9
10
  //création d'un bouton suivant l'exemple classique ol  (Print)
var bouton1 = new OpenLayers.Control.Button({
                        title:"Bouton 1",
                displayClass:"cmBouton1",
        type: OpenLayers.Control.TYPE_BUTTON,
        trigger: function() {
                        console.log("bouton 1 ok");
        }
        });

pour que ta méthode trigger soit appelée.

[cmail]

Ok! Complètement résolu, donc.

[cmail]

Pas si résolu que cela....
Vous allez dire que j'en tiens une couche ("layer" en langage codé)....

Mais j'aimerais avoir quelques explications complémentaires et surtout vos avis éclairés pour une bonne pratique et me réorienter:
Voici ma page de test.
Toujours deux boutons créés de manière différente pour un résultat similaire.
Sous ff, pas de problème pour intercepter le clic et renvoyer une action soit en js avec getElementsByClassName() soit en jquery.
Mais voilà mes constats de novices:
1/ Sous IE, c'est le double-clic qui répond et envoie mes messages à la console.
2/ Et sous chrome, aucune détection du clic ou double-clic.


Alors comment faire pour détecter le clic sur un bouton des barres d'outils de l'api (puisque avec des boutons perso en jouant sur la function du trigger les comportements sont identiques sous les 3 navigateurs), valable sur tous les navigateurs, sans surcharger les primitives ou autres lourdeurs????

[cmail]

Simplifions encore ma demande pour me faire bien comprendre...
1/ Cliquez sur le bouton à droite de l'écran de ma page de test sous FF>>>> 2 alerts s'ouvrent. OK C'est attendu et donc correct.
2/ Refaites la même opération sous Chrome>>>> Les alerts ne s'ouvrent plus....
Et sous IE c'est le double-click...

Vos conseils me seraient utiles pour bien détecter .cmBouton0ItemInactive pour Chrome et IE

[cmail]

Une idée pour me remettre sur le bon chemin?

[cmail]

Ai-je été assez explicite ?
Constatez-vous ce qui me semble être un défaut?

Pour parer le problème, je mettrai bien un "bouton html" classique, mais je n'arrive pas à le coordonner avec les primitives (par exemple à un des deux outils de mesure distance et surface) de l'api-ol. Comment écrire mon bout de code pour qu'au clic de mon nouveau bouton classique, je déclenche correctement par exemple .olControlMeasurePathItem???? C'est peut-être simplet, mais je m'épuise un peu avec cette question