Une
fenêtre de news avec DynAPI
Réaliser facilement de petites fenêtres sous forme de calques DHTML (et non en "pop-up") accompagnées de boutons de défilement élégants pour afficher tout type de texte, et par exemple des news.
DynAPI
est une librairie DHTML permettant de réaliser à peu
près tout type d'effet (animations, capture d'événements,
"widgets" tels que barres de défilement, boutons,
fenêtres, etc.).
Nous nous proposons ici de réaliser une petite fenêtre
(qui servira par exemple à afficher des news, mais on peut
imaginer d'autres contenus) sous forme de calque DHTML, avec la
possibilité de faire défiler le texte en son sein.
Pour mieux faire comprendre la nature de cette fenêtre, l'exemple
de la page
suivante affiche le préambule de la licence GPL. Deux
barres (en fait des boutons de défilement) permettent de
se déplacer dans le texte. Voici le code correspondant:
<html>
<head>
<title>Exemple d'utilisation de DynAPI</title>
<script language="JavaScript" src="./dynapi/src/dynapi.js"></script>
<script language="Javascript">
DynAPI.setLibraryPath('./dynapi/src/lib/');
DynAPI.include('dynapi.api.*');
DynAPI.include('dynapi.event.*')
DynAPI.include('dynapi.util.thread.js');
DynAPI.include('dynapi.util.pathanim.js');
DynAPI.include('dynapi.gui.dynimage.js');
DynAPI.include('dynapi.gui.label.js');
DynAPI.include('dynapi.gui.button.js');
DynAPI.include('dynapi.gui.viewport.js');
DynAPI.include('dynapi.gui.pushpanel.js');
</script>
<script language="Javascript">
DynAPI.onLoad = function() {
label = new Label('<b>General Public License</b>
\(GPL\)<br><br><b>Preamble :</b><br>The
licenses for most software are designed to take away your freedom
to share and change it\. By contrast\, the GNU General Public License
is intended to guarantee your freedom to share and change free software--to
make sure the software is free for all its users\. This General
Public License applies to most of the Free Software Foundation\'s
software and to any other program whose authors commit to using
it\. \(Some other Free Software Foundation software is covered by
the GNU Library General Public License instead.\) You can apply
it to your programs\, too\.<br>')
label.setWrap(true)
label.setPadding(2)
label.setBgColor('#DDDDDD')
label.setSize(400,250)
pushpanel = new PushPanel(label)
pushpanel.setVertical()
pushpanel.setSize(400,100)
pushpanel.moveTo(50,50)
pushpanel.setBgColor('#FFFFFF')
DynAPI.document.addChild(pushpanel)
}
</script>
</head>
<body bgcolor="#ffffff">
</body>
</html>
On le voit, ce type d'effet se programme facilement grâce
à la librairie de fonctions DynAPI, fonctions qui encapsulent
l'essentiel des tâches nécessaires. La librairie peut
être téléchargée à l'adresse:
http://dynapi.sourceforge.net/doccenter/index.php?ReleaseNotes
On fait appel ici aux objets de types Label et PushPanel,
qui sont tous deux des calques avec certaines propriétés
(conditionnant notamment les réponses aux événements):
le premier est progressivement révélé au sein
du second par l'action sur les boutons de défilement (bâtis
eux-mêmes à partir d'images figurant dans la librairie).
L'objet sous-jacent, conférant à Label et PushPanel
leur propriétés communes de calques, est l'objet DynLayer,
est une des briques
fondamentales de l'API.
L'objet Label accepte du code HTML, en n'oubliant pas de
faire précéder d'un \ certains
caractères comme . , " \ /,
et en supprimant les retours chariots. Un tel travail peut bien
sûr être automatisé via un script utilisant
des expressions régulières.
DynAPI possède encore bien d'autres atouts, et continue son
développement. Son principal inconvénient est aussi
son principal avantage: en encapsulant au maximum, elle est aussi
plus gourmande en Ko que des routines plus simples, mais moins facilement
réutilisables.
[Jérôme
Morlon 6
septembre 2001 , JDNet]
|
