Etude exploratoire XML / SVG IDL_CERTU1/ETU_001 / 1.1 - Lara

More documents

Recommendations

Info

Edité le 11 juin 2002 Etude exploratoire XML / SVG CERTUArticle : Ces deux règles permettent d’inclure la description d’une zone et les articles du règlement avec leur titre dans ledocument FO.Cette dernière règle transforme les éléments « texte » sélectionnés dans le règlement en blocs avec le style pardéfaut.Cet exemple donne un aperçu du langage XSL-FO et de ses possibilités. Nous avons présenté latransformation permettant de produire un document FO plutôt que le document FO lui-même car ce dernier esttrop volumineux pour être facilement interprétable. Pour transformer ce document en un document PDF, nousutilisons Apache FOP, un ensemble de bibliothèques Java permettant de traiter les documents XSL-FO.L’utilisation de FOP se fait par l’intermédiaire d’une servlet ressemblant à celles utilisées pour générerl’arborescence ou un article du règlement. Pour traiter les documents SVG, FOP utilise Batik. Certains élémentsne sont pas traités de la même façon qu’avec Adobe SVG Viewer. Notamment nous avons constaté les bugssuivants :- Dans certains cas les documents SVG inclus causent la production d’un document PDF invalide (celadépend manifestement de la taille du document dans la page).- Les polices de caractères ne sont pas toujours représentées correctement.- Il n’est pas possible de créer le double trait pour les secteurs.- Il n’est pas possible de créer d’effets de transparence (limitation due au format PDF).SWORD - Nos réf. : IDL_CERTU1/ETU_001 / 1.1 Diffusion : contrôlée Page : 48/81
Edité le 11 juin 2002 Etude exploratoire XML / SVG CERTU3.7 INTERFACE GRAPHIQUE AVEC SVG ET JAVASCRIPTUn des principaux avantages du format SVG est de permettre certaines interactions avec l’utilisateurgrâce à un langage de script. Ces opérations permettent de modifier dynamiquement la représentation DOM dudocument SVG. On peut ainsi créer, modifier ou supprimer tous les éléments graphiques du document en tempsréel. Cette partie décrit les possibilités que nous avons explorées en ce qui concerne le document SVG et sesinteractions avec Javascript.3.7.1 GénéralitésLes différents aspects illustrés dans cette partie fonctionnent bien avec le visualisateur Adobe SVGViewer et le navigateur Microsoft Internet Explorer. Nous ne pouvons pas garantir que cela sera le cas avecd’autres visualisateurs ou d’autres navigateurs qui supportent plus ou moins bien le Javascript. Les fonctionsJavascript sont appelées à partir du visualisateur lorsque l’utilisateur agit sur les objets graphiques (selon lesattributs onclick, onmouseover, etc.). Ces fonctions peuvent ensuite manipuler le modèle DOM de n’importequel objet du document. Le visualisateur interprète automatiquement les modifications et les fait apparaître àl’écran. Les possibilités sont donc théoriquement illimitées. En voici quelques exemples.3.7.2 Surlignage des contours et effets de transparence sur les zonesDans la maquette réalisée, lorsque l’utilisateur passe le curseur de la souris au-dessus d’une zone oud’un secteur, la couleur de celui-ci devient plus pâle. Lorsqu’il sélectionne une parcelle, le contour de celle-cidevient bleu. Et lorsqu’il sélectionne un type de zone ou de secteur, le contour des éléments de ce typedeviennent rouges.Pour réaliser cela, la méthode la plus évidente serait de modifier directement la transparence del’élément en question, ou la couleur et l’épaisseur de son contour. Cela serait réalisé grâce à ces quelques lignesde code par exemple :function mouseOverPoly (evt) {var poly = evt.getTarget();poly.style.setProperty('fill-opacity','0.5');}Malheureusement, cette méthode pose quelques problèmes. Puisque les zones et les secteurs sontsuperposés, le fait de rendre un secteur transparent ne change rien visuellement (on voit toujours la zone audessousqui est de la même couleur). De plus, les contours des zones se recouvrent souvent, il est donc possibleque le changement de couleur d’un contour ne soit pas ou peu visible. Pour résoudre ces problèmes, nousutilisons d’autres éléments graphiques « path » qui seront dessinés après tout le reste de la carte, dans unecouche que nous appelons couche cosmétique. En pratique, il suffit de mettre les éléments de cette couche à lafin du document SVG, car le dessin des objets se fait dans l’ordre du document. Lorsque l’on veut surligner unobjet ou son contour, il suffit de modifier l’attribut « d » de ces éléments cosmétiques pour qu’ils se superposentà l’objet, puis de les rendre visibles.Par exemple, pour rendre la couleur d’une zone ou d’un secteur plus pâle, nous utilisont un élément« path » de couleur blanche et à moitié transparent. Lorsque le curseur de la souris passe sur une zone ou unsecteur, nous superposons cet élément à l’objet en question et nous le rendons visible. Cela est réalisé grâce auxquelques lignes de code suivantes :function mouseOverPoly (evt) {var fog = document.svgMap.getSVGDocument().getElementById("fog");fog.setAttribute("d", evt.getTarget().getAttribute("d"));fog.style.setProperty('visibility', 'visible');}L’élément « fog » est défini ainsi dans le document SVG :SWORD - Nos réf. : IDL_CERTU1/ETU_001 / 1.1 Diffusion : contrôlée Page : 49/81
Page 1 and 2:
Étude exploratoireXML/SVGCertucent
Page 4 and 5:
Etude exploratoire XML / SVGIDL_CER
Page 6 and 7: Edité le 11 juin 2002 Etude explor
Page 50: Edité le 11 juin 2002 Etude explor
Page 55: Edité le 11 juin 2002 Etude explor
Page 91 and 92: Edité le 11 juin 2002 Annexes de l
Page 107 and 108:
Edité le 11 juin 2002 Annexes de l
Page 109 and 110:
Page 111 and 112:
Page 113 and 114:
Page 115 and 116:
Page 117 and 118:
Page 119 and 120:
Page 121 and 122:
Page 123 and 124:
Page 125 and 126:
Page 127 and 128:
Page 129 and 130:
Page 131 and 132:
Page 133 and 134:
Page 135 and 136:
Page 137 and 138:
Page 139 and 140:
Page 141 and 142:
show all

Etude exploratoire XML / SVG IDL_CERTU1/ETU_001 / 1.1 - Lara

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?