Ecrire le HTML | A Propos | FAQ | Alumni | Kudos | Références | Tags | Leçons | précédent | suivant |

29e. Petite Tasse de Java (à emporter)

tasse de café J A V A
Juste une petite tasse, je dois surveiller ma consommation de caféine. Oh oui, ça me donne de l'énergie, mais aussi des tremblements... dans ma page web ? Bien sûr, pourquoi pas ? Tout le monde s'en sert..."

Objectifs

Après cette leçon, vous pourrez :

Leçon

A l'annonce de Java, par Sun Microsystems au début des années 1990, les promesses étaient immenses, voire "inconsidérées". Aussi brièvement que possible, Java est un nouveau langage de programmation permettant de créer des applications, ou "applets" qui peuvent s'exécuter sur n'importe quel système, à n'importe quel endroit supportant la "Plate-forme Java" :

Avec la technologie JavaTM, vous pouvez utiliser la même application sur n'importe quelle machine -- un PC, un Macintosh, une station légère ou même des nouvelles technologies comme les téléphones WAP.

Donc, un applet Java ne nécessite aucune couche logicielle supplémentaire pour tourner ; quand on l'appelle, toutes ses fonctions sont envoyées sur un réseau à qui l'a demandé, et la technologie d'exécution Java de l'autre côté le fait fonctionner.

Pour plus d'informations sur Java, consultez http://java.sun.com/

type de média : java
ce qu'il fait bien : outils, manipulation de données, tableaux et graphiques, navigation interactive, texte dynamique, effets d'altération d'image.
problème à considérer évaluation commentaires
inconvénient pour la création du média faiblefort
----		 Pour créer vos propres applets Java, vous devez connaître le langage de programmation ou avoir accès à des outils graphiques de développement d'applications. Néanmoins, il existe de nombreux endroits sur Internet où récupérer des applets Java à utiliser.
"largeur" de l'audience pouvant voir le média petitegrande
----		 Java est supporté sur la majorité des navigateurs web à partir de la version 3.x, bien qu'il soit plus lent et moins stable sur les ordinateurs Macintosh. On peut observer un temps d'attente assez long et un écran blanc pendant que le navigateur lit le "chargement Java"
Consommation de bande passante faibleforte
----		 Très variable car elle dépend du type d'interaction et de la complexité de la tâche effectuée. Quand une page contient un applet Java, elle peut télécharger jusqu'à une trentaine de petits fichiers qui doivent tous être reçus sur le poste avant que la page fonctionne.

Comme nous l'avons précisé dans la leçon 27, et en dépit de la similitude des noms, Javascript -- un langage de script pour les navigateurs, est très différent de Java, langage de programmation pour ordinateur. JavaScript est litéralement interprêté ligne par ligne au fur et à mesure que le navigateur lit le script. Les applets Java sont écrits en code source puis "compilés" ou convertis en applications exécutables (en langage machine). Une application compilée est souvent plus puissante, plus sécurisée et plus rapide que du script interprêté, mais elle est plus complexe à créer.

Malheureusement, au-delà des fonctionnalités intégrées de Java, sa plus courante utilisation et celle que vous trouverez sur le web est un applet Java servant à afficher un encart de pub déroulant, horizontal ou vertical (voir la leçon 17 pour notre avis à ce sujet !), ou un effet omniprésent consistant à ajouter des vagues à une image.

Comme nous l'avons vu dans la leçon précédente sur Shockwave, les fichiers Java ressemblent plutôt à des "boites noires" dont on ne veut pas connaître le fonctionnement. Grâce à l'information que l'on peut envoyer dans un applet à l'aide de notre code HTML, nous pouvons modifier ou contrôler les fonctionnalités de certains applets.

Cette leçon ne couvre pas les aspects de programmation Java, mais elle vous montrera comment ajouter un applet existant à votre site web.

Le code HTML permettant d'inclure un applet Java est :


  <APPLET CODE=Mon_Applet.class WIDTH=XX HEIGHT=YY>
  </APPLET>

où Mon_Applet.class est le nom de fichier d'un applet Java compilé, et WIDTH et HEIGHT sont les dimensions en pixels que l'applet occupe sur l'écran. Très souvent, vous pouvez inclure des informations envoyées à l'applet dans des paramètres :


  <APPLET CODE=Mon_Applet.class WIDTH=XX HEIGHT=YY>
  <param name="param1" value=ma_Valeur1>
  <param name="param2" value=ma_Valeur2>
  </APPLET>

où chaque paramètre a un nom que l'applet recherche, et une valeur pouvant être une chaine de texte ou un nombre :


  <APPLET CODE=Mon_Applet.class WIDTH=XX HEIGHT=YY>
  <param name="param1" value="Le Sens de la Vie réside dans le Fromage">
  <param name="param2" value=129>
  </APPLET>

Enfin, vous pouvez inclure du texte qui sera affiché seulement si le navigateur web ne supporte pas Java (rappelez-vous, le navigateur ignorera tout ce qui se trouve à l'intérieur de tags qu'il ne comprend pas), similaire à l'utilisation de l'option ALT dans les tags <img ...> (leçon 7a) ou du tag <NOFRAMES> pour les cadres (leçon 26).


  <APPLET CODE=Mon_Applet.class WIDTH=XX HEIGHT=YY>
  <param name="param1" value=ma_Valeur1>
  <param name="param2" value=ma_Valeur2>
  Désolé, mais votre navigateur web ne peut pas 
  afficher cet applet Java plutôt cool.
  </APPLET>

Donc, n'importe quelle chaine de texte à l'intérieur des tags <APPLET>...</APPLET> est ignorée par un navigateur supportant Java (car elle n'est pas incluse dans un tag applet ou parameter), mais sera la seule partie affichée par un navigateur ne supportant pas Java.

Ajouter du Java

Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez-les maintenant.

Dans cette leçon, nous allons utiliser un applet Java à qui nous allons envoyer un fichier image, et permettre à l'internaute dans notre page web de faire des zooms avant et arrière. Les photos que nous allons utiliser sont celles de roches volcaniques prises avec un microscope spécial nous permettant de voir les minéraux et les structures dans la matière. Dans notre page web, nous allons nous servir de l'applet Java comme d'un véritable microscope.

L'applet Java utilisé ici s'appelle "ImageZoom" et vous pouvez obtenir plus d'information sur http://www.vivaorange.com/ImageZoom/. Cet applet est gratuit pour les utilisations non-commerciales (nous l'avons trouvé dans un de nos sites de ressources Java listés plus bas).

Le code HTML général pour utiliser cet applet est :

<applet code="ImageZoom.class" width="[width]" height="[height]">
  <param name="IMAGE" value="[fichier image]">
  <param name="ZoomLevel" value="[niveau de zoom]">
  <param name="PanSpeed" value="[vitesse]">
  <param name="Cursor" value="[curseur]">
  <param name="Preload" value="[préchargement]">
</applet>

où :

La taille du fichier applet, ImageZoom.class, est de 5 Ko seulement, et l'image qu'il appelle est lue en tant que paramètre, comme les autres options listées ci-dessus. Consultez le Site web source pour plus d'information sur cet applet.

  1. Tout d'abord, créez un nouveau dossier/répertoire dans votre espace de travail et appelez-le scope
  2. Allez au Studio d'Images de la Leçon 29e pour télécharger quatre images prises à l'aide d'un microscope pétrographique. Sauvegardez-les dans votre dossier scope.
  3. Maintenant, vous allez devoir récupérer une copie du fichier applet.

    1. Pour cela, vous devez appeler le menu "secret" avec un clic droit (Windows, Unix) ou un clic long (Macintosh) sur ce lien vers le fichier applet Java (ImageZoom.class) jusqu'à faire apparaître un menu contextuel.
    2. Dans ce menu, sélectionnez Enregister sous... ou Enregistrer la cible sous...
    3. A l'apparition de la boite de dialogue, assurez-vous de sélectionner Source si il existe une option de menu appelée Format.
    4. Enregistrez-le sous ImageZoom.class dans votre répertoire scope


  4. Créez un nouveau fichier dans votre éditeur de texte, appelez-le javascope.html et sauvegardez-le dans le dossier scope

  5. Tapez le HTML suivant dans ce nouveau fichier : 
    <html>
<head>
  <title>Microscope Java</title>
</head>
<body bgcolor="#000000" text="#EEEEEE">
<center>
<applet code="ImageZoom.class" width=400 height=265 vspace=14>
    <param name="IMAGE" value="pw_vis.jpg">
    <param name="ZoomLevel" value="6">
    <param name="PanSpeed" value="4">
    <param name="cursor" value="1">
    <param name="Preload" value="on">
Désolé, mais votre navigateur web ne peut pas charger cet applet Java :-(
<p>Voici au moins une image de l'exemple :<br>
<img src="pw_vis.jpg" width=400 height=265><p>
</applet>
<font face="verdana,helvetica" size="2">
<br>BISHOP TUFF : Partiellement fondue (Lumière Visible)
cliquez pour zoomer, déplacez la souris sur les côtés pour balayer</center>
</body>
</html>
    NOTE : Nous avons utilisé ici un seul de nos fichiers images ; nous vous montrerons ultérieurement un moyen plus dynamique d'utiliser cet applet. Nous avons également ajouté un paramètre vspace dans le tag applet pour permettre une marge de 14 pixels au-dessus et au-dessous de l'applet dans la page. (Ceci ressemble à ce que l'on faisait avec les images dans la leçon 20)

    La largeur (width) et la hauteur (height) des fichiers images sont respectivement de 400 pixels et 265 pixels. Nous avons défini les autres paramètres pour avoir 6 niveaux de zoom, une vitesse de balayage de 4 et un curseur en forme de main. Notez aussi le texte dans le tag applet pour informer les personnes visitant ce site et dont le navigateur ne supporte pas Java. De cette façon, elles peuvent au moins voir le contenu, mais sans zoomer sur l'image. Vous pouvez tester cela en allant dans les préférences de votre navigateur web pour désactiver Java (n'oubliez pas de le réactiver ensuite !).

    Enfin, sur certains ordinateurs (particulièrement les Macintosh), les applets Java changent le curseur de NetScape même après avoir terminé d'exécuter l'applet.
  6. Sauvegardez et Chargez ce fichier html dans votre navigateur web. Vérifiez que l'applet Java se charge et s'exécute. Cliquez sur l'image plusieurs fois pour voir si le zoom fonctionne, puis déplacez le curseur sur un bord (il vous faudra peut-être le laisser là quelques secondes) pour vérifier que le "balayage" de l'image ou la translation de la région visible fonctionne correctement.
NOTE : Si votre page web ne marche pas comme prévu, comparez votre HTML au code source de la page d'exemple.

Nous venons de voir comment charger l'applet ImageZoom avec une image précise pour vous permettre de zoomer et balayer comme si vous utilisiez un microscope (en fait, l'image serait bien plus nette sur un vrai microscope pour les grossissements forts ; sur l'ordinateur, on agrandit simplement l'image et l'on constate les limitations des images pixelisées).

Mais nous pouvons faire des choses bien plus souples en utilisant du JavaScript pour créer dynamiquement le HTML de l'applet, pour nous permettre de choisir parmi une série d'images à charger dans l'applet. Pour plus d'informations sur cet aspect du JavaScript, revoyez la leçon 27b. Pour réaliser cela, nous allons créer une page web avec des frames (voir la leçon 26) qui ressemblera à :

cadre "écran"

le contenu et l'applet s'affichent ici
cadre de "contrôle"

le menu déroulant et le code JavaScript écrivent le contenu dans le cadre du haut
  1. Créez un nouveau fichier dans votre éditeur de texte, appelez-le index.html et sauvegardez-le dans votre dossier scope
  2. Tapez ce code HTML dans ce nouveau fichier pour créer la page "frameset" (reportez-vous à la leçon 26 si vous avez besoin de revoir les cadres) 
    <html>
<head>
	<title>Microscope de Roche Volcanique</title>
</head>
<frameset rows="*,70" border=0>
	<frame src="stage.html" name="stage" 
	       marginheight="12" marginwidth="12" 
	       scrolling="auto" noresize>
	       
	<frame src="controls.html" 
	       marginheight="8" marginwidth="8"
	       scrolling="no" noresize>
</frameset>
<noframes>
<h2 align=center>NOTE : Ce site utilise des cadres, mais votre navigateur
ne les supporte apparemment pas.</h2> 
</noframes>
</html>
    NOTE : Ceci crée une page web de cadres avec un cadre bas de 70 pixels de hauteur, le cadre du haut utilisant le reste de la fenêtre. Notez également les paramètres marginheight (hauteur de marge) et marginwidth (largeur de marge) vous permettant de définir la taille des "marges" (espace supplémentaire entre le contenu d'un cadre et son bord).
  3. Sauvegardez ce fichier html.

  4. Créez un nouveau fichier dans votre éditeur de texte, appelez-le stage.html et sauvegardez-le dans votre dossier scope. Ce sera la page chargée dans le cadre du haut.
  5. Tapez ce code HTML dans ce nouveau fichier : 
    <html>
<head>
	<title>Ecran Microscope</title>
</head>
<body bgcolor="#000000" text="#FFFF00">
<center>
<table width=80% height=80% border=0 align=center>
<tr>
<td align=center>
<h1>Microscope de Roche Volcanique</h1>
<font face="verdana,helvetica" size=3>Sélectionnez un exemple de roche
dans le menu ci-dessous pour la voir comme dans un microscope pétrographique.
<p>
Chaque clic de souris vous fera zoomer. Déplacez la souris sur  
le bord de l'image pour balayer la vue (Le balayage ne fonctionnera 
que si l'image a été agrandie au moins une fois).
<p>
Le microscope nécessite un navigateur supportant Java.
</td>
</tr>
</table>
</center>
</body>
</html>
    NOTE : C'est juste du contenu statique pour la première vue de la page. Notez l'utilisation de la technique de dimensionnement de table présentée à la fin de la leçon 21 pour centrer le contenu.
  6. Enregistrez ce fichier html.

  7. Créez un nouveau fichier dans votre éditeur de texte, appelez-le controls.html et sauvegardez-le dans votre dossier scope. Ceci est la page chargée dans le cadre du bas et contenant le code JavaScript pour activer un menu déroulant et générer le contenu dans le cadre du haut
    8. <html>
<head>
<script language="JavaScript">
<!--
function scope( rockmenu ) {
// Appelée du menu pour charger du contenu statique dans le cadre du haut
// ou écrire dynamiquement le code nécessaire à l'applet Java

// rock définit le nom de fichier, blurb le titre
  rock = rockmenu[rockmenu.selectedIndex].value;
  blurb = rockmenu[rockmenu.selectedIndex].text;
  
  if (rock != "") {
    // ignore les valeurs nulles du menu et resélectionne le premier 
    // élément de menu
      rockmenu.selectedIndex = 0;
      
    if (rock== "help") {
      // aide sélectionnée, charge la page d'accueil
      parent.frames[0].location.href="stage.html";
      rockmenu.selectedIndex = 0;
      
    } else if (rock== "close")  {
        // appelle la fonction pour fermer le microscope
      close_scope();
      rockmenu.selectedIndex = 0;
      
    } else {
      // charge l'applet avec l'image choisie
      with (parent.frames[0]) {
        document.write('<html><head><title>' + blurb + '</title></head>');
        document.write('<body bgcolor="#000000" text="#EEEEEE">');
        document.write('<center><applet code="ImageZoom.class"');
        document.write(' width=400 height=265 vspace=14>');
        document.write('<param name="IMAGE" value="'+ rock +'.jpg">');
        document.write('<param name="ZoomLevel" value="6">');
        document.write('<param name="PanSpeed" value="4">');
        document.write('<param name="cursor" value="1">');
        document.write('<param name="Preload" value="on">' );
        document.write('Désolé, mais votre navigateur ne peut charger cet applet Java :-(');
        document.write('<p>Voici au moins une image de l\'exemple :<br>');
        document.write('<img src="'+ rock +'.jpg" width=400 height=265><p>');
        document.write('</applet>');
        document.write('<font face="verdana,helvetica" size="2">');
        document.write('<br>BISHOP TUFF : ' + blurb);
        document.write('cliquez pour zoomer, déplacez la souris sur les côtés pour balayer</center>');
        document.write('</body></html>');
        document.close();
      }
    }
  }
}

function close_scope() {
// affiche une boite de dialogue de confirmation avant de fermer la fenêtre
  if ( confirm( "Voulez-vous fermer le microscope ?" ) )  {
    parent.close();
  }
}

//-->
</script>
</head>
<body bgcolor=#333333 text=#FFFFFF link="#CCFFFF" vlink="#FFCC99">
<center>
<form>
<font face="verdana,helvetica" size=1>microscope java</font><br>
<select name="rock" onChange="scope(this)">
<option value="">Sélectionnez un exemple...
<option value="dw_vis">Bishop Tuff dense fondue (lumière visible)
<option value="dw_pol">Bishop Tuff dense fondue (lumière polarisée)
<option value="pw_vis">Bishop Tuff partiellement fondue (lumière visible)
<option value="pw_pol">Bishop Tuff partiellement fondue (lumière polarisée)
<option value="">------------------
<option value="close">Fermer le Microscope
<option value="help">Aide
</select>
</form>
</center>
</body>
</html>
    NOTE : Nous avons pas mal de code ici ! Le menu créé dans le corps du document envoie un message à chaque changement, envoyant en fait une référence du menu. La fonction Javascript teste la valeur (value) de l'élément sélectionné. Si elle est vide, on ne fait rien. Si elle est égale à "help", on affiche simplement la première page dans le cadre du haut. Si c'est "close", on appelle la fonction JavaScript affichant d'abord une boite de dialogue de confirmation, et si l'internaute clique OK, on ferme la fenêtre.

    La plus grande partie du travail est faite quand le menu envoie le nom de fichier d'une image. On réécrit tout le code HTML du cadre du haut pour charger l'applet avec le nom de fichier spécifié et un titre en utilisant le texte du menu lui-même.
  8. Enregistrez ce fichier html.
  9. Chargez le fichier index.html dans votre navigateur web et vérifiez son fonctionnement. Si rien ne se passe quand vous changez le menu dans le cadre du bas, comparez scrupuleusement votre HTML avec le code exemple ici.

Une fois que notre page java marche, nous devons ajouter un lien qui ouvrira cette page dans sa propre fenêtre de navigateur, comme nous l'avons fait dans les précédentes leçons multimédia.

  1. Ouvrez le fichier intro.html dans votre éditeur de texte.
  2. Au bas de la section titrant "Roches Volcaniques", ajoutez ce code HTML après la phrase : 
    Une <b>lamelle</b> est une couche de roche coupée si finement 
que la lumière d'un microscope passe à travers, 
nous révèlant ainsi la structure de la roche. 
<p>
<br clear=right>
    pour la changer en : 
    Une <b>lamelle</b> est une couche de roche coupée si finement 
que la lumière d'un microscope passe à travers, 
nous révèlant ainsi la structure de la roche.
<p>
Pour voir une vue plus détaillée de roches volcaniques, 
essayez notre <a href="../scope/index.html" onClick="window.open('../scope/index.html', 
'scope', 'width=540,height=480,status,menubar'); return false" 
onMouseOver="window.status='ouvrir le microscope de roches volcaniques'; 
return true">Microscope de Roches Volcaniques</a> (nécessite Java)
<br clear=right>
  3. Enregistrez et Rechargez dans votre navigateur web. Testez et assurez-vous que la fenêtre de navigateur s'ouvre et charge la page de l'applet Java.

Vérifiez Votre Travail

Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur. Comparez votre travail avec le HTML des exemples (cherchez quelque chose comme Source dans le menu Afficher de votre navigateur).

Révision

Revoyons les grandes lignes de cette leçon :

  1. Quels bénéfices y-a-t-il à utiliser des applets Java ?
  2. Quelles sont certaines de leurs limitations ?
  3. Quel est le code HTML permettant d'inclure un fichier applet Java ? Pourquoi un applet peut-il utiliser différents jeux de tags paramètres ?
  4. Comment gérez-vous le cas où la personne visitant votre site ne peut pas voir l'applet Java ?
  5. Quels avantages y-a-t-il à utiliser JavaScript pour écrire le HTML d'un applet Java ?

Travail Indépendant

Entraînez-vous avec l'applet ImageZoom en utilisant vos propres images. Essayez de voir la différence quand vous ajustez certains des paramètres.

Informations Supplémentaires

Bien que Java soit un langage de programmation de haut niveau, vous pouvez trouver de nombreux sites web offrant des applets gratuits à utiliser dans vos propres pages.