Modifier XML côté client

Version imprimable

23/11/2012, 11h14
Supernul

Modifier XML côté client

Bonjour,

je crée un système de webmapping adaptatif et, apparemment, une solution possible réside dans la modification côté client du fichier de mise en forme de la carte (fichier en XML).

Plus en détail, le fonctionnement du système :
- mon serveur cartographique (MAPSERVER) permet de générer un service WMS
- côté client openlayer charge ce service pour l'afficher. Une option est d'affecter un SLD (Styled Layer Descriptor) qui définit les règles d'affichage du WMS dans la fonction WMS d'openlayer. Je pense qu'on peut voir le SLD du WMS comme le CSS pour le HTML.
- côté client toujours, j'ai une liste déroulante dans ma page HTML qui propose plusieurs choix (rien, bleu, rouge, vert, ...).

Ce que je voudrais faire, c'est que lorsque l'utilisateur sélectionne un choix dans la liste déroulante, le fichier XML soit modifié seulement du côté client pour la durée de la session de l'utilisateur.

Je débute complètement en développement web et malgré un certain nombre de livres/tutoriels je ne vois toujours pas comment faire. J'ai trouvé un tutoriel qui explique pas à pas mais le résultat de la modification côté serveur d'un fichier XML à partir de JavaScript/AJAX/Jquery et XSL (ce qui me semble être du délire complet d'autant plus que JavaScript ne fonctionne pas côté serveur !), d'autres semblent tout mettre (ou presque) dans la page HTML (ce qui ne me semble judicieux dans mon cas : plusieurs javascript de plusieurs dizaines de lignes).

Merci d'avance.
23/11/2012, 14h16
thelvin

JavaScript ne peut pas écrire des fichiers côté client. Ce serait une lourde faille de sécurité.

Tu pourrais faire quelque chose de similaire en mettant ton fichier XML dans un Web Storage, mais :

- Encore faut-il que tes trucs acceptent d'aller chercher leur fichier XML là
- Le Web Storage n'est finalement pas super géré par les navigateurs actuellement.

Normalement ce genre de besoins on les stocke dans la session, côté serveur.

merci pour la réponse.

Je vais prendre une direction moins souple mais plus simple dans ce cas.

voici une partie de mon .html :

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
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Première carte avec OpenStreetMap</title>
		<script type="text/javascript" src="OpenLayers-2.12/lib/OpenLayers.js"></script>
		<link rel="stylesheet" href="carte.css" type="text/css">
	</head>
	<body onload="init()">
		<div id="algo">
		</div>
		<div id="question">
		</div>
		<div id="legend">
			<div id="legend_1">
				<div id="legend_1_titre">
				</div>
				<div id="legend_1_choix">
					<FORM NAME="legend_1">
						<select name="choix_n1" onChange="init()">
							<option value="choix1">Sans aléa</option>
							<option value="choix2" selected="Selected">Dégradé de bleu</option>
							<option value="choix3">Dégradé de rouge</option>
							<option value="choix4">Couleurs du PPRI</option>
							<option value="choix4">Couleurs de l'AZI</option>
						</select>
					</FORM>

Il contient dans les dernière ligne la liste déroulante qui m'intéresse. Dans un .js externe, je voudrais récupérer la valeur de l'index :

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
function init() {
	var index = document.getElementById("legend_1_choix").legend_1.choix_n1.selectedIndex;
	switch (index) {
		case 1:
			var SDL_choix = "http://localhost/SLD/SLD_alea_bleu.xml";
			var val_opacity = 0;
		break;
		case 2:
			var SDL_choix = "http://localhost/SLD/SLD_alea_bleu.xml";
			var val_opacity = 0.5;
		break;		
		case 3:
			var SDL_choix = "http://localhost/SLD/SLD_alea_rouge.xml";
			var val_opacity = 0.5;
		break;
		case 4:
			var SDL_choix = "http://localhost/SLD/SLD_alea_bleu.xml";
			var val_opacity = 0.5;
		break;
		case 1:
			var SDL_choix = "http://localhost/SLD/SLD_alea_bleu.xml";
			var val_opacity = 0.5;
		break;
	};
//code intermédiaire 
    var wms2 = new OpenLayers.Layer.WMS("alea", "http://localhost/cgi-bin/mapserv?map=/var/www/mapfile/alea_wms.map&", 
		{layers: "alea_raster", 
		transparent: true,
		SLD: SDL_choix
		},
		{opacity: val_opacity
		}
    );
//code intermédiaire
    map.addLayer(wms2);

mais firebug me renvoie une erreur précisant que document.getElementById("legend_1_choix").legend_1 n'est pas défini et je ne sais pas comment le faire dans un script externe. J'utilise deux tutoriels : un pour accéder à la div et l'autre pour enregistrer dans une variable le choix de la liste déroulante (le tuto met le script dans la page html, ce qui me dérange car mon .js fais déjà une 100aine de ligne et n'est pas fini).

PRESQUE Résolu en utilisant getElementById("choix_n1") dans le .js et en remplaçant man par id dans mon <select>. Il ne me reste plus qu'a forcer la réactualisation de l'image quand on choisit ans la liste.

23/11/2012, 16h42
NoSmoking

Bonjour,
mets un ID sur ton select

Code:

<select id="choix_1" name="choix_n1" onChange="init()">

et dans ton code tu récupéres par

Code:

var index = document.getElementById('choix_n1').value;

Attention le retour est une STRING pas un NUMBER.
25/11/2012, 11h52
sekaijin
comme toujours je trouve qu'il est inutile d'en passer par une recherche d'id dans le dom

Code:

<input onchange="return init(this)">

dans la fonction init
Code:

1 2 3 4 5 function init(select) { var index = select.value var divLegend1Choix : select.parent.parent; ... }
pas de recherche donc gain de perf et facilité d'écriture
A+JYT