Introduction
au "Print Template" en JavaScript
Agir sur l'impression et la prévisualisation de vos documents sous IE 5.5+, c'est possible. Présentation de ces mécanismes.
Apparues sous Internet Explorer 5.5, et améliorées
depuis sous IE 6, les "print templates" contrôlent
les mécanismes d'impression et de prévisualisation.
Les "print template" sont des fichiers HTML crées
en utilisant les méthodes et propriétés mis
à notre disposition par les DHTML
"behavior" sur lesquelles elles reposent.
On peut considérer les DHTML behavior comme un ensemble de
fonctions accessible via une API, qui étendent les possibilités
de JavaScript.
Bien qu'il soit possible de créer nos propres "behavior",
nous utiliserons aujourd'hui ceux fournis en standard avec IE 5.5.
Les "print templates" reposent sur quatre "behaviors"
: DeviceRect, LayoutRect, HeaderFooter et TemplatePrinter.
Nous n'aborderons aujourd'hui que les deux premiers, ils nous permettront
respectivement de formater la page principale et le contenu de la
page.
Une fois maîtrisées, les "print templates"
permettent de prendre la main sur l'édition ou la prévisualisation
d'une page. Leur possibilités ne s'arrêtent pas là,
moyennant l'utilisation du C++, les contrôles disponibles
sur l'interface utilisateur (impression / prévisualisation)
seront également à votre portée (cf l'application
de démonstration de Microsoft en fin de tutoriel).
Parmi les exemples d'utilisation des "print templates"
on peut trouver l'ajout de publicité sur des impressions
papier, des logos, mais aussi tout ce qui est relatif aux entêtes
et pieds de page, gestion des marges, etc.
1ère étape : création
du template principal
Le "behavior" DeviceRect
marque en quelque sorte le contour de la page qui sera imprimée
ou prévisualisée. On peut le considérer comme
le "calque" de base sur lequel viendront se poser les
autres pages.
C'est lors de cette étape que vous devez définissez
la couleur de fond, la taille de vos marges, ou encore le logo que
vous désirez placer.
Chaque page imprimée ou prévisualisée doit
contenir une balise DeviceRect semblable à celle-ci :
<IE:DEVICERECT ID="id1" CLASS="mes_styles"
MEDIA="print">
</IE:DEVICERECT>
Le champ ID permet de différencier les templates entre eux,
le champ CLASS pointe vers la définition de vos styles (nous
allons le voir), et enfin, "MEDIA" indique au navigateur
que l'objectif final de cette template est l'impression.
Le résultat final de cette étape peut
ressembler à ceci (le source et les explications suivent)
:
<HTML XMLNS:IE>
<HEAD>
<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">
<STYLE TYPE="text/css">
.mes_styles_principal
{
width:6in;
height:6in;
background:#ff6600;
margin:10px;
}
</STYLE>
</HEAD>
<BODY>
<!--- A repeter n fois selon le nombre
de pages à traiter --->
<IE:DEVICERECT ID="id1" CLASS="mes_styles"
MEDIA="print">
</IE:DEVICERECT>
</BODY>
</HTML>
La balise <STYLE> doit ici au minimum contenir les attributs
"hauteur" et "largeur".
On remarque l'utilisation d'un "espace de noms" ou "namespace".
La ligne :
<HTML XMLNS:IE>
... Permet de définir l'espace de nom à employer.
On importe ensuite les "behavior" disponibles par défaut
sous IE :
<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">
2ème étape : insertion du
contenu formaté dans le template principal
Voyons tout de suite ce que donne le code une fois le contenu formaté
inséré dans le "cadre" principal :
<HTML XMLNS:IE>
<HEAD>
<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">
<STYLE TYPE="text/css">
.mes_styles_contenu
{
width:4in;
height:4in;
margin:1in;
background:white; border:1
}
.mes_styles_principal
{
width:6in;
height:6in;
background:#ff6600;
margin:10px;
}
</STYLE>
</HEAD>
<BODY>
<IE:DEVICERECT ID="id1" CLASS="mes_styles_principal"
MEDIA="print">
<IE:LAYOUTRECT ID="contenu1"
CONTENTSRC="la_page_a_imprimer.html" CLASS="mes_styles_contenu"
NEXTRECT="contenu2"/>
</IE:DEVICERECT>
<IE:DEVICERECT ID="id2" CLASS="mes_styles_principal"
MEDIA="print">
<IE:LAYOUTRECT ID="contenu2"
CLASS="mes_styles_contenu"/>
</IE:DEVICERECT>
<!--- A repeter pour chaque page --->
</BODY>
</HTML>
Plusieurs nouveautés ici. Le "behavior" "LayoutRect"
fait son apparition, il est chargé de formater le contenu.
On remarque que lors de sa première apparition il contient
le champ "CONTENTSRC" qui indique où trouver la
page à afficher.
Notable également, le champ "NEXTRECT" pointe vers
l'identifiant suivant (s'il existe) contenu dans le prochain "behavior".
Les styles à adopter pour le contenu sont définis
de la même façon que précedemment.
L'inconvénient ici est de devoir placer pour chacune des
pages que vous souhaitez prévisualiser / imprimer, les
behavior correspondants. Nous vous avons en effet présenté
ici une méthode statique.
Ce tutoriel n'était qu'une simple introduction aux principes
des "print templates", pour aller plus loin nous vous
conseillons la lecture des tutoriels consacrés à ce
thème sur le site "Webreference". Vous y trouverez
"la suite" de ce tutoriel, à savoir une méthode
dynamique pour placer ses behavior. Egalement disponible sur
ce site, d'autres
volets, pour aller encore plus loin.
Enfin, la page des "print templates" sur
le site MSDN vous sera également utile. Vous y trouverez
notamment une application de démonstration téléchargeable
(cliquez sur le bouton en
bas de cette page) sur le sujet.
[Arnaud
Gadal 14 décembre
2001 , JDNet]
|