Université de La Rochelle LUP-SIG 2004-2005 Programmation SIG et Internet Cartographique Web et présentation d’information spatiale Applets JAVA Jean-Michel FOLLIN [email protected] 1 Extension des fonctionnalités de navigateurs Web Navigateur Web : visualisation de documents HTML (uniquement) présentations multimédia limitées aux images (JPG, GIF) Pour la présentation des autres types de données (multimédia) : plug-ins : des applications installées localement (ex., RealVideo, Flash, SVGViewer, …) applets Java : applications téléchargées puis jetées 2 Application téléchargées : le principe La présence d’une application est marquée dans le document HTML par des balises spéciales Le navigateur télécharge et exécute le code de l’application « dans » la page HTML (1) Requête HTTP Serveur HTTP Navigateur (2) Internet Document HTML (3) Document HTML (4) Code applet Exécution Code applet 3 Langage Java : applications portables Applications « classiques » : code code source source compilation compilation 11 compilation compilation 22 compilation compilation 33 … … exécutable exécutable 11 exécutable exécutable 22 exécutable exécutable 33 … … OS OS Windows Windows OS OS Linux Linux OS OS MacOS MacOS … … Applications Java − « Compile Once, Run Anywhere » : code code source source compilation compilation exécutable exécutable Java Java JVM JVM 11 JVM JVM 22 JVM JVM 33 … … OS OS Windows Windows OS OS Linux Linux OS OS MacOS MacOS … … 4 Applets JAVA Applications JAVA (« appliquettes ») : programmes écrits en langage JAVA et exécutés par un moteur d’exécution : Java Virtual Machine (JVM) un navigateur peut disposer d’un moteur JVM ⇒ possibilité d’exécuter une application dans une page HTML Avantages : interface riche (menus, fenêtres…) traitement des données dans le navigateur (sans s'adresser au serveur) visualisation de différents types de données pas d’installation locale (télécharger → exécuter) solutions généralement issues du monde libre 5 Document HTML et applet La présence d’une applet dans le document HTML est marquée par la balise <applet> Une applet est affichée dans une zone rectangulaire de la page HTML Syntaxe générale : <applet ...> <param...> <param...> ... </applet> 6 Balise <applet> Les attributs principaux (obligatoires) : <applet code="nomClasse" archive="nomArchive" hight="hauteur" width="largeur" ...> ... </applet> code : nom fichier principal ex., code="MonApplet.class" archive : nom de l’archive avec tous les fichiers exécutable (.class) ex., archive="AppletClasses.jar" height : hauteur de la zone de l’applet dans le document HTML ex., height=200 width : largeur de la zone de l’applet ex., width=450 Les paramètres de l’applet (le programme) sont définis par les balises <param> 7 Balise <param> Les paramètres sont définies entre les balises <applet> et </applet> Syntaxe : <param name="nomParametre" value="valeurParametre"> Exemple : <applet code="Photo.class" archive="AppletPhotos.jar" width=50 height=50> <param name="nom" value="Dupon"> <param name="prenom" value="Jean"> </applet> 8 Applets SIG Possibilité d’inclure dans une page Web une présentation interactive d’informations cartographiques : nouveaux formats de données (vecteur,…) traitements de données (zoom, pan,…) traitements de requêtes (trouver un objet…) 9 Autres balises / objets HTML Les documents non-HTML (ex video QuickTime, animation Flash) peuvent être inclus dans une page HTML. Deux types de balises sont utilisées : <embed <embed ...> ...> ... ... </embed> </embed> → Netscape Navigateur ≥ 2.0 et Internet Explorer ≥ 3.0 <object <object ...> ...> <param <param ...> ...> </object> </object> → Internet Explorer ≥ 4.0 ⇒ Les documents traités par les plug-in des navigateurs sont inclus à l’aide des balises <embed>, <object> (ou <iframe>). 10 Exemple : une présentation Flash <OBJECT <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=7,0,0,0" swflash.cab#version=7,0,0,0" width=600 width=600 height=400> height=400> <PARAM <PARAM name=movie name=movie value="monFlash.swf"> value="monFlash.swf"> <PARAM <PARAM name=quality name=quality value=high> value=high> <PARAM <PARAM name=bgcolor name=bgcolor value=#FFFFFF> value=#FFFFFF> <EMBED <EMBED src= src= "monFlash.swf" "monFlash.swf" quality=high quality=high bgcolor=#FFFFFF bgcolor=#FFFFFF width=600 width=600 height=400 height=400 align=" align=" "" type="application/x-shockwave-flash" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> pluginspage="http://www.macromedia.com/go/getflashplayer"> </EMBED> </EMBED> </OBJECT> </OBJECT> ⇒ Les deux balises sont souvent utilisées dans le même document pour assurer la compatibilité entre les différents navigateurs. 11 Exemple : une applet SIG 12 Exemple : la page HTML <html> <head> <title>Un exemple d'une applet SIG</title> </head> Fichier compilé <body bgcolor="#f0f0ee"> de l’applet <center> <b>Un exemple d'une applet SIG</b> <p> Fichier d’archive (éventuellement) <APPLET code="TViewer2k.class" archive="AppletSIG.jar" width=400 height=400> <PARAM name=cfg value="AppletSIG.cfg"> </APPLET> </center> </body> </html> nom fichier contenant le paramètre Paramètres de l’applet 13 Exemple : fichier de configuration Le paramètre cfg de l’applet définit le nom de fichier de configuration (la description des couches à afficher) Deux types de couches : rasteur (images JPG ou GIF) vecteur (fichiers MIF[/MID]) 14 Exemple : fichier AppletSIG.cfg BackgroundColor 255 255 255 InitialBounds (329800, 2132710) (330720, 2133740) # AboutURL http://www-l3i.univ-lr.fr/~astockus/revim/ # La couche d'une image rasteur RasterLayer Title "Photo La Rochelle (x10y15)" Image map/x10y15-25.jpg Units "m" Bounds (329000, 2136000) (330000, 2135000) Visible 1 # Couche vecteur : fichier format MIF MIFLayer Title "La Rochelle : les rues" Image map/rues_lr.mif Visible 1 15 Références Ce document : http://perso.univ-lr.fr/jmfollin/LupSIG/s4/cours/s4_coursApplet.pdf Exemples d’applets : • RaveGeo (transmission progressive) : http://www.idevio.com/demo/vmap0demo/ • CommonGIS (Descartes - IRIS) : http://www.ais.fraunhofer.de/and/descartes.html http://www.ais.fraunhofer.de/SPADE/ (EFIS prototype) • ALOV Map (free java applet) : http://alov.org/ Exemples de cartes au format FLASH : • Liens : http://www.carto.net/papers/svg/links/flash.shtml • Geoclip : http://www.geoclip.net/ Spécifications HTML (en français) : http://www.la-grange.net/w3c/html4.01/cover.html 16