I. Introduction▲
Dans ce document nous allons aborder la construction d'une animation pour pages web sous forme d'une applet Java. Dans l'exemple l'animation sera constituée par le mouvement des aiguilles d'une horloge. Nous y aborderons les threads et le double buffering.
II. Code de l'applet▲
Créez dans votre éditeur favori le fichier source que vous nommerez "Horloge.java". Comme vous le savez, le nom du fichier doit être le même que celui de la classe, en conséquence la classe se nommera "Horloge" et héritera de la classe "java.applet.Applet" et utilisera l'interface "Runnable" pour le thread.
Le rafraîchissement du dessin se fera toutes les secondes par l'appel de la méthode repaint(), nous le ferons dans un thread pour éviter de bloquer l'affichage de l'applet pendant la pause "Thread.sleep(1000)".
Le dessin de l'horloge se fera sur une image en mémoire imgTmp. Elle sera dessinée en dernier ressort sur la surface de dessin de l'applet à l'aide de la méthode drawImage.
Horloge.java :
import java.awt.*;
import java.util.*; //pour Calendar
import java.applet.*;
public class Horloge extends Applet implements Runnable{
Thread tr;
Image imgTmp;
Graphics gTmp;
public Horloge() {
if (tr == null) {
tr = new Thread(this);
tr.start();
}
}
public void run(){
while (true) {
repaint();
try { Thread.sleep(1000);
} catch(InterruptedException e){
}
}
}
public void init() {
Dimension dim = getSize();
imgTmp = createImage(dim.width, dim.height);
gTmp = imgTmp.getGraphics();
setBackground(Color.white);
}
public void update(Graphics g) {
paint(g);
}
public void paint(Graphics gsp) {
Calendar d = Calendar.getInstance();
int[] tPolygonX = new int[4];
int[] tPolygonY = new int[4];
Color cFond = new Color(232,232,232);
double n,z,u,x0,y0,x1,y1,x2,y2,x3,y3;
int h = d.get(Calendar.HOUR);
int m = d.get(Calendar.MINUTE);
int s = d.get(Calendar.SECOND);
gTmp.setPaintMode();
gTmp.setColor(cFond);
gTmp.fillOval(2,2,118,118);
gTmp.setColor(Color.black);
gTmp.drawOval(2,2,118,118);
gTmp.drawString("12",55,16);
gTmp.drawString("6",58,116);
gTmp.drawString("3",108,66);
gTmp.drawString("9",8,66);
//Aiguille des secondes
n = s*200/60;
z = n/100*Math.PI;
u = (n+50)/100*Math.PI;
x0 = Math.sin(z)*50;
y0 = -Math.cos(z)*50;
x1 = -Math.sin(z)*10;
y1 = Math.cos(z)*10;
x2 = Math.sin(u)*2;
y2 = -Math.cos(u)*2;
x3 = -Math.sin(u)*2;
y3 = Math.cos(u)*2;
tPolygonX[0] = (int)x1+60;
tPolygonX[1] = (int)x2+60;
tPolygonX[2] = (int)x0+60;
tPolygonX[3] = (int)x3+60;
tPolygonY[0] = (int)y1+60;
tPolygonY[1] = (int)y2+60;
tPolygonY[2] = (int)y0+60;
tPolygonY[3] = (int)y3+60;
gTmp.setColor(Color.red);
gTmp.fillPolygon(tPolygonX, tPolygonY, 4);
gTmp.setColor(Color.black);
gTmp.drawPolygon(tPolygonX, tPolygonY, 4);
//Aiguille des minutes
n = m*200/60;
z = n/100*Math.PI;
u = (n+50)/100*Math.PI;
x0 = Math.sin(z)*50;
y0 = -Math.cos(z)*50;
x1 = -Math.sin(z)*10;
y1 = Math.cos(z)*10;
x2 = Math.sin(u)*4;
y2 = -Math.cos(u)*4;
x3 = -Math.sin(u)*4;
y3 = Math.cos(u)*4;
tPolygonX[0] = (int)x1+60;
tPolygonX[1] = (int)x2+60;
tPolygonX[2] = (int)x0+60;
tPolygonX[3] = (int)x3+60;
tPolygonY[0] = (int)y1+60;
tPolygonY[1] = (int)y2+60;
tPolygonY[2] = (int)y0+60;
tPolygonY[3] = (int)y3+60;
gTmp.setColor(Color.yellow);
gTmp.fillPolygon(tPolygonX, tPolygonY, 4);
gTmp.setColor(Color.black);
gTmp.drawPolygon(tPolygonX, tPolygonY, 4);
//Aiguille des heures
n = h*200/12 + m*200/60/12;
z = n/100*Math.PI;
u = (n+50)/100*Math.PI;
x0 = Math.sin(z)*35;
y0 = -Math.cos(z)*35;
x1 = -Math.sin(z)*10;
y1 = Math.cos(z)*10;
x2 = Math.sin(u)*4;
y2 = -Math.cos(u)*4;
x3 = -Math.sin(u)*4;
y3 = Math.cos(u)*4;
tPolygonX[0] = (int)x1+60;
tPolygonX[1] = (int)x2+60;
tPolygonX[2] = (int)x0+60;
tPolygonX[3] = (int)x3+60;
tPolygonY[0] = (int)y1+60;
tPolygonY[1] = (int)y2+60;
tPolygonY[2] = (int)y0+60;
tPolygonY[3] = (int)y3+60;
gTmp.setColor(Color.green);
gTmp.fillPolygon(tPolygonX, tPolygonY, 4);
gTmp.setColor(Color.black);
gTmp.drawPolygon(tPolygonX, tPolygonY, 4);
gsp.drawImage(imgTmp,0,0,this);
}
}Dans le constructeur nous créons et démarrons le thread par sa méthode start.
Dans la méthode run, nous démarrons une boucle sans fin qui appellera la méthode repaint toutes les secondes afin de rafraîchir l'affichage. (Le code s'exécutant dans cette méthode s'exécute en parallèle du reste du code, c'est le code du thread, elle est appelée par la méthode start du thread.)
Dans la méthode init nous créons l'image en mémoire imgTmp et sa surface de dessin gTmp et nous initialisons la couleur de fond avec la méthode setBackground. (La méthode init d'une applet est exécutée une seule fois au démarrage de l'applet.)
Nous redéfinissons la méthode update pour qu'elle provoque uniquement le dessin sans l'effacer au préalable, ceci afin d'améliorer l'affichage. (La méthode update est appelée par la méthode repaint.)
Enfin, voyons le code de la méthode paint. Dans une applet cette méthode est appelée à chaque fois que le dessin de l'applet a besoin de se rafraîchir, comme nous l'avons dit précédemment nous dessinons sur la surface de dessin de l'image en mémoire (gTmp) nous utilisons pour cela les classiques méthodes de la classe java.awt.Graphics : drawOval pour le cercle, drawString pour les chiffres, drawPolygon et fillPolygon pour les aiguilles. Les coordonnées des aiguilles étant calculées à l'aide des fonctions trigonométriques (méthodes de la classe java.lang.Math) à partir de l'heure actuelle qui elle est donnée par la méthode get de la classe java.util.Calendar. Pour terminer, nous dessinons l'image avec la méthode drawImage de la classe java.awt.Graphics.
III. Compilation de l'applet▲
Nous la compilerons dans une console à l'aide de l'outil javac
Nous utiliserons l'option -target 1.1 pour qu'elle puisse fonctionner sur la plupart des configurations actuelles.
javac -target 1.1 Horloge.javaIV. Intégration dans la page web▲
Vous n'avez plus qu'à transférer le fichier Horloge.class résultant de la compilation dans le dossier de votre page web, dans laquelle vous inclurez le code ci-dessous :
<applet code= "Horloge.class" name="Horloge" width="125" height="125">Votre navigateur n'est pas compatible Java.
</applet>(Si votre applet se trouve dans un autre dossier que celui de votre page web, il faudra renseigner l'attribut codebase avec le chemin de l'applet.)
Vous avez maintenant quelques bases pour construire votre première animation à l'aide d'une applet Java.
CGi
Avec la contribution de Demco pour la relecture.
Télécharger les sources.