|
Comment faire pour... |
Afficher plein écran |
Nous allons partir de la page xml bilingue précédemment réalisée et nous allons lui ajouter une interactivité permettant au lecteur de choisir le mode d'affichage de la page :
Pour que le choix de l'opérateur puisse être fait à tout moment, quelle que soit sa position dans la page, la liste déroulante de sélection du mode d'affichage sera placée dans une fenêtre indépendante. Pour que la sélection faite puisse être héritée par plusieurs pages (à la seule condition qu'elles soient situées dans le même répertoire), la sélection sera mémorisée dans un cookie qui sera lu par chacune de ces pages lors de son chargement.
La liste déroulante de sélection du mode d'affichage sera défine en XML de la manière suivante :
Ce fichier XML définit les libellés qui apparaîtront dans la liste déroulante, ainsi que les codes d'affichage correspondants. Elle définit également le libellé général associé à la liste, ainsi que le code d'affichage correspondant à la sélection par défaut.
La feuille de style associée sera la suivante :
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<!-- Feuille de style générant une liste déroulante
de sélection -->
<xsl:template match="/">
<HTML>
<script><xsl:comment><![CDATA[
function selectdisp(displaymode)
{
document.cookie="disp="+displaymode;
parent.display.document.write();
parent.display.history.back();
}
]]></xsl:comment></script>
<script for="window" event="onload"><xsl:comment><![CDATA[
stylesheet=document.XSLDocument;
source = document.XMLDocument;
defaultField=source.selectSingleNode("//DEFAULT");
debut=document.cookie.indexOf("disp")+5;
flag=document.cookie.substring(debut,debut+5);
if (debut!=4) {defaultField.text=flag}; //Cookie présent
listing.innerHTML=source.documentElement.transformNode(stylesheet);
]]></xsl:comment>
</script>
<HEAD>
<STYLE TYPE="text/css">
BODY {
margin-top=0px;
color:white;
font-family:"Comic MS", sans-serif;
font-weight:bold;
font-size:smaller;
background-color: darkblue;
}
</STYLE>
</HEAD>
<BODY>
<div id="listing"></div>
</BODY>
</HTML>
</xsl:template>
<xsl:template match="CONTROL">
<CENTER>
<xsl:value-of select="LABEL" /> :
<SELECT ONCHANGE="selectdisp(this.value)">
<xsl:for-each select="ITEM">tata
<OPTION>
<xsl:attribute name="VALUE">
<xsl:value-of select="VALUE"/></xsl:attribute>
<xsl:if test=".[VALUE = //DEFAULT]">
<xsl:attribute name="SELECTED">
selected</xsl:attribute>
</xsl:if>
<xsl:value-of select="LABEL"/>
</OPTION>
</xsl:for-each>
</SELECT></CENTER>
</xsl:template>
</xsl:stylesheet>
Cette feuille de style ne provoque pas d'affichage immédiat à l'initialisation (l'élément BODY contient seulement une zone d'affichage < DIV CLASS="listing"> qui est initialement vide). Elle génére par contre un script lancé à l'initialisation qui :
C'est ce script qui, par réinvocation du moteur de transformation,
génère ensuite la liste déroulante et positionne la
sélection par défaut sur la sélection indiquée
comme "défaut" dans le fichier XML.
La feuille de style génère aussi un script qui sera invoqué
à chaque sélection dans la liste. Ce script :
Voir le résultat (liste déroulante
seule) -- MSIE5 requis
Note. Une sélection dans la liste déroulante seule génère
nécessairement une erreur de script.
Au fichier XML bilingue on ajoutera selement un paramètre indiquant le mode d'affichage, sous la forme :
Enfin la feuille de style associée au document bilingue sera :
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<!-- Feuille de style pour afficher un document bilingue
de manière interactive -->
<xsl:template match="/">
<html>
<script><xsl:comment><![CDATA[
function selectdisp(displaymode)
{
dispField.value=displaymode;
listing.innerHTML=source.documentElement.transformNode(stylesheet);
}
]]></xsl:comment></script>
<script for="window" event="onload"><xsl:comment><![CDATA[
stylesheet=document.XSLDocument;
source = document.XMLDocument;
dispField = source.selectSingleNode("//PARAM/@DISPLAY-MODE");
debut=document.cookie.indexOf("disp")+5;
flag=document.cookie.substring(debut,debut+5);
dispField.value=flag;
if (debut!=4) {selectdisp(flag)}; //Cookie présent
if (debut==4) {selectdisp("en-fr")}; //Pas de cookie présent
]]></xsl:comment>
</script>
<head><xsl:apply-templates select="//HEAD"/></head>
<body style="margin-top=0px;" >
<div id="listing"></div></body></html>
</xsl:template>
<!-- Reproduit tous les noeuds du document -->
<xsl:template match="@* | * | text()">
<xsl:copy>
<xsl:apply-templates select="@* | * | text()"/>
</xsl:copy></xsl:template>
<!-- Insérer style CSS -->
<xsl:template match="HEAD">
<HEAD>
<xsl:apply-templates />
<STYLE TYPE="text/css">
TABLE.bilingual {
width: 100%;
border-style: none;
}
TABLE.bilingual TD {
vertical-align: top;
padding: 15px;
}
TABLE.bilingual TD.fr {
background-color: lightblue;
}
TABLE.bilingual TD.en {
width:45%;
background-color: navajowhite;
}
</STYLE>
</HEAD>
</xsl:template>
<xsl:template match="BODY/DIV">
<TABLE CLASS="bilingual" WIDTH="100%">
<TR>
<xsl:if test="//PARAM[@DISPLAY-MODE='en-fr' or @DISPLAY-MODE='en-en']">
<TD CLASS="en" VALIGN="top">
<xsl:apply-templates select="DIV[@CLASS='en']"/>
</TD>
</xsl:if>
<xsl:if test="//PARAM[@DISPLAY-MODE='en-fr' or @DISPLAY-MODE='fr-fr'
or @DISPLAY-MODE='fr-en']">
<TD CLASS="fr" VALIGN="top">
<xsl:apply-templates select="DIV[@CLASS='fr']"/>
</TD>
</xsl:if>
<xsl:if test="//PARAM[@DISPLAY-MODE='fr-en']">
<TD CLASS="en" VALIGN="top">
<xsl:apply-templates select="DIV[@CLASS='en']"/>
</TD>
</xsl:if>
</TR>
</TABLE>
</xsl:template>
<xsl:template match="DIV[@CLASS='en'] | DIV[@CLASS='fr']">
<xsl:apply-templates />
</xsl:template>
</xsl:stylesheet>
Comme la précédente, cette feuille de style ne provoque pas d'affichage immédiat à l'initialisation (l'élément BODY contient seulement une zone d'affichage < DIV CLASS="listing"> qui est initialement vide). Elle génére par contre un script lancé à l'initialisation qui :
C'est ce script qui, par réinvocation du moteur de transformation, génère l'affichage de la page selon le mode d'affichage indiqué dans le fichier XML.
Voir le résultat -- MSIE5 requis
Contribuez ! Faites-nous profiter de vos scénarios les plus significatifs.
Retour à la page d'accueil.