Demo 4

Exemple de Rickroll XML

Exercice de la semaine

Lien vers le devoir 4 en XML et XSL

Aides mémoires + ressources de la semaine

XML sur Web3Schools (!!!!!)

Sous-liens intéressants du lien ci-dessus:

Exemple de structure d'arbre

Le XML

La structure XML de notre arbre dans "Exemple de Structure d'abre":


xxxxxxxxxx
        
        
        
        
            
                
                
                <ObjetA>
            
              <ObjetB>allo</ObjetB>
              <ObjetC>comment</ObjetC>
              <ObjetD>
                <ObjetE>ça</ObjetE>
                <ObjetF>va</ObjetF>
              </ObjetD>
            </ObjetA>

Magie avec XSL

Toujours mettre notre corps HTML dedans une balise xsl comme celle-ci


xxxxxxxxxx
    
    
    
    
        
            
            
            <xsl:output method="html"/>
        
          <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:str="http://xsltsl.org/string" version="1.0">
        
              
        
        
              <xsl:template match="objetPapa">
        
        
                <html>
        
              <head>
        
                  <title>blabla</title>
        
        
                  </head>
        
        
                  <body>
        
        
                    blablabla...
        
        
                  </body>
        
        
                </html>
        
        
              </xsl:template>
        
        
            </xsl:stylesheet>

où l'attribut de xsl:template qui est de nom match et de valeur objetPapa est l'objet qui est parent de tous les autres objets dans votre arbre xml

Appliquer un element

Ici on remplit la balise de texte <p></p> de la valeur "allo" selon "Exemple de Structure d'abre"


xxxxxxxxxx
    
    
    
    
        
            
            
            <p><xsl:value-of select="ObjetA/ObjetB"/></p>

ce qui affiche:

Les for-each

Pour une structure de type:


x
    
    
    
    
        
            
            
            <Parent>
        
          <Enfant>Billy</Enfant>
        
              <Enfant>Bob</Enfant>
        
        
              <Enfant>Bobby</Enfant>
        
        
            </Parent>

On peut faire ce code qui, pour chaque objet Enfant du objet Parent, affiche le contenu sur un element de liste html:


x
    
    
    
    
        
            
            
            <xsl:for-each select="Parent/Enfant">
        
            <ul>
        
                  <li><xsl:value-of select="."/></li>
        
        
                </ul>
        
        
            </xsl:for-each>

ce qui affiche:

IMPORTANT!!! Notez que vous ne serez pas capables de tester votre code simplement en ouvrant votre fichier xml. Pour le moment, vous pouvez voir l'apercu de votre code en le collant ici

Tout ensemble:

fichier arbre.xml qui contient la structure xml


x
    
    
    
    
        
            
            
            <?xml version="1.0" encoding="UTF-8"?>
        
        
            <?xml-stylesheet href="style.xsl" type="text/xsl"?>
        
        <Parent>
          <Enfant>Billy</Enfant>
          <Enfant>Bob</Enfant>
          <Enfant>Bobby</Enfant>
        
            </Parent>

fichier style.xsl qui contient le style et qui génère le squelette html


xxxxxxxxxx
    
    
    
    
        
            
            
            <?xml version="1.0" encoding="UTF-8"?>
        
        
            <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:str="http://xsltsl.org/string" version="1.0">
        
        
              <xsl:output method="html"/>
        
          <xsl:template match="/">
        
                <html>
        
        
                  <body>
        
                <xsl:for-each select="Parent/Enfant">
        
                      <ul>
        
                    <li><xsl:value-of select="."/></li>
                  </ul>
                </xsl:for-each>
              </body>
            </html>
          </xsl:template>
        
            </xsl:stylesheet>