Dans cet article, je vous expliquerai comment faire un gestionnaire de fenêtre en DHTML. Je penses qu'il vous sera relativement facile de comprendre le code une fois le concept compris, car la longueur de cette dernière est d'approximativement de 150 lignes (avec beaucoup de commentaires)!

QU'ES-CE QU'UN GESTIONNAIRE DE FENETRES EST SUPPOSE FAIRE?

C'est bien sûr la question la plus importante... Un gestionnaire de fenêtres est supposé faire plusieurs choses: il doit créer des fenêtres, les faire interagir avec avec la souris et les détruire. Les interactions possibles peuvent être déplacer une fenêtre, la redimensionner ou la mettre en dessus.

PREMIERE ETAPE: CREER OU DETRUIURE UNE FENETRE

Pensez au document HTML comme une table, sur lequel vous pouvez mettre des papiers. Dans le monde HTML, un des éléments (papiers) que vous pouvez mettre sur le document (la table) sont des DIVs. Les DIVs peuvent être positionnés n'importe où dans le document HTML et peuvent avoir des tailles et des ordres.

Pour créer un DIV, la seule chose à faire est d'appeler document.createElement("DIV"). Cet appel va retourner une référence à un nouveau DIV, et vous pouvez utiliser cette référence pour mettre en place (ou changer) toutes les propriétés (identifiant du DIV, sa position, sa taille, son contenu, etc.) du DIV. Pour le rendre visible, il faut aussi l'ajouter au document: document.body.appendChild(object).

Vous vous rapellerez que je viens de vous dire que l'on peut aussi mettre un identifiant à un DIV. On peut utiliser cet identifiant pour retrouver la référence au DIV correspondant via document.getElementById. Une fois que l'on a la référence, on peut l'utiliser pour détruire le DIV en appelant document.body.removeChild(objet). Pour voir tout ceci en action, cliquez ici. Une fois que vous avez assez joué, vous pouvez cliquer droit sur la fenêtre et sélectionner "visualiser la source" pour voir le code JavaScript.

DEUXIEME ETAPE: INTERAGIR AVEC LA SOURIS

DHTML est un langage rempli d'événements: quand le document a terminé de charger ça crée un événement, quand la navigateur est redimensionné ça crée un événement, quand l'utilisateur appuie sur une touche ça crée un événement, quand la souris bouge sur la page ça crée un événement aussi. La page peut bien sûr répondre à tous ces événements. Par exemple, pour réagir à l'événement "la souris a bougé", il suffit d'écrire document.onmousemove=AgentDeMouvementsSouris. Dans ce cas là, la méthode AgentDeMouvementsSouris sera appelée à chaque fois que la souris bouge.

Donc, dans cette fonction, on peut obtenir la position de la souris. Donc, une fois que l'on a la position de la souris, on peut la comparer à la position d'avant et redimensionner ou déplacer les DIVs nécessaires en conséquence. Vous pouvez l'essayer via cette page: cliquez sur le bouton "TEST" pour créer une nouvelle "fenêtre", vous la déplacer en cliquant sur la partie rouge, la fermer en cliquand sur la partie grise en haut à droite et la redimensionner en utilisant la partie bleue. Bien sûr, les codes sources sont aussi disponibles (exactement comme avec la partie d'avant).

TROISIEME ETAPE: METTRE EN DESSUS UNE FENETRE

Comme je vous avait un peu mentionné avant, les DIVs ont aussi des "z-index". Pensez-y de la façon suivante: plus un objet a un z-index grand, plus il est proche de vous. Donc, si nous avons plusieurs DIVs sur un document HTML, nous pouvons les ordonner et décider qui devrait être en dessun en utilisant les z-index.

Du coup, pour qu'une fenêtre devienne visible, il suffit de l'attribuer le plus grand z-index. Vous pouvez voir l'exemple 3 pour ceci: quand vous cliquez sur le cote vert d'une des fenêtres elle se retrouvera au dessus.

QUATRIEME ETAPE: LE LOOK

Maintenant que l'on a toutes les fonctionnalités, manquent deux choses: premièrement, nous n'avons pas des fenêtres mais des rectangles multicolores (relativement moches et inutiles) et en plus le code ne comporte aucun commentaire (un bon programme explique toujours cu qu'il fait).

Pour peindre les fenêtres, rien de plus simple: il suffit de créer les images nécessaires et mettre comme contenu dans la super DIV. Je vous ai mis à disposition les images des fenêtres dans mon site, ainsi que du code commenté ici. Bien sûr, vous pouvez aussi cliquer sur la chose avec le bouton droit de la souris et visualiser la source.

Cliquez ici pour télécharger un fichier ZIP contenant tous les exemples et les images