JDNet | Solutions | Emploi | Votre high-tech
 
Linternaute | Copainsdavant
Séminaires & Evénements | Etudes
   

Rechercher  

 
Sociétés Prestataires Carnet Formations Progiciels Encyclo Fonds Guide d'achat Comparateur Téléchargement Livres
Actualités
   2003
   2002
   2001
   Livres
Rubriques
   Java/J2EE
   PHP
   XML
   Client Web
   Technos .NET
   Flash
   Algo/Méthodes
   Outils

Dossiers
   Tous les dossiers

   PHP, Flash, SVG
   Perl / CGI - SSI
   Langages Web
   Services Web
   Sécurité
Ressources
   Interviews

   Téléchargement
   Composants
   Documentation
Contacts
   Rédaction
   Webmaster
© Benchmark Group

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]

Gratuit - Les nouveautés de
JDNet Développeurs
Toutes nos newsletters
 

Quel est le meilleur langage pour aborder la programmation ?
Basic (VB & co...)
C/C++
Java/C#
PHP
Pascal/Delphi
Perl
Python
autre...



Les outils de développement dans le Guide des Solutions
e-business

L'encyclopédie JDNet Toutes les notions pratiques, techniques et économiques relatives à l'e-business.
>> Accès à la rubrique "Développement"

Comparez les prix Matériel, PDA, modems...
Les bonnes affaires de la high-tech avec Kelkoo.
>> Comparateur

Société | Contacts | Publicité | Presse | Recrutement | Tous nos sites | Données personelles
Pour tout problème de consultations, écrivez au Webmaster.
© Benchmark Group, 4 rue diderot 92156 Suresnes Cedex