Autour de la création d'un bouton

**jrenard** · 17/06/2014, 14h52

Envoyé par cmail

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

Bonjour Christian,
Oui tu es explicite, et oui nous reproduisons ce comportement.
Pour ce qui est d'une résolution, nous n'avons pas encore eu le temps d'y regarder.

**jrenard** · 17/06/2014, 17h01

OK, il s'avère que la façon de faire utiliée dans cet exemple n'est pas la plus académique : créer un bouton en laissant vide la fonction trigger, puis forcer le comportement au clic via du javascript ou du JQuery. C'est cela qui pose problème dans la portabilité sur les navigateurs (la raison profonde m'échappe nu peu, je ne le cache pas).

En revanche, tu peux aisément contourner le problème : en copiant les fonctionnements que tu veux déclencher sur le boutons (ici appelé viaavec onclick et click) directement dans la fonction trigger, et en supprimant les déclenchement via onclick et click. Alors, tu obtiens bien le même comportement sous tous les navigateurs.

Est-ce que cela répond à la question ?

**cmail** · 17/06/2014, 17h34

Merci Jeremy pour tes infos.
Mais ...
Ma page de test était un exemple simplifié, première étape à de plus vastes ambitions sur lequel je travaille...
En fait, je souhaite "détourner" le click sur les boutons de la barre d'outils de mesure pour faire des actions complémentaires (rien de compliqué du genre : cacher des div devenus parasites quand les outils de mesure se déclenchent)...

Dans ce cas, les modifs via $(".olControlMeasurePathItemInactive").click(function () {...} étaient simples et me satisfaisaient bien>>>> sous FF évidemment!!!!!

J'étais arrivé à ce compromis parce que le bidouillage des primitives me posait d'autres problèmes bien plus conséquents! Et je ne me sens pas le courage de revenir à la trituration de ces primitives sans un encadrement sérieux...

En revanche, tu peux aisément contourner le problème : en copiant les fonctionnements que tu veux déclencher sur le boutons (ici appelé viaavec onclick et click) directement dans la fonction trigger, et en supprimant les déclenchement via onclick et click. Alors, tu obtiens bien le même comportement sous tous les navigateurs.

On est tout-à-fait d'accord. Mais dans ce cas mon problème que je n'ai pas résolu c'est d'y incorporer les instructions lançant les outils de mesure de distance et de surface avant mes modifs perso. Quelques idées et conseils de ta part me seraient vraiment utiles pour lancer correctement les instructions en question?

**jrenard** · 18/06/2014, 09h33

Si je comprends bien, tu veux ajouter un comportement en surcharge au comportement par défaut d'un bouton. Je comprends la philosophie, mais dans l'exemple que tu proposes cela n'a pas lieu d'être. En effet, tu crées des boutons génériques via OpenLayers.Control.Button, et ces boutons génériques n'ont aucun comportement par défaut. Plutôt qu'une surcharge, tu peux donc définir intégralement leur comportement à l'intérieur du constructeur de ces boutons, puisque de toute façon il n'y a pas de comportement par défaut qui pourrait être écrasé.

Si on reprend les primitives de base OpenLayers, comme suggéré au début de ce fil par lowzonenose avec l'exemple http://openlayers.org/dev/examples/t...ton-panel.html, la définition propre de boutons génériques est la suivante, testée et éprouvée :

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
// Création d'un bouton simple (déclenchement au clic) suivant l'exemple classique OpenLayers
var boutonSimple = new OpenLayers.Control.Button({
	title:"Bouton Simple",
	displayClass:"monBoutonSimple",
	type: OpenLayers.Control.TYPE_BUTTON,
	trigger: function() { /* Comportement déclenché au clic sur le bouton */}
});	

// Création d'un bouton toggle (actif/inactif) suivant l'exemple classique OpenLayers
var boutonToggle = new OpenLayers.Control.Button({
	title:"Bouton Toggle",
	displayClass:"monBoutonToggle", // Ce nom de classe passera en monBoutonToggleItemActive ou monBoutonToggleItemInactive suivant l'état du bouton
	type: OpenLayers.Control.TYPE_TOGGLE,
	eventListeners: {
			"activate": function(event) { /* Comportement déclenché à l'activation du bouton */ },
			"deactivate": function(event) { /* Comportement déclenché à la désactivation du bouton */ }
	}
});

// Création de la barre d'outils, ajout des boutons à la barre, et ajout de la barre à la carte (sans intégration dans un panel, les boutons n'auront pas le comportement attendu)
var toolBar = new OpenLayers.Control.Panel({
	displayClass: 'maToolbar'
});
toolBar.addControls([boutonSimple,boutonToggle]);
viewer.getMap().addControl(toolBar);

**cmail** · 18/06/2014, 10h25

Tu comprends mes intentions, mais tu te centres sur ma page de test qui n'avait que pour SEUL but de tester le click sur des div (boutons et autres) crées avec OpenLayers.Control.Panel() (et analyser secondairement quelques constats : par exemple pourquoi ....ItemInactive se maintient).
C'était une première étape pour débroussailler mon problème initial.

Je comprends aussi ce que tu me suggères mais mon problème est autre (il me semble) et je vais essayer de te le résumer.

1/ J'ajoute la barre d'outils de mesure dans mon application sur le mode classique:

Code :

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

1
2
3
4
5
var tbx = viewer1.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0]; 
       measurebar = new Geoportal.Control.MeasureToolbar({
            .....
        });
    viewer1.getMap().addControl(measurebar);

2/ A partir de là, je souhaite par exemple quand je clic sur le bouton $(".olControlMeasurePathItemInactive") , bien sûr d'effectuer la mesure de distance mais AUSSI de cacher une div que j'ai créée: $("#popup") (que je n'arrive pas à actualiser comme suggéré dans http://www.developpez.net/forums/d1450713/applications/sig-systeme-d-information-geographique/ign-api-geoportail/selectfeature-toolbox/>>> aussi j'ai décidé de l'effacer quand je fais des mesures!)

Pour arriver à cela, je pensais détecter le click sur $(".olControlMeasurePathItemInactive") d'où ma page de test que tu as analysé et qui n'a en soit aucun autre intérêt, pour pouvoir envoyer $("#popup").hide(); Cette page de test m'a simplement permit de voir que le click n'était pas bien vu sous ie et chrome...

Bref, laissons ma page de test initiale, et revenons à ma question fondamentale: comment faire si je ne peux m'appuyer sur la détection du click sur $(".olControlMeasurePathItemInactive") pour transmettre un joli $("#popup").hide(); ???
Par ailleurs, mes surcharges des primitives API sont pour l'instant très laborieuses... Je ne trouve pas bien l'entrée adéquat...

Je teste aussi $.trigger() mais sans grand résultat...

**jrenard** · 18/06/2014, 10h30

J'avais bien compris : la page n'était que pour l'exemple, et tu souhaites ajouter des surcharges sur des boutons ayant déjà un comportement par défaut

Ma réponse n'était qu'une première remise à plat avant d'aller plus loin avec quelques tests de mon coté. Je reviens vers toi quand j'aurai une réponse plus adaptée sur ta question précise.

**cmail** · 18/06/2014, 10h35

Autres chemins de réflexion, si je reprends l'idée de créer un nouveau bouton ol classique comme tu le suggères, comment je l'adapte à mon besoin dans la séquence:

Code :

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

1
2
3
4
displayClass:"monBoutonToggle", // Ce nom de classe passera en monBoutonToggleItemActive ou monBoutonToggleItemInactive suivant l'état du bouton	type: OpenLayers.Control.TYPE_TOGGLE,
	eventListeners: {
			"activate": function(event) { /* Instruction de lancement de la mesure de distance ????*/ ;$("#popup").hide(); },
			"deactivate": function(event) { /* Instruction defermeture de la mesure de distance ????*/ ;$("#popup").show(); }  }

**cmail** · 18/06/2014, 11h03

Après quelques réflexions de néophyte, je m'orienterais vers un truc comme cela:

1/ Création de la toolbox mesure de l'API:

Code :

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

1
2
3
var tbx = viewer1.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];        measurebar = new Geoportal.Control.MeasureToolbar({
            .....
        });     viewer1.getMap().addControl(measurebar);

2/ Je la cache avec des css.
3/ Création de ma propre toolbox:

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
// Création d'un bouton simple (déclenchement au clic) suivant l'exemple classique OpenLayersvar boutonSimple = new OpenLayers.Control.Button({
    title:"Bouton Simple",
    displayClass:"monBoutonSimple",
    type: OpenLayers.Control.TYPE_BUTTON,
    trigger: function() { /* Comportement déclenché au clic sur le bouton */}
});    

// Création d'un bouton toggle (actif/inactif) suivant l'exemple classique OpenLayers
var boutonToggle = new OpenLayers.Control.Button({
    title:"Bouton Toggle",
    displayClass:"monBoutonToggle", // Ce nom de classe passera en monBoutonToggleItemActive ou monBoutonToggleItemInactive suivant l'état du bouton
    type: OpenLayers.Control.TYPE_TOGGLE,
    eventListeners: {
            "activate": function(event) { /* Comportement déclenché à l'activation du bouton */ },
            "deactivate": function(event) { /* Comportement déclenché à la désactivation du bouton */ }
    }
});

// Création de la barre d'outils, ajout des boutons à la barre, et ajout de la barre à la carte (sans intégration dans un panel, les boutons n'auront pas le comportement attendu)
var toolBar = new OpenLayers.Control.Panel({
    displayClass: 'maToolbar'
});
toolBar.addControls([boutonSimple,boutonToggle]); viewer.getMap().addControl(toolBar);

4/ et au niveau de eventListeners ma nouvelle barre d'outils, je récupère l'activate() du controls de la toolbox initiale de l'api du genre:

Code :

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

1
2
3
4
5
displayClass:"monBoutonToggle", // Ce nom de classe passera en monBoutonToggleItemActive ou monBoutonToggleItemInactive suivant l'état du bouton   
 type: OpenLayers.Control.TYPE_TOGGLE,  
  eventListeners: {
            "activate": function(event) { measurebar.controls[0].activate() ;$("#popup").hide(); },   
 "deactivate": function(event) { measurebar.controls[0].deactivate();$("#popup").show(); }  }

Je vais tester cela.... Mais je serai interessé par tes remarques

**jrenard** · 18/06/2014, 11h55

Envoyé par cmail

Autres chemins de réflexion, si je reprends l'idée de créer un nouveau bouton ol classique comme tu le suggères, comment je l'adapte à mon besoin dans la séquence:

Code :

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

1
2
3
4
displayClass:"monBoutonToggle", // Ce nom de classe passera en monBoutonToggleItemActive ou monBoutonToggleItemInactive suivant l'état du bouton	type: OpenLayers.Control.TYPE_TOGGLE,
	eventListeners: {
			"activate": function(event) { /* Instruction de lancement de la mesure de distance ????*/ ;$("#popup").hide(); },
			"deactivate": function(event) { /* Instruction defermeture de la mesure de distance ????*/ ;$("#popup").show(); }  }

Cette façon de faire me semble assez compliquée à réaliser, car le code qu'il y a derrière le lancement de la mesure de distance est assez touffu et difficilement reproductible comme cela.

Ta dernière proposition me semble en revanche intéressante, j'étais en train de m'orienter vers ce genre de choses. C'est de la bidouille, mais ça peut marcher.

**cmail** · 18/06/2014, 12h07

C'est de la bidouille, mais ça peut marcher.

J'arrive à des choses, mais d'autres demeure dans le vague:
1/ Je n'arrive pas à utiliser:

Code :

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

1
2
eventListeners: {            "activate": function(event) { measurebar.controls[0].activate() ;$("#popup").hide(); },  "deactivate": function(event) { measurebar.controls[0].deactivate();$("#popup").show(); }  }

Bizarre, à revoir donc.
2/ Par contre :

Code :

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

1
2
3
trigger: function(event) {	console.warn("activate");
			measurebar.controls[0].activate() ;
			$(" #over").hide();}

C'est ok et j'ai bien l'outil de mesure qui s'initialise, mais impossible de le fermer.... Pour l'instant, du moins...

Je continue sur ce chemin, mais tes réflexions me sont toujours utiles....

**jrenard** · 18/06/2014, 13h19

J'ai testé, su le principe de ce que tu as décrit, et chez moi cela fonctionne même avec le bouton de type Toggle : on a bien l'activation (ou la désactivation) de l'outil de mesure et le lancement d'autres instructions complémentaires.

Voilà le code de mon bouton :

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
// Création d'un bouton toggle (actif/inactif) suivant l'exemple classique OpenLayers
var boutonToggle = new OpenLayers.Control.Button({
	title:"Bouton Toggle",
	displayClass:"monBoutonToggle", // Ce nom de classe passera en monBoutonToggleItemActive ou monBoutonToggleItemInactive suivant l'état du bouton
	type: OpenLayers.Control.TYPE_TOGGLE,
	eventListeners: {
			"activate": function(event) {
				measurebar.controls[0].activate();
				alert("mesure activée");
			},
			"deactivate": function(event) {
				measurebar.controls[0].deactivate();
				alert("mesure désactivée");
			}
	}
});

// Création de la barre d'outils, ajout des boutons à la barre, et ajout de la barre à la carte (sans intégration dans un panel, les boutons n'auront pas le comportement attendu)
var toolBar = new OpenLayers.Control.Panel({
	displayClass: 'maToolbar'
});
toolBar.addControls([boutonToggle]);
viewer.getMap().addControl(toolBar);

**cmail** · 18/06/2014, 14h01

OK avec toi pour la création d'un bouton classique.

Mais en suivant la piste de dRichard dans cette discussion dont je ne saisis peut-être pas tout, il me semble bien que

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
var bouton0 = new OpenLayers.Control.Button({	uis:[OpenLayers.UI],
	uiOptions:{
		title:"Bouton 0",
		displayClass:"cmBouton0",
	type: OpenLayers.Control.TYPE_TOGGLE
	},
	 eventListeners: {
  "activate": function(event) { 
			console.warn("activate");
			measurebar.controls[0].activate() ;
			$(" #over").hide();
			 },   
 "deactivate": function(event) { measurebar.controls[0].deactivate();$(" #over").show();
 
 }	}
	});

n'est pas opérationnel. Non?
A lire avec plaisir tes réactions, je vais continuer à remonter cette piste. En espérant que quand on pourra tester sur IE et Chrome, il n'y aura pas de mauvaises surprises...

**jrenard** · 18/06/2014, 14h05

A priori, cette façon de faire n'est pas opérationnelle, ou alors c'est que quelque chose m'échappe (ce qu est bien possible). En s'en tenant à la primitive basique d'OpenLayers, les choses se passent bien, j'ai testé sous IE et Chrome et le résultat est le même.

**cmail** · 18/06/2014, 16h15

A priori, cette façon de faire n'est pas opérationnelle

Bon, bon, bon?

En s'en tenant à la primitive basique d'OpenLayers

, j'avance bien de mon coté.

Petit problème sur lequel j'aimerai bien avoir tes connaissances...
Je crée donc deux nouveaux boutons de mesure avec un mic mac de controle pour que quand l'un est actif, l'autre rebascule en inactif.

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
bouton0 = new OpenLayers.Control.Button({
..... eventListeners: {
     "activate": function(event) { 
if (bouton1.active)
{ measurebar.controls[1].deactivate();
bouton1.active=false;}....
})

bouton1 = new OpenLayers.Control.Button({
..... eventListeners: {
     "activate": function(event) { 
if (bouton0.active)
{ measurebar.controls[0].deactivate();
bouton0.active=false;}....
})

Est-ce qu'il y a une méthode plus propre genre toogle() pour lier ces deux boutons?
Comment ferais-tu?

**jrenard** · 19/06/2014, 10h17

Oui, il y a une méthode plus propre, et la bonne nouvelle c'est que tu n'auras quasiment rien à faire

Si tu crées plusieurs boutons de type TOGGLE et que tu les inclues tous dans un même panel Geoportal (via Geoportal.Control.Panel et non OpenLayers.Control.Panel), le code du Panel construit par l'API Géoportail fera que tes boutons seront auto-exclusifs sans que tu n'aies à rajouter une seule ligne de code.

**cmail** · 19/06/2014, 10h41

**cmail** · 19/06/2014, 14h36

Complément d'information:
Sur cette page de test, j'applique les conclusions de cette discussion. Les 2 boutons répondent bien.

Mon problème est de mettre cette toolbar dans une div annexe via par exemple "$("#espace").prepend($(".cmToolbar1"));" Voir cette nouvelle page de test avec ces modifications.
A ce moment, je perds les actions de mes deux boutons qui sont devenus insensibles au survol et clic.
Et pourtant "$("#espace").prepend($(".gpControlMeasureToolbar"));" me permet d'exporter totalement et correctement les boutons primitifs vers une div.

Pourquoi les actions des boutons sur mon panel ne sont plus valides "après" $("#espace").prepend($(".cmToolbar1"));? Et donc comment récupérer le comportement normal de ces boutons dans la div #espace?

Par ailleurs, il me semble bien qu'au niveau du DOM, le panel et les deux boutons sont identiques sur les deux pages....

**cmail** · 20/06/2014, 11h01

Un peu à bout d'alternative sur la question...
Je repars à 0

Jérémy, en reprenant ce que tu me disais le 23

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.

Sur cette page de test, ce codage (sur le bouton dont l'icone est une imprimante) n'est opérationnel que sous FF, et non sous chrome et anormalement en double-clic sous ie (comme déjà mentionné plus haut)
Normal ou non?

**jrenard** · 20/06/2014, 13h23

J'aurais tendance à dire pas normal, le problème c'est que je n'arrive pas à comprendre d'où vient ce comportement étrange. Du coup, cette solution de contournement que j'avais proposé était une fausse bonne idée.
En même temps, à l'époque je m'étais un peu emmêlé les pinceaux sur la création des boutons, ce qui faisait que le fonction trigger ne fonctionnait pas bien. Avec le code propre à partir des primitives OpenLayers décrit plus haut dans cette page, les choses devraient rentrer dans l'ordre et la fonction trigger devrait être exécutée correctement.

**cmail** · 20/06/2014, 14h26

J'aurais tendance à dire pas normal,

Je pense aussi par différents et nombreux essais qu'il y a problème...

Avec le code propre à partir des primitives OpenLayers

OK avec toi, par contre le problème (pour moi que je n'arrive vraiment pas à résoudre...) c'est que le placement de ce panel est limité à "l'intérieur" du viewer, alors que son "parent" (>>>pas au sens complet du DOM, mais tu dois saisir mon allusion) .gpControlMeasureTool est manipulable même à l'extérieur.

Ce qui me bride dans mes perspectives de mise en page...
Aussi de guerre lasse, j'ai créé mes propres pseudo boutons qui font appel à Geoportal.Control.MeasureToolbar et que je "surcharge" comme je veux et en les plaçant où je veux....
C'est moins intégré à l'api, avec quelques lignes de code de plus mais cela répond bien sous tous les navigateurs.

Autour de la création d'un bouton

IGN API Géoportail

Discussions similaires

Partager

Partager